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.

1. Add this repo to your projects dependencies (package.json)
2. Add a script to your package.json to trigger the generators: "generate": "plop --plopfile ./node_modules/halo-ui-generators/index.js"
3. 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/