Skip to main content

Template

Type
interface Template {
    constructor(templateName: string, opts: TemplateOptions): Template;
}
Usage
new Templates('<template-name>', {
    /* template options ... */
});
Example
new Templates('react-component', {
    wipe: true,
});

Options​

Type
interface TemplateOptions {
    extendDest?: string;
    wipe?: boolean;
    force?: boolean;
    newFolder?: boolean;
    hidden?: boolean;
}

Extend Destination​

Type
string;

Optional path to add prepend to each build path.

.tpsrc
{
    "react-component": {
        "opts": {
            "extendDest": "./path/to/some/directory"
        }
    }
}
Example

Imagine being in a directory named app and having a template named react-component. In this case, your directory structure might look like this:

| - app
    | - .tps/
        | - react-component/
        | - .tpsrc
    | - src/
        | - <frontend-code...>

Lets say all of our react components live inside the ./src/ folder. So if I wanted to render a new instance with the react component template, I would need to use a long build path.

tps react-component src/Home

Produces

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
        | - ...

However since you know all components will live in the src folder you can instead, add a extendDest option to your .tpsrc file and add src as the value.

.tpsrc
{
    "react-component": {
        "opts": {
            "extendDest": "./src"
        }
    }
}

Tps will now prepend the src path to your build paths so well get the same result as before but without adding src to our build paths:

tps react-component Home

still produces

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
        | - ...

Wipe​

Type
boolean;
Default
false;

The wipe option acts by deleting any existing build path directory before rendering your new template instance. This ensures a fresh start and avoids any potential conflicts during the rendering process.

.tpsrc
{
    "react-component": {
        "opts": {
            "wipe": true
        }
    }
}
Example

Lets say you have the following directory structure

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
            | - ...

If I was trying to rendering a new instance of react-component template and called this Home, tps would error out because a Home directory already exists. However if you add the --wipe flag, tps will delete this directory first, then render your new instance in its place.

tps react-component src/Home --wipe

Will produce:

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
            | - <react-component template files ...>

Force​

Type
boolean;
Default
false;

The force option makes sure that your new instance is created no matter what, similar to the wipe option. However, instead of deleting the whole directory, it only replaces conflicting files, so you don't lose any extra work you may have added

By default, templates will raise an error if there are any file or directory conflicts.

.tpsrc
{
    "react-component": {
        "opts": {
            "force": true
        }
    }
}
Example

Lets say you have the following directory structure

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
            | - some-file.js

If I was trying to rendering a new instance of react-component template and called this Home, tps would error out because a Home directory already exists. However if you add the --force flag, tps will force the creation of your instance but will only overwrite conflicting files.

tps react-component src/Home --force

If the react-component template doesnt create a some-file.js then the original file will be left in place and not touched.

| - app
    | - .tps/
        | - ...
    | - src/
        | - Home/
            | - some-file.js
            | - <react-component template files ...>

New Folder​

Type
boolean;
Default
true;

The newFolder option will create a new folder and put all the template contents inside it. This new folder will share the same name as your new template instance, providing a neatly organized structure for your project. This is how templates behaves by default

tip

This feature becomes particularly useful when you already have a directory set up and prefer not to create a brand new one from scratch. By using the newFolder option, you can seamlessly integrate the template contents into your existing directory, making it a convenient choice for projects that are already in progress.

.tpsrc
{
    "react-component": {
        "opts": {
            "newFolder": false
        }
    }
}
Example: New folder

If I was trying to rendering a new instance of express-app template and called this app, tps would create a new directory for me named app and place all contents inside of it

tps express-app app
| - coding <---cwd
    | - app
        | - <express-app contents ...>
Example: No New folder

If I was trying to rendering a new instance of express-app template and called this app however I didnt want a new folder then it would produce the following:

tps express-app app --no-newFolder
| - coding <---cwd
    | - <express-app contents ...>

Notice how this no longer creates a app directory.

Hidden​

templates@>=v1.1.1
Type
boolean;
Default
false;

The hidden option will prompt all hidden prompts. Hidden prompts are prompts that do not get prompted by default. You can read more about hidden prompts and how they work in the hidden prompt guide.

tps react-component Nav --hidden
Example

If I was rendering a new instance of express-app template called app, you can pass the hidden option to the cli and you will now be prompted hidden prompts.

without the hidden command you will only be prompted non hidden prompts

tps react-component Nav
? non hidden prompt1 (y/N)
? non hidden prompt2 (y/N)

Now if you use the hidden option, you will be prompted hidden prompts as well:

tps react-component Nav --hidden
? non hidden prompt1 (y/N)
? non hidden prompt2 (y/N)
? hidden prompt1 (y/N)
? hidden prompt2 (y/N)