📘Templates

Describe your component folder and us

Template is an object to describe your component folder structure.

File has next possible fields:

• name

• folderPath

• file

• optional

• default

Overview

Just basic example of component structure:

templates: [
    {
        name: 'component',
        files: {
            index: {
                name: 'index.ts',
                file: 'index.tmp'
            },
            component: {
                name: '[name].tsx',
                file: [
                    { name: 'fc.tmp', description: 'Functional component' },
                    { name: 'class.tmp', description: 'Class component' }
                ]
            },
            style: {
                name: '[name].module.css',
                optional: true
            },
            stories: {
                name: '[name].stories.tsx',
                file: 'stories.tmp',
                optional: true,
                default: false
            },
            test: {
                name: '[name].test.tsx',
                file: 'test.tmp',
                optional: true,
                default: false
            }
        }
    }
]

Name

This field describes how to generate component file name.

Examples:

• index.ts

• [name].tsx

• [name].module.css

• __tests__/[name].test.tsx

FolderPath

This field allows you to specify special folder for this kind of templates. If you need generate new api file - you can set this field as /api and this components will be generated to this folder automatically.

File

Field file describes template file name. It can be just file name inside templates folder like stories.tmp.

Also, it can be an array of files:

file: [
    {
        name: 'fc.tmp', 
        description: 'Functional component'
    },
    {
        name: 'class.tmp',
        description: 'Class component'
    }
]

In case of array, user of this template will be asked on generation step

Optional

This field is boolean. By default all files is required. If you have optional files - you will be asked about them when you will create new component with the template. These files could be added on update mode.

Default

This field is boolean. By default all optional files will be skipped, but you set them as false with option to unmark them during generation.

Multi-template example

If you need to generate something else, not components only, you are able to set up array of templates.

{
    ...config,
    templates: [
        {
            name: 'component', // will be added to default folderPath folder
            files: {
                index: {
                    name: 'index.ts',
                    file: 'component.ts'
                }
            }
        },
        {
            name: 'service',
            folderPath: 'services/', // will be added by the specific path
            files: {
                index: {
                    name: 'index.ts',
                    file: 'service.ts'
                }
            }
        }
    ]
}