@donysukardi/create-reactlib

CLI to create React libraries with custom template support

Table of Contents

• Introduction
• Features
• Usage
• Configuration
  • Standard config
  • CLI flags
  • The Config Object
• Template
• Lifecycle Scripts
  • API
• Custom Packages
  • Format
• Contributors
• License

Introduction

This CLI aims to speed up the developemnt and maintenance of React libraries. It is based on @donysukardi/reactlib-template and installs @donysukardi/reactlib-scripts as dependency.

Features

• Easy to use CLI
• Overridable configuration via kcd-scripts
• Rollup for build process
• Babel for transpilation
• Jest for testing
• Storybook for component development and testing
• Cypress for integration testing

Usage

npm install --global @donysukardi/create-reactlib

and run the following command for guided mode

create-reactlib

or pass in arguments with the CLI.

create-reactlib --help

Alternatively, you could use npx without having to install this CLI package manually

npx @donysukardi/create-reactlib

Configuration

The only compulsory parameter is name, which is the name of your new package.

Standard config

parameter	type	default	description
config	string	""	Path to configuration to load
preact	boolean	false	Flag to include preact build
description	string	""	Description of the new package
author	string	"{{github-username}}"	Author for package.json and README.md
repo	string	"{{author}}/{{name}}"	Repository for package.json
license	string	"MIT"	License for package.json and README.md
manager	string	"npm"	Package manager to use for installation
semanticallyReleased.	boolean	true	Flag to indicate whether package version should be 0.0.0-semantically-released
template	string	"donysukardi/reactlib-template"	Git repository or local path of template to copy/clone and initialize
scripts	string	"{{dest}}/.template/scripts.js"	Path to lifecycle scripts. Ref: Lifecycle Scripts
packages	string	"{{dest}}/.template/package.js[on]"	Path to additional packages to install. Ref: Custom Packages
install	boolean	true	Flag indicating whether package installation should be performed

CLI flags

parameter	short	long
config	-c	--config
preact	-p	--preact
description	-d	--desc
author	-a	--author
repo	-r	--repo
license	-l	--license
manager		--npm or --yarn
semanticallyReleased.	-s	--semantically-released
template	-t	--template
scripts	-S	--scripts
packages	-P	--packages
install	-x	--no-install

The Config Object

All the files will be compiled with the parameters merged from the following config,

1. Config exported from .template/config.js (if any) - Template
2. Config exported from file in config path from CLI (if any) Configuration
3. Individual config from CLI Configuration

Template

create-reactlib uses handlebars under the hood.

The following files in the template have special treatments,

• Files with .tmpl will have the .tmpl stripped off during compilation.
• Files inside .template directory in the root, which will be removed during cleanup lifecycle
  • .template/scripts.json - Default Lifecycle Scripts
  • .template/package.js[on] - Default Custom Packages
  • .template/config.js - Default config as described below

Lifecycle Scripts

This library provides post hooks for the following lifecycles,

• clonecopy: Copying/Cloning template
• template: Processing template
• package: Installing packages
• cleanup: Cleaning up template artefacts
• git: Initializing git repository

You will need to export an object with the lifecycle names as the keys, e.g. postclonecopy, posttemplate, in the script file.

By default, the library will look for the file in .template/scripts.js inside the destination path.

API

Each lifecycle script receives (config)[#the-config-object] and (tools)[#tools] as arguments

Tools

Object containing library helpers,

{
  handlebars,
  execa,
  fs, // fs-extra
  globby,
  mkdirp, // make-dir
  ora,
  pEachSeries, // p-each-series
  hostedGitInfo, // hosted-git-info
}

Lifecycle script should return either:

1. Object with title - custom string to display with spinner and promise - function that returns promise to resolve
2. Promise

Example

// my-reactlib-template/.template/scripts.js

const preTemplate = async (config, tools) => {
  const promise = new Promise(resolve => setTimeout(() => resolve(), 2000))
  ora.promise(promise, 'Doing something')
  await promise

  // Do something else here perhaps
}

module.exports = {
  pretemplate,
}

Custom Packages

The library provides API to include dependencies outside those specified in the template.

You will need to export a JSON with dependencies and/or devDependencies keys, just like in package.json

By default, the library will look for the file in .template/package.js or .template/package.json inside the destination path.

If you use a js file, you're expected to export a function that will receive config as argument.

Format

You can leave the version blank to let the library install the latest version for respective package.

{
  "devDependencies": {
    "react": "",
    "react-dom": "",
    "prop-types": ""
  },
  "dependencies": {
    "some-package": "^1.4.0"
  }
}

Contributors

Thanks goes to these wonderful people (emoji key):

Dony Sukardi 💻 📖 💡 🤔 👀 ⚠️

This project follows the all-contributors specification. Contributions of any kind welcome!

License

MIT © donysukardi