Convert Figma logo to code with AI

plopjs logoplop

Consistency Made Simple

7,055
276
7,055
60

Top Related Projects

:rocket: It's a very fast and efficient glob library for Node.js

2,514

User-friendly glob matching

glob functionality for node.js

10,813

Minimal and efficient cross-platform file watching library

Quick Overview

Plop is a micro-generator framework that makes it easy to create files with a consistent structure in your projects. It allows you to define templates and use them to generate new files, reducing repetitive tasks and maintaining consistency across your codebase.

Pros

  • Highly customizable and flexible, allowing for complex file generation scenarios
  • Easy to integrate into existing projects and workflows
  • Supports multiple template engines (Handlebars, EJS, etc.)
  • Can be used as a CLI tool or programmatically in Node.js applications

Cons

  • Learning curve for creating complex generators and actions
  • Limited built-in generators, requiring users to create their own for specific use cases
  • Dependency on Node.js, which may not be suitable for all development environments
  • Documentation could be more comprehensive for advanced use cases

Code Examples

  1. Basic generator setup:
module.exports = function (plop) {
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [{
      type: 'input',
      name: 'name',
      message: 'What is your component name?'
    }],
    actions: [{
      type: 'add',
      path: 'src/components/{{pascalCase name}}.js',
      templateFile: 'templates/Component.js.hbs'
    }]
  });
};
  1. Using helpers in templates:
import React from 'react';

const {{pascalCase name}} = () => {
  return (
    <div>
      <h1>{{titleCase name}}</h1>
    </div>
  );
};

export default {{pascalCase name}};
  1. Custom action function:
plop.setActionType('customAction', function (answers, config, plop) {
  // Custom logic here
  console.log('Performing custom action for:', answers.name);
  return 'Custom action completed';
});

Getting Started

  1. Install Plop globally:

    npm install -g plop
    
  2. Create a plopfile.js in your project root:

    module.exports = function (plop) {
      plop.setGenerator('basics', {
        description: 'Create a basic file',
        prompts: [{
          type: 'input',
          name: 'name',
          message: 'What is the file name?'
        }],
        actions: [{
          type: 'add',
          path: 'src/{{name}}.js',
          template: 'console.log("Hello, {{name}}!");'
        }]
      });
    };
    
  3. Run Plop:

    plop
    

Competitor Comparisons

:rocket: It's a very fast and efficient glob library for Node.js

Pros of fast-glob

  • Significantly faster file matching and globbing performance
  • Supports advanced glob patterns and micromatch syntax
  • Provides both synchronous and asynchronous APIs

Cons of fast-glob

  • More focused on file system operations, less suitable for general-purpose code generation
  • Steeper learning curve for complex glob patterns
  • Lacks built-in templating capabilities

Code Comparison

fast-glob:

const glob = require('fast-glob');

(async () => {
  const files = await glob(['**/*.js', '!**/node_modules/**']);
  console.log(files);
})();

plop:

module.exports = function (plop) {
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [{ type: 'input', name: 'name', message: 'Component name:' }],
    actions: [{ type: 'add', path: 'src/components/{{name}}.js', templateFile: 'templates/component.hbs' }]
  });
};

While fast-glob excels at rapid file matching and glob pattern processing, plop is designed for scaffolding and code generation tasks. fast-glob is more suitable for projects requiring efficient file system operations, whereas plop shines in creating reusable templates and generating boilerplate code. The choice between the two depends on the specific needs of your project.

2,514

User-friendly glob matching

Pros of Globby

  • Specialized in glob pattern matching and file searching
  • Supports advanced glob patterns and options
  • Lightweight and focused on a single task

Cons of Globby

  • Limited to file system operations
  • Doesn't provide scaffolding or templating features
  • Requires additional tools for code generation tasks

Code Comparison

Globby:

import globby from 'globby';

const paths = await globby(['**/*.js', '!node_modules']);
console.log(paths);

Plop:

module.exports = function (plop) {
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [/* ... */],
    actions: [/* ... */]
  });
};

Summary

