Theme Registry Webpack Plugin

Scanning certain directory for templates and autogenerate theme registry file for each found theme.
For more information please check @4i4/theme-registry.

Why this package exists?

When working with multiple themes and templates you need to manually add/remove the templates from your registries.
This plugin automatically doing that for you and keep everything in check.

Installing:

Using npm:

$ npm install @4i4/theme-registry-webpack-plugin

Using yarn:

$ yarn add @4i4/theme-registry-webpack-plugin

Using pnpm:

$ pnpm add @4i4/theme-registry-webpack-plugin

Usage:

Webpack config

const ThemeRegistryPlugin = require("@4i4/theme-registry-webpack-plugin");

const options = {};

module.exports = {
  plugins: [new ThemeRegistryPlugin(options)]
};

Options

| Option | Type | Default value | Description | |-------------|-----------|-------------------|---------------------------------------------------------------------------| | themesDir | string | ./src/themes | The directory that contains all themes | | templates | string | ./templates | The directory that contains all templates for each theme | | isNextJS | boolean | false | If set to true then next/dynamic will be used instead of React.lazy |

Requirement:

For each theme you need to create theme.json file in the root of the theme with the following properties:

| Option | Type | Required | Description | |------------|------------|--------------|-------------------------------------------------------------------------------------------------------| | parent | string | No | The name of the parent theme. | | context | string[] | No | Array of context to be used. In no context is set, then all templates will be set to the default one. |

Default folder structure:

.
├── ...
├── src
│   └── themes                  # The directory that contains all themes
│       ├── theme_1             # Theme 1
│       │   ├── theme.json      # Theme 1 config file
│       │   └── templates       # The directory that contains all templates
│       │       ├── layout      # Context directory
│       │       ├── icons       # Context directory
│       │       └── grid        # Context directory
│       │
│       └── theme_2             # Theme 2
│           ├── theme.json      # Theme 2 config file
│           └── templates       # The directory that contains all templates
│               └── layout      # Context directory
└── ...

Theme inheritance:

if parent is set in the theme.json the theme registry of the parent will be inherited.

Example

Structure:

.
├── themes
│   ├── theme_1
│   │   └── theme.json
│   └── theme_2
│       └── theme.json

./themes/theme_2/theme.json

{
  "parent": "theme_1"
}

That will generate the following registry:

import parent from "../theme_1/registry";
const registry = parent.clone();
...
export default registry;

Using the context:

By default, all templates will be assigned to the default context.
If you want certain context directory to be used then you need to set it in the theme.json

Example

Structure:

.
├── themes
│   ├── theme_1
│   │   ├── theme.json
│   │   ├── layout
│   │   │   └── page.tsx
│   │   ├── grid
│   │   │   ├── grid.tsx
│   │   │   └── container.tsx
│   │   └── icons
│   │       ├── icon_1.tsx
│   │       └── icon_2.tsx

./themes/theme_1/theme.json

{
  "context": ["icons"]
}

That will generate the following registry:

import Registry from "@4i4/registry";
import { lazy } from "react";
const registry = new Registry();

// Layout
registry.set("page", lazy(import("./templates/layout/page")));

// Grid
registry.set("grid", lazy(import("./templates/grid/grid")));
registry.set("container", lazy(import("./templates/grid/container")));

// Icons
registry.set("icon_1", lazy(import("./templates/icons/icon_1")), "icons");
registry.set("icon_2", lazy(import("./templates/icons/icon_2")), "icons");

export default registry;