{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install plop"],"cli":{"name":"plop","version":null}},"imports":["export default function (plop) { /* ... */ }","module.exports = function (plop) { /* ... */ }","import { nodePlop } from 'plop';","import type { PlopGeneratorConfig } from 'plop';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}