Globby is a powerful tool for file system glob matching and searching, while Plop is a micro-generator framework for creating files from templates. Globby excels in finding files based on patterns, making it useful for build processes and file manipulation tasks. Plop, on the other hand, focuses on scaffolding and code generation, providing a more comprehensive solution for creating project structures and boilerplate code.

Choose Globby when you need efficient file searching and pattern matching capabilities. Opt for Plop when you require a flexible and extensible tool for generating project files and structures based on templates and user input.

glob functionality for node.js

Pros of node-glob

  • Specialized in file and directory matching using glob patterns
  • Highly efficient for large-scale file system operations
  • Widely adopted and battle-tested in many Node.js projects

Cons of node-glob

  • Limited to file system operations and pattern matching
  • Requires additional tools for code generation or scaffolding tasks
  • Less suitable for creating project templates or boilerplate code

Code Comparison

node-glob:

const glob = require('glob');
glob('**/*.js', (err, files) => {
  console.log(files);
});

plop:

module.exports = function (plop) {
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [/* ... */],
    actions: [/* ... */]
  });
};

Summary

node-glob excels in file system pattern matching, making it ideal for tasks involving file searches and manipulations. It's efficient and widely used in the Node.js ecosystem. However, it's focused solely on glob operations and doesn't provide scaffolding or code generation features.

plop, on the other hand, is a micro-generator framework designed for creating project templates and scaffolding. It offers a more comprehensive solution for generating boilerplate code and project structures but may be overkill for simple file matching tasks.

Choose node-glob for efficient file system operations and pattern matching, and plop for more complex code generation and project templating needs.

10,813

Minimal and efficient cross-platform file watching library

Pros of Chokidar

  • Efficient file watching with cross-platform support
  • Handles complex scenarios like symlinks and nested directories
  • Highly customizable with numerous options for fine-tuning

Cons of Chokidar

  • Focused solely on file watching, lacks code generation features
  • May require additional setup for integration into larger projects
  • Learning curve for advanced usage and configuration

Code Comparison

Chokidar (file watching):

const chokidar = require('chokidar');

chokidar.watch('path/to/dir').on('change', (path) => {
  console.log(`File ${path} has been changed`);
});

Plop (code generation):

module.exports = (plop) => {
  plop.setGenerator('component', {
    description: 'Create a new React component',
    prompts: [{ type: 'input', name: 'name', message: 'Component name:' }],
    actions: [{ type: 'add', path: 'src/components/{{name}}.js', templateFile: 'templates/component.hbs' }]
  });
};

While Chokidar excels in file watching and change detection, Plop focuses on code generation and scaffolding. Chokidar is ideal for build processes and live-reloading, whereas Plop is better suited for creating boilerplate code and maintaining consistent project structures. The choice between the two depends on the specific needs of your development workflow.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Plop

Micro-generator framework that makes it easy for an entire team to create files with a level of uniformity. plop demo

Documentation also available on plopjs.com

Getting Started

npm   npm   plop on slack

What is Plop?

Plop is what I like to call a "micro-generator framework." Now, I call it that because it is a small tool that gives you a simple way to generate code or any other type of flat text files in a consistent way. You see, we all create structures and patterns in our code (routes, controllers, components, helpers, etc). These patterns change and improve over time so when you need to create a NEW insert-name-of-pattern-here, it's not always easy to locate the files in your codebase that represent the current "best practice." That's where plop saves you. With plop, you have your "best practice" method of creating any given pattern in CODE. Code that can easily be run from the terminal by typing plop. Not only does this save you from hunting around in your codebase for the right files to copy, but it also turns "the right way" into "the easiest way" to make new files.

If you boil plop down to its core, it is basically glue code between inquirer prompts and handlebar templates.

This documentation is a work in progress. If you have great ideas, I'd love to hear them.

Installation

1. Add plop to your project

$ npm install --save-dev plop

2. Install plop globally (optional, but recommended for easy access)

$ npm install -g plop

3. Create a plopfile.js at the root of your project

export default function (plop) {
	// create your generators here
	plop.setGenerator('basics', {
		description: 'this is a skeleton plopfile',
		prompts: [], // array of inquirer prompts
		actions: []  // array of actions
	});
};

