{"id":11566,"library":"plop","title":"Plop Micro-generator Framework","description":"Plop is a micro-generator framework designed to streamline the creation of consistent files and code patterns within a project. It acts as 'glue code' connecting Inquirer.js prompts for user input and Handlebars.js templates for content generation. The current stable version is 4.0.5, with patch and minor releases occurring periodically to address bugs, update dependencies, and introduce performance improvements. Major versions, like v4.0.0, introduce breaking changes such as updated Node.js requirements. Plop's core differentiator is its simplicity and focus on turning best practices for file creation into easily executable terminal commands, reducing manual boilerplate and ensuring uniformity across development teams.","status":"active","version":"4.0.5","language":"javascript","source_language":"en","source_url":"https://github.com/plopjs/plop","tags":["javascript","generator","scaffolding","yeoman","make","build","generate","gen","plop","typescript"],"install":[{"cmd":"npm install plop","lang":"bash","label":"npm"},{"cmd":"yarn add plop","lang":"bash","label":"yarn"},{"cmd":"pnpm add plop","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Use `export default` for ESM modules (`.mjs` or `type: 'module'` in `package.json`).","wrong":"module.exports = function (plop) { /* ... */ }","symbol":"plopfile export","correct":"export default function (plop) { /* ... */ }"},{"note":"Use `module.exports` for CommonJS modules (`.cjs` or `type: 'commonjs'` in `package.json`).","wrong":"export default function (plop) { /* ... */ }","symbol":"plopfile export (CommonJS)","correct":"module.exports = function (plop) { /* ... */ }"},{"note":"`nodePlop` is the programmatic API to run generators from Node.js code, allowing for more advanced integration and testing. It is ESM-first.","wrong":"const nodePlop = require('plop').nodePlop;","symbol":"nodePlop","correct":"import { nodePlop } from 'plop';"},{"note":"Import the type for generator configurations when working with TypeScript.","symbol":"PlopGeneratorConfig (Type)","correct":"import type { PlopGeneratorConfig } from 'plop';"}],"quickstart":{"code":"import { nodePlop } from 'plop';\nimport path from 'path';\nimport fs from 'fs';\n\n// A minimal plopfile content\nconst plopfileContent = `\nexport default function (plop) {\n  plop.setGenerator('component', {\n    description: 'Create a new React component',\n    prompts: [\n      {\n        type: 'input',\n        name: 'name',\n        message: 'Component name (e.g., Button):'\n      },\n      {\n        type: 'confirm',\n        name: 'hasStyle',\n        message: 'Include a CSS module?'\n      }\n    ],\n    actions: [\n      {\n        type: 'add',\n        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',\n        templateFile: 'plop-templates/component.tsx.hbs',\n      },\n      {\n        type: 'add',\n        path: 'src/components/{{pascalCase name}}/index.ts',\n        template: 'export * from \"./{{pascalCase name}}\";'\n      },\n      {\n        type: 'add',\n        path: 'src/components/{{pascalCase name}}/{{pascalCase name}}.module.css',\n        template: '.{{camelCase name}} {\\n  /* styles */\\n}',\n        skip: (data) => !data.hasStyle ? 'Skipping style file' : undefined\n      }\n    ]\n  });\n};\n`;\n\n// Create a temporary plopfile for demonstration\nconst tempPlopfilePath = path.join(process.cwd(), 'temp-plopfile.mjs');\nconst templateDir = path.join(process.cwd(), 'plop-templates');\nfs.mkdirSync(templateDir, { recursive: true });\nfs.writeFileSync(path.join(templateDir, 'component.tsx.hbs'), `\nimport React from 'react';\n{{#if hasStyle}}import styles from './{{pascalCase name}}.module.css';{{/if}}\n\ninterface {{pascalCase name}}Props {\n  // Define props here\n}\n\nexport const {{pascalCase name}}: React.FC<{{pascalCase name}}Props> = ({}) => {\n  return (\n    <div{{#if hasStyle}} className={styles.{{camelCase name}}}{{/if}}>\n      Hello from {{pascalCase name}}!\n    </div>\n  );\n};\n`);\nfs.writeFileSync(tempPlopfilePath, plopfileContent);\n\n// Programmatically run a plop generator\nasync function runGenerator() {\n  const plop = await nodePlop(tempPlopfilePath, { \n    cwd: process.cwd(), \n    dest: process.cwd() \n  });\n  const generator = plop.getGenerator('component');\n\n  // Simulate user input for component 'MyComponent' with styles\n  const results = await generator.runActions({\n    name: 'MyComponent',\n    hasStyle: true\n  });\n\n  console.log('Generator results:', results);\n\n  // Clean up temporary files\n  fs.unlinkSync(tempPlopfilePath);\n  fs.unlinkSync(path.join(templateDir, 'component.tsx.hbs'));\n  fs.rmdirSync(templateDir);\n\n  console.log('Generated files for MyComponent and cleaned up temporary files.');\n}\n\nrunGenerator().catch(console.error);\n","lang":"typescript","description":"This example demonstrates how to programmatically use `nodePlop` from the `plop` package to define and execute a generator, simulating user input for component creation. It sets up a basic `plopfile` to generate a React component, including a TypeScript file and an optional CSS module, then cleans up the temporary files."},"warnings":[{"fix":"Upgrade your Node.js environment to version 18 or higher.","message":"Plop v4.0.0 dropped support for older Node.js versions (12, 14, and 16). Projects using Plop must now run on Node.js v18 or newer.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Ensure your `plopfile.js` uses the correct export syntax for your project's module type. If you're in an ESM project, use `export default function (plop) { ... }`. For CommonJS, use `module.exports = function (plop) { ... }`.","message":"The way `plopfile.js` files are authored depends on your project's module system. Using `export default` requires an ESM context (`.mjs` file extension or `\"type\": \"module\"` in `package.json`), while CommonJS projects must use `module.exports`.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"For TypeScript `plopfile.ts`, install `ts-node` (`npm i -D ts-node`) or `tsx` and configure your `package.json` scripts, or use `npx plop --init-ts` to set up boilerplate.","message":"While Plop supports TypeScript configuration files (`plopfile.ts`), enabling this requires additional setup (e.g., `ts-node` or `tsx`) in your project for Node.js to execute them directly, or pre-compilation. Plop v4.0.2 introduced an `--init-ts` flag to help with this.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Refer to the Handlebars.js documentation for correct syntax. Ensure that the data passed to your templates (from prompts) matches what the templates expect.","message":"Plop relies heavily on Handlebars.js for templating. Incorrect Handlebars syntax, missing helpers, or malformed data context can lead to unexpected output or template errors.","severity":"gotcha","affected_versions":">=3.0.0"},{"fix":"For convenient global access: `npm install -g plop`. For project-specific access: `npx plop` or add a script to `package.json` like `\"generate\": \"plop\"` and run `npm run generate`.","message":"To run `plop` directly from the terminal without `npx`, it's recommended to install it globally. Otherwise, you must use `npx plop` or define a `package.json` script.","severity":"gotcha","affected_versions":">=3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure your `plopfile`'s module type matches its export statement. For CommonJS `plopfiles`, use `module.exports`. For ESM `plopfiles`, use `export default` and potentially specify a `.mjs` extension or set `\"type\": \"module\"` in your `package.json`.","cause":"Attempting to `require()` an ESM-formatted `plopfile.mjs` or a `.js` file treated as ESM (due to `\"type\": \"module\"` in `package.json`).","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module ... not supported. Instead change the require of ... to a dynamic import()"},{"fix":"Install plop globally (`npm install -g plop`) or run it using `npx plop` when installed locally within a project (`npm install --save-dev plop`). Alternatively, add a script to `package.json` like `\"gen\": \"plop\"` and execute with `npm run gen`.","cause":"The `plop` executable is not in your system's PATH, either because it's not installed globally or `npx` isn't being used for a local installation.","error":"plop: command not found"},{"fix":"Verify that your `plopfile` correctly exports a function that accepts `plop` as its first parameter: `export default function (plop) { /* ... */ }` (ESM) or `module.exports = function (plop) { /* ... */ }` (CommonJS).","cause":"This typically happens if the function exported from `plopfile.js` does not correctly receive the `plop` object as its argument, or if the `plopfile` is malformed.","error":"TypeError: plop.setGenerator is not a function"}],"ecosystem":"npm"}