Overview

Mosaic - a technology for developing extensible apps

Features

🧞 Plugins

can easily stack onto one another, such way modifying the same place of the application multiple times. It is recommended to use the plugin system to implement functionality reusable among several projects.

Initial code

@creator/application/src/index.js

/** @namespace Application/getData */
const getData = () => {
    return ['Initial data'];
}

const data = getData();

With this plugin

@creator/extension/src/plugin/some.plugin.js

const plugin = (args, callback, context) => {
    const data = callback(...args);  // ['Initial data']

    return [
        ...data,
        'Data from the plugin'
    ];
};

module.exports = {
    'Application/getData': {
        function: plugin
    }
}

Produces this

['Initial data', 'Data from the plugin']

📔 Shadowing (Overrides)

Initial code in the parent theme

parent-ts-react-app/src/App.tsx

export class App extends PureComponent<{}, {}> {
  renderContent() {
    return <p>This is written in the parent theme in TS</p>;
  }

  render() {
    return (
      <div className="Application">
        { this.renderContent() }
      </div>
    );
  }
}

export default App;

With this override in the child theme

react-app/src/App.js

import ParentApp from 'Parent/App';

export class App extends ParentApp {
  renderContent() {
    return (
      <>
        <p>This is written in the child theme in JS</p>
        { super.renderContent() }
      </>
    );
  }
}

export default App;

Produces this HTML output

<div class="Application">
  <p>This is written in the child theme in JS</p>
  <p>This is written in the parent theme in TS</p>
</div>

Why use Mosaic?

🔌 Make your application extensible

By using Mosaic plugins, you may make any part of your project extensible and modifiable either from within the application itself or from installed Mosaic modules.

🍇 Use granular micro-frontend architecture

Make dependencies injected with plugins instead of importing them! This way, you keep ALL the logic related to the module WITHIN the module, even its use cases!

🖌️ Theming

Build your project by overriding an existing project's functionality! Have infinite amount of parent projects. Similar to straight up forking, but with actual core updating potential.

🤝 Integrations with existing technologies

No manual configuration tinkering required, we got you covered 🤝

NextNext.js

Last updated 4 years ago

Was this helpful?

const plugin = (args, callback, context) => { const data = callback(...args); // ['Initial data'] return [ ...data, 'Data from the plugin' ]; }; module.exports = { 'Application/getData': { function: plugin } }

export class App extends PureComponent<{}, {}> { renderContent() { return <p>This is written in the parent theme in TS</p>; } render() { return ( <div className="Application"> { this.renderContent() } </div> ); } } export default App;

import ParentApp from 'Parent/App'; export class App extends ParentApp { renderContent() { return ( <> <p>This is written in the child theme in JS</p> { super.renderContent() } </> ); } } export default App;