Skip to content
Merged
Show file tree
Hide file tree
Changes from 6 commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,5 +53,11 @@
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"typescript.tsdk": "node_modules/typescript/lib"
"typescript.tsdk": "node_modules/typescript/lib",
"json.schemas": [
{
"fileMatch": ["**/_meta.json"],
"url": "./website/node_modules/rspress/meta-json-schema.json"
}
]
}
724 changes: 453 additions & 271 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

17 changes: 10 additions & 7 deletions website/docs/en/config/lib/dts.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,25 @@ Configure the generation of the TypeScript declaration files.

Declaration files generation is an optional feature, you can set `dts: true` to enable [bundleless declaration files](/guide/advanced/dts#bundleless-declaration-files) generation.

```ts title="rslib.config.ts" {5}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
dts: true,
dts: true, // [!code highlight]
},
],
};
```

If you want to disable declaration files generation, you can set `dts: false` or do not specify the `dts` option.

```ts title="rslib.config.ts" {5}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
dts: false,
dts: false, // [!code highlight]
},
],
};
Expand Down Expand Up @@ -73,11 +73,12 @@ import { PackageManagerTabs } from '@theme';

2. Set `dts.bundle` to `true`.

```ts title="rslib.config.ts" {5-7}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
// [!code highlight:3]
dts: {
bundle: true,
},
Expand Down Expand Up @@ -106,11 +107,12 @@ The default value follows the priority below:

#### Example

```ts title="rslib.config.ts" {5-7}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
// [!code highlight:3]
dts: {
distPath: './dist-types',
},
Expand Down Expand Up @@ -143,11 +145,12 @@ By default, type errors will cause the build to fail.

When `abortOnError` is set to `false` like below, the build will still succeed even if there are type issues in the code.

```ts title="rslib.config.ts" {5-7}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'esm',
// [!code highlight:3]
dts: {
abortOnError: false,
},
Expand Down
14 changes: 8 additions & 6 deletions website/docs/en/config/lib/external-helpers.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -29,20 +29,21 @@ export default class FOO {

When `externalHelpers` is disabled, the output JavaScript will inline helper functions.

```ts title="rslib.config.ts" {5}
```ts title="rslib.config.ts"
export default {
lib: [
{
syntax: 'es5',
externalHelpers: false,
externalHelpers: false, // [!code highlight]
},
],
};
```

Below is the output JavaScript file, the highlighted code is the inlined helper functions:

```js title="index.js" {1-18}
```js title="index.js"
// [!code highlight:18]
function _class_call_check(instance, Constructor) {
if (!(instance instanceof Constructor))
throw new TypeError('Cannot call a class as a function');
Expand Down Expand Up @@ -79,20 +80,21 @@ export { src_FOO as default };

When `externalHelpers` is enabled, the output JavaScript will import helper functions from the external module `@swc/helpers`.

```ts title="rslib.config.ts" {5}
```ts title="rslib.config.ts"
export default {
lib: [
{
syntax: 'es5',
externalHelpers: true,
externalHelpers: true, // [!code highlight]
},
],
};
```

Below is the output JavaScript file, the highlighted code is importing helper functions:

```js title="index.js" {1-2}
```js title="index.js"
// [!code highlight:2]
import * as __WEBPACK_EXTERNAL_MODULE__swc_helpers_class_call_check__ from '@swc/helpers/_/_class_call_check';
import * as __WEBPACK_EXTERNAL_MODULE__swc_helpers_create_class__ from '@swc/helpers/_/_create_class';
var src_FOO = /*#__PURE__*/ (function () {
Expand Down
4 changes: 2 additions & 2 deletions website/docs/en/config/lib/umd-name.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@ The module name of the UMD bundle must not conflict with the global variable nam

The UMD bundle will be mounted to `global.MyLibrary`.

```ts title="rslib.config.ts" {5}
```ts title="rslib.config.ts"
export default {
lib: [
{
format: 'umd',
umdName: 'MyLibrary',
umdName: 'MyLibrary', // [!code highlight]
},
],
};
Expand Down
5 changes: 3 additions & 2 deletions website/docs/en/guide/advanced/json-files.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -243,17 +243,18 @@ If you want JSON / YAML / TOML files to be output to the distribution directory

For example, the following configuration will output all JSON files in the `src` directory as-is:

```ts title="rslib.config.ts" {7,11-12}
```ts title="rslib.config.ts"
export default defineConfig({
lib: [
{
bundle: false,
source: {
entry: {
index: ['./src/**', '!./src/**/*.json'],
index: ['./src/**', '!./src/**/*.json'], // [!code highlight]
},
},
output: {
// [!code highlight:2]
copy: [{ from: './**/*.json', context: './src' }],
externals: [/.*\.json$/],
},
Expand Down
12 changes: 8 additions & 4 deletions website/docs/en/guide/advanced/module-federation.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -30,14 +30,15 @@ import { PackageManagerTabs } from '@theme';

Then register the plugin in the `rslib.config.ts` file:

```ts title='rslib.config.ts' {8-43}
```ts title='rslib.config.ts'
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rslib/core';

export default defineConfig({
lib: [
// ... other format
// [!code highlight:37]
{
format: 'mf',
output: {
Expand Down Expand Up @@ -117,14 +118,15 @@ with Hot Module Replacement (HMR).
Set up the host app to consume the Rslib Module Federation library. Check out the [@module-federation/rsbuild-plugin
](https://www.npmjs.com/package/@module-federation/rsbuild-plugin) for more information.

```ts title="rsbuild.config.ts" {8-24}
```ts title="rsbuild.config.ts"
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';

export default defineConfig({
plugins: [
pluginReact(),
// [!code highlight:17]
pluginModuleFederation({
name: 'rsbuild_host',
remotes: {
Expand Down Expand Up @@ -181,7 +183,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook

2. Then set up the Storybook configuration file `.storybook/main.ts`, specify the stories and addons, and set the framework with corresponding framework integration.

```ts title=".storybook/main.ts" {18-38}
```ts title=".storybook/main.ts"
import { dirname, join } from 'node:path';
import type { StorybookConfig } from 'storybook-react-rsbuild';

Expand All @@ -199,6 +201,7 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook
options: {},
},
addons: [
// [!code highlight:21]
{
name: getAbsolutePath('storybook-addon-rslib'),
options: {
Expand Down Expand Up @@ -230,8 +233,9 @@ First, set up Storybook with the Rslib project. You can refer to the [Storybook

Import components from remote module.

```ts title="stories/index.stories.tsx" {2-3}
```ts title="stories/index.stories.tsx"
import React from 'react';
// [!code highlight:2]
// Load your remote module here, Storybook will act as the host app.
import { Counter } from 'rslib-module';

Expand Down
5 changes: 3 additions & 2 deletions website/docs/en/guide/advanced/output-compatibility.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ And install [core-js-pure](https://www.npmjs.com/package/core-js-pure) as the ru

Configure the Babel plugin with polyfill options, set the [targets](https://babeljs.io/docs/options#targets) field to specify the target browser version.

```ts title="rslib.config.ts" {1,11-24}
import { pluginBabel } from '@rsbuild/plugin-babel';
```ts title="rslib.config.ts"
import { pluginBabel } from '@rsbuild/plugin-babel'; // [!code highlight]
import { defineConfig } from '@rslib/core';

export default defineConfig({
Expand All @@ -46,6 +46,7 @@ export default defineConfig({
},
],
plugins: [
// [!code highlight:14]
pluginBabel({
babelLoaderOptions: {
plugins: [
Expand Down
5 changes: 3 additions & 2 deletions website/docs/en/guide/basic/output-format.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,14 @@ The following Rslib config is an example to build a UMD library.
- `output.externals.react: 'React'`: specify the external dependency `react` could be accessed by `window.React`.
- `runtime: 'classic'`: use the classic runtime of React to support applications that using React version under 18.

```ts title="rslib.config.ts" {7-12,22}
```ts title="rslib.config.ts"
import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rslib/core';

export default defineConfig({
lib: [
{
// [!code highlight:6]
format: 'umd',
umdName: 'RslibUmdExample',
output: {
Expand All @@ -122,7 +123,7 @@ export default defineConfig({
plugins: [
pluginReact({
swcReactOptions: {
runtime: 'classic',
runtime: 'classic', // [!code highlight]
},
}),
],
Expand Down
11 changes: 7 additions & 4 deletions website/docs/en/guide/solution/react.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,15 @@ To compile React (JSX and TSX), you need to register the Rsbuild [React Plugin](

For example, register in `rslib.config.ts`:

```ts title="rslib.config.ts" {2,8-11}
```ts title="rslib.config.ts"
import { defineConfig } from '@rslib/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginReact } from '@rsbuild/plugin-react'; // [!code highlight]

export default defineConfig({
lib: [
// ...
],
// [!code highlight:4]
output: {
target: 'web',
},
Expand All @@ -53,7 +54,7 @@ By default, Rsbuild uses the new JSX transform, which is `runtime: 'automatic'`.

To change the JSX transform, you can pass the [swcReactOptions](https://rsbuild.dev/plugins/list/plugin-react#swcreactoptionsruntime) option to the React plugin. For example, to use the classic runtime:

```ts title="rslib.config.ts" {13-15}
```ts title="rslib.config.ts"
import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rslib/core';

Expand All @@ -66,6 +67,7 @@ export default defineConfig({
},
plugins: [
pluginReact({
// [!code highlight:3]
swcReactOptions: {
runtime: 'classic',
},
Expand All @@ -83,7 +85,7 @@ When `runtime` is set to `'automatic'`, you can specify the import path of the J

For example, when using [Emotion](https://emotion.sh/), you can set `importSource` to `'@emotion/react'`:

```ts title="rslib.config.ts" {13-15}
```ts title="rslib.config.ts"
import { pluginReact } from '@rsbuild/plugin-react';
import { defineConfig } from '@rslib/core';

Expand All @@ -96,6 +98,7 @@ export default defineConfig({
},
plugins: [
pluginReact({
// [!code highlight:3]
swcReactOptions: {
importSource: '@emotion/react',
},
Expand Down
Loading
Loading