@lynx-js/react-canary 0.112.6-canary-20250905-ebb01775 → 0.112.6
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.112.6
|
|
3
|
+
## 0.112.6
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
- 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))
|
|
34
34
|
|
|
35
35
|
```ts
|
|
36
|
-
import type { MainThread } from
|
|
36
|
+
import type { MainThread } from '@lynx-js/types';
|
|
37
37
|
|
|
38
38
|
function startAnimation(ele: MainThread.Element) {
|
|
39
|
-
|
|
39
|
+
'main thread';
|
|
40
40
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
41
41
|
duration: 3000,
|
|
42
42
|
});
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
- 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))
|
|
66
66
|
|
|
67
67
|
```jsx
|
|
68
|
-
<list-item recyclable={false}
|
|
68
|
+
<list-item recyclable={false} />;
|
|
69
69
|
```
|
|
70
70
|
|
|
71
71
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -86,7 +86,7 @@
|
|
|
86
86
|
|
|
87
87
|
```ts
|
|
88
88
|
function handleTap() {
|
|
89
|
-
|
|
89
|
+
'main thread';
|
|
90
90
|
// The following check always returned false before this fix
|
|
91
91
|
if (myHandleTap) {
|
|
92
92
|
runOnBackground(myHandleTap)();
|
|
@@ -147,10 +147,10 @@
|
|
|
147
147
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
148
148
|
|
|
149
149
|
```js
|
|
150
|
-
import
|
|
151
|
-
import { root } from
|
|
150
|
+
import '@lynx-js/react/debug';
|
|
151
|
+
import { root } from '@lynx-js/react';
|
|
152
152
|
|
|
153
|
-
import { App } from
|
|
153
|
+
import { App } from './App.jsx';
|
|
154
154
|
|
|
155
155
|
root.render(<App />);
|
|
156
156
|
```
|
|
@@ -160,9 +160,9 @@
|
|
|
160
160
|
For example, you can use it like this:
|
|
161
161
|
|
|
162
162
|
```jsx
|
|
163
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
163
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
164
164
|
<WillBeUnmountIfRecycled />
|
|
165
|
-
</list-item
|
|
165
|
+
</list-item>;
|
|
166
166
|
```
|
|
167
167
|
|
|
168
168
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
- 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))
|
|
171
171
|
|
|
172
172
|
```jsx
|
|
173
|
-
<image async-mode={undefined}
|
|
173
|
+
<image async-mode={undefined} />;
|
|
174
174
|
```
|
|
175
175
|
|
|
176
176
|
## 0.111.1
|
|
@@ -216,7 +216,7 @@
|
|
|
216
216
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
217
217
|
|
|
218
218
|
```js
|
|
219
|
-
import { act } from
|
|
219
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
220
220
|
|
|
221
221
|
act(() => {
|
|
222
222
|
// ...
|
|
@@ -322,7 +322,8 @@
|
|
|
322
322
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
323
323
|
*/
|
|
324
324
|
experimental-batch-render-strategy={3}
|
|
325
|
-
|
|
325
|
+
>
|
|
326
|
+
</list>;
|
|
326
327
|
```
|
|
327
328
|
|
|
328
329
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -440,7 +441,7 @@
|
|
|
440
441
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
441
442
|
|
|
442
443
|
```tsx
|
|
443
|
-
import { useErrorBoundary } from
|
|
444
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
444
445
|
```
|
|
445
446
|
|
|
446
447
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -492,13 +493,13 @@
|
|
|
492
493
|
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.
|
|
493
494
|
|
|
494
495
|
```js
|
|
495
|
-
import { runOnBackground } from
|
|
496
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
496
497
|
|
|
497
498
|
const onTap = async () => {
|
|
498
|
-
|
|
499
|
+
'main thread';
|
|
499
500
|
const text = await runOnBackground(() => {
|
|
500
|
-
|
|
501
|
-
return
|
|
501
|
+
'background only';
|
|
502
|
+
return 'Hello, world!';
|
|
502
503
|
})();
|
|
503
504
|
console.log(text);
|
|
504
505
|
};
|
|
@@ -533,9 +534,9 @@
|
|
|
533
534
|
|
|
534
535
|
```ts
|
|
535
536
|
// These imports will be removed from the final bundle
|
|
536
|
-
import type { Foo } from
|
|
537
|
-
import { type Bar } from
|
|
538
|
-
import { xyz } from
|
|
537
|
+
import type { Foo } from 'xyz';
|
|
538
|
+
import { type Bar } from 'xyz';
|
|
539
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
539
540
|
```
|
|
540
541
|
|
|
541
542
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -575,7 +576,7 @@
|
|
|
575
576
|
const f = undefined;
|
|
576
577
|
|
|
577
578
|
function mts() {
|
|
578
|
-
|
|
579
|
+
'main thread';
|
|
579
580
|
// throws in background rendering
|
|
580
581
|
f && runOnBackground(f)();
|
|
581
582
|
}
|
|
@@ -609,14 +610,14 @@
|
|
|
609
610
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
610
611
|
|
|
611
612
|
```js
|
|
612
|
-
import { pluginReactLynx } from
|
|
613
|
-
import { defineConfig } from
|
|
613
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
614
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
614
615
|
|
|
615
616
|
export default defineConfig({
|
|
616
617
|
plugins: [
|
|
617
618
|
pluginReactLynx({
|
|
618
619
|
compat: {
|
|
619
|
-
removeComponentAttrRegex:
|
|
620
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
620
621
|
},
|
|
621
622
|
}),
|
|
622
623
|
],
|
|
@@ -702,22 +703,22 @@
|
|
|
702
703
|
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.
|
|
703
704
|
|
|
704
705
|
```tsx
|
|
705
|
-
import { useGesture, PanGesture } from
|
|
706
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
706
707
|
|
|
707
708
|
function App() {
|
|
708
709
|
const pan = useGesture(PanGesture);
|
|
709
710
|
|
|
710
711
|
pan
|
|
711
712
|
.onBegin((event, stateManager) => {
|
|
712
|
-
|
|
713
|
+
'main thread';
|
|
713
714
|
// some logic
|
|
714
715
|
})
|
|
715
716
|
.onUpdate((event, stateManager) => {
|
|
716
|
-
|
|
717
|
+
'main thread';
|
|
717
718
|
// some logic
|
|
718
719
|
})
|
|
719
720
|
.onEnd((event, stateManager) => {
|
|
720
|
-
|
|
721
|
+
'main thread';
|
|
721
722
|
// some logic
|
|
722
723
|
});
|
|
723
724
|
|
|
@@ -737,7 +738,7 @@
|
|
|
737
738
|
return;
|
|
738
739
|
}
|
|
739
740
|
|
|
740
|
-
console.log(
|
|
741
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
741
742
|
}
|
|
742
743
|
```
|
|
743
744
|
|
package/package.json
CHANGED