@merry-solutions/cli

Cast

Well, what is it?

@merry-solutions/cli is a cli-tool designed to do the heavylifting when developing components requiring alot of boilerplate. It is originally intended for use with React, but can also be used for generating basically any set of files based on moustache templates.

Use existing presets or create your own with moustache templates.

How to use it

Install as dev dependency

npm i -D @merry-solutions/cli

Add to scripts in the package.json.

"cast": "cast"

Or simply run from command line without installation:

npx @merry-solutions/cli {some arguments here}

i.e.

npx @merry-solutions/cli cool-stuff/CoolHook --itemType=hook

Generate an item using one of the preset templates, currently component and hook creating is supported.

Example to generate a hook:

npm run cast -- shared/hooks/MyAwesomeHook --itemType=hook

Would generate a hook in src/shared/hooks/MyAwesomeHook based on the preset template.

Example to generate a component:

npm run cast -- components/MyAwesomeComponent --itemType=component

Would generate a component in src/components/MyAwesomeComponent based on the preset template.

Creating your own templates

Is pretty easy. You need a folder for templates, which would hold a collection of subfolders, each named same as the eitity you are attempting to create, i.e. the default templates folder has 2 subfolders: component and hook, so you can only create these two if you're using defaults.

Let's assume you want to create your own template for component, you would have to create a directory with a subfolder named after the type of the item you plan to create, i.e. my-templates/component.

project
└───src
│
└───my-templates
│   └───component
│       │   component.model.ts.mustache
│       │   component.tsx.mustache
│       │   ...

Place some moustache templates inside, note that if file name contains the subdirectory name in it, it will be swapped for the item name during file generation, i.e. component.tsx.mustache => SomeComponent.tsx.

The variable used in templates should hold same name as the subfolder, i.e. for the component we'd have:

// component.tsx.mustache
import { FC } from "react";

import { {{ component }}Props } from "./{{ component }}.model";
import style from "./{{ component }}.module.scss";

export const {{ component }}: FC<{{ component }}Props> = ({}: {{ component }}Props) => {
    return <div className={style.{{ component }}}>{{ component }} works!</div>;
};

Now simply invoke cast to create new files based on the provided templates by passing the template root as the templatesRoot param, i.e.:

npm run cast -- shared/components/MyComponent --itemType=component --templatesRoot=./templates/

See sample templates in the templates folder of this repo or check the demo react repo for templates folder and commands for generating files in package.json.