JSPM

@leanup/cli

1.1.0-rc.71
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 12425
  • Score
    100M100P100Q133018F
  • License ISC

This CLI brings along all required tools to serve, test and build multi framework SPAs

Package Exports

  • @leanup/cli/babel.config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@leanup/cli) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

travis-ci dependencies peerDependencies vulnerabilities npm downloads install-size lernajs code style: prettier

LEAN⭧up (CLI)

@leanup/cli shows how much is really required to develop, test and build a realisitic sized JavaScript web application.

Motivation

  • Learnability
  • Controllability
  • Universality
  • Flexibility
  • Scalability
  • Durability
  • Transparency

Tools and technologies

We use all tools and technologies without cluttered facades.

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

Arguments

The arguments for and against this concept are documented here:

Pro

  • select only one pure and popular tool for each use case (e.g. bundling, unit-test)
  • there are extensible configuration files for each tool
  • the CLI bundles all the necessary tools in a portable/scalable way
  • the risk to get vulnerabilites in dependencies is lower

Contra

  • please give feedback
  • please show us your perspective

Demo

There are some working examples:

Installation

npm install @leanup/cli typescript --save-dev and npm audit fix

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

  • npm install chromedriver --save-dev
  • npm install geckodriver --save-dev
  • npm install graphql --save-dev
  • npm install selenium-server--save-dev
  • npm install typescript --save-dev

Features

Tool/Technology Description Status Note
Babel Transpiler ✔️ ready
Webpack Bundler ✔️ ready
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
Storybook Documentation ⌛ upcoming
GraphQL API ✔️ ready
Workbox PWA ✔️ ready
Lerna Mono-Repo ✔️ ready
Ant-Design Material Design ✔️ proved
Material Material Design ✔️ proved
Bootstrap Material Design ✔️ proved
Less CSS ✔️ proved
Sass CSS ✔️ proved
Webhint Webhint ✔️ moved ***
[TestCafe] E2E-Test-Runner ⌛ is being 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.

Extensions

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:

Addons

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

Thinks

There a separate packages for important application features.

Usage

Command-Line-Interface (CLI)

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)

Usage: lean [options] [command]

Options:
  -v, --version     output the current version
  -h, --help        output usage information

Commands:
  serve [options]   Developing
  build [options]   Building
  test [options]    Unit-Testing
  coverage          Test-Coverage
  e2e [options]     E2E-Testing
  format [options]  Formatter
  lint [options]    Linter

Developing

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

Usage: lean serve [options]

Developing

Options:
  -f, --framework <framework>      javascript framework (SPA)
  -e, --environment <environment>  technical environment (CMS)
  -t, --template <template>        corporate design (Style)
  -o, --open                       open the default browser
  -p, --port                       port
  -h, --help                       output usage information

Building

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

Usage: lean build [options]

Building

Options:
  -f, --framework <framework>      javascript framework (SPA)
  -e, --environment <environment>  technical environment (CMS)
  -t, --template <template>        corporate design (Style)
  -h, --help                       output usage information

Unit-Testing

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

Usage: lean test [options]

Unit-Testing

Options:
  -w, --watch  run tests in watch mode
  -h, --help   output usage information

Test-Coverage

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

Usage: lean coverage [options]

Test-Coverage

Options:
  -h, --help  output usage information

E2E-Testing

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

Usage: lean e2e [options]

E2E-Testing

Options:
  --headless  run tests in the headless mode
  -h, --help  output usage information

Formatter

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

Usage: lean format [options]

Formatter

Options:
  -f, --fix   fix the code format
  -h, --help  output usage information

Linter

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

Usage: lean lint [options]

Linter

Options:
  -f, --fix   fix the lint findings
  -h, --help  output usage information

Scripts (NPM)

The following script commands are exactly the same executions that the CLI has under the hood.

Use this scripts in your package.json:

