@donysukardi/create-reactlib v1.5.0

@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

CLI flags

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):

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

License

MIT © donysukardi