@lynx-js/react-canary 0.116.1 → 0.116.2-canary-20260127-80025087
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 +43 -38
- package/package.json +1 -1
- package/refresh/.turbo/turbo-build.log +1 -1
- package/transform/dist/wasm.cjs +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
+
## 0.116.2-canary-20260127124638-80025087ef1b17a9d4c26823fd13b5405bb64dc0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Bump `swc_core` v53. ([#2071](https://github.com/lynx-family/lynx-stack/pull/2071))
|
|
8
|
+
|
|
3
9
|
## 0.116.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -32,9 +38,9 @@
|
|
|
32
38
|
|
|
33
39
|
```typescript
|
|
34
40
|
function getStyle(ele: MainThread.Element) {
|
|
35
|
-
|
|
36
|
-
const width = ele.getComputedStyleProperty(
|
|
37
|
-
const transformMatrix = ele.getComputedStyleProperty(
|
|
41
|
+
"main thread";
|
|
42
|
+
const width = ele.getComputedStyleProperty("width"); // Returns 300px
|
|
43
|
+
const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400)
|
|
38
44
|
}
|
|
39
45
|
```
|
|
40
46
|
|
|
@@ -49,7 +55,7 @@
|
|
|
49
55
|
```ts
|
|
50
56
|
const LazyComponent = lazy(async () => {
|
|
51
57
|
try {
|
|
52
|
-
const mod = await import(
|
|
58
|
+
const mod = await import("./lazy-bundle");
|
|
53
59
|
return mod.default;
|
|
54
60
|
} catch (error) {
|
|
55
61
|
console.error(`Lazy Bundle load failed message: ${error.message}`);
|
|
@@ -161,11 +167,11 @@
|
|
|
161
167
|
- Support testing React Compiler in testing library. Enable React Compiler by setting the `experimental_enableReactCompiler` option of `createVitestConfig` to `true`. ([#1269](https://github.com/lynx-family/lynx-stack/pull/1269))
|
|
162
168
|
|
|
163
169
|
```js
|
|
164
|
-
import { defineConfig, mergeConfig } from
|
|
165
|
-
import { createVitestConfig } from
|
|
170
|
+
import { defineConfig, mergeConfig } from "vitest/config";
|
|
171
|
+
import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
|
|
166
172
|
|
|
167
173
|
const defaultConfig = await createVitestConfig({
|
|
168
|
-
runtimePkgName:
|
|
174
|
+
runtimePkgName: "@lynx-js/react",
|
|
169
175
|
experimental_enableReactCompiler: true,
|
|
170
176
|
});
|
|
171
177
|
|
|
@@ -195,7 +201,7 @@
|
|
|
195
201
|
```tsx
|
|
196
202
|
function App() {
|
|
197
203
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
198
|
-
|
|
204
|
+
"main thread";
|
|
199
205
|
event.stopPropagation();
|
|
200
206
|
// Or stop immediate propagation with
|
|
201
207
|
// event.stopImmediatePropagation();
|
|
@@ -293,10 +299,10 @@
|
|
|
293
299
|
- 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))
|
|
294
300
|
|
|
295
301
|
```ts
|
|
296
|
-
import type { MainThread } from
|
|
302
|
+
import type { MainThread } from "@lynx-js/types";
|
|
297
303
|
|
|
298
304
|
function startAnimation(ele: MainThread.Element) {
|
|
299
|
-
|
|
305
|
+
"main thread";
|
|
300
306
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
301
307
|
duration: 3000,
|
|
302
308
|
});
|
|
@@ -325,7 +331,7 @@
|
|
|
325
331
|
- 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))
|
|
326
332
|
|
|
327
333
|
```jsx
|
|
328
|
-
<list-item recyclable={false}
|
|
334
|
+
<list-item recyclable={false} />
|
|
329
335
|
```
|
|
330
336
|
|
|
331
337
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -346,7 +352,7 @@
|
|
|
346
352
|
|
|
347
353
|
```ts
|
|
348
354
|
function handleTap() {
|
|
349
|
-
|
|
355
|
+
"main thread";
|
|
350
356
|
// The following check always returned false before this fix
|
|
351
357
|
if (myHandleTap) {
|
|
352
358
|
runOnBackground(myHandleTap)();
|
|
@@ -407,10 +413,10 @@
|
|
|
407
413
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
408
414
|
|
|
409
415
|
```js
|
|
410
|
-
import
|
|
411
|
-
import { root } from
|
|
416
|
+
import "@lynx-js/react/debug";
|
|
417
|
+
import { root } from "@lynx-js/react";
|
|
412
418
|
|
|
413
|
-
import { App } from
|
|
419
|
+
import { App } from "./App.jsx";
|
|
414
420
|
|
|
415
421
|
root.render(<App />);
|
|
416
422
|
```
|
|
@@ -420,9 +426,9 @@
|
|
|
420
426
|
For example, you can use it like this:
|
|
421
427
|
|
|
422
428
|
```jsx
|
|
423
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
429
|
+
<list-item defer={{ unmountRecycled: true }} item-key="1">
|
|
424
430
|
<WillBeUnmountIfRecycled />
|
|
425
|
-
</list-item
|
|
431
|
+
</list-item>
|
|
426
432
|
```
|
|
427
433
|
|
|
428
434
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -430,7 +436,7 @@
|
|
|
430
436
|
- 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))
|
|
431
437
|
|
|
432
438
|
```jsx
|
|
433
|
-
<image async-mode={undefined}
|
|
439
|
+
<image async-mode={undefined} />
|
|
434
440
|
```
|
|
435
441
|
|
|
436
442
|
## 0.111.1
|
|
@@ -476,7 +482,7 @@
|
|
|
476
482
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
477
483
|
|
|
478
484
|
```js
|
|
479
|
-
import { act } from
|
|
485
|
+
import { act } from "@lynx-js/react/testing-library";
|
|
480
486
|
|
|
481
487
|
act(() => {
|
|
482
488
|
// ...
|
|
@@ -582,8 +588,7 @@
|
|
|
582
588
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
583
589
|
*/
|
|
584
590
|
experimental-batch-render-strategy={3}
|
|
585
|
-
>
|
|
586
|
-
</list>;
|
|
591
|
+
></list>
|
|
587
592
|
```
|
|
588
593
|
|
|
589
594
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -701,7 +706,7 @@
|
|
|
701
706
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
702
707
|
|
|
703
708
|
```tsx
|
|
704
|
-
import { useErrorBoundary } from
|
|
709
|
+
import { useErrorBoundary } from "@lynx-js/react";
|
|
705
710
|
```
|
|
706
711
|
|
|
707
712
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -753,13 +758,13 @@
|
|
|
753
758
|
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.
|
|
754
759
|
|
|
755
760
|
```js
|
|
756
|
-
import { runOnBackground } from
|
|
761
|
+
import { runOnBackground } from "@lynx-js/react";
|
|
757
762
|
|
|
758
763
|
const onTap = async () => {
|
|
759
|
-
|
|
764
|
+
"main thread";
|
|
760
765
|
const text = await runOnBackground(() => {
|
|
761
|
-
|
|
762
|
-
return
|
|
766
|
+
"background only";
|
|
767
|
+
return "Hello, world!";
|
|
763
768
|
})();
|
|
764
769
|
console.log(text);
|
|
765
770
|
};
|
|
@@ -794,9 +799,9 @@
|
|
|
794
799
|
|
|
795
800
|
```ts
|
|
796
801
|
// These imports will be removed from the final bundle
|
|
797
|
-
import type { Foo } from
|
|
798
|
-
import { type Bar } from
|
|
799
|
-
import { xyz } from
|
|
802
|
+
import type { Foo } from "xyz";
|
|
803
|
+
import { type Bar } from "xyz";
|
|
804
|
+
import { xyz } from "xyz"; // When xyz is not used
|
|
800
805
|
```
|
|
801
806
|
|
|
802
807
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -836,7 +841,7 @@
|
|
|
836
841
|
const f = undefined;
|
|
837
842
|
|
|
838
843
|
function mts() {
|
|
839
|
-
|
|
844
|
+
"main thread";
|
|
840
845
|
// throws in background rendering
|
|
841
846
|
f && runOnBackground(f)();
|
|
842
847
|
}
|
|
@@ -870,14 +875,14 @@
|
|
|
870
875
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
871
876
|
|
|
872
877
|
```js
|
|
873
|
-
import { pluginReactLynx } from
|
|
874
|
-
import { defineConfig } from
|
|
878
|
+
import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
|
|
879
|
+
import { defineConfig } from "@lynx-js/rspeedy";
|
|
875
880
|
|
|
876
881
|
export default defineConfig({
|
|
877
882
|
plugins: [
|
|
878
883
|
pluginReactLynx({
|
|
879
884
|
compat: {
|
|
880
|
-
removeComponentAttrRegex:
|
|
885
|
+
removeComponentAttrRegex: "YOUR REGEX",
|
|
881
886
|
},
|
|
882
887
|
}),
|
|
883
888
|
],
|
|
@@ -963,22 +968,22 @@
|
|
|
963
968
|
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.
|
|
964
969
|
|
|
965
970
|
```tsx
|
|
966
|
-
import { useGesture, PanGesture } from
|
|
971
|
+
import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
|
|
967
972
|
|
|
968
973
|
function App() {
|
|
969
974
|
const pan = useGesture(PanGesture);
|
|
970
975
|
|
|
971
976
|
pan
|
|
972
977
|
.onBegin((event, stateManager) => {
|
|
973
|
-
|
|
978
|
+
"main thread";
|
|
974
979
|
// some logic
|
|
975
980
|
})
|
|
976
981
|
.onUpdate((event, stateManager) => {
|
|
977
|
-
|
|
982
|
+
"main thread";
|
|
978
983
|
// some logic
|
|
979
984
|
})
|
|
980
985
|
.onEnd((event, stateManager) => {
|
|
981
|
-
|
|
986
|
+
"main thread";
|
|
982
987
|
// some logic
|
|
983
988
|
});
|
|
984
989
|
|
|
@@ -998,7 +1003,7 @@
|
|
|
998
1003
|
return;
|
|
999
1004
|
}
|
|
1000
1005
|
|
|
1001
|
-
console.log(
|
|
1006
|
+
console.log("not __LEPUS__"); // This can be removed now
|
|
1002
1007
|
}
|
|
1003
1008
|
```
|
|
1004
1009
|
|
package/package.json
CHANGED