@lynx-js/react-canary 0.113.0-canary-20250915-59a0d600 → 0.113.0
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 +31 -30
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.113.0
|
|
3
|
+
## 0.113.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
- 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))
|
|
54
54
|
|
|
55
55
|
```ts
|
|
56
|
-
import type { MainThread } from
|
|
56
|
+
import type { MainThread } from '@lynx-js/types';
|
|
57
57
|
|
|
58
58
|
function startAnimation(ele: MainThread.Element) {
|
|
59
|
-
|
|
59
|
+
'main thread';
|
|
60
60
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
61
61
|
duration: 3000,
|
|
62
62
|
});
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
- 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))
|
|
86
86
|
|
|
87
87
|
```jsx
|
|
88
|
-
<list-item recyclable={false}
|
|
88
|
+
<list-item recyclable={false} />;
|
|
89
89
|
```
|
|
90
90
|
|
|
91
91
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
```ts
|
|
108
108
|
function handleTap() {
|
|
109
|
-
|
|
109
|
+
'main thread';
|
|
110
110
|
// The following check always returned false before this fix
|
|
111
111
|
if (myHandleTap) {
|
|
112
112
|
runOnBackground(myHandleTap)();
|
|
@@ -167,10 +167,10 @@
|
|
|
167
167
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
168
168
|
|
|
169
169
|
```js
|
|
170
|
-
import
|
|
171
|
-
import { root } from
|
|
170
|
+
import '@lynx-js/react/debug';
|
|
171
|
+
import { root } from '@lynx-js/react';
|
|
172
172
|
|
|
173
|
-
import { App } from
|
|
173
|
+
import { App } from './App.jsx';
|
|
174
174
|
|
|
175
175
|
root.render(<App />);
|
|
176
176
|
```
|
|
@@ -180,9 +180,9 @@
|
|
|
180
180
|
For example, you can use it like this:
|
|
181
181
|
|
|
182
182
|
```jsx
|
|
183
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
183
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
184
184
|
<WillBeUnmountIfRecycled />
|
|
185
|
-
</list-item
|
|
185
|
+
</list-item>;
|
|
186
186
|
```
|
|
187
187
|
|
|
188
188
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -190,7 +190,7 @@
|
|
|
190
190
|
- 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))
|
|
191
191
|
|
|
192
192
|
```jsx
|
|
193
|
-
<image async-mode={undefined}
|
|
193
|
+
<image async-mode={undefined} />;
|
|
194
194
|
```
|
|
195
195
|
|
|
196
196
|
## 0.111.1
|
|
@@ -236,7 +236,7 @@
|
|
|
236
236
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
237
237
|
|
|
238
238
|
```js
|
|
239
|
-
import { act } from
|
|
239
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
240
240
|
|
|
241
241
|
act(() => {
|
|
242
242
|
// ...
|
|
@@ -342,7 +342,8 @@
|
|
|
342
342
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
343
343
|
*/
|
|
344
344
|
experimental-batch-render-strategy={3}
|
|
345
|
-
|
|
345
|
+
>
|
|
346
|
+
</list>;
|
|
346
347
|
```
|
|
347
348
|
|
|
348
349
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -460,7 +461,7 @@
|
|
|
460
461
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
461
462
|
|
|
462
463
|
```tsx
|
|
463
|
-
import { useErrorBoundary } from
|
|
464
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
464
465
|
```
|
|
465
466
|
|
|
466
467
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -512,13 +513,13 @@
|
|
|
512
513
|
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.
|
|
513
514
|
|
|
514
515
|
```js
|
|
515
|
-
import { runOnBackground } from
|
|
516
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
516
517
|
|
|
517
518
|
const onTap = async () => {
|
|
518
|
-
|
|
519
|
+
'main thread';
|
|
519
520
|
const text = await runOnBackground(() => {
|
|
520
|
-
|
|
521
|
-
return
|
|
521
|
+
'background only';
|
|
522
|
+
return 'Hello, world!';
|
|
522
523
|
})();
|
|
523
524
|
console.log(text);
|
|
524
525
|
};
|
|
@@ -553,9 +554,9 @@
|
|
|
553
554
|
|
|
554
555
|
```ts
|
|
555
556
|
// These imports will be removed from the final bundle
|
|
556
|
-
import type { Foo } from
|
|
557
|
-
import { type Bar } from
|
|
558
|
-
import { xyz } from
|
|
557
|
+
import type { Foo } from 'xyz';
|
|
558
|
+
import { type Bar } from 'xyz';
|
|
559
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
559
560
|
```
|
|
560
561
|
|
|
561
562
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -595,7 +596,7 @@
|
|
|
595
596
|
const f = undefined;
|
|
596
597
|
|
|
597
598
|
function mts() {
|
|
598
|
-
|
|
599
|
+
'main thread';
|
|
599
600
|
// throws in background rendering
|
|
600
601
|
f && runOnBackground(f)();
|
|
601
602
|
}
|
|
@@ -629,14 +630,14 @@
|
|
|
629
630
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
630
631
|
|
|
631
632
|
```js
|
|
632
|
-
import { pluginReactLynx } from
|
|
633
|
-
import { defineConfig } from
|
|
633
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
634
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
634
635
|
|
|
635
636
|
export default defineConfig({
|
|
636
637
|
plugins: [
|
|
637
638
|
pluginReactLynx({
|
|
638
639
|
compat: {
|
|
639
|
-
removeComponentAttrRegex:
|
|
640
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
640
641
|
},
|
|
641
642
|
}),
|
|
642
643
|
],
|
|
@@ -722,22 +723,22 @@
|
|
|
722
723
|
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.
|
|
723
724
|
|
|
724
725
|
```tsx
|
|
725
|
-
import { useGesture, PanGesture } from
|
|
726
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
726
727
|
|
|
727
728
|
function App() {
|
|
728
729
|
const pan = useGesture(PanGesture);
|
|
729
730
|
|
|
730
731
|
pan
|
|
731
732
|
.onBegin((event, stateManager) => {
|
|
732
|
-
|
|
733
|
+
'main thread';
|
|
733
734
|
// some logic
|
|
734
735
|
})
|
|
735
736
|
.onUpdate((event, stateManager) => {
|
|
736
|
-
|
|
737
|
+
'main thread';
|
|
737
738
|
// some logic
|
|
738
739
|
})
|
|
739
740
|
.onEnd((event, stateManager) => {
|
|
740
|
-
|
|
741
|
+
'main thread';
|
|
741
742
|
// some logic
|
|
742
743
|
});
|
|
743
744
|
|
|
@@ -757,7 +758,7 @@
|
|
|
757
758
|
return;
|
|
758
759
|
}
|
|
759
760
|
|
|
760
|
-
console.log(
|
|
761
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
761
762
|
}
|
|
762
763
|
```
|
|
763
764
|
|
package/package.json
CHANGED