@lynx-js/react-canary 0.114.1-canary-20251001-734ff75a → 0.114.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 +32 -31
- 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.1
|
|
3
|
+
## 0.114.1
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
```tsx
|
|
10
10
|
function App() {
|
|
11
11
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
12
|
-
|
|
12
|
+
'main thread';
|
|
13
13
|
event.stopPropagation();
|
|
14
14
|
// Or stop immediate propagation with
|
|
15
15
|
// event.stopImmediatePropagation();
|
|
@@ -107,10 +107,10 @@
|
|
|
107
107
|
- 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))
|
|
108
108
|
|
|
109
109
|
```ts
|
|
110
|
-
import type { MainThread } from
|
|
110
|
+
import type { MainThread } from '@lynx-js/types';
|
|
111
111
|
|
|
112
112
|
function startAnimation(ele: MainThread.Element) {
|
|
113
|
-
|
|
113
|
+
'main thread';
|
|
114
114
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
115
115
|
duration: 3000,
|
|
116
116
|
});
|
|
@@ -139,7 +139,7 @@
|
|
|
139
139
|
- 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))
|
|
140
140
|
|
|
141
141
|
```jsx
|
|
142
|
-
<list-item recyclable={false}
|
|
142
|
+
<list-item recyclable={false} />;
|
|
143
143
|
```
|
|
144
144
|
|
|
145
145
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -160,7 +160,7 @@
|
|
|
160
160
|
|
|
161
161
|
```ts
|
|
162
162
|
function handleTap() {
|
|
163
|
-
|
|
163
|
+
'main thread';
|
|
164
164
|
// The following check always returned false before this fix
|
|
165
165
|
if (myHandleTap) {
|
|
166
166
|
runOnBackground(myHandleTap)();
|
|
@@ -221,10 +221,10 @@
|
|
|
221
221
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
222
222
|
|
|
223
223
|
```js
|
|
224
|
-
import
|
|
225
|
-
import { root } from
|
|
224
|
+
import '@lynx-js/react/debug';
|
|
225
|
+
import { root } from '@lynx-js/react';
|
|
226
226
|
|
|
227
|
-
import { App } from
|
|
227
|
+
import { App } from './App.jsx';
|
|
228
228
|
|
|
229
229
|
root.render(<App />);
|
|
230
230
|
```
|
|
@@ -234,9 +234,9 @@
|
|
|
234
234
|
For example, you can use it like this:
|
|
235
235
|
|
|
236
236
|
```jsx
|
|
237
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
237
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
238
238
|
<WillBeUnmountIfRecycled />
|
|
239
|
-
</list-item
|
|
239
|
+
</list-item>;
|
|
240
240
|
```
|
|
241
241
|
|
|
242
242
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -244,7 +244,7 @@
|
|
|
244
244
|
- 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))
|
|
245
245
|
|
|
246
246
|
```jsx
|
|
247
|
-
<image async-mode={undefined}
|
|
247
|
+
<image async-mode={undefined} />;
|
|
248
248
|
```
|
|
249
249
|
|
|
250
250
|
## 0.111.1
|
|
@@ -290,7 +290,7 @@
|
|
|
290
290
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
291
291
|
|
|
292
292
|
```js
|
|
293
|
-
import { act } from
|
|
293
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
294
294
|
|
|
295
295
|
act(() => {
|
|
296
296
|
// ...
|
|
@@ -396,7 +396,8 @@
|
|
|
396
396
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
397
397
|
*/
|
|
398
398
|
experimental-batch-render-strategy={3}
|
|
399
|
-
|
|
399
|
+
>
|
|
400
|
+
</list>;
|
|
400
401
|
```
|
|
401
402
|
|
|
402
403
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -514,7 +515,7 @@
|
|
|
514
515
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
515
516
|
|
|
516
517
|
```tsx
|
|
517
|
-
import { useErrorBoundary } from
|
|
518
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
518
519
|
```
|
|
519
520
|
|
|
520
521
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -566,13 +567,13 @@
|
|
|
566
567
|
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.
|
|
567
568
|
|
|
568
569
|
```js
|
|
569
|
-
import { runOnBackground } from
|
|
570
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
570
571
|
|
|
571
572
|
const onTap = async () => {
|
|
572
|
-
|
|
573
|
+
'main thread';
|
|
573
574
|
const text = await runOnBackground(() => {
|
|
574
|
-
|
|
575
|
-
return
|
|
575
|
+
'background only';
|
|
576
|
+
return 'Hello, world!';
|
|
576
577
|
})();
|
|
577
578
|
console.log(text);
|
|
578
579
|
};
|
|
@@ -607,9 +608,9 @@
|
|
|
607
608
|
|
|
608
609
|
```ts
|
|
609
610
|
// These imports will be removed from the final bundle
|
|
610
|
-
import type { Foo } from
|
|
611
|
-
import { type Bar } from
|
|
612
|
-
import { xyz } from
|
|
611
|
+
import type { Foo } from 'xyz';
|
|
612
|
+
import { type Bar } from 'xyz';
|
|
613
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
613
614
|
```
|
|
614
615
|
|
|
615
616
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -649,7 +650,7 @@
|
|
|
649
650
|
const f = undefined;
|
|
650
651
|
|
|
651
652
|
function mts() {
|
|
652
|
-
|
|
653
|
+
'main thread';
|
|
653
654
|
// throws in background rendering
|
|
654
655
|
f && runOnBackground(f)();
|
|
655
656
|
}
|
|
@@ -683,14 +684,14 @@
|
|
|
683
684
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
684
685
|
|
|
685
686
|
```js
|
|
686
|
-
import { pluginReactLynx } from
|
|
687
|
-
import { defineConfig } from
|
|
687
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
688
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
688
689
|
|
|
689
690
|
export default defineConfig({
|
|
690
691
|
plugins: [
|
|
691
692
|
pluginReactLynx({
|
|
692
693
|
compat: {
|
|
693
|
-
removeComponentAttrRegex:
|
|
694
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
694
695
|
},
|
|
695
696
|
}),
|
|
696
697
|
],
|
|
@@ -776,22 +777,22 @@
|
|
|
776
777
|
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.
|
|
777
778
|
|
|
778
779
|
```tsx
|
|
779
|
-
import { useGesture, PanGesture } from
|
|
780
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
780
781
|
|
|
781
782
|
function App() {
|
|
782
783
|
const pan = useGesture(PanGesture);
|
|
783
784
|
|
|
784
785
|
pan
|
|
785
786
|
.onBegin((event, stateManager) => {
|
|
786
|
-
|
|
787
|
+
'main thread';
|
|
787
788
|
// some logic
|
|
788
789
|
})
|
|
789
790
|
.onUpdate((event, stateManager) => {
|
|
790
|
-
|
|
791
|
+
'main thread';
|
|
791
792
|
// some logic
|
|
792
793
|
})
|
|
793
794
|
.onEnd((event, stateManager) => {
|
|
794
|
-
|
|
795
|
+
'main thread';
|
|
795
796
|
// some logic
|
|
796
797
|
});
|
|
797
798
|
|
|
@@ -811,7 +812,7 @@
|
|
|
811
812
|
return;
|
|
812
813
|
}
|
|
813
814
|
|
|
814
|
-
console.log(
|
|
815
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
815
816
|
}
|
|
816
817
|
```
|
|
817
818
|
|
package/package.json
CHANGED