@lynx-js/react-canary 0.114.3 → 0.114.4-canary-20251103-0d7a4c3d
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 +36 -31
- package/package.json +1 -1
- package/testing-library/dist/vitest.config.js +4 -0
- package/transform/dist/wasm.cjs +1 -1
- package/transform/index.d.ts +1 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
+
## 0.114.4-canary-20251103073213-0d7a4c3d49d63e30d5f05c372ef99ee5cf2fcadd
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- When engineVersion is greater than or equal to 3.1, use `__SetAttribute` to set text attribute for text node instead of creating a raw text node. ([#1880](https://github.com/lynx-family/lynx-stack/pull/1880))
|
|
8
|
+
|
|
3
9
|
## 0.114.3
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -23,7 +29,7 @@
|
|
|
23
29
|
```tsx
|
|
24
30
|
function App() {
|
|
25
31
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
26
|
-
|
|
32
|
+
"main thread";
|
|
27
33
|
event.stopPropagation();
|
|
28
34
|
// Or stop immediate propagation with
|
|
29
35
|
// event.stopImmediatePropagation();
|
|
@@ -121,10 +127,10 @@
|
|
|
121
127
|
- 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))
|
|
122
128
|
|
|
123
129
|
```ts
|
|
124
|
-
import type { MainThread } from
|
|
130
|
+
import type { MainThread } from "@lynx-js/types";
|
|
125
131
|
|
|
126
132
|
function startAnimation(ele: MainThread.Element) {
|
|
127
|
-
|
|
133
|
+
"main thread";
|
|
128
134
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
129
135
|
duration: 3000,
|
|
130
136
|
});
|
|
@@ -153,7 +159,7 @@
|
|
|
153
159
|
- 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))
|
|
154
160
|
|
|
155
161
|
```jsx
|
|
156
|
-
<list-item recyclable={false}
|
|
162
|
+
<list-item recyclable={false} />
|
|
157
163
|
```
|
|
158
164
|
|
|
159
165
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -174,7 +180,7 @@
|
|
|
174
180
|
|
|
175
181
|
```ts
|
|
176
182
|
function handleTap() {
|
|
177
|
-
|
|
183
|
+
"main thread";
|
|
178
184
|
// The following check always returned false before this fix
|
|
179
185
|
if (myHandleTap) {
|
|
180
186
|
runOnBackground(myHandleTap)();
|
|
@@ -235,10 +241,10 @@
|
|
|
235
241
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
236
242
|
|
|
237
243
|
```js
|
|
238
|
-
import
|
|
239
|
-
import { root } from
|
|
244
|
+
import "@lynx-js/react/debug";
|
|
245
|
+
import { root } from "@lynx-js/react";
|
|
240
246
|
|
|
241
|
-
import { App } from
|
|
247
|
+
import { App } from "./App.jsx";
|
|
242
248
|
|
|
243
249
|
root.render(<App />);
|
|
244
250
|
```
|
|
@@ -248,9 +254,9 @@
|
|
|
248
254
|
For example, you can use it like this:
|
|
249
255
|
|
|
250
256
|
```jsx
|
|
251
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
257
|
+
<list-item defer={{ unmountRecycled: true }} item-key="1">
|
|
252
258
|
<WillBeUnmountIfRecycled />
|
|
253
|
-
</list-item
|
|
259
|
+
</list-item>
|
|
254
260
|
```
|
|
255
261
|
|
|
256
262
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -258,7 +264,7 @@
|
|
|
258
264
|
- 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))
|
|
259
265
|
|
|
260
266
|
```jsx
|
|
261
|
-
<image async-mode={undefined}
|
|
267
|
+
<image async-mode={undefined} />
|
|
262
268
|
```
|
|
263
269
|
|
|
264
270
|
## 0.111.1
|
|
@@ -304,7 +310,7 @@
|
|
|
304
310
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
305
311
|
|
|
306
312
|
```js
|
|
307
|
-
import { act } from
|
|
313
|
+
import { act } from "@lynx-js/react/testing-library";
|
|
308
314
|
|
|
309
315
|
act(() => {
|
|
310
316
|
// ...
|
|
@@ -410,8 +416,7 @@
|
|
|
410
416
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
411
417
|
*/
|
|
412
418
|
experimental-batch-render-strategy={3}
|
|
413
|
-
>
|
|
414
|
-
</list>;
|
|
419
|
+
></list>
|
|
415
420
|
```
|
|
416
421
|
|
|
417
422
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -529,7 +534,7 @@
|
|
|
529
534
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
530
535
|
|
|
531
536
|
```tsx
|
|
532
|
-
import { useErrorBoundary } from
|
|
537
|
+
import { useErrorBoundary } from "@lynx-js/react";
|
|
533
538
|
```
|
|
534
539
|
|
|
535
540
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -581,13 +586,13 @@
|
|
|
581
586
|
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.
|
|
582
587
|
|
|
583
588
|
```js
|
|
584
|
-
import { runOnBackground } from
|
|
589
|
+
import { runOnBackground } from "@lynx-js/react";
|
|
585
590
|
|
|
586
591
|
const onTap = async () => {
|
|
587
|
-
|
|
592
|
+
"main thread";
|
|
588
593
|
const text = await runOnBackground(() => {
|
|
589
|
-
|
|
590
|
-
return
|
|
594
|
+
"background only";
|
|
595
|
+
return "Hello, world!";
|
|
591
596
|
})();
|
|
592
597
|
console.log(text);
|
|
593
598
|
};
|
|
@@ -622,9 +627,9 @@
|
|
|
622
627
|
|
|
623
628
|
```ts
|
|
624
629
|
// These imports will be removed from the final bundle
|
|
625
|
-
import type { Foo } from
|
|
626
|
-
import { type Bar } from
|
|
627
|
-
import { xyz } from
|
|
630
|
+
import type { Foo } from "xyz";
|
|
631
|
+
import { type Bar } from "xyz";
|
|
632
|
+
import { xyz } from "xyz"; // When xyz is not used
|
|
628
633
|
```
|
|
629
634
|
|
|
630
635
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -664,7 +669,7 @@
|
|
|
664
669
|
const f = undefined;
|
|
665
670
|
|
|
666
671
|
function mts() {
|
|
667
|
-
|
|
672
|
+
"main thread";
|
|
668
673
|
// throws in background rendering
|
|
669
674
|
f && runOnBackground(f)();
|
|
670
675
|
}
|
|
@@ -698,14 +703,14 @@
|
|
|
698
703
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
699
704
|
|
|
700
705
|
```js
|
|
701
|
-
import { pluginReactLynx } from
|
|
702
|
-
import { defineConfig } from
|
|
706
|
+
import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
|
|
707
|
+
import { defineConfig } from "@lynx-js/rspeedy";
|
|
703
708
|
|
|
704
709
|
export default defineConfig({
|
|
705
710
|
plugins: [
|
|
706
711
|
pluginReactLynx({
|
|
707
712
|
compat: {
|
|
708
|
-
removeComponentAttrRegex:
|
|
713
|
+
removeComponentAttrRegex: "YOUR REGEX",
|
|
709
714
|
},
|
|
710
715
|
}),
|
|
711
716
|
],
|
|
@@ -791,22 +796,22 @@
|
|
|
791
796
|
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.
|
|
792
797
|
|
|
793
798
|
```tsx
|
|
794
|
-
import { useGesture, PanGesture } from
|
|
799
|
+
import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
|
|
795
800
|
|
|
796
801
|
function App() {
|
|
797
802
|
const pan = useGesture(PanGesture);
|
|
798
803
|
|
|
799
804
|
pan
|
|
800
805
|
.onBegin((event, stateManager) => {
|
|
801
|
-
|
|
806
|
+
"main thread";
|
|
802
807
|
// some logic
|
|
803
808
|
})
|
|
804
809
|
.onUpdate((event, stateManager) => {
|
|
805
|
-
|
|
810
|
+
"main thread";
|
|
806
811
|
// some logic
|
|
807
812
|
})
|
|
808
813
|
.onEnd((event, stateManager) => {
|
|
809
|
-
|
|
814
|
+
"main thread";
|
|
810
815
|
// some logic
|
|
811
816
|
});
|
|
812
817
|
|
|
@@ -826,7 +831,7 @@
|
|
|
826
831
|
return;
|
|
827
832
|
}
|
|
828
833
|
|
|
829
|
-
console.log(
|
|
834
|
+
console.log("not __LEPUS__"); // This can be removed now
|
|
830
835
|
}
|
|
831
836
|
```
|
|
832
837
|
|
package/package.json
CHANGED
|
@@ -74,6 +74,7 @@ const createVitestConfig = async (options)=>{
|
|
|
74
74
|
filename: relativePath,
|
|
75
75
|
target: 'MIXED'
|
|
76
76
|
},
|
|
77
|
+
engineVersion: options?.engineVersion ?? '',
|
|
77
78
|
directiveDCE: false,
|
|
78
79
|
defineDCE: false,
|
|
79
80
|
shake: false,
|
|
@@ -120,6 +121,9 @@ const createVitestConfig = async (options)=>{
|
|
|
120
121
|
...runtimeOSSAlias,
|
|
121
122
|
...runtimeAlias,
|
|
122
123
|
...preactAlias
|
|
124
|
+
],
|
|
125
|
+
include: options?.include ?? [
|
|
126
|
+
'src/**/*.test.{js,jsx,ts,tsx}'
|
|
123
127
|
]
|
|
124
128
|
}
|
|
125
129
|
});
|