@lynx-js/react-canary 0.112.2-canary-20250809-c8ce6aa3 → 0.112.2
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 +29 -28
- package/package.json +1 -1
- package/refresh/.turbo/turbo-build.log +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.112.2
|
|
3
|
+
## 0.112.2
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
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))
|
|
8
8
|
|
|
9
9
|
```jsx
|
|
10
|
-
<list-item recyclable={false}
|
|
10
|
+
<list-item recyclable={false} />;
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
|
|
29
29
|
```ts
|
|
30
30
|
function handleTap() {
|
|
31
|
-
|
|
31
|
+
'main thread';
|
|
32
32
|
// The following check always returned false before this fix
|
|
33
33
|
if (myHandleTap) {
|
|
34
34
|
runOnBackground(myHandleTap)();
|
|
@@ -89,10 +89,10 @@
|
|
|
89
89
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
90
90
|
|
|
91
91
|
```js
|
|
92
|
-
import
|
|
93
|
-
import { root } from
|
|
92
|
+
import '@lynx-js/react/debug';
|
|
93
|
+
import { root } from '@lynx-js/react';
|
|
94
94
|
|
|
95
|
-
import { App } from
|
|
95
|
+
import { App } from './App.jsx';
|
|
96
96
|
|
|
97
97
|
root.render(<App />);
|
|
98
98
|
```
|
|
@@ -102,9 +102,9 @@
|
|
|
102
102
|
For example, you can use it like this:
|
|
103
103
|
|
|
104
104
|
```jsx
|
|
105
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
105
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
106
106
|
<WillBeUnmountIfRecycled />
|
|
107
|
-
</list-item
|
|
107
|
+
</list-item>;
|
|
108
108
|
```
|
|
109
109
|
|
|
110
110
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -112,7 +112,7 @@
|
|
|
112
112
|
- 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
113
|
|
|
114
114
|
```jsx
|
|
115
|
-
<image async-mode={undefined}
|
|
115
|
+
<image async-mode={undefined} />;
|
|
116
116
|
```
|
|
117
117
|
|
|
118
118
|
## 0.111.1
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
159
159
|
|
|
160
160
|
```js
|
|
161
|
-
import { act } from
|
|
161
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
162
162
|
|
|
163
163
|
act(() => {
|
|
164
164
|
// ...
|
|
@@ -264,7 +264,8 @@
|
|
|
264
264
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
265
265
|
*/
|
|
266
266
|
experimental-batch-render-strategy={3}
|
|
267
|
-
|
|
267
|
+
>
|
|
268
|
+
</list>;
|
|
268
269
|
```
|
|
269
270
|
|
|
270
271
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -382,7 +383,7 @@
|
|
|
382
383
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
383
384
|
|
|
384
385
|
```tsx
|
|
385
|
-
import { useErrorBoundary } from
|
|
386
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
386
387
|
```
|
|
387
388
|
|
|
388
389
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -434,13 +435,13 @@
|
|
|
434
435
|
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.
|
|
435
436
|
|
|
436
437
|
```js
|
|
437
|
-
import { runOnBackground } from
|
|
438
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
438
439
|
|
|
439
440
|
const onTap = async () => {
|
|
440
|
-
|
|
441
|
+
'main thread';
|
|
441
442
|
const text = await runOnBackground(() => {
|
|
442
|
-
|
|
443
|
-
return
|
|
443
|
+
'background only';
|
|
444
|
+
return 'Hello, world!';
|
|
444
445
|
})();
|
|
445
446
|
console.log(text);
|
|
446
447
|
};
|
|
@@ -475,9 +476,9 @@
|
|
|
475
476
|
|
|
476
477
|
```ts
|
|
477
478
|
// These imports will be removed from the final bundle
|
|
478
|
-
import type { Foo } from
|
|
479
|
-
import { type Bar } from
|
|
480
|
-
import { xyz } from
|
|
479
|
+
import type { Foo } from 'xyz';
|
|
480
|
+
import { type Bar } from 'xyz';
|
|
481
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
481
482
|
```
|
|
482
483
|
|
|
483
484
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -517,7 +518,7 @@
|
|
|
517
518
|
const f = undefined;
|
|
518
519
|
|
|
519
520
|
function mts() {
|
|
520
|
-
|
|
521
|
+
'main thread';
|
|
521
522
|
// throws in background rendering
|
|
522
523
|
f && runOnBackground(f)();
|
|
523
524
|
}
|
|
@@ -551,14 +552,14 @@
|
|
|
551
552
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
552
553
|
|
|
553
554
|
```js
|
|
554
|
-
import { pluginReactLynx } from
|
|
555
|
-
import { defineConfig } from
|
|
555
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
556
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
556
557
|
|
|
557
558
|
export default defineConfig({
|
|
558
559
|
plugins: [
|
|
559
560
|
pluginReactLynx({
|
|
560
561
|
compat: {
|
|
561
|
-
removeComponentAttrRegex:
|
|
562
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
562
563
|
},
|
|
563
564
|
}),
|
|
564
565
|
],
|
|
@@ -644,22 +645,22 @@
|
|
|
644
645
|
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.
|
|
645
646
|
|
|
646
647
|
```tsx
|
|
647
|
-
import { useGesture, PanGesture } from
|
|
648
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
648
649
|
|
|
649
650
|
function App() {
|
|
650
651
|
const pan = useGesture(PanGesture);
|
|
651
652
|
|
|
652
653
|
pan
|
|
653
654
|
.onBegin((event, stateManager) => {
|
|
654
|
-
|
|
655
|
+
'main thread';
|
|
655
656
|
// some logic
|
|
656
657
|
})
|
|
657
658
|
.onUpdate((event, stateManager) => {
|
|
658
|
-
|
|
659
|
+
'main thread';
|
|
659
660
|
// some logic
|
|
660
661
|
})
|
|
661
662
|
.onEnd((event, stateManager) => {
|
|
662
|
-
|
|
663
|
+
'main thread';
|
|
663
664
|
// some logic
|
|
664
665
|
});
|
|
665
666
|
|
|
@@ -679,7 +680,7 @@
|
|
|
679
680
|
return;
|
|
680
681
|
}
|
|
681
682
|
|
|
682
|
-
console.log(
|
|
683
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
683
684
|
}
|
|
684
685
|
```
|
|
685
686
|
|
package/package.json
CHANGED