feat(webpack-plugin): init externals-loading-webpack-plugin

.changeset/chilly-ravens-smile.md

@@ -0,0 +1,28 @@
+---
+"@lynx-js/externals-loading-webpack-plugin": patch
+---
+
+Introduce `@lynx-js/externals-loading-webpack-plugin`.
+
+```js
+// webpack.config.js
+import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugin';
+
+export default {
+  plugins: [
+    new ExternalsLoadingPlugin({
+      mainThreadChunks: ['index__main-thread'],
+      backgroundChunks: ['index'],
+      mainThreadLayer: 'main-thread',
+      backgroundLayer: 'background',
+      externals: {
+        lodash: {
+          url: 'http://lodash.lynx.bundle',
+          background: { sectionPath: 'background' },
+          mainThread: { sectionPath: 'main-thread' },
+        },
+      },
+    }),
+  ],
+};
+```

examples/react-externals/README.md

@@ -0,0 +1,16 @@
+# @lynx-js/example-react-externals
+
+In this example, we show:
+
+- Use `@lynx-js/lynx-bundle-rslib-config` to bundle ReactLynx runtime to a separate Lynx bundle.
+- Use `@lynx-js/lynx-bundle-rslib-config` to bundle a simple ReactLynx component library to a separate Lynx bundle.
+- Use `@lynx-js/externals-loading-webpack-plugin` to load ReactLynx runtime (sync) and component bundle (async).
+
+## Usage
+
+```bash
+pnpm build:reactlynx
+pnpm build:comp-lib
+pnpx http-server -p 8080 dist
+EXTERNAL_BUNDLE_PREFIX=http://${YOUR_IP_HERE}:8080 pnpm dev
+```

examples/react-externals/external-bundle/CompLib.tsx

@@ -0,0 +1 @@
+export { App } from '../src/App.js';

examples/react-externals/external-bundle/ReactLynx.ts

@@ -0,0 +1,10 @@
+export * as React from '@lynx-js/react';
+export * as ReactInternal from '@lynx-js/react/internal';
+export * as ReactLazyImport from '@lynx-js/react/experimental/lazy/import';
+export * as ReactLegacyRuntime from '@lynx-js/react/legacy-react-runtime';
+export * as ReactComponents from '@lynx-js/react/runtime-components';
+export * as ReactWorkletRuntime from '@lynx-js/react/worklet-runtime/bindings';
+export * as ReactDebug from '@lynx-js/react/debug';
+// @ts-expect-error preact is aliased by rspeedy
+// eslint-disable-next-line import/no-unresolved
+export * as Preact from 'preact';

examples/react-externals/lynx.config.js

@@ -0,0 +1,108 @@
+import { ExternalsLoadingPlugin } from '@lynx-js/externals-loading-webpack-plugin';
+import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
+import { LAYERS, 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({
+          mainThreadChunks: ['main__main-thread'],
+          backgroundChunks: ['main'],
+          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: false,
+            },
+          },
+        }),
+      ],
+    },
+  },
+  plugins: [
+    pluginReactLynx(),
+    pluginQRCode({
+      schema(url) {
+        // We use `?fullscreen=true` to open the page in LynxExplorer in full screen mode
+        return `${url}?fullscreen=true`;
+      },
+    }),
+  ],
+  environments: {
+    web: {},
+    lynx: {
+      performance: {
+        profile: enableBundleAnalysis,
+      },
+    },
+  },
+  output: {
+    filenameHash: 'contenthash:8',
+    cleanDistPath: false,
+  },
+});

examples/react-externals/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@lynx-js/example-react-externals",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "build:comp-lib": "rslib build --config rslib-comp-lib.config.ts",
+    "build:reactlynx": "rslib build --config rslib-reactlynx.config.ts",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "@lynx-js/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@lynx-js/externals-loading-webpack-plugin": "workspace:*",
+    "@lynx-js/lynx-bundle-rslib-config": "workspace:*",
+    "@lynx-js/preact-devtools": "^5.0.1-cf9aef5",
+    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-alias-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-webpack-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "3.4.11",
+    "@types/react": "^18.3.25"
+  }
+}

examples/react-externals/rslib-comp-lib.config.ts

