🤖Placeholders

Smart generated components make your coding easier

When you generate your component, you might be need component name, folder name or relative path to your file from project root.

All of these and more you can make with placeholders

Each placeholder is a function which get some data to build your own placeholder. During the multiple component creation all functions will be called for every single component.

Example:

placeholders: {
    NAME: ({ componentName }) => componentName
}

After this setup you are able to use this placeholder by tag #NAME# inside your template files. Below, you can see the list of all available data and functions to create your own placeholder.

Field	Description
project	Project name in multi-project mode
componentName, objectName	Name of the component or another object in multi-template mode
objectType	Type of object which was selected by user. It is component by default.
pathToObject	path to objects folder Example: src/components
destinationFolder	relative path to folder of object which is being created Example: App/Header/Logo
objectFolder	Absolute path to your object (component) folder
relativeObjectFolder	Relative path to your object (component) folder
filePrefix	processed object(component) name for filename
folderName	processed object(component) name for folder
files	Object of files which is being created
getRelativePath(to: string)	Function to get relative path to any another path Example: ../../src/helpers
join(...parts: string)	Function to get joined parts of path. Example: join(project, destinationFolder, componentName) => Project/Footer/Email
stringToCase(str: string, toCase: string)	Function to map any string to case. Example: stringToCase('dash-case-string', 'PascalCase') => DashCaseString

Practice

Let's create two simple templates.

The first one will be path to styles file. It can be useful when you work with css-modules. Lets try:

{
    STYLE: ({ files }) => {
        if (files.style) {
            return `\nimport styles from './${files.style.name}';\n`;
        }
        return '';
    },
}

Here we use the object files. This object has same keys as you described in template. In this example we has file style, and if this file exists - we add new string to our template with the import.

Now, let's make path to our story for Storybook to has stable story-structure:

{
    STORY_PATH: ({ join, project, destinationFolder, componentName }) => {
        return join(project, destinationFolder, componentName);
    }
}

Here we take three fields. project, destinationFolder and componentName. These fields describe full path to our story. After that we use the function join to connect them into path like that:

`${project}/${destinationFolder}/${componentName}`

Now we can you these placeholders in our templates by #STYLE# and #STORY_PATH#