leanupjs
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
- 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-devnpm install geckodriver --save-devnpm install selenium-server--save-dev
Features
| Tool/Technology | Description | Status | Note | Rating |
|---|---|---|---|---|
| TypeScript | Language | ✔️ | ready |  |
| Webpack | Bundler | ✔️ | ready |  |
| Snowpack | Bundler | ⌛ | in progress |  |
| Vite | Bundler | ⌛ | in progress |  |
| ESBuild | Transpiler | ✔️ | ready |  |
| Babel | Transpiler | ✔️ | 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 |  |
| OpenAPI | API | ✔️ | ready | |
| GraphQL | API | ✔️ | ready |  |
| Workbox | PWA | ✔️ | ready |  |
| Lerna | Mono-Repo | ✔️ | ready |  |
| Ant-Design | Design-System | ✔️ | proved |  |
| Bootstrap | Design-System | ✔️ | proved |  |
| Material | Design-System | ✔️ | proved |  |
| Tailwindcss | Design-System | ✔️ | proved |  |
| WindiCSS | Design-System | ✔️ | proved |  |
| Nexus IQ | Vulnerabiliy-Gate | ✔️ | ready | |
| Less | CSS | ✔️ | ready |  |
| Sass | CSS | ✔️ | ready |  |
| PostCSS | CSS | ✔️ | ready |  |
| TSArch | Architecture | ⌛ | in progress |  |
| 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:
@leanup/cli-angular✔️@leanup/cli-angularjs✔️@leanup/cli-aurelia✔️@leanup/cli-inferno✔️@leanup/cli-lit-element✔️@leanup/cli-preact✔️@leanup/cli-react✔️@leanup/cli-svelte✔️@leanup/cli-vue✔️@leanup/cli-vue3✔️ (RC)
Extensions
A separate package contains some nice but not required addons for webpack.
@leanup/cli-addons✔️@leanup/cli-cucumber✔️@leanup/cli-graphql✔️@leanup/cli-pwa✔️@leanup/cli-webhint✔️
Thinks
There a separate packages for important application features.
@leanup/git-hooks✔️@leanup/form✔️@leanup/lib✔️- @leanup/ul ⌛
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 |  |
|
| 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 |  |
Peer dependencies
| Package | Size | Vulnerabilities |
|---|---|---|
| chromedriver |  |
|
| geckodriver |  |
|
| graphql |  |
|
| selenium-server |  |
|
| typescript |  |
Optional tools
| Package | Size | Vulnerabilities |
|---|---|---|
| @leanup/git-hooks |  |
|
| allure-commandline |  |
|
| lerna |  |
|
| workbox-cli |  |