Have ideas to improve npm?Join in the discussion! »

    @leanup/cli

    1.2.0-rc.79 • Public • Published


    Make things pure ... to become lean.


    downloads npm license

    dependencies devDependencies peerDependencies optionalDependencies

    vulnerabilities install-size

    lernajs prettier

    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

    • 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 Rating
    TypeScript Language ✔️ ready typescript
    Webpack Bundler ✔️ ready webpack
    Snowpack Bundler in progress webpack
    Vite Bundler in progress webpack
    ESBuild Transpiler ✔️ ready esbuild
    Babel Transpiler ✔️ ready @babel/core
    Mocha Unit-Test-Runner ✔️ ready mocha
    Chai Assertion ✔️ ready chai
    Sinon Mocking ✔️ ready sinon
    NYC Code-Coverage ✔️ ready nyc
    ESLint Code-Checker ✔️ ready eslint
    Nightwatch.js E2E-Test-Runner ✔️ ready nightwatch
    Allsure Report ✔️ ready
    Cucumber BDD ✔️ ready cucumber
    robotframework BDD will be evaluated
    Storybook Documentation in progress storybook
    OpenAPI API ✔️ ready
    GraphQL API ✔️ ready graphql
    Workbox PWA ✔️ ready workbox
    Lerna Mono-Repo ✔️ ready lerna
    Ant-Design Design-System ✔️ proved antd
    Bootstrap Design-System ✔️ proved bootstrap
    Material Design-System ✔️ proved @material/textfield
    Tailwindcss Design-System ✔️ proved tailwindcss
    WindiCSS Design-System ✔️ proved tailwindcss
    Nexus IQ Vulnerabiliy-Gate ✔️ ready
    Less CSS ✔️ ready less
    Sass CSS ✔️ ready sass
    PostCSS CSS ✔️ ready postcss
    TSArch Architecture in progress hint
    Webhint Webhint ✔️ moved *** hint
    TestCafe E2E-Test-Runner will be evaluated **** testcafe
    TSLint Code-Checker removed ** tslint
    Cypress E2E-Test-Runner excluded * cypress

    * 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.

    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.

    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 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
    @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-modules-webpack-plugin install size of copy-modules-webpack-plugin vulnerabilities of copy-modules-webpack-plugin
    css-loader install size of css-loader vulnerabilities of css-loader
    esbuild-loader install size of esbuild-loader vulnerabilities of esbuild-loader
    file-loader install size of file-loader vulnerabilities of file-loader
    less install size of less vulnerabilities of less
    less-loader install size of less-loader vulnerabilities of less-loader
    postcss install size of postcss vulnerabilities of postcss
    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
    style-loader install size of style-loader vulnerabilities of fibers
    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

    Install

    npm i @leanup/[email protected]

    Version

    1.2.0-rc.79

    License

    Apache-2.0

    Unpacked Size

    149 kB

    Total Files

    73

    Homepage

    leanupjs.org

    Last publish

    Collaborators

    • avatar