diff --git a/.changeset/itchy-planes-cry.md b/.changeset/itchy-planes-cry.md new file mode 100644 index 0000000000..12bd33628e --- /dev/null +++ b/.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. diff --git a/packages/react/runtime/__test__/worklet/runOnBackground.test.js b/packages/react/runtime/__test__/worklet/runOnBackground.test.js index 9a879f71b2..da8d4d95cd 100644 --- a/packages/react/runtime/__test__/worklet/runOnBackground.test.js +++ b/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', () => { diff --git a/packages/react/runtime/src/worklet/runOnBackground.ts b/packages/react/runtime/src/worklet/runOnBackground.ts index 70dd8c87a2..f81c2b4766 100644 --- a/packages/react/runtime/src/worklet/runOnBackground.ts +++ b/packages/react/runtime/src/worklet/runOnBackground.ts @@ -26,7 +26,7 @@ function runOnBackground 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) { diff --git a/packages/react/transform/__test__/fixture.spec.js b/packages/react/transform/__test__/fixture.spec.js index 3e52ce3038..29c7c7bb0a 100644 --- a/packages/react/transform/__test__/fixture.spec.js +++ b/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( diff --git a/packages/react/transform/src/swc_plugin_worklet/gen_stmt.rs b/packages/react/transform/src/swc_plugin_worklet/gen_stmt.rs index 4677d6f9df..17e9c74dcf 100644 --- a/packages/react/transform/src/swc_plugin_worklet/gen_stmt.rs +++ b/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, diff --git a/packages/react/transform/src/swc_plugin_worklet/mod.rs b/packages/react/transform/src/swc_plugin_worklet/mod.rs index 30b954acf0..1379e3d110 100644 --- a/packages/react/transform/src/swc_plugin_worklet/mod.rs +++ b/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 { diff --git a/packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_worklet/mod.rs/should_transform_lepus_general_mixed.js b/packages/react/transform/tests/__swc_snapshots__/src/swc_plugin_worklet/mod.rs/should_transform_lepus_general_mixed.js new file mode 100644 index 0000000000..272cac1462 --- /dev/null +++ b/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; +});