Migration
The @leanup stack
is maximally decoupled, so we can proceed quickly and with only tiny changes.
Migrate from 1.1 to 1.2
- ✋ The inline css inside the
main.js
will extract in seperate artifact file (main.css
). (CSP) - ✋ Add copy public folder to dist (
copy-webpack-plugin
) - ✋ add
"type": "module"
in thepackage.json
of your own npm modules (required bymocha
v9) - ✋ add
cjs
,esm
andumd
variants in@leanup/lib
and@leanup/form
- ✨ add a new framework SolidJS option (
@leanup/cli-solid
and@leanup/stack-solid
) - ✨ Aurelia support is back (
@leanup/cli-aurelia
and@leanup/stack-aurelia
)
Changes
- ⛔
autoprefixer
dependency was removed from stack, it is to handle in project scope - ⛔
cssnano
dependency was removed from default template, it is to handle in project scope - ⛔
postcss.config.js
file was removed from stack, it is to handle in project scope - ⛔
InfernoComponent
,PreactComponent
andReactComponent
are removed from@leanup/lib
. use the defaultComponent
classes fromInferno
,Preact
orReact
- ⛔ you should replace all import path like
from '@leanup/lib/...';
tofrom '@leanup/lib';
andfrom '@leanup/form/...';
tofrom '@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
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
- ✨ Refactoring the @leanup module separation
- ✨ Maximal Major-Upgrade from all dependencies
- ✨ Remove some not really important dependencies (e.g.
copy-webpack-plugin
,html-webpack-plugin
) - ✨ Global CLI installation
- ✨ Webpack 5
- ✨ ESBuild
- ✨ Much faster stack installation
- ✨ Much faster script execution (ESBuild)
- ⚽ Vite 2 (experimental)
- ⚽ Snowpack 3 (experimental)
- ✋ Builds does only contains the SourceCode-Artifacts (no frame material, like public-folder and their assets)
- ✋ The bundled artifact name (
app.js
) was change tomain.js
. - ✋ The separate css artifact file (
app.css
) is now included inside themain.js
. - ✋ The script tag in the
index.html
must now be inserted yourself. - ⛔ 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
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>
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:
- 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;
};
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:
- Install
npm i -D copy-webpack-plugin
- 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;
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19