feat(react/transform): auto import lazy runtime when using <component>

.changeset/lemon-bars-walk.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Auto import `@lynx-js/react/experimental/lazy/import` when using `<component is={url} />`

packages/react/runtime/lazy/import.js

@@ -16,7 +16,7 @@ import {
   sExportsReactInternal,
   sExportsReactLepus,
   target,
-} from './target';
+} from './target.js';
 
 Object.defineProperty(target, sExportsReact, {
   value: ReactAPIs,

packages/react/runtime/lepus/index.js

@@ -1,7 +1,7 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-import { jsx as createVNode } from './jsx-runtime';
+import { jsx as createVNode } from './jsx-runtime/index.js';
 
 const slice = /* @__PURE__ */ [].slice;
 

packages/react/runtime/lepus/jsx-dev-runtime/index.js

@@ -1,4 +1,4 @@
 // Copyright 2024 The Lynx Authors. All rights reserved.
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
-export * from '../jsx-runtime';
+export * from '../jsx-runtime/index.js';

packages/react/transform/src/swc_plugin_compat/mod.rs

@@ -138,6 +138,7 @@ where
   old_runtime_import_ids: Vec<Id>,
   runtime_id: Lazy<Ident>,
   comments: Option<C>,
+  has_component_is: bool,
 }
 
 impl<C> Default for CompatVisitor<C>
@@ -163,6 +164,7 @@ where
       add_component_element_state: vec![],
       runtime_id: Lazy::new(|| private_ident!("ReactLynx")),
       comments,
+      has_component_is: false,
     }
   }
 
@@ -404,6 +406,7 @@ where
     };
 
     if is_component_is {
+      self.has_component_is = true;
       match &n.opening.name {
         JSXElementName::Ident(_) => {
           n.opening.name = JSXElementName::JSXMemberExpr(JSXMemberExpr {
@@ -998,6 +1001,24 @@ where
       }
       None => {}
     }
+
+    if self.has_component_is {
+      prepend_stmt(
+        &mut n.body,
+        ModuleItem::ModuleDecl(ModuleDecl::Import(ImportDecl {
+          span: DUMMY_SP,
+          phase: ImportPhase::Evaluation,
+          specifiers: vec![],
+          src: Box::new(Str {
+            span: DUMMY_SP,
+            raw: None,
+            value: format!("{}/experimental/lazy/import", self.opts.new_runtime_pkg).into(),
+          }),
+          type_only: Default::default(),
+          with: Default::default(),
+        })),
+      );
+    }
   }
 }
 
@@ -1560,4 +1581,26 @@ mod tests {
     a1, a2, a3, a4, b;
     "#
   );
+
+  test!(
+    module,
+    Syntax::Es(EsSyntax {
+      jsx: true,
+      ..Default::default()
+    }),
+    |_| (
+      resolver(Mark::new(), Mark::new(), true),
+      visit_mut_pass(CompatVisitor::<&SingleThreadedComments>::new(
+        CompatVisitorConfig {
+          ..Default::default()
+        },
+        None
+      )),
+      hygiene_with_config(Default::default()),
+    ),
+    should_add_component_is_import,
+    r#"
+    let c = <component is="xxxx" />;
+    "#
+  );
 }

packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_compat/mod.rs/should_add_component_is_import.js

@@ -0,0 +1,3 @@
+import "@lynx-js/react/experimental/lazy/import";
+import * as ReactLynx from "@lynx-js/react/internal";
+let c = <ReactLynx.__ComponentIsPolyfill is="xxxx"/>;

packages/webpack/react-webpack-plugin/test/cases/basic/lazy-imports/index.jsx

