mosaic
  • Overview
  • Integration
    • Next.js
    • Create React App
    • Webpack
  • Getting started
    • Extensions
    • Themes
  • Tutorials
    • Mosaic + React
    • Mosaic + Webpack
  • Install an extension
    • Install a local extension
    • Install with a package manager
    • Enable or disable an extension
  • Develop an extension
    • Anatomy of an extension
    • Namespaces
    • Runtime plugins
    • Build configuration plugins
  • CRA features
    • CRACO plugins
  • Next.js features
    • Styles
    • Pages
    • Common props
  • Architecture examples
    • Router
  • Themes
    • Parent theme system
    • File shadowing
  • Experimental
    • Module preferences
    • File provisioning
  • in-depth
    • How does it work?
Powered by GitBook
On this page
  • What is an extension
  • Initialize a project
  • Prepare the source logic
  • Create a package
  • Install and enable the module
  • Write a plugin
  • See it in work!
  • Acknowledge other extensions' features

Was this helpful?

  1. Getting started

Extensions

Start using extensions and runtime plugins

PreviousWebpackNextThemes

Last updated 4 years ago

Was this helpful?

This guide is an entry point for working with extensions

What is an extension

Extension is a reusable, isolated part of your application. It can contain any kind of source logic modifications, source being either a or an extension.

Extensions allow to modify the source logic without editing the source code. The idea is to write additional logic - , in order to intercept the initial logic and modify it in runtime.

(webpack and babel) can also be modified from extensions.

Initialize a project

Assuming that you have some project you are willing to use mosaic in, install Mosaic in your project by following any setup guide: , or . If you want to start a project from scratch, just create it with Next, CRA or manually with Webpack and follow the same steps.

Prepare the source logic

A should be set for the piece of functionality we are willing to make available for plugins. Using the "" syntax is the most convenient option to do it. Our Babel plugin transforms this syntax into a simple function invocation.

In this guide, you will operate with the code depicted below, located in the corresponding directory.

./src/router.js
/* @namespace Router/getRoutes */ 
function getRoutes(options) { 
    return [ 
        '/home',
        '/my-account'
    ] 
}

const routes = getRoutes(); // routes + additional routes (from plugins)! 
app.setRoutes(routes)
const getRoutes = Mosaic.middleware(
    function getRoutes(options) { 
        return [ 
            // ...routes 
        ] 
    },
    'Router/getRoutes'
);

const routes = getRoutes(); 
// routes + additional routes (from plugins)! 
// see the explanation below
app.setRoutes(routes)

Create a package

Within your project, create a directory for your Mosaic modules (extensions). Conventionally, it is <root>/packages

.
├── 📁 packages/
│   └── 📁 @vendor/
│       └── 📁 additional-routes/
│           └── 📄 package.json
├── 📁 src/
│   └── 📄 router.js
└── 📄 package.json
./packages/@vendor/additional-routes/package.json
{
    "mosaic": {
        "type": "extension"
    }
}

Install and enable the module

./package.json
{
    "scripts": {
        ...
        // TODO provide a linker package
        "postupdate": "...-scripts link",
        "postinstall": "...-scripts link"
    },
    "dependencies": {
        "@vendor/additional-route": "file:relative/path/to/the/module"
    }
}
package.json
{
    "mosaic": {
        "extensions": {
            "@vendor/additional-route": true
        }
    }
}

Write a plugin

Remember that there is a naming convention for these files - their names should end with .plugin.js

packages/@vendor/additional-route/src/plugin/math.plugin.js
const plugin = (args, callback) => {
    console.log(args);     // [options]
    console.log(callback); // function getRoutes(options) {...}

    const originalRoutes = callback(...args); // ['/home', '/my-account']
    const additionaloutes = ['/cart', '/contact-us'];
    
    return [
        ...originalRoutes, 
        ...additionalRoutes
    ];
};

export default {
    'Router/getRoutes': {
        function: plugin
    }
}

See it in work!

Let's launch the project and see what the initial code will give us. If you followed the guide correctly, you will see that the behavior of getRoutes function has changed and now it acts as follows!

It will also log some stuff into the console (explained above).

const routes = getRoutes(); // ['/home', '/my-account', '/cart', '/contact-us']

Acknowledge other extensions' features

Extensions can contain not only runtime logic, but also build configuration modifications.

In that directory, create a module with proper package.json , seen below. It is very important for this module to be recognised as Mosaic module by the plugin system.

it into the package it interacts with. Remember to launch one of the scripts below in order to apply your installation!

Remember to it afterwards!

Create a in the - src/plugin/

the initial logic as you wish! You may have several plugins on a single namespace, if they are compatible with each other all of them will work!

The plugin system, although is one of the main features of Mosaic, is not the only one. To find out more about it, check out the dedicated to it.

Install
enable
in-depth guide
Build configuration plugins
theme
plugins
Build configuration
Next.js
CRA
Webpack
additional fields
proper directory
plugin declaration file
Manipulate
namespace
magic comment