@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 +33 -28
- package/package.json +1 -1
- package/transform/dist/wasm.cjs +1 -1
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
|
-
|
|
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
|
|
93
|
-
import { root } from
|
|
98
|
+
import "@lynx-js/react/debug";
|
|
99
|
+
import { root } from "@lynx-js/react";
|
|
94
100
|
|
|
95
|
-
import { App } from
|
|
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=
|
|
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
|
|
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
|
|
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
|
|
443
|
+
import { runOnBackground } from "@lynx-js/react";
|
|
439
444
|
|
|
440
445
|
const onTap = async () => {
|
|
441
|
-
|
|
446
|
+
"main thread";
|
|
442
447
|
const text = await runOnBackground(() => {
|
|
443
|
-
|
|
444
|
-
return
|
|
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
|
|
480
|
-
import { type Bar } from
|
|
481
|
-
import { xyz } from
|
|
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
|
-
|
|
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
|
|
556
|
-
import { defineConfig } from
|
|
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:
|
|
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
|
|
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
|
-
|
|
660
|
+
"main thread";
|
|
656
661
|
// some logic
|
|
657
662
|
})
|
|
658
663
|
.onUpdate((event, stateManager) => {
|
|
659
|
-
|
|
664
|
+
"main thread";
|
|
660
665
|
// some logic
|
|
661
666
|
})
|
|
662
667
|
.onEnd((event, stateManager) => {
|
|
663
|
-
|
|
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(
|
|
688
|
+
console.log("not __LEPUS__"); // This can be removed now
|
|
684
689
|
}
|
|
685
690
|
```
|
|
686
691
|
|
package/package.json
CHANGED