feat(react/transform): auto define lynx.loadLazyBundle

.changeset/four-rice-guess.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Auto define lynx.loadLazyBundle when using `import(/* relative path */)`.

examples/react-lazy-bundle/lynx.config.js

@@ -0,0 +1,25 @@
+import { pluginQRCode } from '@lynx-js/qrcode-rsbuild-plugin';
+import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+import { defineConfig } from '@lynx-js/rspeedy';
+
+const enableBundleAnalysis = !!process.env['RSPEEDY_BUNDLE_ANALYSIS'];
+
+export default defineConfig({
+  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,
+      },
+    },
+  },
+});

examples/react-lazy-bundle/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@lynx-js/example-react-lazy-bundle",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rspeedy build",
+    "dev": "rspeedy dev"
+  },
+  "dependencies": {
+    "@lynx-js/react": "workspace:*"
+  },
+  "devDependencies": {
+    "@lynx-js/preact-devtools": "^5.0.1-cf9aef5",
+    "@lynx-js/qrcode-rsbuild-plugin": "workspace:*",
+    "@lynx-js/react-rsbuild-plugin": "workspace:*",
+    "@lynx-js/rspeedy": "workspace:*",
+    "@lynx-js/types": "3.4.11",
+    "@types/react": "^18.3.25"
+  }
+}

examples/react-lazy-bundle/src/App.css

@@ -0,0 +1,34 @@
+:root {
+  background-color: #000;
+  --color-text: #fff;
+}
+
+.Background {
+  position: fixed;
+  background: radial-gradient(
+    71.43% 62.3% at 46.43% 36.43%,
+    rgba(18, 229, 229, 0) 15%,
+    rgba(239, 155, 255, 0.3) 56.35%,
+    #ff6448 100%
+  );
+  box-shadow: 0px 12.93px 28.74px 0px #ffd28db2 inset;
+  border-radius: 50%;
+  width: 200vw;
+  height: 200vw;
+  top: -60vw;
+  left: -14.27vw;
+  transform: rotate(15.25deg);
+}
+
+.App {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+text {
+  color: var(--color-text);
+}

examples/react-lazy-bundle/src/App.tsx

@@ -0,0 +1,30 @@
+import { useEffect } from '@lynx-js/react';
+
+import './App.css';
+
+export function App() {
+  useEffect(() => {
+    console.info('Hello, ReactLynx');
+    void import('./utils/add.js').then((res) => {
+      console.info('dynamic import add', res.add(1, 2));
+    });
+    void import('./utils/dynamic.js').then((res) => {
+      console.info('dynamic import dynamic');
+      void res.dynamicAdd(1, 2).then(res => {
+        console.info('dynamic add', res);
+      });
+    });
+  }, []);
+
+  return (
+    <view>
+      <view className='Background' />
+      <view className='App'>
+        <view className='Banner'>
+          <text className='Title'>React</text>
+          <text className='Subtitle'>on Lynx</text>
+        </view>
+      </view>
+    </view>
+  );
+}

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

@@ -0,0 +1,17 @@
+import '@lynx-js/preact-devtools';
+import '@lynx-js/react/debug';
+import { root } from '@lynx-js/react';
+
+import { App } from './App.jsx';
+
+void import('./utils/minus.js').then((res) => {
+  console.info('dynamic import minus', res.minus(1, 2));
+});
+
+root.render(
+  <App />,
+);
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot.accept();
+}

examples/react-lazy-bundle/src/rspeedy-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lynx-js/rspeedy/client" />

examples/react-lazy-bundle/src/utils/add.ts

@@ -0,0 +1,3 @@
+export function add(a: number, b: number) {
+  return a + b;
+}

examples/react-lazy-bundle/src/utils/dynamic.ts

@@ -0,0 +1,4 @@
+export async function dynamicAdd(a: number, b: number) {
+  const { add } = await import('./add.js');
+  return add(a, b);
+}

examples/react-lazy-bundle/src/utils/minus.ts

@@ -0,0 +1,3 @@
+export function minus(a: number, b: number) {
+  return a - b;
+}