export default is only allowed in NodeJS inside "ESM" supported files. To use this syntax, your plopfile must be either:

  • An ESM .js file with type: "module" in package.json
  • An ESM .mjs file with any type declared in package.json

Alternatively, you can have a plopfile with module.exports = function (plop) instead. For this syntax, your plopfile must be either:

  • A CommonJS .js file with type: "commonjs" in package.json
  • A CommonJS .cjs file with any type declared in package.json

Your First Plopfile

A plopfile starts its life as a node module that exports a function which accepts the plop object as its first parameter.

export default function (plop) {};

The plop object exposes the plop API object which contains the setGenerator(name, config) function. This is the function that you use to (wait for it) create a generator for this plopfile. When plop is run from the terminal in this directory (or any sub-directory), a list of these generators will be displayed.

Let's try setting up a basic generator to see how that looks.

export default function (plop) {
	// controller generator
	plop.setGenerator('controller', {
		description: 'application controller logic',
		prompts: [{
			type: 'input',
			name: 'name',
			message: 'controller name please'
		}],
		actions: [{
			type: 'add',
			path: 'src/{{name}}.js',
			templateFile: 'plop-templates/controller.hbs'
		}]
	});
};

The controller generator we created above will ask us 1 question, and create 1 file. This can be expanded to ask as many questions as needed, and create as many files as needed. There are also additional actions that can be used to alter our codebase in different ways.

Using Prompts

Plop uses the inquirer.js library to gather user data. A list of prompt types can be found on the inquirer official website.

CLI Usage

Once plop is installed, and you have created a generator, you are ready to run plop from the terminal. Running plop with no parameters will present you with a list of generators to pick from. You can also run plop [generatorName] to trigger a generator directly. If you did not install plop globally, you will need to setup an npm script to run plop for you.

// package.json
{
    ...,
    "scripts": {
        "plop": "plop"
    },
    ...
}

Bypassing Prompts

Once you get to know a project (and its generators) well, you may want to provide answers to the prompts when you run the generator. If I have (for instance) a component generator that has one prompt (name), I can run that generator using plop component "some component name" and it will immediately execute as though I had typed "some component name" into the prompt. If that same generator had a second prompt, the same input would have resulted in the user being prompted for the second value.

Prompts like confirm and list try to make sense of your input as best they can. For instance entering "y", "yes", "t", or "true" for a confirm prompt will result in a boolean true value. You can select items from a list using their value, index, key, or name. Checkbox prompts can accept a comma separated list of values in order to select multiples.

plop bypass demo

If you want to provide bypass input for the second prompt but not the first, you can use an underscore "_" to skip the bypass (ie plop component _ "input for second prompt").

Plop comes with bypass logic built-in for standard inquirer prompts, but there are also ways to provide custom logic for how to handle user input for a specific prompt.

If you have published a 3rd party inquirer prompt plugin and would like to support bypass functionality for plop users out of the box, that is covered in another section of this documentation.

Bypassing Prompts (by Name)

You can also bypass prompts by name using -- and then providing arguments for each prompt that you'd like to bypass. Examples below.

Bypass Examples

## Bypassing both prompt 1 and 2
$ plop component "my component" react
$ plop component -- --name "my component" --type react

## Bypassing only prompt 2 (will be prompted for name)
$ plop component _ react
$ plop component -- --type react

Running a Generator Forcefully

By default Plop actions keep your files safe by failing when things look fishy. The most obvious example of this is not allowing an add action to overwrite a file that already exists. Plop actions individually support the force property but you can also use the --force flag when running Plop from the terminal. Using the --force flag will tell every action to run forcefully. With great power...🕷

Using TypeScript plopfiles

Plop bundles TypeScript declarations and supports TypeScript plopfiles via tsx loaders, a feature of NodeJS command line imports.

First, make a TypesScript plopfile using plop --init-ts or by hand:

// plopfile.ts
import {NodePlopAPI} from 'plop';

export default function (plop: NodePlopAPI) {
  // plop generator code
};

Next, install tsx and optionally cross-env:

npm i -D tsx cross-env

Finally, use NODE_OPTIONS to activate the tsx loader. Now Plop can import your plopfile.ts:

Node.js v20.6 and above

// package.json
"scripts": {
  "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=plopfile.ts"
}

Node.js v20.5.1 and below

// package.json
"scripts": {
  "cross-env NODE_OPTIONS='--loader tsx' plop --plopfile=plopfile.ts"
}

Why Generators?

Because when you create your boilerplate separate from your code, you naturally put more time and thought into it.

Because saving your team (or yourself) 5-15 minutes when creating every route, component, controller, helper, test, view, etc... really adds up.

Because context switching is expensive and saving time is not the only benefit to automating workflows

Plopfile API

The plopfile api is the collection of methods that are exposed by the plop object. Most of the work is done by setGenerator but this section documents the other methods that you may also find useful in your plopfile.

TypeScript Support

Plop bundles TypeScript declarations. See using TypeScript plopfiles for more details.

JSDoc Support

Whether or not you write your plopfile in TypeScript, many editors will offer code assistance via JSDoc declarations.

// plopfile.js
export default function (
	/** @type {import('plop').NodePlopAPI} */
	plop
) {
	// plop generator code
};

Main Methods

These are the methods you will commonly use when creating a plopfile. Other methods that are mostly for internal use are list in the other methods section.

MethodParametersReturnsDescription
setGeneratorString, GeneratorConfigPlopGeneratorsetup a generator
setHelperString, Functionsetup handlebars helper
setPartialString, Stringsetup a handlebars partial
setActionTypeString, CustomActionregister a custom action type
setPromptString, InquirerPromptregisters a custom prompt type with inquirer
loadArray[String], Object, Objectloads generators, helpers and/or partials from another plopfile or npm module

setHelper

setHelper directly corresponds to the handlebars method registerHelper. So if you are familiar with handlebars helpers, then you already know how this works.

export default function (plop) {
	plop.setHelper('upperCase', function (text) {
		return text.toUpperCase();
	});

	// or in es6/es2015
	plop.setHelper('upperCase', (txt) => txt.toUpperCase());
};

setPartial

setPartial directly corresponds to the handlebars method registerPartial. So if you are familiar with handlebars partials, then you already know how this works.

export default function (plop) {
	plop.setPartial('myTitlePartial', '<h1>{{titleCase name}}</h1>');
	// used in template as {{> myTitlePartial }}
};

setActionType

setActionType allows you to create your own actions (similar to add or modify) that can be used in your plopfiles. These are basically highly reusable custom action functions.

FunctionSignature Custom Action

ParametersTypeDescription
answersObjectAnswers to the generator prompts
configActionConfigThe object in the "actions" array for the generator
plopPlopfileApiThe plop api for the plopfile where this action is being run
export default function (plop) {
	plop.setActionType('doTheThing', function (answers, config, plop) {
		// do something
		doSomething(config.configProp);
		// if something went wrong
		throw 'error message';
		// otherwise
		return 'success status message';
	});

	// or do async things inside of an action
	plop.setActionType('doTheAsyncThing', function (answers, config, plop) {
		// do something
		return new Promise((resolve, reject) => {
			if (success) {
				resolve('success status message');
			} else {
				reject('error message');
			}
		});
	});

	// use the custom action
	plop.setGenerator('test', {
		prompts: [],
		actions: [{
			type: 'doTheThing',
			configProp: 'available from the config param'
		}, {
			type: 'doTheAsyncThing',
			speed: 'slow'
		}]
	});
};

setPrompt

Inquirer provides many types of prompts out of the box, but it also allows developers to build prompt plugins. If you'd like to use a prompt plugin, you can register it with setPrompt. For more details see the Inquirer documentation for registering prompts. Also check out the plop community driven list of custom prompts.

import autocompletePrompt from 'inquirer-autocomplete-prompt';
export default function (plop) {
	plop.setPrompt('autocomplete', autocompletePrompt);
	plop.setGenerator('test', {
		prompts: [{
			type: 'autocomplete',
			...
		}]
	});
};

