feat: support MIXED target for worklet

.changeset/itchy-planes-cry.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/react": patch
+---
+
+Support `MIXED` target for worklet, it will be used by unit testing frameworks, etc.

packages/react/runtime/__test__/worklet/runOnBackground.test.js

@@ -42,7 +42,7 @@ describe('runOnBackground', () => {
     };
     expect(() => {
       runOnBackground(worklet)(1, ['args']);
-    }).toThrowError('runOnBackground can not be used on the main thread.');
+    }).toThrowError('runOnBackground can only be used on the main thread.');
   });
 
   it('should throw when native capabilities not fulfilled', () => {

packages/react/runtime/src/worklet/runOnBackground.ts

@@ -26,7 +26,7 @@ function runOnBackground<Fn extends (...args: any[]) => any>(f: Fn): (...args: P
     throw new Error('runOnBackground requires Lynx sdk version 2.16.');
   }
   if (__JS__) {
-    throw new Error('runOnBackground can not be used on the main thread.');
+    throw new Error('runOnBackground can only be used on the main thread.');
   }
   const obj = f as any as JsFnHandle;
   if (obj._error) {

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

@@ -1306,60 +1306,100 @@ class X extends Component {
 });
 
 describe('worklet', () => {
-  it('member expression', async () => {
-    const { code } = await transformReactLynx(
-      `\
-export function getCurrentDelta(event) {
-  "main thread";
-  return foo.bar.baz;
-}
-`,
-      {
-        pluginName: '',
-        filename: '',
-        sourcemap: false,
-        cssScope: false,
-        jsx: false,
-        directiveDCE: true,
-        defineDCE: {
-          define: {
-            __LEPUS__: 'true',
-            __JS__: 'false',
-          },
-        },
-        shake: false,
-        compat: true,
-        refresh: false,
-        worklet: {
-          target: 'LEPUS',
+  for (const target of ['LEPUS', 'JS', 'MIXED']) {
+    it('member expression', async () => {
+      const { code } = await transformReactLynx(
+        `\
+  export function getCurrentDelta(event) {
+    "main thread";
+    return foo.bar.baz;
+  }
+  `,
+        {
+          pluginName: '',
           filename: '',
-          runtimePkg: '@lynx-js/react',
+          sourcemap: false,
+          cssScope: false,
+          jsx: false,
+          directiveDCE: true,
+          defineDCE: {
+            define: {
+              __LEPUS__: 'true',
+              __JS__: 'false',
+            },
+          },
+          shake: false,
+          compat: true,
+          refresh: false,
+          worklet: {
+            target,
+            filename: '',
+            runtimePkg: '@lynx-js/react',
+          },
         },
-      },
-    );
+      );
 
-    expect(code).toMatchInlineSnapshot(`
-      "import { loadWorkletRuntime as __loadWorkletRuntime } from "@lynx-js/react";
-      var loadWorkletRuntime = __loadWorkletRuntime;
-      export let getCurrentDelta = {
-          _c: {
-              foo: {
-                  bar: {
-                      baz: foo.bar.baz
+      if (target === 'LEPUS') {
+        expect(code).toMatchInlineSnapshot(`
+          "import { loadWorkletRuntime as __loadWorkletRuntime } from "@lynx-js/react";
+          var loadWorkletRuntime = __loadWorkletRuntime;
+          export let getCurrentDelta = {
+              _c: {
+                  foo: {
+                      bar: {
+                          baz: foo.bar.baz
+                      }
                   }
-              }
-          },
-          _lepusWorkletHash: "da39:78ee8:1"
-      };
-      loadWorkletRuntime(typeof globDynamicComponentEntry === 'undefined' ? undefined : globDynamicComponentEntry) && registerWorkletInternal("main-thread", "da39:78ee8:1", function(event) {
-          const getCurrentDelta = lynxWorkletImpl._workletMap["da39:78ee8:1"].bind(this);
-          let { foo } = this["_c"];
-          "main thread";
-          return foo.bar.baz;
-      });
-      "
-    `);
-  });
+              },
+              _lepusWorkletHash: "da39:75a1b:1"
+          };
+          loadWorkletRuntime(typeof globDynamicComponentEntry === 'undefined' ? undefined : globDynamicComponentEntry) && registerWorkletInternal("main-thread", "da39:75a1b:1", function(event) {
+              const getCurrentDelta = lynxWorkletImpl._workletMap["da39:75a1b:1"].bind(this);
+              let { foo } = this["_c"];
+              "main thread";
+              return foo.bar.baz;
+          });
+          "
+        `);
+      } else if (target === 'JS') {
+        expect(code).toMatchInlineSnapshot(`
+          "export let getCurrentDelta = {
+              _c: {
+                  foo: {
+                      bar: {
+                          baz: foo.bar.baz
+                      }
+                  }
+              },
+              _wkltId: "da39:75a1b:1"
+          };
+          "
+        `);
+      } else if (target === 'MIXED') {
+        expect(code).toMatchInlineSnapshot(`
+          "import { loadWorkletRuntime as __loadWorkletRuntime } from "@lynx-js/react";
+          var loadWorkletRuntime = __loadWorkletRuntime;
+          export let getCurrentDelta = {
+              _c: {
+                  foo: {
+                      bar: {
+                          baz: foo.bar.baz
+                      }
+                  }
+              },
+              _wkltId: "da39:75a1b:1"
+          };
+          loadWorkletRuntime(typeof globDynamicComponentEntry === 'undefined' ? undefined : globDynamicComponentEntry) && registerWorkletInternal("main-thread", "da39:75a1b:1", function(event) {
+              const getCurrentDelta = lynxWorkletImpl._workletMap["da39:75a1b:1"].bind(this);
+              let { foo } = this["_c"];
+              "main thread";
+              return foo.bar.baz;
+          });
+          "
+        `);
+      }
+    });
+  }
 
   it('member expression with multiple times', async () => {
     const { code } = await transformReactLynx(

packages/react/transform/src/swc_plugin_worklet/gen_stmt.rs

@@ -29,7 +29,11 @@ impl StmtGen {
 
     (
       StmtGen::gen_transformed_worklet_expr(
-        target,
+        if target == TransformTarget::MIXED {
+          TransformTarget::JS
+        } else {
+          target
+        },
         extracted_value,
         ident_collector.take_this_expr(),
         extracted_js_fns.clone(),
@@ -38,7 +42,11 @@ impl StmtGen {
       ),
       StmtGen::gen_register_worklet_stmt(
         mode,
-        target,
+        if target == TransformTarget::MIXED {
+          TransformTarget::LEPUS
+        } else {
+          target
+        },
         worklet_type,
         function_name,
         function,

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

@@ -514,6 +514,35 @@ function worklet(event: Event) {
     "#
   );
 
+  test!(
+    module,
+    Syntax::Typescript(TsSyntax {
+      ..Default::default()
+    }),
+    |_| chain!(
+      resolver(Mark::new(), Mark::new(), true),
+      as_folder(WorkletVisitor::new(
+        TransformMode::Test,
+        WorkletVisitorConfig {
+          filename: "index.js".into(),
+          target: TransformTarget::MIXED,
+          custom_global_ident_names: None,
+          runtime_pkg: "@lynx-js/react".into(),
+        }
+      )),
+      hygiene()
+    ),
+    should_transform_lepus_general_mixed,
+    r#"
+function worklet(event: Event) {
+    "main thread";
+    console.log(y1);
+    console.log(this.y1);
+    let a: object = y1;
+}
+    "#
+  );
+
   test!(
     module,
     Syntax::Typescript(TsSyntax {

packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_worklet/mod.rs/should_transform_lepus_general_mixed.js

@@ -0,0 +1,19 @@
+import { loadWorkletRuntime as __loadWorkletRuntime } from "@lynx-js/react";
+var loadWorkletRuntime = __loadWorkletRuntime;
+let worklet = {
+    _c: {
+        y1
+    },
+    _wkltId: "a77b:test:1",
+    ...{
+        y1: this.y1
+    }
+};
+loadWorkletRuntime(typeof globDynamicComponentEntry === 'undefined' ? undefined : globDynamicComponentEntry) && registerWorkletInternal("main-thread", "a77b:test:1", function(event: Event) {
+    const worklet = lynxWorkletImpl._workletMap["a77b:test:1"].bind(this);
+    let { y1 } = this["_c"];
+    "main thread";
+    console.log(y1);
+    console.log(this.y1);
+    let a: object = y1;
+});