@lynx-js/react-canary 0.121.2-canary-20260617-bb7927bd → 0.121.2

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @lynx-js/react
 
-## 0.121.2-canary-20260617035556-bb7927bdd9ccf5be6a0670538ca466770b320ee9
+## 0.121.2
 
 ### Patch Changes
 
@@ -9,13 +9,13 @@
   Previously, the compat transform could short-circuit while scanning opening attributes and treat:
 
   ```jsx
-  <Component removeComponentElement={true} {...props} />
+  <Component removeComponentElement={true} {...props} />;
   ```
 
   differently from:
 
   ```jsx
-  <Component {...props} removeComponentElement={true} />
+  <Component {...props} removeComponentElement={true} />;
   ```
 
   The transform now collects the full opening-attribute state first, so both prop orders compile the same way in normal and `compilerOnly` modes.
@@ -41,7 +41,7 @@
 - Support `React.createElement(type, props, children)` API. ([#2360](https://github.com/lynx-family/lynx-stack/pull/2360))
 
   ```jsx
-  React.createElement("view", { style }, <text>hello</text>);
+  React.createElement('view', { style }, <text>hello</text>);
   // equivalent to
   <view style={style}>
     <text>hello</text>
@@ -103,6 +103,7 @@
 - Fix ref callbacks not being cleaned up or re-applied correctly when the ref at the same element slot changes across rerenders that happen before hydration (e.g. a `useEffect` triggering `setState` during the initial background render). ([#2500](https://github.com/lynx-family/lynx-stack/pull/2500))
 
 - fix: reduce redundant updates for main-thread handlers and gestures ([#2188](https://github.com/lynx-family/lynx-stack/pull/2188))
+
   - Updates are faster when the main-thread event handler or gesture object is stable across rerenders (fewer unnecessary native updates).
   - Spread props rerenders that don't semantically change the handler/gesture no longer trigger redundant updates.
   - Removing a gesture from spread props reliably clears the gesture state on the target element.
@@ -122,6 +123,7 @@
 - Remove stale gestures when gestures are removed ([#2297](https://github.com/lynx-family/lynx-stack/pull/2297))
 
 - Trace refactor ([#2466](https://github.com/lynx-family/lynx-stack/pull/2466))
+
   - Remove `ReactLynx::renderOpcodes` from the trace
   - Use `ReactLynx::transferRoot` to measure the time spent transferring the root to the background thread
 
@@ -132,8 +134,8 @@
   Create a config file `rstest.config.ts` with the following content:
 
   ```ts
-  import { defineConfig } from "@rstest/core";
-  import { withLynxConfig } from "@lynx-js/react/testing-library/rstest-config";
+  import { defineConfig } from '@rstest/core';
+  import { withLynxConfig } from '@lynx-js/react/testing-library/rstest-config';
 
   export default defineConfig({
     extends: withLynxConfig(),
@@ -183,6 +185,7 @@
 ### Minor Changes
 
 - feat: export `GlobalPropsProvider`, `GlobalPropsConsumer`, `useGlobalProps` and `useGlobalPropsChanged` for `__globalProps` ([#2346](https://github.com/lynx-family/lynx-stack/pull/2346))
+
   - `GlobalPropsProvider`: A Provider component that accepts `children`. It is used to provide the `lynx.__globalProps` context.
   - `GlobalPropsConsumer`: A Consumer component that accepts a function as a child. It is used to consume the `lynx.__globalProps` context.
   - `useGlobalProps`: A hook that returns the `lynx.__globalProps` object. It triggers a re-render when `lynx.__globalProps` changes.
@@ -197,6 +200,7 @@
   Upgrade preact from [f7693b72](https://github.com/preactjs/preact/commit/f7693b72ecb4a40c66e6e47f54e2d4edc374c9f0) to [55254ef7](https://github.com/preactjs/preact/commit/55254ef7021e563cc1a86fb816058964a1b6a29a), see diffs at [f7693b72...55254ef7](https://github.com/preactjs/preact/compare/f7693b72ecb4a40c66e6e47f54e2d4edc374c9f0...preactjs:preact:55254ef7021e563cc1a86fb816058964a1b6a29a?expand=1).
 
 - feat: add `globalPropsMode` option to `PluginReactLynxOptions` ([#2346](https://github.com/lynx-family/lynx-stack/pull/2346))
+
   - When configured to `"event"`, `updateGlobalProps` will only trigger a global event and skip the `runWithForce` flow.
   - Defaults to `"reactive"`, which means `updateGlobalProps` will trigger re-render automatically.
 
@@ -216,6 +220,7 @@
 
 - Improve React runtime hook profiling. ([#2235](https://github.com/lynx-family/lynx-stack/pull/2235))
   Enable Profiling recording first, then enter the target page so the trace includes full render/hydrate phases.
+
   - Record trace events for `useEffect` / `useLayoutEffect` hook entry, callback, and cleanup phases.
   - Log trace events for `useState` setter calls.
   - Wire `profileFlowId` support in debug profile utilities and attach flow IDs to related hook traces.
@@ -264,6 +269,7 @@
 - Bump `swc_core` v56. ([#2154](https://github.com/lynx-family/lynx-stack/pull/2154))
 
 - Use `disableDeprecatedWarning` option to suppress BROKEN warnings during compilation. ([#2157](https://github.com/lynx-family/lynx-stack/pull/2157))
+
   1. BROKEN: `getNodeRef`/`getNodeRefFromRoot`/`createSelectorQuery` on component instance is broken and MUST be migrated in ReactLynx 3.0, please use ref or lynx.createSelectorQuery instead.
   2. BROKEN: `getElementById` on component instance is broken and MUST be migrated in ReactLynx 3.0, please use ref or lynx.getElementById instead.
 
@@ -301,9 +307,9 @@
 
   ```typescript
   function getStyle(ele: MainThread.Element) {
-    "main thread";
-    const width = ele.getComputedStyleProperty("width"); // Returns 300px
-    const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400)
+    'main thread';
+    const width = ele.getComputedStyleProperty('width'); // Returns 300px
+    const transformMatrix = ele.getComputedStyleProperty('transform'); // Returns matrix(2, 0, 0, 2, 200, 400)
   }
   ```
 
@@ -318,7 +324,7 @@
   ```ts
   const LazyComponent = lazy(async () => {
     try {
-      const mod = await import("./lazy-bundle");
+      const mod = await import('./lazy-bundle');
       return mod.default;
     } catch (error) {
       console.error(`Lazy Bundle load failed message: ${error.message}`);
@@ -346,13 +352,14 @@
 - Auto define lynx.loadLazyBundle when using `import(/* relative path */)`. ([#1956](https://github.com/lynx-family/lynx-stack/pull/1956))
 
 - feat: support declaring cross-thread shared modules via Import Attributes, enabling Main Thread Functions to call standard JS functions directly. ([#1968](https://github.com/lynx-family/lynx-stack/pull/1968))
+
   - Usage: Add `with { runtime: "shared" }` to the `import` statement. For example:
 
     ```ts
-    import { func } from "./utils.js" with { runtime: "shared" };
+    import { func } from './utils.js' with { runtime: 'shared' };
 
     function worklet() {
-      "main thread";
+      'main thread';
       func(); // callable inside a main thread function
     }
     ```
@@ -368,11 +375,13 @@
 - **BREAKING CHANGE**: Delay the `createSnapshot` operation to `Snapshot` constructor to speed up IFR. ([#1899](https://github.com/lynx-family/lynx-stack/pull/1899))
 
   This change refactors how snapshots are created and registered:
+
   - Removed the `entryUniqID` function
   - Snapshots are now lazily created via `snapshotCreatorMap` instead of eagerly at bundle load time
   - Snapshot IDs are generated at compile time and only prefixed with `${globDynamicComponentEntry}:` for standalone lazy bundles
 
   **⚠️ Lazy Bundle Compatibility:**
+
   - **Backward compatibility (new runtime → old lazy bundles)**: ✅ **Supported**. Old lazy bundles will work with the new runtime.
 
   - **Forward compatibility (old runtime → new lazy bundles)**: ❌ **NOT Supported**. Lower version consumers **will not be able to load lazy bundles produced by this version** due to the changed snapshot creation mechanism.
@@ -427,11 +436,11 @@
 - Support testing React Compiler in testing library. Enable React Compiler by setting the `experimental_enableReactCompiler` option of `createVitestConfig` to `true`. ([#1269](https://github.com/lynx-family/lynx-stack/pull/1269))
 
   ```js
-  import { defineConfig, mergeConfig } from "vitest/config";
-  import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
+  import { defineConfig, mergeConfig } from 'vitest/config';
+  import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
 
   const defaultConfig = await createVitestConfig({
-    runtimePkgName: "@lynx-js/react",
+    runtimePkgName: '@lynx-js/react',
     experimental_enableReactCompiler: true,
   });
 
@@ -461,7 +470,7 @@
   ```tsx
   function App() {
     function handleInnerTap(event: MainThread.TouchEvent) {
-      "main thread";
+      'main thread';
       event.stopPropagation();
       // Or stop immediate propagation with
       // event.stopImmediatePropagation();
@@ -559,10 +568,10 @@
 - Add `animate` API in Main Thread Script(MTS), so you can now control a CSS animation imperatively ([#1534](https://github.com/lynx-family/lynx-stack/pull/1534))
 
   ```ts
-  import type { MainThread } from "@lynx-js/types";
+  import type { MainThread } from '@lynx-js/types';
 
   function startAnimation(ele: MainThread.Element) {
-    "main thread";
+    'main thread';
     const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
       duration: 3000,
     });
@@ -591,12 +600,13 @@
 - Supports `recyclable` attribute in `<list-item>` to control whether the list item is recyclable. The `recyclable` attribute depends on Lynx Engine 3.4 or later. ([#1388](https://github.com/lynx-family/lynx-stack/pull/1388))
 
   ```jsx
-  <list-item recyclable={false} />
+  <list-item recyclable={false} />;
   ```
 
 - feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
 
 - Add profile in production build: ([#1336](https://github.com/lynx-family/lynx-stack/pull/1336))
+
   1. `diff:__COMPONENT_NAME__`: how long ReactLynx diff took.
   2. `render:__COMPONENT_NAME__`: how long your render function took.
   3. `setState`: an instant trace event, indicate when your setState was called.
@@ -611,7 +621,7 @@
 
   ```ts
   function handleTap() {
-    "main thread";
+    'main thread';
     // The following check always returned false before this fix
     if (myHandleTap) {
       runOnBackground(myHandleTap)();
@@ -634,6 +644,7 @@
 - feat: Force synchronous rendering for background initial renders to support Suspense fallbacks ([#1323](https://github.com/lynx-family/lynx-stack/pull/1323))
 
 - Introduces `@lynx-js/react/compat` submodule exporting Preact implementations of: ([#1316](https://github.com/lynx-family/lynx-stack/pull/1316))
+
   - `startTransition`
   - `useTransition`
 
@@ -671,10 +682,10 @@
   Add the import to `@lynx-js/react/debug` at the first line of the entry:
 
   ```js
-  import "@lynx-js/react/debug";
-  import { root } from "@lynx-js/react";
+  import '@lynx-js/react/debug';
+  import { root } from '@lynx-js/react';
 
-  import { App } from "./App.jsx";
+  import { App } from './App.jsx';
 
   root.render(<App />);
   ```
@@ -684,9 +695,9 @@
   For example, you can use it like this:
 
   ```jsx
-  <list-item defer={{ unmountRecycled: true }} item-key="1">
+  <list-item defer={{ unmountRecycled: true }} item-key='1'>
     <WillBeUnmountIfRecycled />
-  </list-item>
+  </list-item>;
   ```
 
   Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
@@ -694,7 +705,7 @@
 - Avoid some unexpected `__SetAttribute` in hydrate when `undefined` is passed as an attribute value to intrinsic elements, for example: ([#1318](https://github.com/lynx-family/lynx-stack/pull/1318))
 
   ```jsx
-  <image async-mode={undefined} />
+  <image async-mode={undefined} />;
   ```
 
 ## 0.111.1
@@ -733,13 +744,14 @@
 - Fixed: An issue where the `lynxViewDidUpdate` callback did not trigger when data was updated from native. ([#1171](https://github.com/lynx-family/lynx-stack/pull/1171))
 
   Notice:
+
   - Even if no data changes are actually processed after calling `updateData()`, the `lynxViewDidUpdate` callback will still be triggered.
   - Only one `lynxViewDidUpdate` callback will be triggered per render cycle. Consequently, if multiple `updateData()` calls are made within a single cycle but the data updates are batched, the number of `lynxViewDidUpdate` callbacks triggered may be less than the number of `updateData()` calls.
 
 - Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
 
   ```js
-  import { act } from "@lynx-js/react/testing-library";
+  import { act } from '@lynx-js/react/testing-library';
 
   act(() => {
     // ...
@@ -759,12 +771,14 @@
 - Fixed closure variable capture issue in effect hooks to prevent stale values and ensured proper execution order between refs, effects, and event handlers. ([#770](https://github.com/lynx-family/lynx-stack/pull/770))
 
   **Breaking Changes**:
+
   - The execution timing of `ref`, `useEffect()` callback, `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` and the callback of `setState` have been moved forward. These effects will now execute before hydration is complete, rather than waiting for the main thread update to complete.
   - For components inside `<list />`, `ref` callbacks will now be triggered during background thread rendering, regardless of component visibility. If your code depends on component visibility timing, use `main-thread:ref` instead of regular `ref`.
 
 ### Patch Changes
 
 - Fixed two memory leaks: ([#1071](https://github.com/lynx-family/lynx-stack/pull/1071))
+
   1. When JSX is rendered on the main thread and removed, FiberElement can still be referenced by `__root.__jsx` through `props.children`;
 
   2. When the SnapshotInstance tree is removed from the root node, its child nodes form a cycle reference because the `__previousSibling` and `__nextSibling` properties point to each other, thus causing a FiberElement leak.
@@ -843,7 +857,8 @@
      * 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
      */
     experimental-batch-render-strategy={3}
-  ></list>
+  >
+  </list>;
   ```
 
 - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
@@ -869,6 +884,7 @@
 ### Minor Changes
 
 - Some of the timing keys are renamed to match the naming convention of the Lynx Engine. ([#438](https://github.com/lynx-family/lynx-stack/pull/438))
+
   - `update_set_state_trigger` -> `updateSetStateTrigger`
   - `update_diff_vdom_start` -> `updateDiffVdomStart`
   - `update_diff_vdom_end` -> `updateDiffVdomEnd`
@@ -960,7 +976,7 @@
   You can now use `useErrorBoundary` it in TypeScript like this:
 
   ```tsx
-  import { useErrorBoundary } from "@lynx-js/react";
+  import { useErrorBoundary } from '@lynx-js/react';
   ```
 
 - Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
@@ -1012,13 +1028,13 @@
   Now you can get the return value from `runOnBackground()` and `runOnMainThread()`, which enables more flexible data flow between the main thread and the background thread.
 
   ```js
-  import { runOnBackground } from "@lynx-js/react";
+  import { runOnBackground } from '@lynx-js/react';
 
   const onTap = async () => {
-    "main thread";
+    'main thread';
     const text = await runOnBackground(() => {
-      "background only";
-      return "Hello, world!";
+      'background only';
+      return 'Hello, world!';
     })();
     console.log(text);
   };
@@ -1053,9 +1069,9 @@
 
   ```ts
   // These imports will be removed from the final bundle
-  import type { Foo } from "xyz";
-  import { type Bar } from "xyz";
-  import { xyz } from "xyz"; // When xyz is not used
+  import type { Foo } from 'xyz';
+  import { type Bar } from 'xyz';
+  import { xyz } from 'xyz'; // When xyz is not used
   ```
 
   See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
@@ -1095,7 +1111,7 @@
     const f = undefined;
 
     function mts() {
-      "main thread";
+      'main thread';
       // throws in background rendering
       f && runOnBackground(f)();
     }
@@ -1129,14 +1145,14 @@
 - a30c83d: Add `compat.removeComponentAttrRegex`.
 
   ```js
-  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
-  import { defineConfig } from "@lynx-js/rspeedy";
+  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
+  import { defineConfig } from '@lynx-js/rspeedy';
 
   export default defineConfig({
     plugins: [
       pluginReactLynx({
         compat: {
-          removeComponentAttrRegex: "YOUR REGEX",
+          removeComponentAttrRegex: 'YOUR REGEX',
         },
       }),
     ],
@@ -1213,6 +1229,7 @@
   </table>
 
   This requires `@lynx-js/react-rsbuild-plugin` v0.5.1 to work.
+
   - Inject `globDynamicComponentEntry` for background script. ([#311](https://github.com/lynx-wg/lynx-stack/pull/311))
   - Inject `globDynamicComponentEntry` for main thread script. ([#312](https://github.com/lynx-wg/lynx-stack/pull/312))
 
@@ -1221,22 +1238,22 @@
   Gesture Handler is a set of gesture handling capabilities built on top of the Main Thread Script. It currently supports drag, inertial scrolling, long press, and tap gestures for `<view>`, `<scroll-view>`, `<list>`, and `<text>`. In the future, it will also support multi-finger zoom, multi-finger rotation, and other gesture capabilities.
 
   ```tsx
-  import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
+  import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
 
   function App() {
     const pan = useGesture(PanGesture);
 
     pan
       .onBegin((event, stateManager) => {
-        "main thread";
+        'main thread';
         // some logic
       })
       .onUpdate((event, stateManager) => {
-        "main thread";
+        'main thread';
         // some logic
       })
       .onEnd((event, stateManager) => {
-        "main thread";
+        'main thread';
         // some logic
       });
 
@@ -1256,7 +1273,7 @@
       return;
     }
 
-    console.log("not __LEPUS__"); // This can be removed now
+    console.log('not __LEPUS__'); // This can be removed now
   }
   ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react-canary",
-  "version": "0.121.2-canary-20260617-bb7927bd",
+  "version": "0.121.2",
   "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
   "repository": {
     "type": "git",