setGenerator

The config object needs to include prompts and actions (description is optional). The prompts array is passed to inquirer. The actions array is a list of actions to take (described in greater detail below)

Interface GeneratorConfig

PropertyTypeDefaultDescription
description[String]short description of what this generator does
promptsArray[InquirerQuestion]questions to ask the user
actionsArray[ActionConfig]actions to perform

If your list of actions needs to be dynamic, take a look at using a dynamic actions array.

Interface PlopGenerator

PropertyTypeDefaultDescription
runPromptsFunctiona function to run the prompts within a generator
runActionsFunctiona function to run the actions within a generator

This interface also contains all properties from GeneratorConfig

Interface ActionConfig

The following properties are the standard properties that plop handles internally. Other properties will be required depending on the type of action. Also take a look at the built-in actions.

PropertyTypeDefaultDescription
typeStringthe type of action (add, modify, addMany, etc)
forceBooleanfalseperforms the action forcefully (means different things depending on the action)
dataObject / Function{}specifies data that should be mixed with user prompt answers when running this action
abortOnFailBooleantrueif this action fails for any reason abort all future actions
skipFunctionan optional function that specifies if the action should run

The data property on any ActionConfig can also be a Function that returns an Object or a Function that returns a Promise that resolves with an Object.

The skip function on any ActionConfig is optional and should return a string if the action should be skipped. The return value is the reason to skip the action.

Instead of an Action Object, a function can also be used

Other Methods

MethodParametersReturnsDescription
getHelperStringFunctionget the helper function
getHelperListArray[String]get a list of helper names
getPartialStringStringget a handlebars partial by name
getPartialListArray[String]get a list of partial names
getActionTypeStringCustomActionget an actionType by name
getActionTypeListArray[String]get a list of actionType names
setWelcomeMessageStringCustomizes the displayed message that asks you to choose a generator when you run plop.
getGeneratorStringGeneratorConfigget the PlopGenerator by name
getGeneratorListArray[Object]gets an array of generator names and descriptions
setPlopfilePathStringset the plopfilePath value which is used internally to locate resources like template files
getPlopfilePathStringreturns the absolute path to the plopfile in use
getDestBasePathStringreturns the base path that is used when creating files
setDefaultIncludeObjectObjectsets the default config that will be used for this plopfile if it is consumed by another plopfile using plop.load()
getDefaultIncludeStringObjectgets the default config that will be used for this plopfile if it is consumed by another plopfile using plop.load()
renderStringString, ObjectStringRuns the first parameter (String) through the handlebars template renderer using the second parameter (Object) as the data. Returns the rendered template.

Built-In Actions

There are several types of built-in actions you can use in your GeneratorConfig. You specify which type of action (all paths are based on the location of the plopfile), and a template to use.

The Add, AddMany and Modify actions have an optional transform method that can be used to transform the template result before it is written to disk. The transform function receives the template result or file contents as a string and the action data as arguments. It must return a string or a Promise that resolves to a string.

Add

The add action is used to (you guessed it) add a file to your project. The path property is a handlebars template that will be used to create the file by name. The file contents will be determined by the template or templateFile property.

PropertyTypeDefaultDescription
pathStringa handlebars template that (when rendered) is the path of the new file
templateStringa handlebars template that should be used to build the new file
templateFileStringa path a file containing the template
skipIfExistsBooleanfalseskips a file if it already exists (instead of failing)
transformFunctionan optional function that can be used to transform the template result before writing the file to disk
skipFunctioninherited from ActionConfig
forceBooleanfalseinherited from ActionConfig (overwrites files if they exist)
dataObject{}inherited from ActionConfig
abortOnFailBooleantrueinherited from ActionConfig

AddMany

The addMany action can be used to add multiple files to your project with a single action. The destination property is a handlebars template that will be used to identify the folder that the generated files should go into. The base property can be used to alter what section of the template paths should be omitted when creating files. The paths located by the templateFiles glob can use handlebars syntax in their file/folder names if you'd like the added file names to be unique (example: {{ dashCase name }}.spec.js).

