@lynx-js/react-canary 0.114.0-canary-20250921-d0ef559f → 0.114.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/refresh/.turbo/turbo-build.log +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.114.0
|
|
3
|
+
## 0.114.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -73,10 +73,10 @@
|
|
|
73
73
|
- 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))
|
|
74
74
|
|
|
75
75
|
```ts
|
|
76
|
-
import type { MainThread } from
|
|
76
|
+
import type { MainThread } from '@lynx-js/types';
|
|
77
77
|
|
|
78
78
|
function startAnimation(ele: MainThread.Element) {
|
|
79
|
-
|
|
79
|
+
'main thread';
|
|
80
80
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
81
81
|
duration: 3000,
|
|
82
82
|
});
|
|
@@ -105,7 +105,7 @@
|
|
|
105
105
|
- 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))
|
|
106
106
|
|
|
107
107
|
```jsx
|
|
108
|
-
<list-item recyclable={false}
|
|
108
|
+
<list-item recyclable={false} />;
|
|
109
109
|
```
|
|
110
110
|
|
|
111
111
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
|
|
127
127
|
```ts
|
|
128
128
|
function handleTap() {
|
|
129
|
-
|
|
129
|
+
'main thread';
|
|
130
130
|
// The following check always returned false before this fix
|
|
131
131
|
if (myHandleTap) {
|
|
132
132
|
runOnBackground(myHandleTap)();
|
|
@@ -187,10 +187,10 @@
|
|
|
187
187
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
188
188
|
|
|
189
189
|
```js
|
|
190
|
-
import
|
|
191
|
-
import { root } from
|
|
190
|
+
import '@lynx-js/react/debug';
|
|
191
|
+
import { root } from '@lynx-js/react';
|
|
192
192
|
|
|
193
|
-
import { App } from
|
|
193
|
+
import { App } from './App.jsx';
|
|
194
194
|
|
|
195
195
|
root.render(<App />);
|
|
196
196
|
```
|
|
@@ -200,9 +200,9 @@
|
|
|
200
200
|
For example, you can use it like this:
|
|
201
201
|
|
|
202
202
|
```jsx
|
|
203
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
203
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
204
204
|
<WillBeUnmountIfRecycled />
|
|
205
|
-
</list-item
|
|
205
|
+
</list-item>;
|
|
206
206
|
```
|
|
207
207
|
|
|
208
208
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -210,7 +210,7 @@
|
|
|
210
210
|
- 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))
|
|
211
211
|
|
|
212
212
|
```jsx
|
|
213
|
-
<image async-mode={undefined}
|
|
213
|
+
<image async-mode={undefined} />;
|
|
214
214
|
```
|
|
215
215
|
|
|
216
216
|
## 0.111.1
|
|
@@ -256,7 +256,7 @@
|
|
|
256
256
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
257
257
|
|
|
258
258
|
```js
|
|
259
|
-
import { act } from
|
|
259
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
260
260
|
|
|
261
261
|
act(() => {
|
|
262
262
|
// ...
|
|
@@ -362,7 +362,8 @@
|
|
|
362
362
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
363
363
|
*/
|
|
364
364
|
experimental-batch-render-strategy={3}
|
|
365
|
-
|
|
365
|
+
>
|
|
366
|
+
</list>;
|
|
366
367
|
```
|
|
367
368
|
|
|
368
369
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -480,7 +481,7 @@
|
|
|
480
481
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
481
482
|
|
|
482
483
|
```tsx
|
|
483
|
-
import { useErrorBoundary } from
|
|
484
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
484
485
|
```
|
|
485
486
|
|
|
486
487
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -532,13 +533,13 @@
|
|
|
532
533
|
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.
|
|
533
534
|
|
|
534
535
|
```js
|
|
535
|
-
import { runOnBackground } from
|
|
536
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
536
537
|
|
|
537
538
|
const onTap = async () => {
|
|
538
|
-
|
|
539
|
+
'main thread';
|
|
539
540
|
const text = await runOnBackground(() => {
|
|
540
|
-
|
|
541
|
-
return
|
|
541
|
+
'background only';
|
|
542
|
+
return 'Hello, world!';
|
|
542
543
|
})();
|
|
543
544
|
console.log(text);
|
|
544
545
|
};
|
|
@@ -573,9 +574,9 @@
|
|
|
573
574
|
|
|
574
575
|
```ts
|
|
575
576
|
// These imports will be removed from the final bundle
|
|
576
|
-
import type { Foo } from
|
|
577
|
-
import { type Bar } from
|
|
578
|
-
import { xyz } from
|
|
577
|
+
import type { Foo } from 'xyz';
|
|
578
|
+
import { type Bar } from 'xyz';
|
|
579
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
579
580
|
```
|
|
580
581
|
|
|
581
582
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -615,7 +616,7 @@
|
|
|
615
616
|
const f = undefined;
|
|
616
617
|
|
|
617
618
|
function mts() {
|
|
618
|
-
|
|
619
|
+
'main thread';
|
|
619
620
|
// throws in background rendering
|
|
620
621
|
f && runOnBackground(f)();
|
|
621
622
|
}
|
|
@@ -649,14 +650,14 @@
|
|
|
649
650
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
650
651
|
|
|
651
652
|
```js
|
|
652
|
-
import { pluginReactLynx } from
|
|
653
|
-
import { defineConfig } from
|
|
653
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
654
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
654
655
|
|
|
655
656
|
export default defineConfig({
|
|
656
657
|
plugins: [
|
|
657
658
|
pluginReactLynx({
|
|
658
659
|
compat: {
|
|
659
|
-
removeComponentAttrRegex:
|
|
660
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
660
661
|
},
|
|
661
662
|
}),
|
|
662
663
|
],
|
|
@@ -742,22 +743,22 @@
|
|
|
742
743
|
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.
|
|
743
744
|
|
|
744
745
|
```tsx
|
|
745
|
-
import { useGesture, PanGesture } from
|
|
746
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
746
747
|
|
|
747
748
|
function App() {
|
|
748
749
|
const pan = useGesture(PanGesture);
|
|
749
750
|
|
|
750
751
|
pan
|
|
751
752
|
.onBegin((event, stateManager) => {
|
|
752
|
-
|
|
753
|
+
'main thread';
|
|
753
754
|
// some logic
|
|
754
755
|
})
|
|
755
756
|
.onUpdate((event, stateManager) => {
|
|
756
|
-
|
|
757
|
+
'main thread';
|
|
757
758
|
// some logic
|
|
758
759
|
})
|
|
759
760
|
.onEnd((event, stateManager) => {
|
|
760
|
-
|
|
761
|
+
'main thread';
|
|
761
762
|
// some logic
|
|
762
763
|
});
|
|
763
764
|
|
|
@@ -777,7 +778,7 @@
|
|
|
777
778
|
return;
|
|
778
779
|
}
|
|
779
780
|
|
|
780
|
-
console.log(
|
|
781
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
781
782
|
}
|
|
782
783
|
```
|
|
783
784
|
|
package/package.json
CHANGED