@lynx-js/react-canary 0.123.2-canary-20260731-46dfcc21 → 0.123.2

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @lynx-js/react
 
-## 0.123.2-canary-20260731090103-46dfcc2166a3750bbf2c5f5600d7b3721eac4dd2
+## 0.123.2
 
 ### Patch Changes
 
@@ -38,8 +38,8 @@
   screen blocks on the fetch with the `mode` import attribute:
 
   ```js
-  import("./Foo.jsx", { with: { mode: "sync" } }); // block the first screen
-  import("./Foo.jsx", { with: { mode: "async" } }); // default, non-blocking
+  import('./Foo.jsx', { with: { mode: 'sync' } }); // block the first screen
+  import('./Foo.jsx', { with: { mode: 'async' } }); // default, non-blocking
   ```
 
   Enable it by setting `engineVersion: '3.9'` (or higher) in `pluginReactLynx`. The
@@ -52,12 +52,12 @@
 
   ```js
   pluginReactLynx({
-    firstScreenSyncTiming: "manual",
+    firstScreenSyncTiming: 'manual',
   });
   ```
 
   ```js
-  import { markFirstScreenSyncReady } from "@lynx-js/react";
+  import { markFirstScreenSyncReady } from '@lynx-js/react';
 
   markFirstScreenSyncReady();
   ```
@@ -67,8 +67,8 @@
 - Add `compat.legacySlot` to `pluginReactLynx`. When enabled, dynamic children are compiled to the pre-SlotV2 form (JSX `children` + `wrapper` elements + `__DynamicPartChildren`/`__DynamicPartSlot` symbols instead of `$0`/`$1` slot props + `SlotV2`), so the compiled output stays compatible with legacy runtimes without `SlotV2` support (`< 0.120.0`, which shipped the SlotV2 refactor in #1764) — e.g. a standalone lazy bundle consumed by a host App that ships an older runtime. ([#2947](https://github.com/lynx-family/lynx-stack/pull/2947))
 
   ```js
-  import { defineConfig } from "@lynx-js/rspeedy";
-  import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
+  import { defineConfig } from '@lynx-js/rspeedy';
+  import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
 
   export default defineConfig({
     plugins: [
@@ -150,13 +150,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.
@@ -182,7 +182,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>
@@ -275,8 +275,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(),
@@ -448,9 +448,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)
   }
   ```
 
@@ -465,7 +465,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}`);
@@ -497,10 +497,10 @@
   - 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
     }
     ```
@@ -577,11 +577,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,
   });
 
@@ -611,7 +611,7 @@
   ```tsx
   function App() {
     function handleInnerTap(event: MainThread.TouchEvent) {
-      "main thread";
+      'main thread';
       event.stopPropagation();
       // Or stop immediate propagation with
       // event.stopImmediatePropagation();
@@ -709,10 +709,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,
     });
@@ -741,7 +741,7 @@
 - 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))
@@ -762,7 +762,7 @@
 
   ```ts
   function handleTap() {
-    "main thread";
+    'main thread';
     // The following check always returned false before this fix
     if (myHandleTap) {
       runOnBackground(myHandleTap)();
@@ -823,10 +823,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 />);
   ```
@@ -836,9 +836,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.
@@ -846,7 +846,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
@@ -892,7 +892,7 @@
 - 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(() => {
     // ...
@@ -998,7 +998,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))
@@ -1116,7 +1117,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))
@@ -1168,13 +1169,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);
   };
@@ -1209,9 +1210,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.
@@ -1251,7 +1252,7 @@
     const f = undefined;
 
     function mts() {
-      "main thread";
+      'main thread';
       // throws in background rendering
       f && runOnBackground(f)();
     }
@@ -1285,14 +1286,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',
         },
       }),
     ],
@@ -1378,22 +1379,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
       });
 
@@ -1413,7 +1414,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.123.2-canary-20260731-46dfcc21",
+  "version": "0.123.2",
   "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
   "repository": {
     "type": "git",