Jo
is a simple and scalable code generator that works. Built for developers by developers with ❤️.
- 🏗️ JavaScript as a template language — do what you want with any other packages in your templates;
- 🎨 Hooks for any state — format, validate, whatever with your templates;
- 🚀 Support templates as npm-package — share tmeplates between teams and projects;
$ npm i -D jo-cli
Add to .templates
first templates via folder component
and populate command config.
// .templates/component/.joconfig.js
const { pascalCase } = require('change-case');
module.exports = {
default: 'js',
title: 'React Component',
description: 'Create React component in different technologies.',
options: {
directory: {
type: 'boolean',
short: 'd',
description: 'create component as directory',
}
},
hooks: {
preFilename({ payload: filename }) {
return pascalCase(filename);
},
prePath({ options, payload: filename }) {
return options.directory ? `./src/components/${filename}` : './src/components';
}
},
};
Add template files with name to extension matching.
// .templates/component/js.js
module.exports.template = ({ directory }, fileName) => {
const content = directory ? 'in direcotory' : 'one file';
return (
`import React from 'react';
export const ${fileName} = props => <div>${content}</div>;`
);
}
// .templates/component/css.js
module.exports.template = (_, fileName) => `.${fileName} {}`;
$ jo component tabs.{js,css} menu -d
Wait for magic!
src
└── components
├── Menu
│ └── Menu.js
└── Tabs
├── Tabs.css
└── Tabs.js
$ jo -h
Usage: jo [options] [command]
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
component [options] Create React component in different technologies.
help [command] display help for command
$ jo component -h
Usage: jo component [options]
Create React component in different technologies.
Options:
-f, --force Override existing files
-d, --directory create component as directory
-h, --help display help for command
Add .joconfig.js
to your project root directory.
module.exports = {
templates: [
`path/to/your/templates`, // .templates by default
],
logMode: 'silent', // verbose, short — verbose by default
};