@lynx-js/react-canary 0.112.5-canary-20250830-d7d0b9b9 → 0.112.5
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/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.5
|
|
3
|
+
## 0.112.5
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -23,10 +23,10 @@
|
|
|
23
23
|
- 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))
|
|
24
24
|
|
|
25
25
|
```ts
|
|
26
|
-
import type { MainThread } from
|
|
26
|
+
import type { MainThread } from '@lynx-js/types';
|
|
27
27
|
|
|
28
28
|
function startAnimation(ele: MainThread.Element) {
|
|
29
|
-
|
|
29
|
+
'main thread';
|
|
30
30
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
31
31
|
duration: 3000,
|
|
32
32
|
});
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
- 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))
|
|
56
56
|
|
|
57
57
|
```jsx
|
|
58
|
-
<list-item recyclable={false}
|
|
58
|
+
<list-item recyclable={false} />;
|
|
59
59
|
```
|
|
60
60
|
|
|
61
61
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
|
|
77
77
|
```ts
|
|
78
78
|
function handleTap() {
|
|
79
|
-
|
|
79
|
+
'main thread';
|
|
80
80
|
// The following check always returned false before this fix
|
|
81
81
|
if (myHandleTap) {
|
|
82
82
|
runOnBackground(myHandleTap)();
|
|
@@ -137,10 +137,10 @@
|
|
|
137
137
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
138
138
|
|
|
139
139
|
```js
|
|
140
|
-
import
|
|
141
|
-
import { root } from
|
|
140
|
+
import '@lynx-js/react/debug';
|
|
141
|
+
import { root } from '@lynx-js/react';
|
|
142
142
|
|
|
143
|
-
import { App } from
|
|
143
|
+
import { App } from './App.jsx';
|
|
144
144
|
|
|
145
145
|
root.render(<App />);
|
|
146
146
|
```
|
|
@@ -150,9 +150,9 @@
|
|
|
150
150
|
For example, you can use it like this:
|
|
151
151
|
|
|
152
152
|
```jsx
|
|
153
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
153
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
154
154
|
<WillBeUnmountIfRecycled />
|
|
155
|
-
</list-item
|
|
155
|
+
</list-item>;
|
|
156
156
|
```
|
|
157
157
|
|
|
158
158
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
- 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))
|
|
161
161
|
|
|
162
162
|
```jsx
|
|
163
|
-
<image async-mode={undefined}
|
|
163
|
+
<image async-mode={undefined} />;
|
|
164
164
|
```
|
|
165
165
|
|
|
166
166
|
## 0.111.1
|
|
@@ -206,7 +206,7 @@
|
|
|
206
206
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
207
207
|
|
|
208
208
|
```js
|
|
209
|
-
import { act } from
|
|
209
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
210
210
|
|
|
211
211
|
act(() => {
|
|
212
212
|
// ...
|
|
@@ -312,7 +312,8 @@
|
|
|
312
312
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
313
313
|
*/
|
|
314
314
|
experimental-batch-render-strategy={3}
|
|
315
|
-
|
|
315
|
+
>
|
|
316
|
+
</list>;
|
|
316
317
|
```
|
|
317
318
|
|
|
318
319
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -430,7 +431,7 @@
|
|
|
430
431
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
431
432
|
|
|
432
433
|
```tsx
|
|
433
|
-
import { useErrorBoundary } from
|
|
434
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
434
435
|
```
|
|
435
436
|
|
|
436
437
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -482,13 +483,13 @@
|
|
|
482
483
|
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.
|
|
483
484
|
|
|
484
485
|
```js
|
|
485
|
-
import { runOnBackground } from
|
|
486
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
486
487
|
|
|
487
488
|
const onTap = async () => {
|
|
488
|
-
|
|
489
|
+
'main thread';
|
|
489
490
|
const text = await runOnBackground(() => {
|
|
490
|
-
|
|
491
|
-
return
|
|
491
|
+
'background only';
|
|
492
|
+
return 'Hello, world!';
|
|
492
493
|
})();
|
|
493
494
|
console.log(text);
|
|
494
495
|
};
|
|
@@ -523,9 +524,9 @@
|
|
|
523
524
|
|
|
524
525
|
```ts
|
|
525
526
|
// These imports will be removed from the final bundle
|
|
526
|
-
import type { Foo } from
|
|
527
|
-
import { type Bar } from
|
|
528
|
-
import { xyz } from
|
|
527
|
+
import type { Foo } from 'xyz';
|
|
528
|
+
import { type Bar } from 'xyz';
|
|
529
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
529
530
|
```
|
|
530
531
|
|
|
531
532
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -565,7 +566,7 @@
|
|
|
565
566
|
const f = undefined;
|
|
566
567
|
|
|
567
568
|
function mts() {
|
|
568
|
-
|
|
569
|
+
'main thread';
|
|
569
570
|
// throws in background rendering
|
|
570
571
|
f && runOnBackground(f)();
|
|
571
572
|
}
|
|
@@ -599,14 +600,14 @@
|
|
|
599
600
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
600
601
|
|
|
601
602
|
```js
|
|
602
|
-
import { pluginReactLynx } from
|
|
603
|
-
import { defineConfig } from
|
|
603
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
604
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
604
605
|
|
|
605
606
|
export default defineConfig({
|
|
606
607
|
plugins: [
|
|
607
608
|
pluginReactLynx({
|
|
608
609
|
compat: {
|
|
609
|
-
removeComponentAttrRegex:
|
|
610
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
610
611
|
},
|
|
611
612
|
}),
|
|
612
613
|
],
|
|
@@ -692,22 +693,22 @@
|
|
|
692
693
|
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.
|
|
693
694
|
|
|
694
695
|
```tsx
|
|
695
|
-
import { useGesture, PanGesture } from
|
|
696
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
696
697
|
|
|
697
698
|
function App() {
|
|
698
699
|
const pan = useGesture(PanGesture);
|
|
699
700
|
|
|
700
701
|
pan
|
|
701
702
|
.onBegin((event, stateManager) => {
|
|
702
|
-
|
|
703
|
+
'main thread';
|
|
703
704
|
// some logic
|
|
704
705
|
})
|
|
705
706
|
.onUpdate((event, stateManager) => {
|
|
706
|
-
|
|
707
|
+
'main thread';
|
|
707
708
|
// some logic
|
|
708
709
|
})
|
|
709
710
|
.onEnd((event, stateManager) => {
|
|
710
|
-
|
|
711
|
+
'main thread';
|
|
711
712
|
// some logic
|
|
712
713
|
});
|
|
713
714
|
|
|
@@ -727,7 +728,7 @@
|
|
|
727
728
|
return;
|
|
728
729
|
}
|
|
729
730
|
|
|
730
|
-
console.log(
|
|
731
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
731
732
|
}
|
|
732
733
|
```
|
|
733
734
|
|
package/package.json
CHANGED