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
  • Package.json
  • File structure

Was this helpful?

  1. Develop an extension

Anatomy of an extension

Get acknowledged with some rules which apply to any extension

PreviousEnable or disable an extensionNextNamespaces

Last updated 4 years ago

Was this helpful?

Package.json

For NPM package to be considered an extension, it must have a package.json field mosaic.type equal to extension.

It is important for Mosaic module to be recognized in order for to work properly (get transpiled into logic).

{
    "mosaic": {
        "type": "extension"
    }
    ...
}

File structure

Mosaic has a minimal requirement towards the folder structure of a module.

All of the .plugin.js files () should be located under the src/plugin directory. All the subdirectories of this one are scanned for them, but no other places.

It's recommended to split all of your other logic into separate directories of the src directory. All of the functionality outside of src will not be available for .

├── 📁  node_modules
├── 📄  package.json
└── 📁  src
   ├── ...        # Any own logic of your extension here
   └── 📁  plugin # Plugging logic here!
       ├── 📄  some.plugin.js
       └── 📄  other.plugin.ts
namespaces
shadowing
plugin declaration files