@jeremytenjo/super-code-generator
v4.60.0TypeScript
A powerful, fast, and scalable code generator that saves you time
0/weekUpdated 3 months agoUnpacked: 8.3 MB
Published by jeremytenjo
npm install @jeremytenjo/super-code-generator
Super Code Generator
A 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 (
${name}
);
}
,
},
{
path: ({ name, helpers: { changeCase } }) => changeCase.paramCase(name) + '.css',
template: () => .wrapper {},
},
],
},
]export default superCodeGeneratorConfig
`2. Click right button in mouse and selected
3. Pick component type
4. Add component names
5. Profit! ✨Creates the following component when selecting type
and inputting name buttonjs
import React from 'react'
import styles from './button.css'export default function Button() {
return
${styles.wrapper}}>button
}
`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
- default trueCreates files inside a folder named based on the component name
- default falseAlways output code in root folder
- 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 of the parameter (used as key in params object)
- type - Type of input: 'input', 'dropdown', or 'file'
- - 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
and path functions via the params property:`ts
template: ({ params }) => // Title: ${params.title}
// Variant: ${params.variant}
// Config from: ${params.configFile}
Hooks
Trigger 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 } }) => import React from 'react';
export default function ${changeCase.pascalCase(name)}() {
return
${changeCase.pascalCase(name)}
}
,
},
],
},
]const template: SuperCodeGeneratorTemplateSchema = {
type: 'Component',
files,
}
export default template
`Component Type properties
Properties passed to
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.