@genesisx/scripts

Scripts

GenesisX Scripts to be used in other GenesisX app generators. This package is a utility package that provides simple interface to serve other GenesisX packages.

Aim

If you have used tools like create-react-app or create-next-app to create your react or nextjs apps, then you must have seen dependencies like react-scripts or next getting used in package.json file.

Eg.

### in react apps
scripts: {
  build: react-scripts build,
  dev: react-scripts dev
}

### in nextjs apps
scripts: {
  build: next build,
  dev: next dev,
  lint: next lint
}

Similarly, this package is aimed at providing a simplified interface to run certain scripts which could/would be too tedious for end users to replicate.

Where is it used?

Currently, this package contains the scripts used in the design-system template generated by @genesisx/design-system.

Script	Package	Description
ds-build	@genesisx/design-system	Builds 1 or more ui components from the root of the project
ds-publish	@genesisx/design-system	Publishes 1 or more ui components from the root of the project
genesisx	@genesisx/design-system, @genesisx/react-archetype	Executes the passed command present inside any package from the root (works for workspaces too)

Sample Usage

Generic (genesisx)

It is a versatile executor designed to run scripts specified in package.json files within a valid workspace. It acts as a generic tool, capable of executing any script mentioned in the configuration of a project, providing flexibility and adaptability across various packages.

Lets say that you have a monorepo workspace with apps/sample_app and packages/ui directories. And both sample_app and ui have build scripts in their respective package.json.

# apps/sample_app/package.json
"scripts": {
  "build": "yarn dev",
  # ...
}
# apps/ui/package.json
"scripts": {
  "build": "tsup",
  # ...
}

If you are not using NX, Turbo, Lerna or other monorepo managers, building individual packages from the root of the repo is tedious and time consuming.

You can simply add the following in your root package.json to simplify the above process:

# package.json
"scripts": {
  "build:app1": "genesisx build my_app",
  "build:ui": "genesisx build ui",
  # ...
}

Now, the user can simply run, npm run build:app1 or npm run build:ui from the root. You can replicate the same process for other commands/scripts.

Design System (ds-build, ds-publish)

The generated boilerplate from @genesisx/design-system will contain a build and publish script that will be added in the root package.json file.

# package.json
"scripts": {
  "build:ui": "genesisx ds-build",
  "publish:ui": "genesisx ds-publish"
  # ...
}

NOTE: Here, genesisx is the executor name and ds-build or ds-publish is the script name.

The user can build all their components as follows:

npm run build:ui

or if they want to build only their Button and Dropdown components, they can run:

npm run build:ui Button Dropdown