@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