create-frontend-component

Framework-agnostic utility to scaffold frontend components by using custom templates.

Contributing	Changelog	Powered by diva-e

Getting Started

Init (creates directories and configuration file)

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.

Configuration

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 and pascalCase. Defines how file names and directories are being renamed.

Customize Component Templates

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.

Usage

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.

NPM-Script Usage

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.

Alternative without npx

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"
  }
}

Component upgrade

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.

License

MIT