Automating Code Generation using npm and NodeJS

Front-end development can sometimes become overwhelming with repetitive tasks, leaving less time for creative coding. But fret not! There's a way to make your life easier and coding more enjoyable. In this blog post, let's dive into the world of bin package.json to automate code generation and streamline your front-end development process.

Why Automation Matters?

As developers, we've all faced the tedious task of writing boilerplate code or repetitive snippets. Automation is the magic that can save us from this monotony. By automating code generation, you get consistent code patterns, increased productivity, and the liberty to focus on more exciting aspects of your project.

Automating code generation offers several benefits:

1. Consistency: Automatically generating code ensures consistency across your project, reducing the likelihood of inconsistent code patterns.
2. Productivity: Tasks that are automated save developers time, allowing them to focus on more critical aspects of development.
3. Maintainability: By generating code programmatically, developers can easily update and maintain the codebase.

Getting Started

Let's dive into building a simple code generator. Our example will create a JavaScript file with a basic function, but you can customize it to fit your specific needs.

Step 1: Set Up Your Project

Start by creating a new project or navigating to an existing one:

mkdir my-project
# or
cd my-project

Step 2: Initialize npm

Initialize npm in your project folder

npm init -y
npm install yargs

Step 3: Create the Code Generator Script

Begin by creating a new file named index.js in your project's root directory. This file will serve as our code generator script.

# index.js

#! /usr/bin/env node
const yargs = require('yargs/yargs');
const path = require("path");
const { hideBin } = require('yargs/helpers');

const parseQueryString = (queryString) => {
	// TODO
}

yargs(hideBin(process.argv))
	.scriptName('codegen')
	.command('generate [target]', 'start the generator', (yargs) => {
		return yargs
			.positional('target', {
				describe: 'target template',
				default: 'example',
			})
	}, (argv) => {
		const inputParams = argv.params;
		const targetTemplate = argv.target;
		const params = parseQueryString(inputParams); // Make the parseQueryString to read client input params under JSON Object format

		switch(targetTemplate) {
			case 'example':
				// TODO: Working with the target template directory path and generate code by following template
				// Convert template contents then starting generating
				break;
			default:
				break;
		}
	})
	.option('destination', {
		type: 'string',
		description: 'Destination path for generated files/folder',
		default: './Example',
		alis: 'd',
	})
	.option('params', {
		type: 'string',
		description: 'params string pass to the target template',
		default: 'name=Example',
		alias: 'p'
	})
	.example('$0 generate example --destination=./tests/Example --params="component=Example"', 'generate React component files')
	.coerce(['destination', 'template'], path.resolve)
	.parse()

In this example, our generating code will do the following steps:

1. Read the template directory path
2. Parse client input parameters to all content under pre-defined format
3. Generate the new content to destination path given by client

Step 4: Set Up the CLI Entry Point

In your package.json, add a bin field to specify the CLI command and its entry point. The command name is chosen by you, so make it meaningful.

# package.json

{
	"name": "my-project",
	"version": "1.0.0",
	"bin": {
		"codegen": "./index.js"
	},
	"dependencies": {
		// Your dependecies that supports code generator
	}
}

In this example, we've defined "codegen" as the CLI command, associated with the index.js script.

Step 5: Create your own template

You would wonder where to store the template stuffs and also how to ignore the syntax check for the template logic. Let's explore in this step.

So the project structure will be as below:

my-project
├── __template__
├── package.json
├── index.js
├── .prettierignore // Ignore template code
└── README.md

In case you are using VSCode as your code editor, create folder .vscode then creating settings.json inside that just created folder.

# .vscode/settings.json

{
  "eslint.ignorePatterns": ["**/__template__/**/*.[tsx|ts|js|jsx]"],
  ...
}

In the __template__ folder, create code template for Example:

my-project
├── __template__
|       └── Example
|             ├── {{component}}.tsx
|             ├── {{component}}.test.tsx
|             └── {{component}}.d.ts
.

The content of Example.tsx might be as below:

import React from 'react';
import {{component}}Props from './{{component}}.d';

const {{component}}: React.FC<Partial<{{component}}Props>> = (_props) => {
  return <React.Fragment>
    {/* Add the component content here */}
  </React.Fragment>;
}

{{component}}.defaultProps = {
  // default props put here
};

export default {{component}};

After generated, the expected results that we all want is:

my-project
├── Example
|     ├── Example.tsx
|     ├── Example.test.tsx
|     └── Example.d.ts
.

# Example/Example.tsx

import React from 'react';
import ExampleProps from './Example.d';

const Example: React.FC<Partial<ExampleProps>> = (_props) => {
  return <React.Fragment>
    {/* Add the component content here */}
  </React.Fragment>;
}

Example.defaultProps = {
  // default props put here
};

export default Example;

Step 6: Make your script Works

You can make your script as dependencies in another project or make it as executable file then add its path to OS ENVIRONMENT .

Feel free to customize your code generator to suit your needs. You can create more complex templates, generate multiple files, or prompt the user for input using third-party libraries like inquirer for an interactive CLI experience.

Conclusion

Congratulations! You've successfully created a code generator CLI using npm and Node.js. By automating code generation, you can boost your productivity, maintain code consistency, and focus on building awesome front-end applications.

So, harness the power of automation and let your code generator do the heavy lifting. Happy coding, and may your development journey be filled with creativity and efficiency!