CreateModelPlugin

A plugin for Magnolia CLI that generates model files from Magnolia YAML dialog definitions.
Depending on the project type (ts, js, vue-ts), it creates the appropriate model format:

• JavaScript .propTypes.js
• TypeScript .model.ts
• Vue-specific TypeScript model files

Installation

Using add-plugin

1. Run the following command in the project's root directory:

   npm run mgnl -- add-plugin @magnolia/cli-create-model-plugin

   The command will install the plugin, and automatically register the plugin in mgnl.config.js file:

   import CreateModelPlugin from "@magnolia/cli-create-model-plugin";
   
   export default {
     plugins: [
       new CreateModelPlugin()
     ]
   };

2. To confirm that the plugin has been successfully installed, run:

   npm run mgnl -- create-model --help

Manually

1. Run the following command in the project's root directory:

   npm install @magnolia/cli-create-model-plugin

2. Manually add CreateModelPlugin to mgnl.config.js file:

   import CreateModelPlugin from "@magnolia/cli-create-model-plugin";
   
   export default {
     plugins: [
       new CreateModelPlugin()
     ]
   };

3. To confirm that the plugin has been successfully installed, run:

   npm run mgnl -- create-model --help

Usage

Options

| Short | Long | Description | |----------------|-------------------------|-------------------------------------------------------------------------------------------------------------------------------| | -lm [name] | --light-module [name] | set the light module for the model; defaults to the directory specified in mgnl.config.js file | | -s <path...> | --source <path...> | Provide one or more paths to YAML files for specific components or pages to generate stories from. Bypasses name-based search | | -v | --version | output the version number | | -h | --help | display help for command |

Configurable Properties in mgnl.config.js

Global Properties

| Property | Description | |---------------------|------------------------------------------------------------------------------------------------------| | lightModulesPath | The directory with all light modules | | type | The type for the selected prototype, e.g., ts or js | | componentsSpaPath | The path to the folder containing the front-end components | | pagesSpaPath | The path to the folder containing the front-end pages | | lightModule | The selected light module | | customTypes | An object that overrides the default Magnolia field-to-type mapping, e.g., { textField: "number" } |

Plugin Properties

| Property | Description | |----------------|---------------------------------------------------------------------------------------------------------------| | lightModule | The selected light module |

Examples

Generate model for all components

npm run mgnl -- create-model

Scans both dialogs/components and dialogs/pages in the selected light module and based on the detected framework and type, it generates the appropriate model format (.ts, .js, or Vue-specific .ts).

Generate model for a single component

npm run mgnl -- create-model teaser

Creates model for dialogs/components/teaser.yaml (or dialogs/pages/teaser.yaml) if it exists.

Generate model using a direct source path

npm run mgnl -- create-model --source light-modules/spa-lm/dialogs/components/teaser.yaml

Creates model for dialogs/components/teaser.yaml using the exact YAML file specified. You can provide multiple paths separated by space.

Output

When successful, it generates:

src/
└── app/
    └── components/
        └── teaser.model.ts

Notes

• If config values like lightModulesPath, componentsSpaPath, or type are missing, the plugin will prompt you.

Magnolia CMS

This plugin is created to work with Magnolia CMS. For more information, please refer to Magnolia CMS Documentation