This plugin creates a new component based on templates provided from available npm packages:
- @magnolia/cli-freemarker-prototypes
- @magnolia/cli-angular-prototypes
- @magnolia/cli-react-prototypes
- @magnolia/cli-vue-prototypes
Install plugin via npm:
npm i @magnolia/cli-create-component
Add CreateComponentPlugin to mgnl.config.js file:
import CreateComponentPlugin from "@magnolia/cli-create-component";
export default {
commands: [
new CreateComponentPlugin()
]
};
npm run mgnl create-component -- <name> [options]
-
<name>
, the name of the new component, required
You can customize the create-component plugin's actions using these command-line options:
-
-lm, --light-module <name>
, set the light module for the component template; defaults to the directory specified in mgnl.config.js file -
-P, --prototype [prototype]
, select a prototype for component creation -
-a, --available <path-to-page[@area]>
, specify the page you want to make the component available to; must start with the path to the page template within the templates directory and end with an area name; if the area does not exist, it will be added; defaults to 'main' area if not specified
Options that can be set in mgnl.config.js file:
-
type
,lightModulePath
,componentMappingFilePath
are shared between 'CreateComponentPlugin' and 'CreatePagePlugin' -
componentsSpaPath
,framework
,prototype
,templateData
,templateArgs
are for 'CreateComponentPlugin' only
import CreateComponentPlugin from "@magnolia/cli-create-component";
export default {
type: 'ts',
lightModulePath: './magnolia/light-modules',
lightModule: 'spa-lm',
componentMappingFilePath: './spa/react-minimal/src/magnolia.config.js',
commands: [
new CreateComponentPlugin({
componentsSpaPath: './spa/react-minimal/src/components',
framework: '@magnolia/cli-react-prototypes',
prototype: "_default",
templateData: {
// {{customName}} in .hbs file
customName: "customValue"
},
templateArgs: {
// Use default light module template from cli-create-component-template if component template doesn't have any, default true
useDefaultLightModuleTemplate: true,
// For headless only:
/*
* Remove extension from import string, default false:
* - true => import { componentName } from ./path/to/component;
* - false => import { componentName } from ./path/to/component.js;
*/
removeExtension: false,
/*
* Use named import, default false:
* - true => import { componentName } from ./path/to/component;
* - false => import componentName from ./path/to/component;
*/
namedImport: true,
/*
* Specify the file to use for imports when multiple files in template exist, it selects based on the following logic:
* 1. Single file: Directly use it.
* 2. Multiple files: Prefers 'index' prefixed, then component-named file ({{name}}). If neither is uniquely identifiable, manual specification is required.
* Example structure and import behavior:
* /tsx
* |--/index.tsx (default import)
* |--/{{name}}.tsx
* |--/{{name}}.stories.tsx
* |--/{{name}}.model.tsx
*
* - not set => import componentName from ./path/to/index.tsx;
* - '{{name}}.tsx' => import componentName from ./path/to/{{name}}.tsx;
*/
importSource: '{{name}}.tsx'
}
})
]
};
Examples are shown in a headless/minimal-headless-spa-demos/dx-core/latest
project.
Download with:
npx @magnolia/cli@preview jumpstart -t headless/minimal-headless-spa-demos/dx-core/latest
Install CreateComponentPlugin
npm i @magnolia/cli-create-component
Add to mgnl.config.js
import CreateComponentPlugin from "@magnolia/cli-create-component";
export default {
type: 'ts',
lightModulePath: './magnolia/light-modules',
lightModule: 'spa-lm',
componentMappingFilePath: './spa/react-minimal/src/magnolia.config.js',
logger: {
filename: "./mgnl.error.log",
fileLevel: "warn",
consoleLevel: "debug"
},
commands: [
new CreateComponentPlugin({
componentsSpaPath: './spa/react-minimal/src/components',
framework: '@magnolia/cli-react-prototypes',
prototype: '_default',
templateArgs: {
removeExtension: true
}
})
]
};
Run:
npm run mgnl -- create-component Hero
Will create following files:
- /PATH/TO/PROJECT/magnolia/light-modules/spa-lm/dialogs/components/Hero.yaml
label: Hero form: properties: text: label: Hero Text $type: textField i18n: true
- /PATH/TO/PROJECT/magnolia/light-modules/spa-lm/templates/components/Hero.yaml
title: Hero dialog: spa-lm:components/Hero
- /PATH/TO/PROJECT/spa/react-minimal/src/components/Hero.js
import React from 'react'; const Hero = props => <h2>{props.text}</h2>; export default Hero;
Will modify following file:
- /PATH/TO/PROJECT/spa/react-minimal/src/magnolia.config.js
import HeroComponent from './components/Hero' import Basic from './pages/Basic'; import Contact from './pages/Contact'; import Headline from './components/Headline'; import Image from './components/Image'; import Paragraph from './components/Paragraph'; import Expander from './components/Expander'; import List from './components/List'; import Item from './components/Item'; import Personalization from './pages/Personalization'; const config = { 'componentMappings': { 'react-minimal-lm:pages/basic': Basic, 'react-minimal-lm:pages/contact': Contact, 'react-minimal-lm:pages/personalization': Personalization, 'react-minimal-lm:pages/basic-autogeneration': Basic, 'react-minimal-lm:pages/contact-inheritance': Contact, 'spa-lm:components/headline': Headline, 'spa-lm:components/image': Image, 'spa-lm:components/paragraph': Paragraph, 'spa-lm:components/expander': Expander, 'spa-lm:components/list': List, 'spa-lm:components/listItem': Item, "spa-lm:components/Hero": HeroComponent } }; export default config;
Clone: cli-react-prototypes
Change framework
in mgnl.config.js:
import CreateComponentPlugin from "@magnolia/cli-create-component";
export default {
...
commands: [
new CreateComponentPlugin({
componentsSpaPath: './spa/react-minimal/src/components',
framework: '/Path/To/Cloned/cli-react-prototypes',
prototype: '_default',
templateArgs: {
removeExtension: true
}
})
]
};
Run:
npm run mgnl -- create-component Hero
Will behave like Example 1, but use the local 'components' folder.