...
  scripts {
    "build": "webpack --colors --config=node_modules/@leanup/cli/webpack.config.js --mode=production",
    "coverage": "cross-env NODE_ENV=test nyc mocha --config=node_modules/@leanup/cli/.mocharc.js && nyc check-coverage",
    "e2e": "nightwatch --config=node_modules/@leanup/cli/nightwatch.conf",
    "format": "prettier \"src/**/*\"",
    "lint": "tslint \"src/**/*.ts*\"",
    "serve": "webpack-dev-server --colors --config=node_modules/@leanup/cli/webpack.config.js --devtool=source-map --progress",
    "test": "cross-env NODE_ENV=test mocha --config=node_modules/@leanup/cli/.mocharc.js"
  }
...
  • Developing: npm run serve -- [options]
  • Building: npm run serve -- [options]
  • Unit-Testing: npm run test -- [options]
  • Coverage: npm run coverage
  • E2E-Testing: npm run e2e -- [options]
  • Formatter: npm run format -- [options]
  • Linter: npm run lint -- [options]

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.

For example:

package.json:

{
  "name": "@leanup/cli",
  "version": "1.0.0-rc.219",
  "description": "This CLI brings along all required tools to serve, test and build multi framework SPAs",
  "author": "Martin Oppitz <npmjs@martinoppitz.com>",
  "homepage": "https://github.com/martinoppitz/leanup#readme",
  ...

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 install size of @babel/core vulnerabilities of @babel/core
@babel/plugin-proposal-class-properties install size of @babel/plugin-proposal-class-properties vulnerabilities of @babel/plugin-proposal-class-properties
@babel/plugin-proposal-decorators install size of @babel/plugin-proposal-decorators vulnerabilities of @babel/plugin-proposal-decorators
@babel/preset-env install size of @babel/preset-env vulnerabilities of @babel/preset-env
@babel/preset-typescript install size of @babel/preset-typescript vulnerabilities of @babel/preset-typescript
@leanup/cli-core-e2e install size of @leanup/cli-core-e2e vulnerabilities of @leanup/cli-core-e2e
@leanup/cli-core-format install size of @leanup/cli-core-format vulnerabilities of @leanup/cli-core-format
@leanup/cli-core-lint install size of @leanup/cli-core-lint vulnerabilities of @leanup/cli-core-lint
@leanup/cli-core-test install size of @leanup/cli-core-test vulnerabilities of @leanup/cli-core-test
@types/node install size of @types/node vulnerabilities of @types/node
autoprefixer install size of chai vulnerabilities of autoprefixer
babel-loader install size of babel-loader vulnerabilities of babel-loader
chalk install size of chai vulnerabilities of chalk
commander install size of commander vulnerabilities of commander
copy-webpack-plugin install size of copy-webpack-plugin vulnerabilities of copy-webpack-plugin
css-loader install size of css-loader vulnerabilities of css-loader
file-loader install size of file-loader vulnerabilities of file-loader
graphql-tag install size of graphql-tag vulnerabilities of fibers
html-webpack-plugin install size of html-webpack-plugin vulnerabilities of html-webpack-plugin
less install size of less vulnerabilities of less
less-loader install size of less-loader vulnerabilities of less-loader
mini-css-extract-plugin install size of mini-css-extract-plugin vulnerabilities of mini-css-extract-plugin
postcss-loader install size of postcss-loader vulnerabilities of postcss-loader
sass install size of sass vulnerabilities of sass
sass-loader install size of sass-loader vulnerabilities of sass-loader
string-replace-loader install size of string-replace-loader vulnerabilities of string-replace-loader
webpack install size of webpack vulnerabilities of webpack
webpack-cli install size of webpack-cli vulnerabilities of webpack-cli
webpack-dev-server install size of webpack-dev-server vulnerabilities of webpack-dev-server

Peer dependencies

Package Size Vulnerabilities
chromedriver install size of chromedriver vulnerabilities of chromedriver
geckodriver install size of geckodriver vulnerabilities of geckodriver
graphql install size of graphql vulnerabilities of graphql
selenium-server install size of selenium-server vulnerabilities of selenium-server
typescript install size of typescript vulnerabilities of typescript

Optional tools

Package Size Vulnerabilities
@leanup/git-hooks install size of @leanup/git-hooks vulnerabilities of @leanup/git-hooks
allure-commandline install size of allure-commandline vulnerabilities of allure-commandline
lerna install size of lerna vulnerabilities of lerna
workbox-cli install size of workbox-cli vulnerabilities of workbox-cli