@lynx-js/react-canary 0.115.0-canary-20251205-6400f87b → 0.115.0
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.0
|
|
3
|
+
## 0.115.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -68,11 +68,11 @@
|
|
|
68
68
|
- 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))
|
|
69
69
|
|
|
70
70
|
```js
|
|
71
|
-
import { defineConfig, mergeConfig } from
|
|
72
|
-
import { createVitestConfig } from
|
|
71
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
72
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
73
73
|
|
|
74
74
|
const defaultConfig = await createVitestConfig({
|
|
75
|
-
runtimePkgName:
|
|
75
|
+
runtimePkgName: '@lynx-js/react',
|
|
76
76
|
experimental_enableReactCompiler: true,
|
|
77
77
|
});
|
|
78
78
|
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
```tsx
|
|
103
103
|
function App() {
|
|
104
104
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
105
|
-
|
|
105
|
+
'main thread';
|
|
106
106
|
event.stopPropagation();
|
|
107
107
|
// Or stop immediate propagation with
|
|
108
108
|
// event.stopImmediatePropagation();
|
|
@@ -200,10 +200,10 @@
|
|
|
200
200
|
- 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))
|
|
201
201
|
|
|
202
202
|
```ts
|
|
203
|
-
import type { MainThread } from
|
|
203
|
+
import type { MainThread } from '@lynx-js/types';
|
|
204
204
|
|
|
205
205
|
function startAnimation(ele: MainThread.Element) {
|
|
206
|
-
|
|
206
|
+
'main thread';
|
|
207
207
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
208
208
|
duration: 3000,
|
|
209
209
|
});
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
- 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))
|
|
233
233
|
|
|
234
234
|
```jsx
|
|
235
|
-
<list-item recyclable={false}
|
|
235
|
+
<list-item recyclable={false} />;
|
|
236
236
|
```
|
|
237
237
|
|
|
238
238
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
|
|
254
254
|
```ts
|
|
255
255
|
function handleTap() {
|
|
256
|
-
|
|
256
|
+
'main thread';
|
|
257
257
|
// The following check always returned false before this fix
|
|
258
258
|
if (myHandleTap) {
|
|
259
259
|
runOnBackground(myHandleTap)();
|
|
@@ -314,10 +314,10 @@
|
|
|
314
314
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
315
315
|
|
|
316
316
|
```js
|
|
317
|
-
import
|
|
318
|
-
import { root } from
|
|
317
|
+
import '@lynx-js/react/debug';
|
|
318
|
+
import { root } from '@lynx-js/react';
|
|
319
319
|
|
|
320
|
-
import { App } from
|
|
320
|
+
import { App } from './App.jsx';
|
|
321
321
|
|
|
322
322
|
root.render(<App />);
|
|
323
323
|
```
|
|
@@ -327,9 +327,9 @@
|
|
|
327
327
|
For example, you can use it like this:
|
|
328
328
|
|
|
329
329
|
```jsx
|
|
330
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
330
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
331
331
|
<WillBeUnmountIfRecycled />
|
|
332
|
-
</list-item
|
|
332
|
+
</list-item>;
|
|
333
333
|
```
|
|
334
334
|
|
|
335
335
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -337,7 +337,7 @@
|
|
|
337
337
|
- 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))
|
|
338
338
|
|
|
339
339
|
```jsx
|
|
340
|
-
<image async-mode={undefined}
|
|
340
|
+
<image async-mode={undefined} />;
|
|
341
341
|
```
|
|
342
342
|
|
|
343
343
|
## 0.111.1
|
|
@@ -383,7 +383,7 @@
|
|
|
383
383
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
384
384
|
|
|
385
385
|
```js
|
|
386
|
-
import { act } from
|
|
386
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
387
387
|
|
|
388
388
|
act(() => {
|
|
389
389
|
// ...
|
|
@@ -489,7 +489,8 @@
|
|
|
489
489
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
490
490
|
*/
|
|
491
491
|
experimental-batch-render-strategy={3}
|
|
492
|
-
|
|
492
|
+
>
|
|
493
|
+
</list>;
|
|
493
494
|
```
|
|
494
495
|
|
|
495
496
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -607,7 +608,7 @@
|
|
|
607
608
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
608
609
|
|
|
609
610
|
```tsx
|
|
610
|
-
import { useErrorBoundary } from
|
|
611
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
611
612
|
```
|
|
612
613
|
|
|
613
614
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -659,13 +660,13 @@
|
|
|
659
660
|
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.
|
|
660
661
|
|
|
661
662
|
```js
|
|
662
|
-
import { runOnBackground } from
|
|
663
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
663
664
|
|
|
664
665
|
const onTap = async () => {
|
|
665
|
-
|
|
666
|
+
'main thread';
|
|
666
667
|
const text = await runOnBackground(() => {
|
|
667
|
-
|
|
668
|
-
return
|
|
668
|
+
'background only';
|
|
669
|
+
return 'Hello, world!';
|
|
669
670
|
})();
|
|
670
671
|
console.log(text);
|
|
671
672
|
};
|
|
@@ -700,9 +701,9 @@
|
|
|
700
701
|
|
|
701
702
|
```ts
|
|
702
703
|
// These imports will be removed from the final bundle
|
|
703
|
-
import type { Foo } from
|
|
704
|
-
import { type Bar } from
|
|
705
|
-
import { xyz } from
|
|
704
|
+
import type { Foo } from 'xyz';
|
|
705
|
+
import { type Bar } from 'xyz';
|
|
706
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
706
707
|
```
|
|
707
708
|
|
|
708
709
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -742,7 +743,7 @@
|
|
|
742
743
|
const f = undefined;
|
|
743
744
|
|
|
744
745
|
function mts() {
|
|
745
|
-
|
|
746
|
+
'main thread';
|
|
746
747
|
// throws in background rendering
|
|
747
748
|
f && runOnBackground(f)();
|
|
748
749
|
}
|
|
@@ -776,14 +777,14 @@
|
|
|
776
777
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
777
778
|
|
|
778
779
|
```js
|
|
779
|
-
import { pluginReactLynx } from
|
|
780
|
-
import { defineConfig } from
|
|
780
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
781
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
781
782
|
|
|
782
783
|
export default defineConfig({
|
|
783
784
|
plugins: [
|
|
784
785
|
pluginReactLynx({
|
|
785
786
|
compat: {
|
|
786
|
-
removeComponentAttrRegex:
|
|
787
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
787
788
|
},
|
|
788
789
|
}),
|
|
789
790
|
],
|
|
@@ -869,22 +870,22 @@
|
|
|
869
870
|
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.
|
|
870
871
|
|
|
871
872
|
```tsx
|
|
872
|
-
import { useGesture, PanGesture } from
|
|
873
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
873
874
|
|
|
874
875
|
function App() {
|
|
875
876
|
const pan = useGesture(PanGesture);
|
|
876
877
|
|
|
877
878
|
pan
|
|
878
879
|
.onBegin((event, stateManager) => {
|
|
879
|
-
|
|
880
|
+
'main thread';
|
|
880
881
|
// some logic
|
|
881
882
|
})
|
|
882
883
|
.onUpdate((event, stateManager) => {
|
|
883
|
-
|
|
884
|
+
'main thread';
|
|
884
885
|
// some logic
|
|
885
886
|
})
|
|
886
887
|
.onEnd((event, stateManager) => {
|
|
887
|
-
|
|
888
|
+
'main thread';
|
|
888
889
|
// some logic
|
|
889
890
|
});
|
|
890
891
|
|
|
@@ -904,7 +905,7 @@
|
|
|
904
905
|
return;
|
|
905
906
|
}
|
|
906
907
|
|
|
907
|
-
console.log(
|
|
908
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
908
909
|
}
|
|
909
910
|
```
|
|
910
911
|
|
package/package.json
CHANGED