@lynx-js/react-canary 0.115.2-canary-20251226-baaf6f44 → 0.115.2
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 +35 -34
- 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.115.2
|
|
3
|
+
## 0.115.2
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -101,11 +101,11 @@
|
|
|
101
101
|
- 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))
|
|
102
102
|
|
|
103
103
|
```js
|
|
104
|
-
import { defineConfig, mergeConfig } from
|
|
105
|
-
import { createVitestConfig } from
|
|
104
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
105
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
106
106
|
|
|
107
107
|
const defaultConfig = await createVitestConfig({
|
|
108
|
-
runtimePkgName:
|
|
108
|
+
runtimePkgName: '@lynx-js/react',
|
|
109
109
|
experimental_enableReactCompiler: true,
|
|
110
110
|
});
|
|
111
111
|
|
|
@@ -135,7 +135,7 @@
|
|
|
135
135
|
```tsx
|
|
136
136
|
function App() {
|
|
137
137
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
138
|
-
|
|
138
|
+
'main thread';
|
|
139
139
|
event.stopPropagation();
|
|
140
140
|
// Or stop immediate propagation with
|
|
141
141
|
// event.stopImmediatePropagation();
|
|
@@ -233,10 +233,10 @@
|
|
|
233
233
|
- 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))
|
|
234
234
|
|
|
235
235
|
```ts
|
|
236
|
-
import type { MainThread } from
|
|
236
|
+
import type { MainThread } from '@lynx-js/types';
|
|
237
237
|
|
|
238
238
|
function startAnimation(ele: MainThread.Element) {
|
|
239
|
-
|
|
239
|
+
'main thread';
|
|
240
240
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
241
241
|
duration: 3000,
|
|
242
242
|
});
|
|
@@ -265,7 +265,7 @@
|
|
|
265
265
|
- 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))
|
|
266
266
|
|
|
267
267
|
```jsx
|
|
268
|
-
<list-item recyclable={false}
|
|
268
|
+
<list-item recyclable={false} />;
|
|
269
269
|
```
|
|
270
270
|
|
|
271
271
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -286,7 +286,7 @@
|
|
|
286
286
|
|
|
287
287
|
```ts
|
|
288
288
|
function handleTap() {
|
|
289
|
-
|
|
289
|
+
'main thread';
|
|
290
290
|
// The following check always returned false before this fix
|
|
291
291
|
if (myHandleTap) {
|
|
292
292
|
runOnBackground(myHandleTap)();
|
|
@@ -347,10 +347,10 @@
|
|
|
347
347
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
348
348
|
|
|
349
349
|
```js
|
|
350
|
-
import
|
|
351
|
-
import { root } from
|
|
350
|
+
import '@lynx-js/react/debug';
|
|
351
|
+
import { root } from '@lynx-js/react';
|
|
352
352
|
|
|
353
|
-
import { App } from
|
|
353
|
+
import { App } from './App.jsx';
|
|
354
354
|
|
|
355
355
|
root.render(<App />);
|
|
356
356
|
```
|
|
@@ -360,9 +360,9 @@
|
|
|
360
360
|
For example, you can use it like this:
|
|
361
361
|
|
|
362
362
|
```jsx
|
|
363
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
363
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
364
364
|
<WillBeUnmountIfRecycled />
|
|
365
|
-
</list-item
|
|
365
|
+
</list-item>;
|
|
366
366
|
```
|
|
367
367
|
|
|
368
368
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -370,7 +370,7 @@
|
|
|
370
370
|
- 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))
|
|
371
371
|
|
|
372
372
|
```jsx
|
|
373
|
-
<image async-mode={undefined}
|
|
373
|
+
<image async-mode={undefined} />;
|
|
374
374
|
```
|
|
375
375
|
|
|
376
376
|
## 0.111.1
|
|
@@ -416,7 +416,7 @@
|
|
|
416
416
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
417
417
|
|
|
418
418
|
```js
|
|
419
|
-
import { act } from
|
|
419
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
420
420
|
|
|
421
421
|
act(() => {
|
|
422
422
|
// ...
|
|
@@ -522,7 +522,8 @@
|
|
|
522
522
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
523
523
|
*/
|
|
524
524
|
experimental-batch-render-strategy={3}
|
|
525
|
-
|
|
525
|
+
>
|
|
526
|
+
</list>;
|
|
526
527
|
```
|
|
527
528
|
|
|
528
529
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -640,7 +641,7 @@
|
|
|
640
641
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
641
642
|
|
|
642
643
|
```tsx
|
|
643
|
-
import { useErrorBoundary } from
|
|
644
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
644
645
|
```
|
|
645
646
|
|
|
646
647
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -692,13 +693,13 @@
|
|
|
692
693
|
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.
|
|
693
694
|
|
|
694
695
|
```js
|
|
695
|
-
import { runOnBackground } from
|
|
696
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
696
697
|
|
|
697
698
|
const onTap = async () => {
|
|
698
|
-
|
|
699
|
+
'main thread';
|
|
699
700
|
const text = await runOnBackground(() => {
|
|
700
|
-
|
|
701
|
-
return
|
|
701
|
+
'background only';
|
|
702
|
+
return 'Hello, world!';
|
|
702
703
|
})();
|
|
703
704
|
console.log(text);
|
|
704
705
|
};
|
|
@@ -733,9 +734,9 @@
|
|
|
733
734
|
|
|
734
735
|
```ts
|
|
735
736
|
// These imports will be removed from the final bundle
|
|
736
|
-
import type { Foo } from
|
|
737
|
-
import { type Bar } from
|
|
738
|
-
import { xyz } from
|
|
737
|
+
import type { Foo } from 'xyz';
|
|
738
|
+
import { type Bar } from 'xyz';
|
|
739
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
739
740
|
```
|
|
740
741
|
|
|
741
742
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -775,7 +776,7 @@
|
|
|
775
776
|
const f = undefined;
|
|
776
777
|
|
|
777
778
|
function mts() {
|
|
778
|
-
|
|
779
|
+
'main thread';
|
|
779
780
|
// throws in background rendering
|
|
780
781
|
f && runOnBackground(f)();
|
|
781
782
|
}
|
|
@@ -809,14 +810,14 @@
|
|
|
809
810
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
810
811
|
|
|
811
812
|
```js
|
|
812
|
-
import { pluginReactLynx } from
|
|
813
|
-
import { defineConfig } from
|
|
813
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
814
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
814
815
|
|
|
815
816
|
export default defineConfig({
|
|
816
817
|
plugins: [
|
|
817
818
|
pluginReactLynx({
|
|
818
819
|
compat: {
|
|
819
|
-
removeComponentAttrRegex:
|
|
820
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
820
821
|
},
|
|
821
822
|
}),
|
|
822
823
|
],
|
|
@@ -902,22 +903,22 @@
|
|
|
902
903
|
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.
|
|
903
904
|
|
|
904
905
|
```tsx
|
|
905
|
-
import { useGesture, PanGesture } from
|
|
906
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
906
907
|
|
|
907
908
|
function App() {
|
|
908
909
|
const pan = useGesture(PanGesture);
|
|
909
910
|
|
|
910
911
|
pan
|
|
911
912
|
.onBegin((event, stateManager) => {
|
|
912
|
-
|
|
913
|
+
'main thread';
|
|
913
914
|
// some logic
|
|
914
915
|
})
|
|
915
916
|
.onUpdate((event, stateManager) => {
|
|
916
|
-
|
|
917
|
+
'main thread';
|
|
917
918
|
// some logic
|
|
918
919
|
})
|
|
919
920
|
.onEnd((event, stateManager) => {
|
|
920
|
-
|
|
921
|
+
'main thread';
|
|
921
922
|
// some logic
|
|
922
923
|
});
|
|
923
924
|
|
|
@@ -937,7 +938,7 @@
|
|
|
937
938
|
return;
|
|
938
939
|
}
|
|
939
940
|
|
|
940
|
-
console.log(
|
|
941
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
941
942
|
}
|
|
942
943
|
```
|
|
943
944
|
|
package/package.json
CHANGED