leanûp (v1.3)

Migration

The @leanup stack is maximally decoupled, so we can proceed quickly and with only tiny changes.

Migrate from 1.1 to 1.2

  1. ✋ The inline css inside the main.js will extract in seperate artifact file (main.css). (CSP)
  2. ✋ Add copy public folder to dist (copy-webpack-plugin)
  3. ✋ add "type": "module" in the package.json of your own npm modules (required by mocha v9)
  4. ✋ add cjs, esm and umd variants in @leanup/lib and @leanup/form
  5. ✨ add a new framework SolidJS option (@leanup/cli-solid and @leanup/stack-solid)
  6. ✨ Aurelia support is back (@leanup/cli-aurelia and @leanup/stack-aurelia)

Changes

  1. ⛔ autoprefixer dependency was removed from stack, it is to handle in project scope
  2. ⛔ cssnano dependency was removed from default template, it is to handle in project scope
  3. ⛔ postcss.config.js file was removed from stack, it is to handle in project scope
  4. ⛔ InfernoComponent, PreactComponent and ReactComponent are removed from @leanup/lib. use the default Component classes from Inferno, Preact or React
  5. ⛔ you should replace all import path like from '@leanup/lib/...'; to from '@leanup/lib'; and from '@leanup/form/...'; to from '@leanup/form';

    Regular expression: /(from ('|")@leanup\/(lib|form))[^'|"]+/g
    Replacement: $1

Migrate

Follow the steps below to update the stack.

Fetch changes 

> git checkout -b chore/update-leanup-stack-to-v1.2
> npm i -D @leanup/cli@^1.2 @leanup/cli-<framework>@^1.2
> npx <framework> create --only-config --no-install --overwrite
1
2
3

Available for 12 Frameworks: angular, angularjs, aurelia, inferno, lit-element, preact, react, solid, svelte, vanilla, vue and vue3

Clearing changes

After the changes have been fetched, the changed files must be reviewed. Some changes can then be corrected again.

Install dependencies

Now execute npm install.

Migrate from 1.0 to 1.1

Changes

  1. ✨ Refactoring the @leanup module separation
  2. ✨ Maximal Major-Upgrade from all dependencies
  3. ✨ Remove some not really important dependencies (e.g. copy-webpack-plugin, html-webpack-plugin)
  4. ✨ Global CLI installation
  5. ✨ Webpack 5
  6. ✨ ESBuild
  7. ✨ Much faster stack installation
  8. ✨ Much faster script execution (ESBuild)
  9. ⚽ Vite 2 (experimental)
  10. ⚽ Snowpack 3 (experimental)
  11. ✋ Builds does only contains the SourceCode-Artifacts (no frame material, like public-folder and their assets)
  12. ✋ The bundled artifact name (app.js) was change to main.js.
  13. ✋ The separate css artifact file (app.css) is now included inside the main.js.
  14. ✋ The script tag in the index.html must now be inserted yourself.
  15. ⛔ We can not longer be supported Aurelia as long as the ticket #39 is not resolved.

Migrate

Follow the steps below to update the stack.

Fetch changes 

> git checkout -b chore/update-leanup-stack-to-v1.1
> npm i -D @leanup/cli@^1.1 @leanup/cli-<framework>@^1.1
> npx <framework> create --only-config --overwrite --no-install
1
2
3

Available for 10 Frameworks: angular, angularjs, aurelia*, inferno, lit-element, preact, react, svelte, vanilla, vue and vue3

* Aurelia is not Webpack v5 compatible.

Clearing changes

After the changes have been fetched, the changed files must be reviewed. Some changes can then be corrected again.

Install dependencies

Now execute npm install.

Edit you index.html

Add the following script tag in you index.html body.


 
 



    ...
    <script nomodule src="main.js"></script>
    <script type="module" src="main.js"></script>
  <body>
</html>
1
2
3
4
5

If you have unsafe-eval with @babel/runtime

If you have CSP problems with unsafe-eval by using @babel/runtime. You can configure this as follows:

  1. Extends the webpack.config.js like this
module.exports = (...args) => {
  // Here using the example for react
  const config = require('@leanup/stack-react/webpack.config')(...args);

  config.module.rules.unshift({
    test: /runtime.js$/,
    loader: 'string-replace-loader',
    options: {
      search: /[^\w]Function\(/,
      replace: '// Function(',
    },
  });

  return config;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

If you need the frame material

If you need the frame material from the public folder in your dist folder. You can configure this as follows:

  1. Install npm i -D copy-webpack-plugin
  2. Extends the webpack.config.js like this
module.exports = (...args) => {
  // Here using the example for react
  const config = require('@leanup/stack-react/webpack.config')(...args);

  const CopyPlugin = require('copy-webpack-plugin');
  if (args[0].WEBPACK_BUILD) {
    config.plugins.push(
      new CopyPlugin({
        patterns: [
          {
            from: 'public',
          },
        ],
      })
    );
  }

  return config;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19