PropertyTypeDefaultDescription
destinationStringa handlebars template that (when rendered) is the destination folder for the new files
baseStringthe section of the path that should be excluded when adding files to the destination folder
templateFilesGlobglob pattern that matches multiple template files to be added
stripExtensions[String]['hbs']file extensions that should be stripped from templateFiles files names while being added to the destination
globOptionsObjectglob options that change how to match to the template files to be added
verboseBooleantrueprint each successfully added file path
transformFunctionan optional function that can be used to transform the template result before writing each file to disk
skipFunctioninherited from ActionConfig
skipIfExistsBooleanfalseinherited from Add (skips a file if it already exists)
forceBooleanfalseinherited from ActionConfig (overwrites files if they exist)
dataObject{}inherited from ActionConfig
abortOnFailBooleantrueinherited from ActionConfig

Modify

The modify action can be used two ways. You can use a pattern property to find/replace text in the file located at the path specified, or you can use a transform function to transform the file contents. Both pattern and transform can be used at the same time (transform will happen last). More details on modify can be found in the example folder.

PropertyTypeDefaultDescription
pathStringhandlebars template that (when rendered) is the path of the file to be modified
patternRegExpend‑of‑fileregular expression used to match text that should be replaced
templateStringhandlebars template that should replace what was matched by the pattern. capture groups are available as $1, $2, etc
templateFileStringpath a file containing the template
transformFunctionan optional function that can be used to transform the file before writing it to disk
skipFunctioninherited from ActionConfig
dataObject{}inherited from ActionConfig
abortOnFailBooleantrueinherited from ActionConfig

Append

The append action is a commonly used subset of modify. It is used to append data in a file at a particular location.

PropertyTypeDefaultDescription
pathStringhandlebars template that (when rendered) is the path of the file to be modified
patternRegExp, Stringregular expression used to match text where the append should happen
uniqueBooleantruewhether identical entries should be removed
separatorStringnew linethe value that separates entries
templateStringhandlebars template to be used for the entry
templateFileStringpath a file containing the template
dataObject{}inherited from ActionConfig
abortOnFailBooleantrueinherited from ActionConfig

Custom (Action Function)

The Add and Modify actions will take care of almost every case that plop is designed to handle. However, plop does offer custom action functions for the node/js guru. A custom action function is a function that is provided in the actions array.

  • Custom action functions are executed by plop with the same CustomAction function signature.
  • Plop will wait for the custom action to complete before executing the next action.
  • The function must let plop known what’s happening through the return value. If you return a Promise, we won’t start other actions until the promise resolves. If you return a message (String), we know that the action is done and we’ll report the message in the status of the action.
  • A custom action fails if the promise is rejected, or the function throws an Exception

See the example plopfile for a sample synchronous custom action.

Comments

Comment lines can be added to the actions array by adding a string in place of an action config object. Comments are printed to the screen when plop comes to them and have no functionality of their own.

Built-In Helpers

There are a few helpers that I have found useful enough to include with plop. They are mostly case modifiers, but here is the complete list.

Case Modifiers

  • camelCase: changeFormatToThis
  • snakeCase: change_format_to_this
  • dashCase/kebabCase: change-format-to-this
  • dotCase: change.format.to.this
  • pathCase: change/format/to/this
  • properCase/pascalCase: ChangeFormatToThis
  • lowerCase: change format to this
  • sentenceCase: Change format to this,
  • constantCase: CHANGE_FORMAT_TO_THIS
  • titleCase: Change Format To This

Other Helpers

  • pkg: look up a property from a package.json file in the same folder as the plopfile.

Taking it Further

There is not a lot needed to get up and running on some basic generators. However, if you want to take your plop-fu further, read on young padawan.

Using a Dynamic Actions Array

Alternatively, the actions property of the GeneratorConfig can itself be a function that takes the answers data as a parameter and returns the actions array.

This allows you to adapt the actions array based on provided answers:

