Framework-agnostic utility to scaffold frontend components by using custom templates.
Contributing | Changelog | Powered by diva-e |
---|
npx create-frontend-component init
You will be prompted to choose a preset which will be copied to your templates directory.
A config file and .create-frontend-component
directory will be created aswell.
Init creates the .create-frontend-component/config.json
config file.
Edit config.json until it fits your needs, the following options are available:
- types: Set of component types which developers can choose from. They will be represented as a subdirectory in your
components
directory. Set this to null if you don't categorize components. - templatePath: Directory in which component templates live. The path is relative to the working directory.
- componentPath: Directory in which components will be generated. The path is relative to the working directory.
- nameStyle: Available styles:
kebabCase
andpascalCase
. Defines how file names and directories are being renamed.
Your templates live under the template path specified in your configuration. The templates directory might look similar to this:
├── default
│ └── ComponentTemplate
│ ├── ComponentTemplate.stories.mdx
│ └── ComponentTemplate.vue
└── minimal
└── ComponentTemplate
├── ComponentTemplate.stories.mdx
└── ComponentTemplate.vue
In this example we have two different component templates (default and minimal) we can use for generation. This is what we call component flavours (see Usage).
We also have directories called ComponentTemplate
they will be renamed to the component name you specifiy in the cli.
This directory in turn may contain any desired files you need for component generation. This tool will copy those files,
rename them and replace all placeholders. In this example a .mdx
file and a .vue
file would be generated.
create-frontend-component foo-bar-toolbar --type molecules --flavour minimal
- Names must be written in lower case and with dash as word separator (kebab-case)
- Types may be configured in the config file
Component files will be generated under the configured component path.
For convenience reasons you might want to add this tool to package.json scripts.
However, the way to add cli parameters to npm scripts might be unintuitive for developers.
That is the reason we added the prompt
subcommand.
Add a script like this:
{
"name": "foo-bar-project",
"version": "1.0.0",
"scripts": {
"create-component": "npx create-frontend-component prompt"
}
}
That's it!
When executing npm run create-component
the user now will be prompted for all necessary parameters.
If you don't want to use npx for some reason, then it is possible to install the package as dev dependency and run the command without npx. Please be aware that this approach leads to several issues on a npm audit.
First install the package as dev dependency:
npm install --save-dev create-frontend-component
Then add a script like this:
{
"name": "foo-bar-project",
"version": "1.0.0",
"scripts": {
"create-component": "create-frontend-component prompt"
}
}
We have also introduced the command create-frontend-component upgrade
that enables you the possibility
to change the flavour of a component, adding the files of the new flavour that are missing in the component.
Using this upgrade function, none of the existing files of a component will be removed.