Inspr-diode-test NPM

Installation

The first step is to install Diode cli. To Install Diode cli in your project with npm or yarn, use the commands below:

npm install @inspr/diode
yarn add @inspr/diode

It is possible to install Diode globally by typing the following commands:

npm -g install @inspr/diode
yarn global add @inspr/diode

Then, Diode can be used from anyware in your system.

Quick Start

A minimal valid structure for Diode would be:

# single package                     # workspaces
 |-src                                    |-packages
   |-index.[js|ts|jsx|tsx]                  |-package1
 |-package.json                                 |-src
                                                  |-index.[js|ts|jsx|tsx]
                                                |-package.json
                                            |-package2
                                                |-src
                                                  |-index.[js|ts|jsx|tsx]
                                                |-package.json
                                            ...
                                          |-package.json

To create a new Diode project, type:

# creates 'workspaces' based project
diode init AwesomeProject

# creates 'single package' project
diode init AwesomeProject  -p

Diode will create new folder named AwesomeProject, with a preconfigured diode.yaml file for config. It also create files to support babel, jest, typescript.

Example of diode.yaml file is:

# Example of using multi-context: 
# Bundling will run across all packages from ./packages & ./vendor

version: 0.0.0
workspaces:
  main: 
    context: packages 
    description: This is an example project for diode
    private: true 
  vendor:
    context: vendor 
    description: Vendor folder
    private: false

# Example of single package project where you have only 1 entry point under
# src/index

version: 0.0.0
package: true

The specs in diode.yaml sets the configuration. A brief descrition of each field is in the list:

version: version in root package.json
package: if set to true workspaces are ignored, entry point will be src/index.[js|ts|jsx|tsx] from root
workspaces: every workspace it's a folder where would be packages for bundling, workspaces can be more than one
main: workspace name to address it in cli commands
context: path to packages folder relative to root (where is diode.yaml)
description: description
private: boolean - it's private package or not

After creates the project, lets enter into the new created folder/project AwesomeProject. The next step is start creating packages on it.

Now, it is necessary to install the dependencies. This process can be done running the following:

cd AwesomeProject
yarn install OR npm install

# `diode new` make sense only when `workpsaces` are used, otherwise you
# have your package ready to use under src/index.[js|ts|jsx|tsx]
# `diode build` || `diode watch`
    
diode new project1

Diode will create new folder under workspaces.main.context path, with the name provided, project1 in this tutorial. Inside this folder, it is possible to configure the files package.json, tsconfig.json and src/index.ts to be used as entry points.

If you want to create another package, just type in the root directory of the project:

diode new [name]

After that, you can start the development of project. To build your project :

diode build [packageName]

If packageName is not provided, Diode will build all packages for all workspaces. To build a subset of the packages, you must provide the packagesNames. It is the actual package name property in the file package.json, e.g, project1 comma separated.

It is also possible to rebuild the files after changes by using:

diode watch [packageName]

Commands

A brief description of the commands is given in this section.

diode init <projectName>  --package [-p] --template? [-t]

Initializes new project. --template creates new project from diode.yaml config. --package creates new project for single package use without workspaces , with entry point under src/index.[js|ts|jsx|tsx]

diode new <libName> [workspace?]

Is used only when workspaces are used. Creates new library in the workspaces folder that is configured in diode.yaml config under workspaces.[name].context field, already preconfigured for the project. If workspace is not provided Diode will take first workspace from config.

diode build <libName?>

Builds your libraries by creating bundles and generating TS types definition files. Libraries names can be provided space separated. If no arguments is provide Build runs across all libraries from you diode.yaml context field.

didoe watch <libName?>

Run Build across projects provided space separated (if no arguments - across all projects). After that watches for changes in libraries files and rebuilds if needed.