examples/react-lazy-bundle/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "@lynx-js/react",
+    "noEmit": true,
+
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedDeclarations": false,
+  },
+  "include": ["src", "lynx.config.js", "test", "vitest.config.ts"],
+  "references": [
+    { "path": "../../packages/react/tsconfig.json" },
+    { "path": "../../packages/rspeedy/core/tsconfig.build.json" },
+    { "path": "../../packages/rspeedy/plugin-qrcode/tsconfig.build.json" },
+    { "path": "../../packages/rspeedy/plugin-react/tsconfig.build.json" },
+  ],
+}

packages/react/runtime/src/index.ts

@@ -15,8 +15,8 @@ import {
   createRef,
   forwardRef,
   isValidElement,
+  lazy,
   memo,
-  lazy as preactLazy,
   useSyncExternalStore,
 } from 'preact/compat';
 
@@ -32,18 +32,12 @@ import {
   useRef,
   useState,
 } from './hooks/react.js';
-import { loadLazyBundle } from './lynx/lazy-bundle.js';
 import { Suspense } from './lynx/suspense.js';
 
 export { Component, createContext } from 'preact';
 export { PureComponent } from 'preact/compat';
 export * from './hooks/react.js';
 
-const lazy: typeof import('preact/compat').lazy = /*#__PURE__*/ (() => {
-  lynx.loadLazyBundle = loadLazyBundle;
-  return preactLazy;
-})();
-
 /**
  * @internal
  */

packages/react/runtime/vitest.config.ts

@@ -36,6 +36,7 @@ function transformReactLynxPlugin(): Plugin {
           filename: 'test',
           target: 'MIXED',
         },
+        dynamicImport: false,
         // snapshot: true,
         directiveDCE: false,
         defineDCE: false,

packages/react/testing-library/src/vitest.config.js

@@ -234,6 +234,11 @@ export const createVitestConfig = async (options) => {
             target: 'MIXED',
           },
           engineVersion: options?.engineVersion ?? '',
+          dynamicImport: {
+            injectLazyBundle: false,
+            layer: 'test',
+            runtimePkg: `${runtimePkgName}/internal`,
+          },
           // snapshot: true,
           directiveDCE: false,
           defineDCE: false,

packages/react/transform/__test__/fixture.spec.js

@@ -913,6 +913,57 @@ export default class App extends Component {
 });
 
 describe('dynamic import', () => {
+  it('lazy import', async () => {
+    const result = await transformReactLynx(`await import("https://www/a.js", { with: { type: "component" } });`, {
+      pluginName: '',
+      filename: '',
+      sourcemap: false,
+      parserConfig: {
+        tsx: true,
+      },
+      cssScope: false,
+      jsx: false,
+      directiveDCE: false,
+      defineDCE: false,
+      shake: false,
+      compat: false,
+      worklet: false,
+      refresh: false,
+    });
+    expect(result.code).toMatchInlineSnapshot(`
+      "import "@lynx-js/react/experimental/lazy/import";
+      import { __dynamicImport } from "@lynx-js/react/internal";
+      await __dynamicImport("https://www/a.js", {
+          with: {
+              type: "component"
+          }
+      });
+      "
+    `);
+  });
+  it('inline import', async () => {
+    const result = await transformReactLynx(`await import(/*webpackChunkName: "./index.js-test"*/"./index.js");`, {
+      pluginName: '',
+      filename: '',
+      sourcemap: false,
+      parserConfig: {
+        tsx: true,
+      },
+      cssScope: false,
+      jsx: false,
+      directiveDCE: false,
+      defineDCE: false,
+      shake: false,
+      compat: false,
+      worklet: false,
+      refresh: false,
+    });
+    expect(result.code).toMatchInlineSnapshot(`
+      "import 'data:text/javascript;charset=utf-8,import { loadLazyBundle } from "@lynx-js/react/internal";lynx.loadLazyBundle = loadLazyBundle;';
+      await import(/*webpackChunkName: "./index.js-test"*/ /*webpackChunkName: "./index.js-"*/ "./index.js");
+      "
+    `);
+  });
   it('badcase', async () => {
     const result = await transformReactLynx(
       `\