@milkfloat/generators

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/