feat: support "umd" format

Author: fi3ework

biome.json

@@ -27,7 +27,8 @@
   "javascript": {
     "formatter": {
       "quoteStyle": "single"
-    }
+    },
+    "jsxRuntime": "reactClassic"
   },
   "json": {
     "formatter": {

examples/react-component-bundle-false/rslib.config.ts

@@ -35,5 +35,12 @@ export default defineConfig({
       },
     },
   ],
-  plugins: [pluginReact(), pluginSass()],
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'classic',
+      },
+    }),
+    pluginSass(),
+  ],
 });

examples/react-component-bundle-false/src/components/CounterButton/index.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import styles from './index.module.scss';
+
 interface CounterButtonProps {
   onClick: () => void;
   label: string;

examples/react-component-bundle-false/src/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CounterButton } from './components/CounterButton/index';
 import { useCounter } from './useCounter';
 import './index.scss';

examples/react-component-bundle-false/tsconfig.json

@@ -7,7 +7,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["DOM", "ESNext"],
     "moduleResolution": "node",
     "resolveJsonModule": true,

examples/react-component-bundle/rslib.config.ts

@@ -33,5 +33,12 @@ export default defineConfig({
       },
     },
   ],
-  plugins: [pluginReact(), pluginSass()],
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'classic',
+      },
+    }),
+    pluginSass(),
+  ],
 });

examples/react-component-bundle/src/components/CounterButton/index.tsx

@@ -1,4 +1,6 @@
+import React from 'react';
 import styles from './index.module.scss';
+
 interface CounterButtonProps {
   onClick: () => void;
   label: string;

examples/react-component-bundle/src/index.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { CounterButton } from './components/CounterButton/index';
 import { useCounter } from './useCounter';
 import './index.scss';

examples/react-component-bundle/tsconfig.json

@@ -7,7 +7,7 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "react",
     "lib": ["DOM", "ESNext"],
     "moduleResolution": "node",
     "resolveJsonModule": true,

examples/react-component-umd/README.md

@@ -0,0 +1,3 @@
+# @examples/react-component
+
+This example demonstrates how to use Rslib to build a simple React component.

examples/react-component-umd/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@examples/react-component-umd",
+  "private": true,
+  "main": "./dist/umd/index.js",
+  "unpkg": "./dist/umd/index.js",
+  "scripts": {
+    "build": "rslib build"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-react": "^1.0.4",
+    "@rsbuild/plugin-sass": "^1.0.3",
+    "@rslib/core": "workspace:*",
+    "@types/react": "^18.3.11",
+    "react": "^18.3.1"
+  },
+  "peerDependencies": {
+    "react": "*"
+  }
+}

examples/react-component-umd/rslib.config.ts

@@ -0,0 +1,30 @@
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rslib/core';
+
+export default defineConfig({
+  lib: [
+    {
+      format: 'umd',
+      umdName: 'RslibUmdExample',
+      output: {
+        externals: {
+          react: 'React',
+        },
+        distPath: {
+          root: './dist/umd',
+          css: '.',
+          cssAsync: '.',
+        },
+      },
+    },
+  ],
+  plugins: [
+    pluginReact({
+      swcReactOptions: {
+        runtime: 'classic',
+      },
+    }),
+    pluginSass(),
+  ],
+});

examples/react-component-umd/src/components/CounterButton/index.module.scss

@@ -0,0 +1,3 @@
+.button {
+  background: yellow;
+}

examples/react-component-umd/src/components/CounterButton/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from './index.module.scss';
+
+interface CounterButtonProps {
+  onClick: () => void;
+  label: string;
+}
+
+export const CounterButton: React.FC<CounterButtonProps> = ({
+  onClick,
+  label,
+}) => (
+  <button type="button" className={styles.button} onClick={onClick}>
+    {label}
+  </button>
+);

examples/react-component-umd/src/env.d.ts

@@ -0,0 +1,4 @@
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

examples/react-component-umd/src/index.scss

@@ -0,0 +1,3 @@
+.counter-text {
+  font-size: 50px;
+}

