@lynx-js/react-canary 0.112.4-canary-20250825-e4d116b6 → 0.112.4
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 +41 -40
- package/package.json +1 -1
- package/refresh/.turbo/turbo-build.log +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.112.4
|
|
3
|
+
## 0.112.4
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
-
- fix
|
|
7
|
+
- fix `withInitDataInState` got wrong state in 2nd or more times `defaultDataProcessor`, now it will keep its own state. ([#1478](https://github.com/lynx-family/lynx-stack/pull/1478))
|
|
8
8
|
|
|
9
9
|
- change `__CreateElement('raw-text')` to `__CreateRawText('')` to avoid `setNativeProps` not working ([#1570](https://github.com/lynx-family/lynx-stack/pull/1570))
|
|
10
10
|
|
|
@@ -16,17 +16,17 @@
|
|
|
16
16
|
|
|
17
17
|
- 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))
|
|
18
18
|
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
animation.pause()
|
|
19
|
+
```ts
|
|
20
|
+
import type { MainThread } from '@lynx-js/types';
|
|
21
|
+
|
|
22
|
+
function startAnimation(ele: MainThread.Element) {
|
|
23
|
+
'main thread';
|
|
24
|
+
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
25
|
+
duration: 3000,
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
// Can also be paused
|
|
29
|
+
// animation.pause()
|
|
30
30
|
}
|
|
31
31
|
```
|
|
32
32
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
- 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))
|
|
50
50
|
|
|
51
51
|
```jsx
|
|
52
|
-
<list-item recyclable={false}
|
|
52
|
+
<list-item recyclable={false} />;
|
|
53
53
|
```
|
|
54
54
|
|
|
55
55
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
|
|
71
71
|
```ts
|
|
72
72
|
function handleTap() {
|
|
73
|
-
|
|
73
|
+
'main thread';
|
|
74
74
|
// The following check always returned false before this fix
|
|
75
75
|
if (myHandleTap) {
|
|
76
76
|
runOnBackground(myHandleTap)();
|
|
@@ -131,10 +131,10 @@
|
|
|
131
131
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
132
132
|
|
|
133
133
|
```js
|
|
134
|
-
import
|
|
135
|
-
import { root } from
|
|
134
|
+
import '@lynx-js/react/debug';
|
|
135
|
+
import { root } from '@lynx-js/react';
|
|
136
136
|
|
|
137
|
-
import { App } from
|
|
137
|
+
import { App } from './App.jsx';
|
|
138
138
|
|
|
139
139
|
root.render(<App />);
|
|
140
140
|
```
|
|
@@ -144,9 +144,9 @@
|
|
|
144
144
|
For example, you can use it like this:
|
|
145
145
|
|
|
146
146
|
```jsx
|
|
147
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
147
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
148
148
|
<WillBeUnmountIfRecycled />
|
|
149
|
-
</list-item
|
|
149
|
+
</list-item>;
|
|
150
150
|
```
|
|
151
151
|
|
|
152
152
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -154,7 +154,7 @@
|
|
|
154
154
|
- 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))
|
|
155
155
|
|
|
156
156
|
```jsx
|
|
157
|
-
<image async-mode={undefined}
|
|
157
|
+
<image async-mode={undefined} />;
|
|
158
158
|
```
|
|
159
159
|
|
|
160
160
|
## 0.111.1
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
201
201
|
|
|
202
202
|
```js
|
|
203
|
-
import { act } from
|
|
203
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
204
204
|
|
|
205
205
|
act(() => {
|
|
206
206
|
// ...
|
|
@@ -306,7 +306,8 @@
|
|
|
306
306
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
307
307
|
*/
|
|
308
308
|
experimental-batch-render-strategy={3}
|
|
309
|
-
|
|
309
|
+
>
|
|
310
|
+
</list>;
|
|
310
311
|
```
|
|
311
312
|
|
|
312
313
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -424,7 +425,7 @@
|
|
|
424
425
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
425
426
|
|
|
426
427
|
```tsx
|
|
427
|
-
import { useErrorBoundary } from
|
|
428
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
428
429
|
```
|
|
429
430
|
|
|
430
431
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -476,13 +477,13 @@
|
|
|
476
477
|
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.
|
|
477
478
|
|
|
478
479
|
```js
|
|
479
|
-
import { runOnBackground } from
|
|
480
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
480
481
|
|
|
481
482
|
const onTap = async () => {
|
|
482
|
-
|
|
483
|
+
'main thread';
|
|
483
484
|
const text = await runOnBackground(() => {
|
|
484
|
-
|
|
485
|
-
return
|
|
485
|
+
'background only';
|
|
486
|
+
return 'Hello, world!';
|
|
486
487
|
})();
|
|
487
488
|
console.log(text);
|
|
488
489
|
};
|
|
@@ -517,9 +518,9 @@
|
|
|
517
518
|
|
|
518
519
|
```ts
|
|
519
520
|
// These imports will be removed from the final bundle
|
|
520
|
-
import type { Foo } from
|
|
521
|
-
import { type Bar } from
|
|
522
|
-
import { xyz } from
|
|
521
|
+
import type { Foo } from 'xyz';
|
|
522
|
+
import { type Bar } from 'xyz';
|
|
523
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
523
524
|
```
|
|
524
525
|
|
|
525
526
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -559,7 +560,7 @@
|
|
|
559
560
|
const f = undefined;
|
|
560
561
|
|
|
561
562
|
function mts() {
|
|
562
|
-
|
|
563
|
+
'main thread';
|
|
563
564
|
// throws in background rendering
|
|
564
565
|
f && runOnBackground(f)();
|
|
565
566
|
}
|
|
@@ -593,14 +594,14 @@
|
|
|
593
594
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
594
595
|
|
|
595
596
|
```js
|
|
596
|
-
import { pluginReactLynx } from
|
|
597
|
-
import { defineConfig } from
|
|
597
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
598
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
598
599
|
|
|
599
600
|
export default defineConfig({
|
|
600
601
|
plugins: [
|
|
601
602
|
pluginReactLynx({
|
|
602
603
|
compat: {
|
|
603
|
-
removeComponentAttrRegex:
|
|
604
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
604
605
|
},
|
|
605
606
|
}),
|
|
606
607
|
],
|
|
@@ -686,22 +687,22 @@
|
|
|
686
687
|
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.
|
|
687
688
|
|
|
688
689
|
```tsx
|
|
689
|
-
import { useGesture, PanGesture } from
|
|
690
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
690
691
|
|
|
691
692
|
function App() {
|
|
692
693
|
const pan = useGesture(PanGesture);
|
|
693
694
|
|
|
694
695
|
pan
|
|
695
696
|
.onBegin((event, stateManager) => {
|
|
696
|
-
|
|
697
|
+
'main thread';
|
|
697
698
|
// some logic
|
|
698
699
|
})
|
|
699
700
|
.onUpdate((event, stateManager) => {
|
|
700
|
-
|
|
701
|
+
'main thread';
|
|
701
702
|
// some logic
|
|
702
703
|
})
|
|
703
704
|
.onEnd((event, stateManager) => {
|
|
704
|
-
|
|
705
|
+
'main thread';
|
|
705
706
|
// some logic
|
|
706
707
|
});
|
|
707
708
|
|
|
@@ -721,7 +722,7 @@
|
|
|
721
722
|
return;
|
|
722
723
|
}
|
|
723
724
|
|
|
724
|
-
console.log(
|
|
725
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
725
726
|
}
|
|
726
727
|
```
|
|
727
728
|
|
package/package.json
CHANGED