@@ -0,0 +1,38 @@
+/// <reference types="vitest/globals" />
+
+const sExportsReact = Symbol.for('__REACT_LYNX_EXPORTS__(@lynx-js/react)');
+const sExportsReactLepus = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/lepus)',
+);
+const sExportsReactInternal = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/internal)',
+);
+const sExportsJSXRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/jsx-runtime)',
+);
+const sExportsJSXDevRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/jsx-dev-runtime)',
+);
+const sExportsLegacyReactRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/legacy-react-runtime)',
+);
+
+export {};
+
+it('should not have experimental/lazy/import imported', () => {
+  if (__BACKGROUND__) {
+    expect(lynx[sExportsReact]).toBeUndefined();
+    expect(lynx[sExportsReactLepus]).toBeUndefined();
+    expect(lynx[sExportsReactInternal]).toBeUndefined();
+    expect(lynx[sExportsJSXRuntime]).toBeUndefined();
+    expect(lynx[sExportsJSXDevRuntime]).toBeUndefined();
+    expect(lynx[sExportsLegacyReactRuntime]).toBeUndefined();
+  } else {
+    expect(globalThis[sExportsReact]).toBeUndefined();
+    expect(globalThis[sExportsReactLepus]).toBeUndefined();
+    expect(globalThis[sExportsReactInternal]).toBeUndefined();
+    expect(globalThis[sExportsJSXRuntime]).toBeUndefined();
+    expect(globalThis[sExportsJSXDevRuntime]).toBeUndefined();
+    expect(globalThis[sExportsLegacyReactRuntime]).toBeUndefined();
+  }
+});

packages/webpack/react-webpack-plugin/test/cases/basic/lazy-imports/rspack.config.js

@@ -0,0 +1,7 @@
+import { createConfig } from '../../../create-react-config.js';
+
+/** @type {import('@rspack/core').Configuration} */
+export default {
+  context: __dirname,
+  ...createConfig(),
+};

packages/webpack/react-webpack-plugin/test/cases/basic/lazy-imports/test.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import("@lynx-js/test-tools").TConfigCaseConfig} */
+module.exports = {
+  bundlePath: [
+    'main:main-thread.js',
+    'main:background.js',
+  ],
+};

packages/webpack/react-webpack-plugin/test/cases/compat/component-is/index.jsx

@@ -0,0 +1,40 @@
+/// <reference types="vitest/globals" />
+
+const sExportsReact = Symbol.for('__REACT_LYNX_EXPORTS__(@lynx-js/react)');
+const sExportsReactLepus = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/lepus)',
+);
+const sExportsReactInternal = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/internal)',
+);
+const sExportsJSXRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/jsx-runtime)',
+);
+const sExportsJSXDevRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/jsx-dev-runtime)',
+);
+const sExportsLegacyReactRuntime = Symbol.for(
+  '__REACT_LYNX_EXPORTS__(@lynx-js/react/legacy-react-runtime)',
+);
+
+export {};
+
+it('should have experimental/lazy/import imported', () => {
+  const jsx = <component is='foo' />;
+  expect(jsx).toBeDefined();
+  if (__BACKGROUND__) {
+    expect(lynx[sExportsReact]).not.toBeUndefined();
+    expect(lynx[sExportsReactLepus]).not.toBeUndefined();
+    expect(lynx[sExportsReactInternal]).not.toBeUndefined();
+    expect(lynx[sExportsJSXRuntime]).not.toBeUndefined();
+    expect(lynx[sExportsJSXDevRuntime]).not.toBeUndefined();
+    expect(lynx[sExportsLegacyReactRuntime]).not.toBeUndefined();
+  } else {
+    expect(globalThis[sExportsReact]).not.toBeUndefined();
+    expect(globalThis[sExportsReactLepus]).not.toBeUndefined();
+    expect(globalThis[sExportsReactInternal]).not.toBeUndefined();
+    expect(globalThis[sExportsJSXRuntime]).not.toBeUndefined();
+    expect(globalThis[sExportsJSXDevRuntime]).not.toBeUndefined();
+    expect(globalThis[sExportsLegacyReactRuntime]).not.toBeUndefined();
+  }
+});

packages/webpack/react-webpack-plugin/test/cases/compat/component-is/rspack.config.js

@@ -0,0 +1,11 @@
+import { createConfig } from '../../../create-react-config.js';
+
+/** @type {import('@rspack/core').Configuration} */
+export default {
+  context: __dirname,
+  ...createConfig({
+    compat: {
+      disableDeprecatedWarning: true,
+    },
+  }),
+};

packages/webpack/react-webpack-plugin/test/cases/compat/component-is/test.config.cjs

@@ -0,0 +1,7 @@
+/** @type {import("@lynx-js/test-tools").TConfigCaseConfig} */
+module.exports = {
+  bundlePath: [
+    'main:main-thread.js',
+    'main:background.js',
+  ],
+};