feat: add react externals example

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://10.91.88.45: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.jsx': {
+              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",
+    "test:type": "vitest --typecheck.only"
+  },
+  "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-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,75 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import {
+  LAYERS,
+  defineExternalBundleRslibConfig,
+} from '@lynx-js/lynx-bundle-rslib-config';
+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'),
+);
+const preactDir = path.dirname(
+  require.resolve('preact/package.json', { paths: [reactLynxDir] }),
+);
+
+export default defineExternalBundleRslibConfig({
+  id: 'comp-lib',
+  tools: {
+    rspack: {
+      module: {
+        rules: [
+          {
+            issuerLayer: LAYERS.BACKGROUND,
+            loader: ReactWebpackPlugin.loaders.BACKGROUND,
+          },
+          {
+            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',
+    },
+  },
+  resolve: {
+    alias: {
+      'react': preactDir,
+      'preact': preactDir,
+    },
+  },
+  output: {
+    cleanDistPath: false,
+    externals: {
+      '@lynx-js/react': 'var __webpack_require__.lynx_ex.ReactLynx.React',
+      '@lynx-js/react/internal':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactInternal',
+      '@lynx-js/react/experimental/lazy/import':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactLazyImport',
+      '@lynx-js/react/legacy-react-runtime':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactLegacyRuntime',
+      '@lynx-js/react/runtime-components':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactComponents',
+      '@lynx-js/react/worklet-runtime/bindings':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactWorkletRuntime',
+      '@lynx-js/react/debug':
+        'var __webpack_require__.lynx_ex.ReactLynx.ReactDebug',
+      'preact': 'var __webpack_require__.lynx_ex.ReactLynx.Preact',
+    },
+    minify: false,
+  },
+});

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

@@ -0,0 +1,59 @@
+import { createRequire } from 'node:module';
+import path from 'node:path';
+
+import {
+  LAYERS,
+  defineExternalBundleRslibConfig,
+} from '@lynx-js/lynx-bundle-rslib-config';
+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'),
+);
+const preactDir = path.dirname(
+  require.resolve('preact/package.json', { paths: [reactLynxDir] }),
+);
+
+export default defineExternalBundleRslibConfig({
+  id: 'react',
+  tools: {
+    rspack: {
+      module: {
+        rules: [
+          {
+            issuerLayer: LAYERS.BACKGROUND,
+            loader: ReactWebpackPlugin.loaders.BACKGROUND,
+          },
+          {
+            issuerLayer: LAYERS.MAIN_THREAD,
+            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',
+    },
+  },
+  resolve: {
+    alias: {
+      'react': preactDir,
+      'preact': preactDir,
+    },
+  },
+  output: {
+    cleanDistPath: false,
+    minify: false,
+  },
+});