@lynx-js/react-canary 0.115.3-canary-20260104-f4b90f3a → 0.115.3
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 +36 -35
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.115.3
|
|
3
|
+
## 0.115.3
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
```ts
|
|
12
12
|
const LazyComponent = lazy(async () => {
|
|
13
13
|
try {
|
|
14
|
-
const mod = await import(
|
|
14
|
+
const mod = await import('./lazy-bundle');
|
|
15
15
|
return mod.default;
|
|
16
16
|
} catch (error) {
|
|
17
17
|
console.error(`Lazy Bundle load failed message: ${error.message}`);
|
|
@@ -123,11 +123,11 @@
|
|
|
123
123
|
- 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))
|
|
124
124
|
|
|
125
125
|
```js
|
|
126
|
-
import { defineConfig, mergeConfig } from
|
|
127
|
-
import { createVitestConfig } from
|
|
126
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
127
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
128
128
|
|
|
129
129
|
const defaultConfig = await createVitestConfig({
|
|
130
|
-
runtimePkgName:
|
|
130
|
+
runtimePkgName: '@lynx-js/react',
|
|
131
131
|
experimental_enableReactCompiler: true,
|
|
132
132
|
});
|
|
133
133
|
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
```tsx
|
|
158
158
|
function App() {
|
|
159
159
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
160
|
-
|
|
160
|
+
'main thread';
|
|
161
161
|
event.stopPropagation();
|
|
162
162
|
// Or stop immediate propagation with
|
|
163
163
|
// event.stopImmediatePropagation();
|
|
@@ -255,10 +255,10 @@
|
|
|
255
255
|
- 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))
|
|
256
256
|
|
|
257
257
|
```ts
|
|
258
|
-
import type { MainThread } from
|
|
258
|
+
import type { MainThread } from '@lynx-js/types';
|
|
259
259
|
|
|
260
260
|
function startAnimation(ele: MainThread.Element) {
|
|
261
|
-
|
|
261
|
+
'main thread';
|
|
262
262
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
263
263
|
duration: 3000,
|
|
264
264
|
});
|
|
@@ -287,7 +287,7 @@
|
|
|
287
287
|
- 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))
|
|
288
288
|
|
|
289
289
|
```jsx
|
|
290
|
-
<list-item recyclable={false}
|
|
290
|
+
<list-item recyclable={false} />;
|
|
291
291
|
```
|
|
292
292
|
|
|
293
293
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -308,7 +308,7 @@
|
|
|
308
308
|
|
|
309
309
|
```ts
|
|
310
310
|
function handleTap() {
|
|
311
|
-
|
|
311
|
+
'main thread';
|
|
312
312
|
// The following check always returned false before this fix
|
|
313
313
|
if (myHandleTap) {
|
|
314
314
|
runOnBackground(myHandleTap)();
|
|
@@ -369,10 +369,10 @@
|
|
|
369
369
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
370
370
|
|
|
371
371
|
```js
|
|
372
|
-
import
|
|
373
|
-
import { root } from
|
|
372
|
+
import '@lynx-js/react/debug';
|
|
373
|
+
import { root } from '@lynx-js/react';
|
|
374
374
|
|
|
375
|
-
import { App } from
|
|
375
|
+
import { App } from './App.jsx';
|
|
376
376
|
|
|
377
377
|
root.render(<App />);
|
|
378
378
|
```
|
|
@@ -382,9 +382,9 @@
|
|
|
382
382
|
For example, you can use it like this:
|
|
383
383
|
|
|
384
384
|
```jsx
|
|
385
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
385
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
386
386
|
<WillBeUnmountIfRecycled />
|
|
387
|
-
</list-item
|
|
387
|
+
</list-item>;
|
|
388
388
|
```
|
|
389
389
|
|
|
390
390
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -392,7 +392,7 @@
|
|
|
392
392
|
- 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))
|
|
393
393
|
|
|
394
394
|
```jsx
|
|
395
|
-
<image async-mode={undefined}
|
|
395
|
+
<image async-mode={undefined} />;
|
|
396
396
|
```
|
|
397
397
|
|
|
398
398
|
## 0.111.1
|
|
@@ -438,7 +438,7 @@
|
|
|
438
438
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
439
439
|
|
|
440
440
|
```js
|
|
441
|
-
import { act } from
|
|
441
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
442
442
|
|
|
443
443
|
act(() => {
|
|
444
444
|
// ...
|
|
@@ -544,7 +544,8 @@
|
|
|
544
544
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
545
545
|
*/
|
|
546
546
|
experimental-batch-render-strategy={3}
|
|
547
|
-
|
|
547
|
+
>
|
|
548
|
+
</list>;
|
|
548
549
|
```
|
|
549
550
|
|
|
550
551
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -662,7 +663,7 @@
|
|
|
662
663
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
663
664
|
|
|
664
665
|
```tsx
|
|
665
|
-
import { useErrorBoundary } from
|
|
666
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
666
667
|
```
|
|
667
668
|
|
|
668
669
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -714,13 +715,13 @@
|
|
|
714
715
|
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.
|
|
715
716
|
|
|
716
717
|
```js
|
|
717
|
-
import { runOnBackground } from
|
|
718
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
718
719
|
|
|
719
720
|
const onTap = async () => {
|
|
720
|
-
|
|
721
|
+
'main thread';
|
|
721
722
|
const text = await runOnBackground(() => {
|
|
722
|
-
|
|
723
|
-
return
|
|
723
|
+
'background only';
|
|
724
|
+
return 'Hello, world!';
|
|
724
725
|
})();
|
|
725
726
|
console.log(text);
|
|
726
727
|
};
|
|
@@ -755,9 +756,9 @@
|
|
|
755
756
|
|
|
756
757
|
```ts
|
|
757
758
|
// These imports will be removed from the final bundle
|
|
758
|
-
import type { Foo } from
|
|
759
|
-
import { type Bar } from
|
|
760
|
-
import { xyz } from
|
|
759
|
+
import type { Foo } from 'xyz';
|
|
760
|
+
import { type Bar } from 'xyz';
|
|
761
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
761
762
|
```
|
|
762
763
|
|
|
763
764
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -797,7 +798,7 @@
|
|
|
797
798
|
const f = undefined;
|
|
798
799
|
|
|
799
800
|
function mts() {
|
|
800
|
-
|
|
801
|
+
'main thread';
|
|
801
802
|
// throws in background rendering
|
|
802
803
|
f && runOnBackground(f)();
|
|
803
804
|
}
|
|
@@ -831,14 +832,14 @@
|
|
|
831
832
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
832
833
|
|
|
833
834
|
```js
|
|
834
|
-
import { pluginReactLynx } from
|
|
835
|
-
import { defineConfig } from
|
|
835
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
836
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
836
837
|
|
|
837
838
|
export default defineConfig({
|
|
838
839
|
plugins: [
|
|
839
840
|
pluginReactLynx({
|
|
840
841
|
compat: {
|
|
841
|
-
removeComponentAttrRegex:
|
|
842
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
842
843
|
},
|
|
843
844
|
}),
|
|
844
845
|
],
|
|
@@ -924,22 +925,22 @@
|
|
|
924
925
|
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.
|
|
925
926
|
|
|
926
927
|
```tsx
|
|
927
|
-
import { useGesture, PanGesture } from
|
|
928
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
928
929
|
|
|
929
930
|
function App() {
|
|
930
931
|
const pan = useGesture(PanGesture);
|
|
931
932
|
|
|
932
933
|
pan
|
|
933
934
|
.onBegin((event, stateManager) => {
|
|
934
|
-
|
|
935
|
+
'main thread';
|
|
935
936
|
// some logic
|
|
936
937
|
})
|
|
937
938
|
.onUpdate((event, stateManager) => {
|
|
938
|
-
|
|
939
|
+
'main thread';
|
|
939
940
|
// some logic
|
|
940
941
|
})
|
|
941
942
|
.onEnd((event, stateManager) => {
|
|
942
|
-
|
|
943
|
+
'main thread';
|
|
943
944
|
// some logic
|
|
944
945
|
});
|
|
945
946
|
|
|
@@ -959,7 +960,7 @@
|
|
|
959
960
|
return;
|
|
960
961
|
}
|
|
961
962
|
|
|
962
|
-
console.log(
|
|
963
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
963
964
|
}
|
|
964
965
|
```
|
|
965
966
|
|
package/package.json
CHANGED