@lynx-js/react-canary 0.114.5-canary-20251121-e1a9493a → 0.114.5
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.114.5
|
|
3
|
+
## 0.114.5
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -39,11 +39,11 @@
|
|
|
39
39
|
- 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
40
|
|
|
41
41
|
```js
|
|
42
|
-
import { defineConfig, mergeConfig } from
|
|
43
|
-
import { createVitestConfig } from
|
|
42
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
43
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
44
44
|
|
|
45
45
|
const defaultConfig = await createVitestConfig({
|
|
46
|
-
runtimePkgName:
|
|
46
|
+
runtimePkgName: '@lynx-js/react',
|
|
47
47
|
experimental_enableReactCompiler: true,
|
|
48
48
|
});
|
|
49
49
|
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
```tsx
|
|
74
74
|
function App() {
|
|
75
75
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
76
|
-
|
|
76
|
+
'main thread';
|
|
77
77
|
event.stopPropagation();
|
|
78
78
|
// Or stop immediate propagation with
|
|
79
79
|
// event.stopImmediatePropagation();
|
|
@@ -171,10 +171,10 @@
|
|
|
171
171
|
- 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
172
|
|
|
173
173
|
```ts
|
|
174
|
-
import type { MainThread } from
|
|
174
|
+
import type { MainThread } from '@lynx-js/types';
|
|
175
175
|
|
|
176
176
|
function startAnimation(ele: MainThread.Element) {
|
|
177
|
-
|
|
177
|
+
'main thread';
|
|
178
178
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
179
179
|
duration: 3000,
|
|
180
180
|
});
|
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
- 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
204
|
|
|
205
205
|
```jsx
|
|
206
|
-
<list-item recyclable={false}
|
|
206
|
+
<list-item recyclable={false} />;
|
|
207
207
|
```
|
|
208
208
|
|
|
209
209
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -224,7 +224,7 @@
|
|
|
224
224
|
|
|
225
225
|
```ts
|
|
226
226
|
function handleTap() {
|
|
227
|
-
|
|
227
|
+
'main thread';
|
|
228
228
|
// The following check always returned false before this fix
|
|
229
229
|
if (myHandleTap) {
|
|
230
230
|
runOnBackground(myHandleTap)();
|
|
@@ -285,10 +285,10 @@
|
|
|
285
285
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
286
286
|
|
|
287
287
|
```js
|
|
288
|
-
import
|
|
289
|
-
import { root } from
|
|
288
|
+
import '@lynx-js/react/debug';
|
|
289
|
+
import { root } from '@lynx-js/react';
|
|
290
290
|
|
|
291
|
-
import { App } from
|
|
291
|
+
import { App } from './App.jsx';
|
|
292
292
|
|
|
293
293
|
root.render(<App />);
|
|
294
294
|
```
|
|
@@ -298,9 +298,9 @@
|
|
|
298
298
|
For example, you can use it like this:
|
|
299
299
|
|
|
300
300
|
```jsx
|
|
301
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
301
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
302
302
|
<WillBeUnmountIfRecycled />
|
|
303
|
-
</list-item
|
|
303
|
+
</list-item>;
|
|
304
304
|
```
|
|
305
305
|
|
|
306
306
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
- 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
309
|
|
|
310
310
|
```jsx
|
|
311
|
-
<image async-mode={undefined}
|
|
311
|
+
<image async-mode={undefined} />;
|
|
312
312
|
```
|
|
313
313
|
|
|
314
314
|
## 0.111.1
|
|
@@ -354,7 +354,7 @@
|
|
|
354
354
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
355
355
|
|
|
356
356
|
```js
|
|
357
|
-
import { act } from
|
|
357
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
358
358
|
|
|
359
359
|
act(() => {
|
|
360
360
|
// ...
|
|
@@ -460,7 +460,8 @@
|
|
|
460
460
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
461
461
|
*/
|
|
462
462
|
experimental-batch-render-strategy={3}
|
|
463
|
-
|
|
463
|
+
>
|
|
464
|
+
</list>;
|
|
464
465
|
```
|
|
465
466
|
|
|
466
467
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -578,7 +579,7 @@
|
|
|
578
579
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
579
580
|
|
|
580
581
|
```tsx
|
|
581
|
-
import { useErrorBoundary } from
|
|
582
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
582
583
|
```
|
|
583
584
|
|
|
584
585
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -630,13 +631,13 @@
|
|
|
630
631
|
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.
|
|
631
632
|
|
|
632
633
|
```js
|
|
633
|
-
import { runOnBackground } from
|
|
634
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
634
635
|
|
|
635
636
|
const onTap = async () => {
|
|
636
|
-
|
|
637
|
+
'main thread';
|
|
637
638
|
const text = await runOnBackground(() => {
|
|
638
|
-
|
|
639
|
-
return
|
|
639
|
+
'background only';
|
|
640
|
+
return 'Hello, world!';
|
|
640
641
|
})();
|
|
641
642
|
console.log(text);
|
|
642
643
|
};
|
|
@@ -671,9 +672,9 @@
|
|
|
671
672
|
|
|
672
673
|
```ts
|
|
673
674
|
// These imports will be removed from the final bundle
|
|
674
|
-
import type { Foo } from
|
|
675
|
-
import { type Bar } from
|
|
676
|
-
import { xyz } from
|
|
675
|
+
import type { Foo } from 'xyz';
|
|
676
|
+
import { type Bar } from 'xyz';
|
|
677
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
677
678
|
```
|
|
678
679
|
|
|
679
680
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -713,7 +714,7 @@
|
|
|
713
714
|
const f = undefined;
|
|
714
715
|
|
|
715
716
|
function mts() {
|
|
716
|
-
|
|
717
|
+
'main thread';
|
|
717
718
|
// throws in background rendering
|
|
718
719
|
f && runOnBackground(f)();
|
|
719
720
|
}
|
|
@@ -747,14 +748,14 @@
|
|
|
747
748
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
748
749
|
|
|
749
750
|
```js
|
|
750
|
-
import { pluginReactLynx } from
|
|
751
|
-
import { defineConfig } from
|
|
751
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
752
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
752
753
|
|
|
753
754
|
export default defineConfig({
|
|
754
755
|
plugins: [
|
|
755
756
|
pluginReactLynx({
|
|
756
757
|
compat: {
|
|
757
|
-
removeComponentAttrRegex:
|
|
758
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
758
759
|
},
|
|
759
760
|
}),
|
|
760
761
|
],
|
|
@@ -840,22 +841,22 @@
|
|
|
840
841
|
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.
|
|
841
842
|
|
|
842
843
|
```tsx
|
|
843
|
-
import { useGesture, PanGesture } from
|
|
844
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
844
845
|
|
|
845
846
|
function App() {
|
|
846
847
|
const pan = useGesture(PanGesture);
|
|
847
848
|
|
|
848
849
|
pan
|
|
849
850
|
.onBegin((event, stateManager) => {
|
|
850
|
-
|
|
851
|
+
'main thread';
|
|
851
852
|
// some logic
|
|
852
853
|
})
|
|
853
854
|
.onUpdate((event, stateManager) => {
|
|
854
|
-
|
|
855
|
+
'main thread';
|
|
855
856
|
// some logic
|
|
856
857
|
})
|
|
857
858
|
.onEnd((event, stateManager) => {
|
|
858
|
-
|
|
859
|
+
'main thread';
|
|
859
860
|
// some logic
|
|
860
861
|
});
|
|
861
862
|
|
|
@@ -875,7 +876,7 @@
|
|
|
875
876
|
return;
|
|
876
877
|
}
|
|
877
878
|
|
|
878
|
-
console.log(
|
|
879
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
879
880
|
}
|
|
880
881
|
```
|
|
881
882
|
|
package/package.json
CHANGED