A powerful, fast, and scalable code generator that saves you time
npm install @jeremytenjo/super-code-generatorA powerful, fast, and scalable code generator that saves you time
1. Create superCodeGen.schema.ts
``ts
import type { SuperCodeGeneratorConfigSchema } from '@jeremytenjo/super-code-generator'
const superCodeGeneratorConfig: SuperCodeGeneratorConfigSchema = [
{
type: 'React component',
files: [
{
path: ({ name, helpers: { changeCase } }) => changeCase.paramCase(name) + '.tsx',
template: ({ name, helpers: { wrapInTemplateLiteral, changeCase } }) =>
import React from 'react';
import styles from './${changeCase.paramCase(name)}.css';
export default function ${changeCase.pascalCase(name)}() {
return (
,
},
{
path: ({ name, helpers: { changeCase } }) => changeCase.paramCase(name) + '.css',
template: () => .wrapper {},
},
],
},
]export default superCodeGeneratorConfig
`2. Click right button in mouse and selected
Create Component
3. Pick component type
4. Add component names
5. Profit! ✨Creates the following component when selecting type
React component and inputting name buttonbutton.jsx`js
import React from 'react'
import styles from './button.css'export default function Button() {
return
${styles.wrapper}}>button
}
`button.css`css
.wrapper {
}
`Generator Properties
type
Name of the scaffold eg React Component
files
Array of files to generate
usageInstructions Optional
Instructions the user will see when they type the component name
outputWithoutParentDir Optional
Determined whether to output generated code inside the parent directory
Options
createNamedFolder - default trueCreates files inside a folder named based on the component name
outputInRootFolder - default falseAlways output code in root folder
formatParentFolderName - default undefinedFormat the parent folder name, must be a function that takes { currentName: string } and returns { newName: string }
params Optional
Array of parameters to collect from the user before generating code. Each parameter has:
-
name - Name of the parameter (used as key in params object)
- type - Type of input: 'input', 'dropdown', or 'file'
- description - Description shown to the user
- options - (For dropdown type) Array of options with value propertyExample:
`ts
params: [
{
name: 'title',
type: 'input',
description: 'Enter a title for the component'
},
{
name: 'variant',
type: 'dropdown',
description: 'Select a variant',
options: [
{ value: 'primary' },
{ value: 'secondary' }
]
},
{
name: 'configFile',
type: 'file',
description: 'Select a configuration file'
}
]
`Parameters are accessible in the
template and path functions via the params property:`ts
template: ({ params }) =>
`Hooks
onCreateTrigger function after component is created.
`ts
import type {
SuperCodeGeneratorTemplateSchema,
SuperCodeGeneratorFilesSchema,
} from '@jeremytenjo/super-code-generator'
import shell from 'child_process'const files: SuperCodeGeneratorFilesSchema = [
{
type: 'React component',
hooks: {
onCreate: ({ outputPath }) => {
shell.exec(
cd ${outputPath})
},
},
files: [
{
path: () => 'src/index.jsx',
template: ({ name, helpers: { changeCase } }) => ,
},
],
},
]const template: SuperCodeGeneratorTemplateSchema = {
type: 'Component',
files,
}
export default template
`Component Type properties
Properties passed to
path and template functions`js
name: 'component name input by user',
folderPath: 'component folder path',
params: 'object containing user-provided parameter values',
helpers: {
changeCase: 'function to change case of a string',
wrapInTemplateLiteral: 'helps add templates literals within a template literal'
addEmptyTemplateLiteral: 'returns '
}
``Change case uses the change-case library
> Pro Tip: Add a prettier config file path to format your created files.