From c997eef5e4ad77a42c92956f24fc9e4ee16aa340 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Heiner=20P=C3=B6pping?= Date: Mon, 11 Nov 2024 19:44:40 +0100 Subject: [PATCH] :memo: Update docs --- README.md | 28 ++++++++++++++---- website/docs/configuration/output.md | 13 +++++++-- website/docs/configuration/webpack.md | 41 ++++++++++++++------------- 3 files changed, 54 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 6660945..358820f 100644 --- a/README.md +++ b/README.md @@ -20,13 +20,13 @@ --- -**chayns-toolkit** contains pre-configured tools for the development, publishing -and quality assurance of your app. It was created to simplify the development -experience when working with [React](https://reactjs.org). +**chayns-toolkit** contains pre-configured tools for the development, publishing and quality +assurance of your app. It was created to simplify the development experience when working with +[React](https://reactjs.org). > This toolchain is specialized in developing apps and plugins for the -> [chayns®](https://chayns.org/) platform. If you want to develop a general -> purpose web app, take a look at [Next.js](https://nextjs.org/).
+> [chayns®](https://chayns.org/) platform. If you want to develop a general purpose web app, take a +> look at [Next.js](https://nextjs.org/).

@@ -45,6 +45,24 @@ to view the full documentation.
+## ❯ Migration v2 to v3 + +The chayns-toolkit moved RsBuild instead of webpack in this version. This means customizing the +config has changed significantly. + +- **output.apiVersion** has been removed +- **remoteEntry.js** has been renamed to **v2.remoteEntry.js** +- **output.serverSideRendering** has been added. This creates a build to use for modules in SSR. + - Creates two subdirectories in build directory for client- and server-build. +- dotenv-Files will be automatically loaded now depending on the current NODE_ENV/BUILD_ENV + - Only variables which start with PUBLIC\_ are passed to the javascript context. Other + variables are only available in the toolkit.config.js to customize the config +- Not defined environment-variables are not replaced by RsBuild which can cause errors (webpack + replaced them with empty string) +- **output.entryPoints** has been added and changes how to configure the entry points of the + application + [https://tobitsoftware.github.io/chayns-toolkit/docs/configuration/output](https://tobitsoftware.github.io/chayns-toolkit/docs/configuration/output) + ## ❯ Contributing Please see our diff --git a/website/docs/configuration/output.md b/website/docs/configuration/output.md index c32c912..01bf729 100644 --- a/website/docs/configuration/output.md +++ b/website/docs/configuration/output.md @@ -35,6 +35,13 @@ module.exports = { * @type {string} */ path: "//my-qa-server/example-project", + entryPoints: { + // key defines the name of the resulting html-file (here index.html) + index: { + pathIndex: "./src/index", // path to your entry point index.js/index.ts + pathHtml: "./src/index.html", // path to the html template + }, + }, }, // ... other options ... } @@ -42,6 +49,6 @@ module.exports = { ## Single File Builds -In single-file build mode, the compiler will inline all assets (CSS, images, -etc.) together with all JavaScript into a single bundle. This can be useful when -building smaller fragments of a UI, e.g. some kind of plugin. +In single-file build mode, the compiler will inline all assets (CSS, images, etc.) together with all +JavaScript into a single bundle. This can be useful when building smaller fragments of a UI, e.g. +some kind of plugin. diff --git a/website/docs/configuration/webpack.md b/website/docs/configuration/webpack.md index 883b20a..580a112 100644 --- a/website/docs/configuration/webpack.md +++ b/website/docs/configuration/webpack.md @@ -4,15 +4,15 @@ slug: webpack-customization sidebar_label: Webpack Customization --- -Even though the included webpack configuration will handle most cases, we also -provide the ability to modify it. +Even though the included webpack configuration will handle most cases, we also provide the ability +to modify it. -> Please note that the webpack configuration does not follow semantic versioning -> and can change with any release. +> Please note that the webpack configuration does not follow semantic versioning and can change with +> any release. -Use the `webpack` property of the configuration object to specify a function -that receives the default webpack configuration along with some other -information. This modifier function has to return the modified configuration. +Use the `webpack` property of the configuration object to specify a function that receives the +default webpack configuration along with some other information. This modifier function has to +return the modified configuration. ```js {5} title="/toolkit.config.js" module.exports = { @@ -25,9 +25,8 @@ module.exports = { } ``` -The modifier function receives two arguments. First is our default webpack -configuration, second is an object with additional information and utilities, -following this interface: +The modifier function receives two arguments. First is our default webpack configuration, second is +an object with additional information and utilities, following this interface: ```ts interface Options { @@ -42,16 +41,22 @@ interface Options { * production. */ dev: boolean + + /** + * Specifies if the current build is for client or server + */ + target: "client" | "server" } ``` -> If you find yourself modifying the webpack configuration often for a feature -> that you think belongs in our default config, please -> [open an issue](https://github.com/TobitSoftware/create-chayns-app/issues) to -> discuss it. +> If you find yourself modifying the webpack configuration often for a feature that you think +> belongs in our default config, please +> [open an issue](https://github.com/TobitSoftware/create-chayns-app/issues) to discuss it. ## Examples +⚠️ Below examples are not updated for v3 yet. + ### Adding a Babel Plugin This example shows how to add @@ -62,18 +67,14 @@ to `babel-loader`: module.exports = { webpack(config) { const babelRule = config.module.rules.find( - (rule) => - rule.use.loader && rule.use.loader.includes("babel-loader") + (rule) => rule.use.loader && rule.use.loader.includes("babel-loader") ) if (!babelRule) return config const babelOptions = babelRule.use.options - const pipelinePlugin = [ - "@babel/plugin-proposal-pipeline-operator", - { proposal: "smart" }, - ] + const pipelinePlugin = ["@babel/plugin-proposal-pipeline-operator", { proposal: "smart" }] if (Array.isArray(babelOptions.plugins)) { babelOptions.plugins.push(pipelinePlugin)