examples/react-component-umd/src/index.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CounterButton } from './components/CounterButton/index';
+import { useCounter } from './useCounter';
+import './index.scss';
+
+export const Counter: React.FC = () => {
+  const { count, increment, decrement } = useCounter();
+
+  return (
+    <div>
+      <h2 className="counter-text">Counter: {count}</h2>
+      <CounterButton onClick={decrement} label="-" />
+      <CounterButton onClick={increment} label="+" />
+    </div>
+  );
+};

examples/react-component-umd/src/useCounter.tsx

@@ -0,0 +1,10 @@
+import { useState } from 'react';
+
+export const useCounter = (initialValue = 0) => {
+  const [count, setCount] = useState(initialValue);
+
+  const increment = () => setCount((prev) => prev + 1);
+  const decrement = () => setCount((prev) => prev - 1);
+
+  return { count, increment, decrement };
+};

examples/react-component-umd/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "baseUrl": ".",
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "lib": ["DOM", "ESNext"],
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "rootDir": "src",
+    "skipLibCheck": true,
+    "strict": true
+  },
+  "exclude": ["**/node_modules"],
+  "include": ["src"]
+}

packages/core/src/config.ts

@@ -449,7 +449,11 @@ export async function createConstantRsbuildConfig(): Promise<RsbuildConfig> {
   });
 }
 
-const composeFormatConfig = (format: Format): RsbuildConfig => {
+const composeFormatConfig = ({
+  format,
+  bundle = true,
+  umdName,
+}: { format: Format; bundle?: boolean; umdName?: string }): RsbuildConfig => {
   const jsParserOptions = {
     cjs: {
       requireResolve: false,
@@ -517,8 +521,14 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
           },
         },
       };
-    case 'umd':
-      return {
+    case 'umd': {
+      if (bundle === false) {
+        throw new Error(
+          'When "format" is set to "umd", "bundle" must not be set to "false", consider setting "bundle" to "true" or remove the field, it\'s default value is "true".',
+        );
+      }
+
+      const config: RsbuildConfig = {
         tools: {
           rspack: {
             module: {
@@ -529,13 +539,23 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
               },
             },
             output: {
-              library: {
-                type: 'umd',
-              },
+              asyncChunks: false,
+
+              library: umdName
+                ? {
+                    type: 'umd',
+                    name: umdName,
+                  }
+                : {
+                    type: 'umd',
+                  },
             },
           },
         },
       };
+
+      return config;
+    }
     default:
       throw new Error(`Unsupported format: ${format}`);
   }
@@ -785,7 +805,7 @@ const composeBundleConfig = (
   jsExtension: string,
   redirect: Redirect,
   cssModulesAuto: CssLoaderOptionsAuto,
-  bundle = true,
+  bundle: boolean,
 ): RsbuildConfig => {
   if (bundle) return {};
 
@@ -957,15 +977,21 @@ async function composeLibRsbuildConfig(config: LibConfig, configPath: string) {
   const {
     format,
     shims,
+    bundle = true,
     banner = {},
     footer = {},
     autoExtension = true,
     autoExternal = true,
     externalHelpers = false,
     redirect = {},
+    umdName,
   } = config;
   const shimsConfig = composeShimsConfig(format!, shims);
-  const formatConfig = composeFormatConfig(format!);
+  const formatConfig = composeFormatConfig({
+    format: format!,
+    bundle,
+    umdName,
+  });
   const externalHelpersConfig = composeExternalHelpersConfig(
     externalHelpers,
     pkgJson,
@@ -983,7 +1009,7 @@ async function composeLibRsbuildConfig(config: LibConfig, configPath: string) {
     jsExtension,
     redirect,
     cssModulesAuto,
-    config.bundle,
+    bundle,
   );
   const targetConfig = composeTargetConfig(config.output?.target);
   const syntaxConfig = composeSyntaxConfig(

packages/core/src/types/config/index.ts

@@ -80,6 +80,7 @@ export interface LibConfig extends RsbuildConfig {
   footer?: BannerAndFooter;
   shims?: Shims;
   dts?: Dts;
+  umdName?: string;
 }
 
 export interface RslibConfig extends RsbuildConfig {

packages/core/tests/__snapshots__/config.test.ts.snap

@@ -404,6 +404,7 @@ exports[`Should compose create Rsbuild config correctly > Merge Rsbuild config 1
               },
             },
             "output": {
+              "asyncChunks": false,
               "library": {
                 "type": "umd",
               },