@lynx-js/react-canary 0.115.1-canary-20251212-9c715ffe → 0.115.1
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.1
|
|
3
|
+
## 0.115.1
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -91,11 +91,11 @@
|
|
|
91
91
|
- 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))
|
|
92
92
|
|
|
93
93
|
```js
|
|
94
|
-
import { defineConfig, mergeConfig } from
|
|
95
|
-
import { createVitestConfig } from
|
|
94
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
95
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
96
96
|
|
|
97
97
|
const defaultConfig = await createVitestConfig({
|
|
98
|
-
runtimePkgName:
|
|
98
|
+
runtimePkgName: '@lynx-js/react',
|
|
99
99
|
experimental_enableReactCompiler: true,
|
|
100
100
|
});
|
|
101
101
|
|
|
@@ -125,7 +125,7 @@
|
|
|
125
125
|
```tsx
|
|
126
126
|
function App() {
|
|
127
127
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
128
|
-
|
|
128
|
+
'main thread';
|
|
129
129
|
event.stopPropagation();
|
|
130
130
|
// Or stop immediate propagation with
|
|
131
131
|
// event.stopImmediatePropagation();
|
|
@@ -223,10 +223,10 @@
|
|
|
223
223
|
- 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))
|
|
224
224
|
|
|
225
225
|
```ts
|
|
226
|
-
import type { MainThread } from
|
|
226
|
+
import type { MainThread } from '@lynx-js/types';
|
|
227
227
|
|
|
228
228
|
function startAnimation(ele: MainThread.Element) {
|
|
229
|
-
|
|
229
|
+
'main thread';
|
|
230
230
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
231
231
|
duration: 3000,
|
|
232
232
|
});
|
|
@@ -255,7 +255,7 @@
|
|
|
255
255
|
- 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))
|
|
256
256
|
|
|
257
257
|
```jsx
|
|
258
|
-
<list-item recyclable={false}
|
|
258
|
+
<list-item recyclable={false} />;
|
|
259
259
|
```
|
|
260
260
|
|
|
261
261
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -276,7 +276,7 @@
|
|
|
276
276
|
|
|
277
277
|
```ts
|
|
278
278
|
function handleTap() {
|
|
279
|
-
|
|
279
|
+
'main thread';
|
|
280
280
|
// The following check always returned false before this fix
|
|
281
281
|
if (myHandleTap) {
|
|
282
282
|
runOnBackground(myHandleTap)();
|
|
@@ -337,10 +337,10 @@
|
|
|
337
337
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
338
338
|
|
|
339
339
|
```js
|
|
340
|
-
import
|
|
341
|
-
import { root } from
|
|
340
|
+
import '@lynx-js/react/debug';
|
|
341
|
+
import { root } from '@lynx-js/react';
|
|
342
342
|
|
|
343
|
-
import { App } from
|
|
343
|
+
import { App } from './App.jsx';
|
|
344
344
|
|
|
345
345
|
root.render(<App />);
|
|
346
346
|
```
|
|
@@ -350,9 +350,9 @@
|
|
|
350
350
|
For example, you can use it like this:
|
|
351
351
|
|
|
352
352
|
```jsx
|
|
353
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
353
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
354
354
|
<WillBeUnmountIfRecycled />
|
|
355
|
-
</list-item
|
|
355
|
+
</list-item>;
|
|
356
356
|
```
|
|
357
357
|
|
|
358
358
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -360,7 +360,7 @@
|
|
|
360
360
|
- 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))
|
|
361
361
|
|
|
362
362
|
```jsx
|
|
363
|
-
<image async-mode={undefined}
|
|
363
|
+
<image async-mode={undefined} />;
|
|
364
364
|
```
|
|
365
365
|
|
|
366
366
|
## 0.111.1
|
|
@@ -406,7 +406,7 @@
|
|
|
406
406
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
407
407
|
|
|
408
408
|
```js
|
|
409
|
-
import { act } from
|
|
409
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
410
410
|
|
|
411
411
|
act(() => {
|
|
412
412
|
// ...
|
|
@@ -512,7 +512,8 @@
|
|
|
512
512
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
513
513
|
*/
|
|
514
514
|
experimental-batch-render-strategy={3}
|
|
515
|
-
|
|
515
|
+
>
|
|
516
|
+
</list>;
|
|
516
517
|
```
|
|
517
518
|
|
|
518
519
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -630,7 +631,7 @@
|
|
|
630
631
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
631
632
|
|
|
632
633
|
```tsx
|
|
633
|
-
import { useErrorBoundary } from
|
|
634
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
634
635
|
```
|
|
635
636
|
|
|
636
637
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -682,13 +683,13 @@
|
|
|
682
683
|
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.
|
|
683
684
|
|
|
684
685
|
```js
|
|
685
|
-
import { runOnBackground } from
|
|
686
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
686
687
|
|
|
687
688
|
const onTap = async () => {
|
|
688
|
-
|
|
689
|
+
'main thread';
|
|
689
690
|
const text = await runOnBackground(() => {
|
|
690
|
-
|
|
691
|
-
return
|
|
691
|
+
'background only';
|
|
692
|
+
return 'Hello, world!';
|
|
692
693
|
})();
|
|
693
694
|
console.log(text);
|
|
694
695
|
};
|
|
@@ -723,9 +724,9 @@
|
|
|
723
724
|
|
|
724
725
|
```ts
|
|
725
726
|
// These imports will be removed from the final bundle
|
|
726
|
-
import type { Foo } from
|
|
727
|
-
import { type Bar } from
|
|
728
|
-
import { xyz } from
|
|
727
|
+
import type { Foo } from 'xyz';
|
|
728
|
+
import { type Bar } from 'xyz';
|
|
729
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
729
730
|
```
|
|
730
731
|
|
|
731
732
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -765,7 +766,7 @@
|
|
|
765
766
|
const f = undefined;
|
|
766
767
|
|
|
767
768
|
function mts() {
|
|
768
|
-
|
|
769
|
+
'main thread';
|
|
769
770
|
// throws in background rendering
|
|
770
771
|
f && runOnBackground(f)();
|
|
771
772
|
}
|
|
@@ -799,14 +800,14 @@
|
|
|
799
800
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
800
801
|
|
|
801
802
|
```js
|
|
802
|
-
import { pluginReactLynx } from
|
|
803
|
-
import { defineConfig } from
|
|
803
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
804
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
804
805
|
|
|
805
806
|
export default defineConfig({
|
|
806
807
|
plugins: [
|
|
807
808
|
pluginReactLynx({
|
|
808
809
|
compat: {
|
|
809
|
-
removeComponentAttrRegex:
|
|
810
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
810
811
|
},
|
|
811
812
|
}),
|
|
812
813
|
],
|
|
@@ -892,22 +893,22 @@
|
|
|
892
893
|
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.
|
|
893
894
|
|
|
894
895
|
```tsx
|
|
895
|
-
import { useGesture, PanGesture } from
|
|
896
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
896
897
|
|
|
897
898
|
function App() {
|
|
898
899
|
const pan = useGesture(PanGesture);
|
|
899
900
|
|
|
900
901
|
pan
|
|
901
902
|
.onBegin((event, stateManager) => {
|
|
902
|
-
|
|
903
|
+
'main thread';
|
|
903
904
|
// some logic
|
|
904
905
|
})
|
|
905
906
|
.onUpdate((event, stateManager) => {
|
|
906
|
-
|
|
907
|
+
'main thread';
|
|
907
908
|
// some logic
|
|
908
909
|
})
|
|
909
910
|
.onEnd((event, stateManager) => {
|
|
910
|
-
|
|
911
|
+
'main thread';
|
|
911
912
|
// some logic
|
|
912
913
|
});
|
|
913
914
|
|
|
@@ -927,7 +928,7 @@
|
|
|
927
928
|
return;
|
|
928
929
|
}
|
|
929
930
|
|
|
930
|
-
console.log(
|
|
931
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
931
932
|
}
|
|
932
933
|
```
|
|
933
934
|
|
package/package.json
CHANGED