@lynx-js/react-canary 0.112.2 → 0.112.3-canary-20250812-62775494

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @lynx-js/react
2
2
 
3
+ ## 0.112.3-canary-20250812160747-627754949da8adf1cf0aafe263e3c3437935d78f
4
+
5
+ ### Patch Changes
6
+
7
+ - Handle `<frame/>` correctly. ([#1497](https://github.com/lynx-family/lynx-stack/pull/1497))
8
+
3
9
  ## 0.112.2
4
10
 
5
11
  ### Patch Changes
@@ -7,7 +13,7 @@
7
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))
8
14
 
9
15
  ```jsx
10
- <list-item recyclable={false} />;
16
+ <list-item recyclable={false} />
11
17
  ```
12
18
 
13
19
  - feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
@@ -28,7 +34,7 @@
28
34
 
29
35
  ```ts
30
36
  function handleTap() {
31
- 'main thread';
37
+ "main thread";
32
38
  // The following check always returned false before this fix
33
39
  if (myHandleTap) {
34
40
  runOnBackground(myHandleTap)();
@@ -89,10 +95,10 @@
89
95
  Add the import to `@lynx-js/react/debug` at the first line of the entry:
90
96
 
91
97
  ```js
92
- import '@lynx-js/react/debug';
93
- import { root } from '@lynx-js/react';
98
+ import "@lynx-js/react/debug";
99
+ import { root } from "@lynx-js/react";
94
100
 
95
- import { App } from './App.jsx';
101
+ import { App } from "./App.jsx";
96
102
 
97
103
  root.render(<App />);
98
104
  ```
@@ -102,9 +108,9 @@
102
108
  For example, you can use it like this:
103
109
 
104
110
  ```jsx
105
- <list-item defer={{ unmountRecycled: true }} item-key='1'>
111
+ <list-item defer={{ unmountRecycled: true }} item-key="1">
106
112
  <WillBeUnmountIfRecycled />
107
- </list-item>;
113
+ </list-item>
108
114
  ```
109
115
 
110
116
  Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
@@ -112,7 +118,7 @@
112
118
  - 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))
113
119
 
114
120
  ```jsx
115
- <image async-mode={undefined} />;
121
+ <image async-mode={undefined} />
116
122
  ```
117
123
 
118
124
  ## 0.111.1
@@ -158,7 +164,7 @@
158
164
  - Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
159
165
 
160
166
  ```js
161
- import { act } from '@lynx-js/react/testing-library';
167
+ import { act } from "@lynx-js/react/testing-library";
162
168
 
163
169
  act(() => {
164
170
  // ...
@@ -264,8 +270,7 @@
264
270
  * 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
265
271
  */
266
272
  experimental-batch-render-strategy={3}
267
- >
268
- </list>;
273
+ ></list>
269
274
  ```
270
275
 
271
276
  - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
@@ -383,7 +388,7 @@
383
388
  You can now use `useErrorBoundary` it in TypeScript like this:
384
389
 
385
390
  ```tsx
386
- import { useErrorBoundary } from '@lynx-js/react';
391
+ import { useErrorBoundary } from "@lynx-js/react";
387
392
  ```
388
393
 
389
394
  - Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
@@ -435,13 +440,13 @@
435
440
  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.
436
441
 
437
442
  ```js
438
- import { runOnBackground } from '@lynx-js/react';
443
+ import { runOnBackground } from "@lynx-js/react";
439
444
 
440
445
  const onTap = async () => {
441
- 'main thread';
446
+ "main thread";
442
447
  const text = await runOnBackground(() => {
443
- 'background only';
444
- return 'Hello, world!';
448
+ "background only";
449
+ return "Hello, world!";
445
450
  })();
446
451
  console.log(text);
447
452
  };
@@ -476,9 +481,9 @@
476
481
 
477
482
  ```ts
478
483
  // These imports will be removed from the final bundle
479
- import type { Foo } from 'xyz';
480
- import { type Bar } from 'xyz';
481
- import { xyz } from 'xyz'; // When xyz is not used
484
+ import type { Foo } from "xyz";
485
+ import { type Bar } from "xyz";
486
+ import { xyz } from "xyz"; // When xyz is not used
482
487
  ```
483
488
 
484
489
  See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
@@ -518,7 +523,7 @@
518
523
  const f = undefined;
519
524
 
520
525
  function mts() {
521
- 'main thread';
526
+ "main thread";
522
527
  // throws in background rendering
523
528
  f && runOnBackground(f)();
524
529
  }
@@ -552,14 +557,14 @@
552
557
  - a30c83d: Add `compat.removeComponentAttrRegex`.
553
558
 
554
559
  ```js
555
- import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
556
- import { defineConfig } from '@lynx-js/rspeedy';
560
+ import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
561
+ import { defineConfig } from "@lynx-js/rspeedy";
557
562
 
558
563
  export default defineConfig({
559
564
  plugins: [
560
565
  pluginReactLynx({
561
566
  compat: {
562
- removeComponentAttrRegex: 'YOUR REGEX',
567
+ removeComponentAttrRegex: "YOUR REGEX",
563
568
  },
564
569
  }),
565
570
  ],
@@ -645,22 +650,22 @@
645
650
  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.
646
651
 
647
652
  ```tsx
648
- import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
653
+ import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
649
654
 
650
655
  function App() {
651
656
  const pan = useGesture(PanGesture);
652
657
 
653
658
  pan
654
659
  .onBegin((event, stateManager) => {
655
- 'main thread';
660
+ "main thread";
656
661
  // some logic
657
662
  })
658
663
  .onUpdate((event, stateManager) => {
659
- 'main thread';
664
+ "main thread";
660
665
  // some logic
661
666
  })
662
667
  .onEnd((event, stateManager) => {
663
- 'main thread';
668
+ "main thread";
664
669
  // some logic
665
670
  });
666
671
 
@@ -680,7 +685,7 @@
680
685
  return;
681
686
  }
682
687
 
683
- console.log('not __LEPUS__'); // This can be removed now
688
+ console.log("not __LEPUS__"); // This can be removed now
684
689
  }
685
690
  ```
686
691
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/react-canary",
3
- "version": "0.112.2",
3
+ "version": "0.112.3-canary-20250812-62775494",
4
4
  "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
5
5
  "repository": {
6
6
  "type": "git",