@lynx-js/react-canary 0.112.3-canary-20250815-7e47c4a7 → 0.112.3
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,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.112.3
|
|
3
|
+
## 0.112.3
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
- 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))
|
|
20
20
|
|
|
21
21
|
```jsx
|
|
22
|
-
<list-item recyclable={false}
|
|
22
|
+
<list-item recyclable={false} />;
|
|
23
23
|
```
|
|
24
24
|
|
|
25
25
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
|
|
41
41
|
```ts
|
|
42
42
|
function handleTap() {
|
|
43
|
-
|
|
43
|
+
'main thread';
|
|
44
44
|
// The following check always returned false before this fix
|
|
45
45
|
if (myHandleTap) {
|
|
46
46
|
runOnBackground(myHandleTap)();
|
|
@@ -101,10 +101,10 @@
|
|
|
101
101
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
102
102
|
|
|
103
103
|
```js
|
|
104
|
-
import
|
|
105
|
-
import { root } from
|
|
104
|
+
import '@lynx-js/react/debug';
|
|
105
|
+
import { root } from '@lynx-js/react';
|
|
106
106
|
|
|
107
|
-
import { App } from
|
|
107
|
+
import { App } from './App.jsx';
|
|
108
108
|
|
|
109
109
|
root.render(<App />);
|
|
110
110
|
```
|
|
@@ -114,9 +114,9 @@
|
|
|
114
114
|
For example, you can use it like this:
|
|
115
115
|
|
|
116
116
|
```jsx
|
|
117
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
117
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
118
118
|
<WillBeUnmountIfRecycled />
|
|
119
|
-
</list-item
|
|
119
|
+
</list-item>;
|
|
120
120
|
```
|
|
121
121
|
|
|
122
122
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -124,7 +124,7 @@
|
|
|
124
124
|
- 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))
|
|
125
125
|
|
|
126
126
|
```jsx
|
|
127
|
-
<image async-mode={undefined}
|
|
127
|
+
<image async-mode={undefined} />;
|
|
128
128
|
```
|
|
129
129
|
|
|
130
130
|
## 0.111.1
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
171
171
|
|
|
172
172
|
```js
|
|
173
|
-
import { act } from
|
|
173
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
174
174
|
|
|
175
175
|
act(() => {
|
|
176
176
|
// ...
|
|
@@ -276,7 +276,8 @@
|
|
|
276
276
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
277
277
|
*/
|
|
278
278
|
experimental-batch-render-strategy={3}
|
|
279
|
-
|
|
279
|
+
>
|
|
280
|
+
</list>;
|
|
280
281
|
```
|
|
281
282
|
|
|
282
283
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -394,7 +395,7 @@
|
|
|
394
395
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
395
396
|
|
|
396
397
|
```tsx
|
|
397
|
-
import { useErrorBoundary } from
|
|
398
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
398
399
|
```
|
|
399
400
|
|
|
400
401
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -446,13 +447,13 @@
|
|
|
446
447
|
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.
|
|
447
448
|
|
|
448
449
|
```js
|
|
449
|
-
import { runOnBackground } from
|
|
450
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
450
451
|
|
|
451
452
|
const onTap = async () => {
|
|
452
|
-
|
|
453
|
+
'main thread';
|
|
453
454
|
const text = await runOnBackground(() => {
|
|
454
|
-
|
|
455
|
-
return
|
|
455
|
+
'background only';
|
|
456
|
+
return 'Hello, world!';
|
|
456
457
|
})();
|
|
457
458
|
console.log(text);
|
|
458
459
|
};
|
|
@@ -487,9 +488,9 @@
|
|
|
487
488
|
|
|
488
489
|
```ts
|
|
489
490
|
// These imports will be removed from the final bundle
|
|
490
|
-
import type { Foo } from
|
|
491
|
-
import { type Bar } from
|
|
492
|
-
import { xyz } from
|
|
491
|
+
import type { Foo } from 'xyz';
|
|
492
|
+
import { type Bar } from 'xyz';
|
|
493
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
493
494
|
```
|
|
494
495
|
|
|
495
496
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -529,7 +530,7 @@
|
|
|
529
530
|
const f = undefined;
|
|
530
531
|
|
|
531
532
|
function mts() {
|
|
532
|
-
|
|
533
|
+
'main thread';
|
|
533
534
|
// throws in background rendering
|
|
534
535
|
f && runOnBackground(f)();
|
|
535
536
|
}
|
|
@@ -563,14 +564,14 @@
|
|
|
563
564
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
564
565
|
|
|
565
566
|
```js
|
|
566
|
-
import { pluginReactLynx } from
|
|
567
|
-
import { defineConfig } from
|
|
567
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
568
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
568
569
|
|
|
569
570
|
export default defineConfig({
|
|
570
571
|
plugins: [
|
|
571
572
|
pluginReactLynx({
|
|
572
573
|
compat: {
|
|
573
|
-
removeComponentAttrRegex:
|
|
574
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
574
575
|
},
|
|
575
576
|
}),
|
|
576
577
|
],
|
|
@@ -656,22 +657,22 @@
|
|
|
656
657
|
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.
|
|
657
658
|
|
|
658
659
|
```tsx
|
|
659
|
-
import { useGesture, PanGesture } from
|
|
660
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
660
661
|
|
|
661
662
|
function App() {
|
|
662
663
|
const pan = useGesture(PanGesture);
|
|
663
664
|
|
|
664
665
|
pan
|
|
665
666
|
.onBegin((event, stateManager) => {
|
|
666
|
-
|
|
667
|
+
'main thread';
|
|
667
668
|
// some logic
|
|
668
669
|
})
|
|
669
670
|
.onUpdate((event, stateManager) => {
|
|
670
|
-
|
|
671
|
+
'main thread';
|
|
671
672
|
// some logic
|
|
672
673
|
})
|
|
673
674
|
.onEnd((event, stateManager) => {
|
|
674
|
-
|
|
675
|
+
'main thread';
|
|
675
676
|
// some logic
|
|
676
677
|
});
|
|
677
678
|
|
|
@@ -691,7 +692,7 @@
|
|
|
691
692
|
return;
|
|
692
693
|
}
|
|
693
694
|
|
|
694
|
-
console.log(
|
|
695
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
695
696
|
}
|
|
696
697
|
```
|
|
697
698
|
|
package/package.json
CHANGED