feat: support "umd" format

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-umd
+
+This example demonstrates how to use Rslib to build a simple React component with umd format output.

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,28 @@
+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',
+        },
+      },
+    },
+  ],
+  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

@@ -33,6 +33,7 @@ import type {
   BannerAndFooter,
   Format,
   LibConfig,
+  LibOnlyConfig,
   PkgJson,
   Redirect,
   RsbuildConfigOutputTarget,
@@ -449,7 +450,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 +522,14 @@ const composeFormatConfig = (format: Format): RsbuildConfig => {
           },
         },
       };
-    case 'umd':
-      return {
+    case 'umd': {
+      if (bundle === false) {
+        throw new Error(
+          'When using "umd" format, "bundle" must be set to "true". Since the default value for "bundle" is "true", so you can either explicitly set it to "true" or remove the field entirely.',
+        );
+      }
+
+      const config: RsbuildConfig = {
         tools: {
           rspack: {
             module: {
@@ -529,13 +540,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 +806,7 @@ const composeBundleConfig = (
   jsExtension: string,
   redirect: Redirect,
   cssModulesAuto: CssLoaderOptionsAuto,
-  bundle = true,
+  bundle: boolean,
 ): RsbuildConfig => {
   if (bundle) return {};
 
@@ -957,15 +978,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 +1010,7 @@ async function composeLibRsbuildConfig(config: LibConfig, configPath: string) {
     jsExtension,
     redirect,
     cssModulesAuto,
-    config.bundle,
+    bundle,
   );
   const targetConfig = composeTargetConfig(config.output?.target);
   const syntaxConfig = composeSyntaxConfig(
@@ -1086,19 +1113,20 @@ export async function composeCreateRsbuildConfig(
       config: mergeRsbuildConfig(
         constantRsbuildConfig,
         libRsbuildConfig,
-        omit(userConfig, [
-          'bundle',
-          'format',
-          'autoExtension',
-          'autoExternal',
-          'redirect',
-          'syntax',
-          'externalHelpers',
-          'banner',
-          'footer',
-          'dts',
-          'shims',
-        ]),
+        omit<LibConfig, keyof LibOnlyConfig>(userConfig, {
+          bundle: true,
+          format: true,
+          autoExtension: true,
+          autoExternal: true,
+          redirect: true,
+          syntax: true,
+          externalHelpers: true,
+          banner: true,
+          footer: true,
+          dts: true,
+          shims: true,
+          umdName: true,
+        }),
       ),
     };
   });

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

@@ -80,8 +80,11 @@ export interface LibConfig extends RsbuildConfig {
   footer?: BannerAndFooter;
   shims?: Shims;
   dts?: Dts;
+  umdName?: string;
 }
 
+export type LibOnlyConfig = Omit<LibConfig, keyof RsbuildConfig>;
+
 export interface RslibConfig extends RsbuildConfig {
   lib: LibConfig[];
 }

packages/core/src/utils/helper.ts

@@ -147,16 +147,17 @@ export function pick<T, U extends keyof T>(
 
 export function omit<T extends object, U extends keyof T>(
   obj: T,
-  keys: ReadonlyArray<U>,
-): Omit<T, U> {
+  keysObj: Record<U, boolean>,
+): Omit<T, keyof U> {
+  type K = keyof U;
   return Object.keys(obj).reduce(
     (ret, key) => {
-      if (!keys.includes(key as U)) {
-        ret[key as keyof Omit<T, U>] = obj[key as keyof Omit<T, U>];
+      if (keysObj[key as U] !== true) {
+        ret[key as keyof Omit<T, K>] = obj[key as keyof Omit<T, K>];
       }
       return ret;
     },
-    {} as Omit<T, U>,
+    {} as Omit<T, K>,
   );
 }
 

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",
               },