Frontend Code Generators
These are code generators to create code from templates to aid with faster development.
This is part of the Developer Experience (DX) initiative of the Design System - to aid developers working with new and existing projects.
Getting Started
These generators create code for React projects and are compatible with the design system's starter-kit.
- Add this repo to your projects dependencies (package.json)
- Add a script to your package.json to trigger the generators:
"generate": "plop --plopfile ./node_modules/halo-ui-generators/index.js" - Run
npm run generate <component|hook|view> {name}
You could also create your own plopfile.js to export the file from your node_modules - this allows you to extend with your own configurations if required. This is the method used by the starter-kit.
plopfile.js
module.exports = require("./node_modules/halo-ui-generators")
npm scripts (add to package.json)
"generate": "plop",
...
Available Generators
Component
plop component <name>
This creates a new folder, component, unit test file and default README.md with some basic scaffolding.
View
plop view <name>
This creates a new folder, component, provider, unit test file and default README.md with some basic scaffolding.
This is used for the top-level route components (pages). You can use the providers to encapsulate route specific state.
Context
plop context <name>
This creates a file inside the context directory with some basic scaffolding for generic Context API usage. The file will export a Provider and a hook to use the context in other components.
Hook
plop hook <name>
This creates a js file inside the hooks directory with some basic scaffolding for generic usage.
Technology
Plop has been used to generate code via templates. https://plopjs.com/