@@ -0,0 +1,79 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import {
+  LAYERS,
+  defineExternalBundleRslibConfig,
+} from '@lynx-js/lynx-bundle-rslib-config';
+import { pluginReactAlias } from '@lynx-js/react-alias-rsbuild-plugin';
+import { ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin';
+
+const require = createRequire(import.meta.url);
+const reactLynxDir = path.dirname(
+  require.resolve('@lynx-js/react/package.json'),
+);
+
+export default defineExternalBundleRslibConfig({
+  id: 'comp-lib',
+  tools: {
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+            issuerLayer: LAYERS.BACKGROUND,
+            loader: ReactWebpackPlugin.loaders.BACKGROUND,
+          },
+          {
+            test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+            issuerLayer: LAYERS.MAIN_THREAD,
+            loader: ReactWebpackPlugin.loaders.MAIN_THREAD,
+          },
+        ],
+      },
+    },
+  },
+  source: {
+    entry: {
+      'CompLib': './external-bundle/CompLib.tsx',
+    },
+    define: {
+      '__DEV__': 'false',
+      'process.env.NODE_ENV': '"production"',
+      '__FIRST_SCREEN_SYNC_TIMING__': '"immediately"',
+      '__ENABLE_SSR__': 'false',
+      '__PROFILE__': 'false',
+      '__EXTRACT_STR__': 'false',
+    },
+  },
+  plugins: [
+    pluginReactAlias({
+      LAYERS,
+      rootPath: reactLynxDir,
+    }),
+  ],
+  output: {
+    cleanDistPath: false,
+    dataUriLimit: Number.POSITIVE_INFINITY,
+    externals: {
+      '@lynx-js/react': ['ReactLynx', 'React'],
+      '@lynx-js/react/internal': ['ReactLynx', 'ReactInternal'],
+      '@lynx-js/react/experimental/lazy/import': [
+        'ReactLynx',
+        'ReactLazyImport',
+      ],
+      '@lynx-js/react/legacy-react-runtime': [
+        'ReactLynx',
+        'ReactLegacyRuntime',
+      ],
+      '@lynx-js/react/runtime-components': ['ReactLynx', 'ReactComponents'],
+      '@lynx-js/react/worklet-runtime/bindings': [
+        'ReactLynx',
+        'ReactWorkletRuntime',
+      ],
+      '@lynx-js/react/debug': ['ReactLynx', 'ReactDebug'],
+      'preact': ['ReactLynx', 'Preact'],
+    },
+    minify: false,
+  },
+});

examples/react-externals/rslib-reactlynx.config.ts

@@ -0,0 +1,58 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import {
+  LAYERS,
+  defineExternalBundleRslibConfig,
+} from '@lynx-js/lynx-bundle-rslib-config';
+import { pluginReactAlias } from '@lynx-js/react-alias-rsbuild-plugin';
+import { ReactWebpackPlugin } from '@lynx-js/react-webpack-plugin';
+
+const require = createRequire(import.meta.url);
+const reactLynxDir = path.dirname(
+  require.resolve('@lynx-js/react/package.json'),
+);
+export default defineExternalBundleRslibConfig({
+  id: 'react',
+  tools: {
+    rspack: {
+      module: {
+        rules: [
+          {
+            test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+            issuerLayer: LAYERS.BACKGROUND,
+            loader: ReactWebpackPlugin.loaders.BACKGROUND,
+          },
+          {
+            issuerLayer: LAYERS.MAIN_THREAD,
+            test: /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts)$/,
+            loader: ReactWebpackPlugin.loaders.MAIN_THREAD,
+          },
+        ],
+      },
+    },
+  },
+  source: {
+    entry: {
+      'ReactLynx': './external-bundle/ReactLynx.ts',
+    },
+    define: {
+      '__DEV__': 'false',
+      'process.env.NODE_ENV': '"production"',
+      '__FIRST_SCREEN_SYNC_TIMING__': '"immediately"',
+      '__ENABLE_SSR__': 'false',
+      '__PROFILE__': 'false',
+      '__EXTRACT_STR__': 'false',
+    },
+  },
+  plugins: [
+    pluginReactAlias({
+      LAYERS,
+      rootPath: reactLynxDir,
+    }),
+  ],
+  output: {
+    cleanDistPath: false,
+    minify: false,
+  },
+});