feat: introduce external-bundle-rsbuild-plugin

.changeset/plugin-externals-rsbuild.md

@@ -0,0 +1,26 @@
+---
+'@lynx-js/external-bundle-rsbuild-plugin': patch
+---
+
+Introduce `@lynx-js/external-bundle-rsbuild-plugin`.
+
+```ts
+// lynx.config.ts
+import { pluginExternalBundle } from '@lynx-js/external-bundle-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+
+export default {
+  plugins: [
+    pluginReactLynx(),
+    pluginExternalBundle({
+      externals: {
+        lodash: {
+          url: 'http://lodash.lynx.bundle',
+          background: { sectionPath: 'background' },
+          mainThread: { sectionPath: 'mainThread' },
+        },
+      },
+    }),
+  ],
+};
+```

.changeset/sixty-emus-call.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react-rsbuild-plugin": patch
+---
+
+expose LAYERS via `api.expose` for other rsbuild plugins.

examples/react-externals/lynx.config.js

@@ -1,87 +1,12 @@
-import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugin';
+import { pluginExternalBundle } from '@lynx-js/external-bundle-rsbuild-plugin';
 import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
-import { LAYERS, pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 import { defineConfig } from '@lynx-js/rspeedy';
 
 const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
 const EXTERNAL_BUNDLE_PREFIX = process.env['EXTERNAL_BUNDLE_PREFIX'] || '';
 
 export default defineConfig({
-  tools: {
-    rspack: {
-      plugins: [
-        new ExternalsLoadingPlugin({
-          mainThreadLayer: LAYERS.MAIN_THREAD,
-          backgroundLayer: LAYERS.BACKGROUND,
-          externals: {
-            '@lynx-js/react': {
-              libraryName: ['ReactLynx', 'React'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/internal': {
-              libraryName: ['ReactLynx', 'ReactInternal'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/experimental/lazy/import': {
-              libraryName: ['ReactLynx', 'ReactLazyImport'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/legacy-react-runtime': {
-              libraryName: ['ReactLynx', 'ReactLegacyRuntime'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/runtime-components': {
-              libraryName: ['ReactLynx', 'ReactComponents'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/worklet-runtime/bindings': {
-              libraryName: ['ReactLynx', 'ReactWorkletRuntime'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            '@lynx-js/react/debug': {
-              libraryName: ['ReactLynx', 'ReactDebug'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            preact: {
-              libraryName: ['ReactLynx', 'Preact'],
-              url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
-              background: { sectionPath: 'ReactLynx' },
-              mainThread: { sectionPath: 'ReactLynx__main-thread' },
-              async: false,
-            },
-            './App.js': {
-              libraryName: 'CompLib',
-              url: `${EXTERNAL_BUNDLE_PREFIX}/comp-lib.lynx.bundle`,
-              background: { sectionPath: 'CompLib' },
-              mainThread: { sectionPath: 'CompLib__main-thread' },
-              async: true,
-            },
-          },
-        }),
-      ],
-    },
-  },
   plugins: [
     pluginReactLynx(),
     pluginQRCode({
@@ -90,6 +15,73 @@ export default defineConfig({
         return `${url}?fullscreen=true`;
       },
     }),
+    pluginExternalBundle({
+      externals: {
+        '@lynx-js/react': {
+          libraryName: ['ReactLynx', 'React'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/internal': {
+          libraryName: ['ReactLynx', 'ReactInternal'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/experimental/lazy/import': {
+          libraryName: ['ReactLynx', 'ReactLazyImport'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/legacy-react-runtime': {
+          libraryName: ['ReactLynx', 'ReactLegacyRuntime'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/runtime-components': {
+          libraryName: ['ReactLynx', 'ReactComponents'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/worklet-runtime/bindings': {
+          libraryName: ['ReactLynx', 'ReactWorkletRuntime'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        '@lynx-js/react/debug': {
+          libraryName: ['ReactLynx', 'ReactDebug'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        preact: {
+          libraryName: ['ReactLynx', 'Preact'],
+          url: `${EXTERNAL_BUNDLE_PREFIX}/react.lynx.bundle`,
+          background: { sectionPath: 'ReactLynx' },
+          mainThread: { sectionPath: 'ReactLynx__main-thread' },
+          async: false,
+        },
+        './App.js': {
+          libraryName: 'CompLib',
+          url: `${EXTERNAL_BUNDLE_PREFIX}/comp-lib.lynx.bundle`,
+          background: { sectionPath: 'CompLib' },
+          mainThread: { sectionPath: 'CompLib__main-thread' },
+          async: true,
+        },
+      },
+    }),
   ],
   environments: {
     web: {},

examples/react-externals/package.json

@@ -13,7 +13,7 @@
     "@lynx-js/react": "workspace:*"
   },
   "devDependencies": {
-    "@lynx-js/externals-loading-webpack-plugin": "workspace:*",
+    "@lynx-js/external-bundle-rsbuild-plugin": "workspace:*",
     "@lynx-js/lynx-bundle-rslib-config": "workspace:*",
     "@lynx-js/preact-devtools": "^5.0.1-cf9aef5",
     "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",

packages/rspeedy/lynx-bundle-rslib-config/src/index.ts

@@ -6,44 +6,6 @@
  * @packageDocumentation
  *
  * `@lynx-js/lynx-bundle-rslib-config` is the package that provides the configurations for bundling Lynx bundle with {@link https://rslib.rs/ | Rslib}.
- *
- * 1. Install the package:
- *
- * ```bash
- * pnpm add @lynx-js/lynx-bundle-rslib-config @rslib/core -D
- * ```
- *
- * 2. Add the following code to `rslib.config.ts`:
- *
- * ```ts
- * import { defineExternalBundleRslibConfig } from '@lynx-js/lynx-bundle-rslib-config'
- *
- * export default defineExternalBundleRslibConfig({
- *   id: 'my-utils',
- *   source: {
- *     entry: {
- *       utils: './src/utils.ts'
- *     }
- *   }
- * })
- * ```
- *
- * 3. Run the command `pnpm rslib build` and you will get the `my-utils.lynx.bundle` in the `dist` directory. You can upload the bundle to CDN or server.
- *
- * 4. Finally, you can fetch and load the external bundle through:
- *
- * ```js
- * const bundleUrl = 'http://cdn.com/my-utils.lynx.bundle'
- * lynx.fetchBundle(bundleUrl).wait(3) // timeout is 3s
- *
- * if (__BACKGROUND__) {
- *   const utils = lynx.loadScript('utils', { bundleName: bundleUrl })
- * } else {
- *   const utils = lynx.loadScript('utils__main-thread', { bundleName: bundleUrl })
- * }
- * ```
- *
- * For more detail, please refer to the {@link defineExternalBundleRslibConfig}.
  */
 export {
   defineExternalBundleRslibConfig,

packages/rspeedy/plugin-external-bundle/CHANGELOG.md

@@ -0,0 +1 @@
+# @lynx-js/external-bundle-rsbuild-plugin

packages/rspeedy/plugin-external-bundle/README.md

@@ -0,0 +1,53 @@
+<p align="center">
+  <a href="https://lynxjs.org/rspeedy" target="blank"><img src="https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/rspeedy-banner.png" alt="Rspeedy Logo" /></a>
+</p>
+
+<p>
+  <a aria-label="NPM version" href="https://www.npmjs.com/package/@lynx-js/external-bundle-rsbuild-plugin">
+    <img alt="" src="https://img.shields.io/npm/v/@lynx-js/external-bundle-rsbuild-plugin?logo=npm">
+  </a>
+  <a aria-label="License" href="https://www.npmjs.com/package/@lynx-js/external-bundle-rsbuild-plugin">
+    <img src="https://img.shields.io/badge/License-Apache--2.0-blue" alt="license" />
+  </a>
+</p>
+
+## Getting Started
+
+```bash
+npm install -D @lynx-js/external-bundle-rsbuild-plugin
+```
+
+## Usage
+
+```ts
+// lynx.config.ts
+import { pluginExternalBundle } from '@lynx-js/external-bundle-rsbuild-plugin'
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin'
+
+export default {
+  plugins: [
+    pluginReactLynx(),
+    pluginExternalBundle({
+      externals: {
+        lodash: {
+          url: 'http://lodash.lynx.bundle',
+          background: { sectionPath: 'background' },
+          mainThread: { sectionPath: 'mainThread' },
+        },
+      },
+    }),
+  ],
+}
+```
+
+## Documentation
+
+Visit [Lynx Website](https://lynxjs.org/api/rspeedy/external-bundle-rsbuild-plugin) to view the full documentation.
+
+## Contributing
+
+Contributions to Rspeedy are welcome and highly appreciated. However, before you jump right into it, we would like you to review our [Contribution Guidelines](/CONTRIBUTING.md) to make sure you have a smooth experience contributing to this project.
+
+## License
+
+Rspeedy is Apache-2.0 licensed.

packages/rspeedy/plugin-external-bundle/api-extractor.json

@@ -0,0 +1,6 @@
+/**
+ * Config file for API Extractor.  For more info, please visit: https://api-extractor.com
+ */
+{
+  "extends": "../../../api-extractor.json",
+}

packages/rspeedy/plugin-external-bundle/etc/external-bundle-rsbuild-plugin.api.md

@@ -0,0 +1,16 @@
+## API Report File for "@lynx-js/external-bundle-rsbuild-plugin"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import type { ExternalsLoadingPluginOptions } from '@lynx-js/externals-loading-webpack-plugin';
+import type { RsbuildPlugin } from '@rsbuild/core';
+
+// @public
+export function pluginExternalBundle(options: PluginExternalBundleOptions): RsbuildPlugin;
+
+// @public
+export type PluginExternalBundleOptions = Pick<ExternalsLoadingPluginOptions, 'externals'>;
+
+```

packages/rspeedy/plugin-external-bundle/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@lynx-js/external-bundle-rsbuild-plugin",
+  "version": "0.0.0",
+  "description": "A rsbuild plugin for loading lynx external bundles.",
+  "keywords": [
+    "rsbuild",
+    "Lynx",
+    "externals",
+    "bundle"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/lynx-family/lynx-stack.git",
+    "directory": "packages/rspeedy/plugin-external-bundle"
+  },
+  "license": "Apache-2.0",
+  "author": {
+    "name": "Hengchang Lu",
+    "email": "luhengchang228@gmail.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./lib/index.d.ts",
+  "files": [
+    "lib",
+    "!lib/**/*.js.map",
+    "CHANGELOG.md",
+    "README.md"
+  ],
+  "scripts": {
+    "api-extractor": "api-extractor run --verbose",
+    "test": "pnpm -w run test --project rspeedy/externals"
+  },
+  "dependencies": {
+    "@lynx-js/externals-loading-webpack-plugin": "workspace:*"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "catalog:",
+    "@rsbuild/core": "catalog:rsbuild"
+  },
+  "engines": {
+    "node": ">=18"
+  }
+}