export default function (plop) {
	plop.setGenerator('test', {
		prompts: [{
			type: 'confirm',
			name: 'wantTacos',
			message: 'Do you want tacos?'
		}],
		actions: function(data) {
			var actions = [];

			if(data.wantTacos) {
				actions.push({
					type: 'add',
					path: 'folder/{{dashCase name}}.txt',
					templateFile: 'templates/tacos.txt'
				});
			} else {
				actions.push({
					type: 'add',
					path: 'folder/{{dashCase name}}.txt',
					templateFile: 'templates/burritos.txt'
				});
			}

			return actions;
		}
	});
};

3rd Party Prompt Bypass

If you have written an inquirer prompt plugin and want to support plop's bypass functionality, the process is pretty simple. The plugin object that your prompt exports should have a bypass function. This bypass function will be run by plop with the user's input as the first parameter and the prompt config object as the second parameter. The value that this function returns will be added to the answer data object for that prompt.

// My confirmation inquirer plugin
export default MyConfirmPluginConstructor;
function MyConfirmPluginConstructor() {
	// ...your main plugin code
	this.bypass = (rawValue, promptConfig) => {
		const lowerVal = rawValue.toString().toLowerCase();
		const trueValues = ['t', 'true', 'y', 'yes'];
		const falseValues = ['f', 'false', 'n', 'no'];
		if (trueValues.includes(lowerVal)) return true;
		if (falseValues.includes(lowerVal)) return false;
		throw Error(`"${rawValue}" is not a valid ${promptConfig.type} value`);
	};
	return this;
}

For the above example, the bypass function takes the user's text input and turns it into a Boolean value that will be used as the prompt answer data.

Adding Bypass Support to Your Plopfile

If the 3rd party prompt plugin you are using does not support bypass by default, you can add the bypass function above to your prompt's config object and plop will use it for handling bypass data for that prompt.

Wrapping Plop

Plop provides a lot of powerful functionality "for free". This utility is so powerful, in fact, that you can even wrap plop into your own CLI project. To do so, you only need a plopfile.js, a package.json, and a template to reference.

Your index.js file should look like the following:

#!/usr/bin/env node
import path from "node:path";
import minimist from "minimist";
import { Plop, run } from "plop";

const args = process.argv.slice(2);
const argv = minimist(args);

import { dirname } from "node:path";
import { fileURLToPath } from "node:url";

const __dirname = dirname(fileURLToPath(import.meta.url));

Plop.prepare({
  cwd: argv.cwd,
  configPath: path.join(__dirname, 'plopfile.js'),
  preload: argv.preload || [],
  completion: argv.completion
}, env => Plop.execute(env, run));

And your package.json should look like the following:

{
  "name": "create-your-name-app",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "plop",
  },
  "bin": {
    "create-your-name-app": "./index.js"
  },
  "preferGlobal": true,
  "dependencies": {
    "plop": "^3.0.0"
  }
}

Setting the base destination path for the wrapper

When wrapping plop, you might want to have the destination path to be based on the cwd when running the wrapper. You can configure the dest base path like this:

Plop.prepare({
	// config like above
}, env => 
    Plop.execute(env, (env) => {
        const options = {
            ...env,
            dest: process.cwd() // this will make the destination path to be based on the cwd when calling the wrapper
        }
        return run(options, undefined, true)
    })
)

Adding General CLI Actions

Many CLI utilities handle some actions for you, such as running git init or npm install once the template is generated.

While we'd like to provide these actions, we also want to keep the core actions limited in scope. As such, we maintain a collection of libraries built to add these actions to Plop in our Awesome Plop list. There, you'll be able to find options for those actions, or even build your own and add it to the list!

Further Customization

While plop provides a great level of customization for CLI utility wrappers, there may be usecases where you simply want more control over the CLI experience while also utilizing the template generation code.

Luckily, node-plop may be for you! It's what the plop CLI itself is built upon and can be easily extended for other usage in the CLI. However, be warned, documentation is not quite as fleshed out for integration with node-plop. That is to say Thar be dragons.

We note lackluster documentation on node-plop integration not as a point of pride, but rather a word of warning. If you'd like to contribute documentation to the project, please do so! We always welcome and encourage contributions!

NPM DownloadsLast 30 Days