Convert any directory into a Plop template. Perfect for when you have a component, hook, or utility that you want to turn into a reusable template.
# Install globally
deno install --allow-read --allow-write jsr:@gitmazzone/dir-to-plop@0.1.0
# Or run directly
deno run --allow-read --allow-write jsr:@gitmazzone/dir-to-plop@0.1.0 ./source ./output
# Convert existing component to template
dir-to-plop ./components/MyAwesomeComponent ./plop/templates/awesome-component
# Generate from starter template (interactive)
dir-to-plop --starter ./plop/templates/new-component
# Generate React component template directly
dir-to-plop --starter-react-component ./plop/templates/new-component
Given this source component:
MyAwesomeComponent/
├── MyAwesomeComponent.tsx
├── useMyAwesomeComponent.hook.ts
├── my-awesome-component.module.css
└── my_awesome_component_utils.ts
With contents like:
// MyAwesomeComponent.tsx
export const MyAwesomeComponent = () => {
const { data } = useMyAwesomeComponent();
return <div className='my-awesome-component'>{data}</div>;
};
Running dir-to-plop
will create:
awesome-component/
├── {{pascalCaseName}}.tsx.hbs
├── use{{pascalCaseName}}.hook.ts.hbs
├── {{kebabCaseName}}.module.css.hbs
└── {{snakeCaseName}}_utils.ts.hbs
With transformed contents:
// {{pascalCaseName}}.tsx.hbs
export const {{pascalCaseName}} = () => {
const { data } = use{{pascalCaseName}}();
return <div className="{{kebabCaseName}}">{data}</div>;
};
- ✅ Converts directories into Plop templates
- ✅ Detects and transforms different naming patterns:
- PascalCase (MyComponent)
- camelCase (myComponent)
- kebab-case (my-component)
- snake_case (my_component)
- ✅ Maintains directory structure
- ✅ Adds .hbs extension to all files
- ✅ Provides an opinionated React Component starter template
Current limitations:
- Does not generate Plop configuration files - you'll need to manually set up your plopfile.js
- Does not automatically configure Plop helpers (like pascalCase, camelCase)
- Only handles basic naming patterns - complex or nested component names might need manual adjustment
- Only processes text files - binary files are copied as-is
After generating templates, you'll need to:
- Install Plop in your project
- Create a plopfile.js
- Configure the required helpers
Basic plopfile.js example:
export default function (plop) {
plop.setHelper('pascalCase', (text) => {
// Example telling plop how to transform pascalCase in templates
return text
.split(/[-_\s]+/)
.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
.join('');
});
plop.setGenerator('component', {
description: 'Create a new component',
prompts: [
{
type: 'input',
name: 'name',
message: 'Component name?',
},
],
actions: [
{
type: 'addMany',
destination: './src/components/{{kebabCaseName}}',
templateFiles: 'plop/templates/component/**',
base: 'plop/templates/component',
},
],
});
}
Issues and PRs welcome!
MIT