Make things pure ... to become lean.

leanup^CLI

The @leanup CLI contains all required popular tools in there minimal default, transparent and extensible configuration to develop JavaScript/TypeScript web applications.

Motivation
Principles
Demo
Installation
Features
Structure
Usage
- Help
- Create
- Developing
- Building
- Unit-Testing
- Test-Coverage
- E2E-Testing
- Formatter
- Linter
Replaced environment variables
Dependencies
Peer dependencies
Optional tools

Motivation

Learnability
Controllability
Universality
Flexibility
Scalability
Durability
Transparency

Principles

convention over configuration
pure commands under the hood
don't repeat yourself
following the generic instead of the influenced way
keep the dependencies always up to date

Demo

There are some working examples:

Installation

To install the @leanup CLI execute the following command:

npm install @leanup/cli typescript --save-dev

And a non-framework or framework strategy must also be selected:

Non-framework:

npm install @leanup/cli-vanilla --save-dev

Or with framework:

npm install @leanup/cli-angular --save-dev or
npm install @leanup/cli-angularjs --save-dev or
npm install @leanup/cli-aurelia --save-dev or
npm install @leanup/cli-inferno --save-dev or
npm install @leanup/cli-lit-element --save-dev or
npm install @leanup/cli-preact --save-dev or
npm install @leanup/cli-react --save-dev or
npm install @leanup/cli-svelte --save-dev or
npm install @leanup/cli-vue --save-dev or
npm install @leanup/cli-vue3 --save-dev

Install the peer dependencies chromedriver, geckodriver or selenium-server in the required version, if you need that features.

npm install chromedriver --save-dev
npm install geckodriver --save-dev
npm install selenium-server--save-dev

Features

Tool/Technology	Description	Status	Note
Babel	Transpiler	✔️	ready
Webpack	Bundler	✔️	ready
Snowpack	Bundler	⌛	in progress
Vite	Bundler	⌛	in progress
TypeScript	Language	✔️	ready
Mocha	Unit-Test-Runner	✔️	ready
Chai	Assertion	✔️	ready
Sinon	Mocking	✔️	ready
NYC	Code-Coverage	✔️	ready
ESLint	Code-Checker	✔️	ready
Nightwatch.js	E2E-Test-Runner	✔️	ready
Allsure	Report	✔️	ready
Cucumber	BDD	✔️	ready
robotframework	BDD	⌛	will be evaluated
Storybook	Documentation	⌛	in progress
GraphQL	API	✔️	ready
Workbox	PWA	✔️	ready
Lerna	Mono-Repo	✔️	ready
Ant-Design	Design-System	✔️	proved
Material	Design-System	✔️	proved
Bootstrap	Design-System	✔️	proved
Tailwindcss	Design-System	✔️	proved
Nexus IQ	Vulnerabiliy-Gate	✔️	ready
Less	CSS	✔️	ready
Sass	CSS	✔️	ready
PostCSS	CSS	✔️	ready
Webhint	Webhint	✔️	moved ***
TestCafe	E2E-Test-Runner	⌛	will be evaluated ****
TSLint	Code-Checker	❌	removed **
Cypress	E2E-Test-Runner	❌	excluded *

* Arguments agains Cypress:

reinvent wheel

detect css selectors

BDD test syntax

principals

large tooling

a lot of binaries

many dependencies

ci integration vs selenium hub

It is difficult to keep focus with Cypress as it is more a nice tool than an effective tool. It is expected that a lot of time will be invested to justify the requirements of a project.

** TSLint is deprecated.

*** Webhint is not practical for the development of components, since component tags often have no relation to standard HTML. In addition, the webhint package alone is over 100 MB in size. I have good by using a IDE webhint plugin, like VSCode webhint.

**** TestCafe The idea that defined TestCafe architecture was that you don't really need an external driver to run end-to-end tests in the browser. That's interesting.

Structure

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

@leanup/cli ✔️
@leanup/cli-vanilla (optional) ✔️

Frameworks

Vanilla Java-/TypeScript are supported by default. That means for example custom elements and any plain Java-/TypeScript code.

The selection of the following frameworks depends in parts on the following references:

Currently the following framework extensions are available:

Extensions

A separate package contains some nice but not required addons for webpack.

Thinks

There a separate packages for important application features.

@leanup/git-hooks ✔️
@leanup/form ✔️
@leanup/lib ✔️
@leanup/ul ⌛

Usage

If the CLI is also installed globally with npm install -g @leanup/cli, you can use the command lean directly in the bash.

If not, you must use npx and put it before the command. Like this: npx lean

Help

> lean -h (or npx lean -h)

Create

> lean create -h (or npx lean create -h)

Developing

> lean serve -h (or npx lean serve -h)

Building

> lean build -h (or npx lean build -h)

Unit-Testing

> lean test -h (or npx lean test -h)

Test-Coverage

> lean coverage -h (or npx lean coverage -h)

E2E-Testing

> lean e2e -h (or npx lean e2e -h)

Formatter

> lean format -h (or npx lean format -h)

Linter

> lean lint -h (or npx lean lint -h)

Replaced environment variables

The following variable names are replaced by the values from package.json file in the bundle:

Name	Description
APP_AUTHER	The value of the `author` attribute from the package.json file.
APP_HOMEPAGE	The value of the `homepage` attribute from the package.json file.
APP_NAME	The value of the `name` attribute from the package.json file.
APP_VERSION	The value of the `version` attribute from the package.json file.
NODE_ENV	The value of the `version` attribute from the package.json file.

For example:

package.json:

{
  "name": "@scope/my-app",
  "version": "1.1.0",
  "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
  "author": "Martin Oppitz <npmjs@martinoppitz.com>",
  "homepage": "https://leanupjs.org",
  ...

App code:

const APP_METADATA = {
  author: '$$APP_AUTHER$$',
  homepage: '$$APP_HOMEPAGE$$',
  name: '$$APP_NAME$$',
  version: '$$APP_VERSION$$',
  environment: '$$NODE_ENV$$', // development | test | production ⌛
};
console.log(APP_METADATA);

Dependencies

Package	Size	Vulnerabilities
@babel/core
@babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators
@babel/preset-env
@babel/preset-typescript
@types/node
autoprefixer
babel-loader
chalk
commander
copy-modules-webpack-plugin
css-loader
esbuild-loader
file-loader
less
less-loader
postcss
postcss-loader
sass
sass-loader
string-replace-loader
style-loader
webpack
webpack-cli
webpack-dev-server