From eb7df4fe381baa0f11421b6d54fe5be477ee0697 Mon Sep 17 00:00:00 2001 From: "yannik.peschke" Date: Wed, 6 Nov 2024 13:51:52 +0100 Subject: [PATCH 1/8] docs/add-error-catalog-entries-for-mf-types * Add documentation for the migration process from Modern.js module towards Rslib --- .../en/guide/migration/modernjs-module.mdx | 166 ++++++++++++++++++ 1 file changed, 166 insertions(+) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index e435abd7f..fcc21909a 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -1 +1,167 @@ # Modern.js Module + +The migration path from `Modern.js Module` to `Rslib` is straightforward. The reason for it is the same underlying `Rsbuild` configuration. + +### Adapt package.json + +`Rslib` has a minimal dependency footprint. For the basic functionality you only need the package `@rslib/core`. Let's update your `package.json` file. + +- Remove the fields `main`, `lint-staged`, `simple-git-hooks`, `sideEffects` and `publishConfig` +- Change the `types` field from `./dist/types/index.d.ts` to `./dist/index.d.ts` +- Change the `module` field from `./dist/es/index.js` to `./dist/index.js` +- Remove the scripts fields `prepare`, `build:watch`, `reset`, `change`, `bump`, `pre`, `change-status`, `gen-release-note`, `release`, `new`, `upgrade` +- Change the script `build` from `modern build` to `rslib build` +- Change the script `lint` name to `check` and keep the value +- Add a new script `format` with the value `biome format --write` +- Change the script `dev` from `modern dev` to `rslib build --watch` +- Add the script `test` with the value `vitest run` +- Add the field `exports` (object) + - Add the field `"."` (object) + - Add the fields `"types": "./dist/index.d.ts"` and `"import": "./dist/index.js"` +- Add the field `files` with the value `["dist"]` +- Depending on your configuration and use-case the `devDependencies` can vary + - It is important to replace `"@modern-js/module-tools"` with `"@rslib/core"` + - We do not need `rimraf`, `lint-staged` and `simple-git-hooks` anymore for starters +- Copy over your required `dependencies` and `peerDependencies` if needed + +Your `package.json` should look something like this: + +```json title="package.json" +{ + "name": "rslib", + "version": "1.0.0", + "type": "module", + "exports": { + ".": { + "types": "./dist/index.d.ts", + "import": "./dist/index.js" + } + }, + "module": "./dist/index.js", + "types": "./dist/index.d.ts", + "files": ["dist"], + "scripts": { + "build": "rslib build", + "check": "biome check --write", + "dev": "rslib build --watch", + "format": "biome format --write", + "test": "vitest run" + }, + "devDependencies": { + "@biomejs/biome": "^1.9.3", + "@rslib/core": "^0.0.16", + "typescript": "^5.6.3" + }, + "peerDependencies": {}, + "dependencies": {} +} +``` + +### Adapt bundler config + +Now we have a clean slate to work with. We will continue with the `Rslib` configuration. It follows the same pattern as all `Rs*` projects. Since this step is very unique for every environment, we will only touch the basics here: +Replace your `modern.config.ts` with a `rslib.config.ts`: + +```js title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + source: { + entry: { + index: ['./src/**'], + }, + }, + lib: [ + { + bundle: false, + dts: true, + format: 'esm', + }, + ], +}); +``` + +### Typescript + +If you use Typescript in your `Modern.js Module`, add the following changes: + +```js title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; + +export default defineConfig({ + //... + lib: [ + { + //... + dts: true, + }, + ], +}); +``` + +### React + +If you use React in your `Modern.js Module`, add the following changes: + +```js title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +// Quick tip: You can use all Rsbuild plugins here since they are compatible with Rslib +import { pluginReact } from '@rsbuild/plugin-react'; + +export default defineConfig({ + //... + plugins: [pluginReact()], +}); +``` + +In addition, you have to install the `@rsbuild/plugin-react` package as devDependency + +### Sass + +If you use Sass in your `Modern.js Module`, add the following changes: + +```js title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +// Quick tip: You can use all Rsbuild plugins here since they are compatible with Rslib +import { pluginSass } from '@rsbuild/plugin-sass'; + +export default defineConfig({ + //... + plugins: [pluginSass()], +}); +``` + +In addition, you have to install the `@rsbuild/plugin-sass` package as devDependency. + +If you run Typescript together with Sass, you might run into DTS generation errors. This can be resolved by adding a `global.d.ts` file in your `/src` directory. + +```ts title="global.d.ts" +declare module '*.scss' { + const content: { [className: string]: string }; + export default content; +} +``` + +### css-modules + +If you use css-modules in your `Modern.js Module`, add the following changes: + +```js title="rslib.config.ts" +import { defineConfig } from '@rslib/core'; +import { pluginSass } from '@rsbuild/plugin-sass'; + +export default defineConfig({ + lib: [ + { + //... + output: { + cssModules: { + // the css-modules options are 1:1 the same as in the official "css-modules" package + localIdentName: '[local]--[hash:base64:5]', + }, + }, + }, + ], + plugins: [pluginSass()], +}); +``` From fab7c0f611440b03d950cd960159d64b83570e1c Mon Sep 17 00:00:00 2001 From: "yannik.peschke" Date: Wed, 6 Nov 2024 13:52:53 +0100 Subject: [PATCH 2/8] docs/add-error-catalog-entries-for-mf-types * Remove unneeded commas From f272a4017bac38601839ed2adc2a089dbb5265b9 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:22 +0800 Subject: [PATCH 3/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index fcc21909a..354d32611 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -2,7 +2,7 @@ The migration path from `Modern.js Module` to `Rslib` is straightforward. The reason for it is the same underlying `Rsbuild` configuration. -### Adapt package.json +## Adapt package.json `Rslib` has a minimal dependency footprint. For the basic functionality you only need the package `@rslib/core`. Let's update your `package.json` file. From 0edf85c5f0ca45ff4cefe37dbe38df644dd2fcaf Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:27 +0800 Subject: [PATCH 4/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index 354d32611..fc92afb3b 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -57,7 +57,7 @@ Your `package.json` should look something like this: } ``` -### Adapt bundler config +## Adapt bundler config Now we have a clean slate to work with. We will continue with the `Rslib` configuration. It follows the same pattern as all `Rs*` projects. Since this step is very unique for every environment, we will only touch the basics here: Replace your `modern.config.ts` with a `rslib.config.ts`: From c99cbcb851e1ee7400498ba901d52ef69fe14c32 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:33 +0800 Subject: [PATCH 5/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index fc92afb3b..1b79e3397 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -81,7 +81,7 @@ export default defineConfig({ }); ``` -### Typescript +## Typescript If you use Typescript in your `Modern.js Module`, add the following changes: From c6d9b6c93474393620d9a9b5e1ee6786b300c99d Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:38 +0800 Subject: [PATCH 6/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index 1b79e3397..343542fb3 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -99,7 +99,7 @@ export default defineConfig({ }); ``` -### React +## React If you use React in your `Modern.js Module`, add the following changes: From d6a7e097753dd212960f93987389acf37464d32d Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:42 +0800 Subject: [PATCH 7/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index 343542fb3..9188fbe8e 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -116,7 +116,7 @@ export default defineConfig({ In addition, you have to install the `@rsbuild/plugin-react` package as devDependency -### Sass +## Sass If you use Sass in your `Modern.js Module`, add the following changes: From 8c23df13172f57d623f9f31e5771575ba1c23599 Mon Sep 17 00:00:00 2001 From: Timeless0911 <50201324+Timeless0911@users.noreply.github.com> Date: Thu, 7 Nov 2024 11:45:47 +0800 Subject: [PATCH 8/8] Update website/docs/en/guide/migration/modernjs-module.mdx --- website/docs/en/guide/migration/modernjs-module.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/docs/en/guide/migration/modernjs-module.mdx b/website/docs/en/guide/migration/modernjs-module.mdx index 9188fbe8e..67dd58fc6 100644 --- a/website/docs/en/guide/migration/modernjs-module.mdx +++ b/website/docs/en/guide/migration/modernjs-module.mdx @@ -142,7 +142,7 @@ declare module '*.scss' { } ``` -### css-modules +## css-modules If you use css-modules in your `Modern.js Module`, add the following changes: