@lynx-js/react-canary 0.114.5 → 0.114.6-canary-20251127-09adc7e0
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 +39 -34
- 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.114.6-canary-20251127014213-09adc7e0c96d8151a45279bb5bf63552645132ad
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Preserve assignments to webpack runtime variables like `__webpack_public_path__`, `__webpack_require__.p`, etc. ([#1958](https://github.com/lynx-family/lynx-stack/pull/1958))
|
|
8
|
+
|
|
3
9
|
## 0.114.5
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -39,11 +45,11 @@
|
|
|
39
45
|
- 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))
|
|
40
46
|
|
|
41
47
|
```js
|
|
42
|
-
import { defineConfig, mergeConfig } from
|
|
43
|
-
import { createVitestConfig } from
|
|
48
|
+
import { defineConfig, mergeConfig } from "vitest/config";
|
|
49
|
+
import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
|
|
44
50
|
|
|
45
51
|
const defaultConfig = await createVitestConfig({
|
|
46
|
-
runtimePkgName:
|
|
52
|
+
runtimePkgName: "@lynx-js/react",
|
|
47
53
|
experimental_enableReactCompiler: true,
|
|
48
54
|
});
|
|
49
55
|
|
|
@@ -73,7 +79,7 @@
|
|
|
73
79
|
```tsx
|
|
74
80
|
function App() {
|
|
75
81
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
76
|
-
|
|
82
|
+
"main thread";
|
|
77
83
|
event.stopPropagation();
|
|
78
84
|
// Or stop immediate propagation with
|
|
79
85
|
// event.stopImmediatePropagation();
|
|
@@ -171,10 +177,10 @@
|
|
|
171
177
|
- 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))
|
|
172
178
|
|
|
173
179
|
```ts
|
|
174
|
-
import type { MainThread } from
|
|
180
|
+
import type { MainThread } from "@lynx-js/types";
|
|
175
181
|
|
|
176
182
|
function startAnimation(ele: MainThread.Element) {
|
|
177
|
-
|
|
183
|
+
"main thread";
|
|
178
184
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
179
185
|
duration: 3000,
|
|
180
186
|
});
|
|
@@ -203,7 +209,7 @@
|
|
|
203
209
|
- 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))
|
|
204
210
|
|
|
205
211
|
```jsx
|
|
206
|
-
<list-item recyclable={false}
|
|
212
|
+
<list-item recyclable={false} />
|
|
207
213
|
```
|
|
208
214
|
|
|
209
215
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -224,7 +230,7 @@
|
|
|
224
230
|
|
|
225
231
|
```ts
|
|
226
232
|
function handleTap() {
|
|
227
|
-
|
|
233
|
+
"main thread";
|
|
228
234
|
// The following check always returned false before this fix
|
|
229
235
|
if (myHandleTap) {
|
|
230
236
|
runOnBackground(myHandleTap)();
|
|
@@ -285,10 +291,10 @@
|
|
|
285
291
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
286
292
|
|
|
287
293
|
```js
|
|
288
|
-
import
|
|
289
|
-
import { root } from
|
|
294
|
+
import "@lynx-js/react/debug";
|
|
295
|
+
import { root } from "@lynx-js/react";
|
|
290
296
|
|
|
291
|
-
import { App } from
|
|
297
|
+
import { App } from "./App.jsx";
|
|
292
298
|
|
|
293
299
|
root.render(<App />);
|
|
294
300
|
```
|
|
@@ -298,9 +304,9 @@
|
|
|
298
304
|
For example, you can use it like this:
|
|
299
305
|
|
|
300
306
|
```jsx
|
|
301
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
307
|
+
<list-item defer={{ unmountRecycled: true }} item-key="1">
|
|
302
308
|
<WillBeUnmountIfRecycled />
|
|
303
|
-
</list-item
|
|
309
|
+
</list-item>
|
|
304
310
|
```
|
|
305
311
|
|
|
306
312
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -308,7 +314,7 @@
|
|
|
308
314
|
- 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))
|
|
309
315
|
|
|
310
316
|
```jsx
|
|
311
|
-
<image async-mode={undefined}
|
|
317
|
+
<image async-mode={undefined} />
|
|
312
318
|
```
|
|
313
319
|
|
|
314
320
|
## 0.111.1
|
|
@@ -354,7 +360,7 @@
|
|
|
354
360
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
355
361
|
|
|
356
362
|
```js
|
|
357
|
-
import { act } from
|
|
363
|
+
import { act } from "@lynx-js/react/testing-library";
|
|
358
364
|
|
|
359
365
|
act(() => {
|
|
360
366
|
// ...
|
|
@@ -460,8 +466,7 @@
|
|
|
460
466
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
461
467
|
*/
|
|
462
468
|
experimental-batch-render-strategy={3}
|
|
463
|
-
>
|
|
464
|
-
</list>;
|
|
469
|
+
></list>
|
|
465
470
|
```
|
|
466
471
|
|
|
467
472
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -579,7 +584,7 @@
|
|
|
579
584
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
580
585
|
|
|
581
586
|
```tsx
|
|
582
|
-
import { useErrorBoundary } from
|
|
587
|
+
import { useErrorBoundary } from "@lynx-js/react";
|
|
583
588
|
```
|
|
584
589
|
|
|
585
590
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -631,13 +636,13 @@
|
|
|
631
636
|
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.
|
|
632
637
|
|
|
633
638
|
```js
|
|
634
|
-
import { runOnBackground } from
|
|
639
|
+
import { runOnBackground } from "@lynx-js/react";
|
|
635
640
|
|
|
636
641
|
const onTap = async () => {
|
|
637
|
-
|
|
642
|
+
"main thread";
|
|
638
643
|
const text = await runOnBackground(() => {
|
|
639
|
-
|
|
640
|
-
return
|
|
644
|
+
"background only";
|
|
645
|
+
return "Hello, world!";
|
|
641
646
|
})();
|
|
642
647
|
console.log(text);
|
|
643
648
|
};
|
|
@@ -672,9 +677,9 @@
|
|
|
672
677
|
|
|
673
678
|
```ts
|
|
674
679
|
// These imports will be removed from the final bundle
|
|
675
|
-
import type { Foo } from
|
|
676
|
-
import { type Bar } from
|
|
677
|
-
import { xyz } from
|
|
680
|
+
import type { Foo } from "xyz";
|
|
681
|
+
import { type Bar } from "xyz";
|
|
682
|
+
import { xyz } from "xyz"; // When xyz is not used
|
|
678
683
|
```
|
|
679
684
|
|
|
680
685
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -714,7 +719,7 @@
|
|
|
714
719
|
const f = undefined;
|
|
715
720
|
|
|
716
721
|
function mts() {
|
|
717
|
-
|
|
722
|
+
"main thread";
|
|
718
723
|
// throws in background rendering
|
|
719
724
|
f && runOnBackground(f)();
|
|
720
725
|
}
|
|
@@ -748,14 +753,14 @@
|
|
|
748
753
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
749
754
|
|
|
750
755
|
```js
|
|
751
|
-
import { pluginReactLynx } from
|
|
752
|
-
import { defineConfig } from
|
|
756
|
+
import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
|
|
757
|
+
import { defineConfig } from "@lynx-js/rspeedy";
|
|
753
758
|
|
|
754
759
|
export default defineConfig({
|
|
755
760
|
plugins: [
|
|
756
761
|
pluginReactLynx({
|
|
757
762
|
compat: {
|
|
758
|
-
removeComponentAttrRegex:
|
|
763
|
+
removeComponentAttrRegex: "YOUR REGEX",
|
|
759
764
|
},
|
|
760
765
|
}),
|
|
761
766
|
],
|
|
@@ -841,22 +846,22 @@
|
|
|
841
846
|
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.
|
|
842
847
|
|
|
843
848
|
```tsx
|
|
844
|
-
import { useGesture, PanGesture } from
|
|
849
|
+
import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
|
|
845
850
|
|
|
846
851
|
function App() {
|
|
847
852
|
const pan = useGesture(PanGesture);
|
|
848
853
|
|
|
849
854
|
pan
|
|
850
855
|
.onBegin((event, stateManager) => {
|
|
851
|
-
|
|
856
|
+
"main thread";
|
|
852
857
|
// some logic
|
|
853
858
|
})
|
|
854
859
|
.onUpdate((event, stateManager) => {
|
|
855
|
-
|
|
860
|
+
"main thread";
|
|
856
861
|
// some logic
|
|
857
862
|
})
|
|
858
863
|
.onEnd((event, stateManager) => {
|
|
859
|
-
|
|
864
|
+
"main thread";
|
|
860
865
|
// some logic
|
|
861
866
|
});
|
|
862
867
|
|
|
@@ -876,7 +881,7 @@
|
|
|
876
881
|
return;
|
|
877
882
|
}
|
|
878
883
|
|
|
879
|
-
console.log(
|
|
884
|
+
console.log("not __LEPUS__"); // This can be removed now
|
|
880
885
|
}
|
|
881
886
|
```
|
|
882
887
|
|
package/package.json
CHANGED