@lynx-js/react-canary 0.114.2-canary-20251012-dd7c14a8 → 0.114.2
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/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.114.2
|
|
3
|
+
## 0.114.2
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
```tsx
|
|
16
16
|
function App() {
|
|
17
17
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
18
|
-
|
|
18
|
+
'main thread';
|
|
19
19
|
event.stopPropagation();
|
|
20
20
|
// Or stop immediate propagation with
|
|
21
21
|
// event.stopImmediatePropagation();
|
|
@@ -113,10 +113,10 @@
|
|
|
113
113
|
- 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))
|
|
114
114
|
|
|
115
115
|
```ts
|
|
116
|
-
import type { MainThread } from
|
|
116
|
+
import type { MainThread } from '@lynx-js/types';
|
|
117
117
|
|
|
118
118
|
function startAnimation(ele: MainThread.Element) {
|
|
119
|
-
|
|
119
|
+
'main thread';
|
|
120
120
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
121
121
|
duration: 3000,
|
|
122
122
|
});
|
|
@@ -145,7 +145,7 @@
|
|
|
145
145
|
- 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))
|
|
146
146
|
|
|
147
147
|
```jsx
|
|
148
|
-
<list-item recyclable={false}
|
|
148
|
+
<list-item recyclable={false} />;
|
|
149
149
|
```
|
|
150
150
|
|
|
151
151
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -166,7 +166,7 @@
|
|
|
166
166
|
|
|
167
167
|
```ts
|
|
168
168
|
function handleTap() {
|
|
169
|
-
|
|
169
|
+
'main thread';
|
|
170
170
|
// The following check always returned false before this fix
|
|
171
171
|
if (myHandleTap) {
|
|
172
172
|
runOnBackground(myHandleTap)();
|
|
@@ -227,10 +227,10 @@
|
|
|
227
227
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
228
228
|
|
|
229
229
|
```js
|
|
230
|
-
import
|
|
231
|
-
import { root } from
|
|
230
|
+
import '@lynx-js/react/debug';
|
|
231
|
+
import { root } from '@lynx-js/react';
|
|
232
232
|
|
|
233
|
-
import { App } from
|
|
233
|
+
import { App } from './App.jsx';
|
|
234
234
|
|
|
235
235
|
root.render(<App />);
|
|
236
236
|
```
|
|
@@ -240,9 +240,9 @@
|
|
|
240
240
|
For example, you can use it like this:
|
|
241
241
|
|
|
242
242
|
```jsx
|
|
243
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
243
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
244
244
|
<WillBeUnmountIfRecycled />
|
|
245
|
-
</list-item
|
|
245
|
+
</list-item>;
|
|
246
246
|
```
|
|
247
247
|
|
|
248
248
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -250,7 +250,7 @@
|
|
|
250
250
|
- 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))
|
|
251
251
|
|
|
252
252
|
```jsx
|
|
253
|
-
<image async-mode={undefined}
|
|
253
|
+
<image async-mode={undefined} />;
|
|
254
254
|
```
|
|
255
255
|
|
|
256
256
|
## 0.111.1
|
|
@@ -296,7 +296,7 @@
|
|
|
296
296
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
297
297
|
|
|
298
298
|
```js
|
|
299
|
-
import { act } from
|
|
299
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
300
300
|
|
|
301
301
|
act(() => {
|
|
302
302
|
// ...
|
|
@@ -402,7 +402,8 @@
|
|
|
402
402
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
403
403
|
*/
|
|
404
404
|
experimental-batch-render-strategy={3}
|
|
405
|
-
|
|
405
|
+
>
|
|
406
|
+
</list>;
|
|
406
407
|
```
|
|
407
408
|
|
|
408
409
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -520,7 +521,7 @@
|
|
|
520
521
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
521
522
|
|
|
522
523
|
```tsx
|
|
523
|
-
import { useErrorBoundary } from
|
|
524
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
524
525
|
```
|
|
525
526
|
|
|
526
527
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -572,13 +573,13 @@
|
|
|
572
573
|
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.
|
|
573
574
|
|
|
574
575
|
```js
|
|
575
|
-
import { runOnBackground } from
|
|
576
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
576
577
|
|
|
577
578
|
const onTap = async () => {
|
|
578
|
-
|
|
579
|
+
'main thread';
|
|
579
580
|
const text = await runOnBackground(() => {
|
|
580
|
-
|
|
581
|
-
return
|
|
581
|
+
'background only';
|
|
582
|
+
return 'Hello, world!';
|
|
582
583
|
})();
|
|
583
584
|
console.log(text);
|
|
584
585
|
};
|
|
@@ -613,9 +614,9 @@
|
|
|
613
614
|
|
|
614
615
|
```ts
|
|
615
616
|
// These imports will be removed from the final bundle
|
|
616
|
-
import type { Foo } from
|
|
617
|
-
import { type Bar } from
|
|
618
|
-
import { xyz } from
|
|
617
|
+
import type { Foo } from 'xyz';
|
|
618
|
+
import { type Bar } from 'xyz';
|
|
619
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
619
620
|
```
|
|
620
621
|
|
|
621
622
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -655,7 +656,7 @@
|
|
|
655
656
|
const f = undefined;
|
|
656
657
|
|
|
657
658
|
function mts() {
|
|
658
|
-
|
|
659
|
+
'main thread';
|
|
659
660
|
// throws in background rendering
|
|
660
661
|
f && runOnBackground(f)();
|
|
661
662
|
}
|
|
@@ -689,14 +690,14 @@
|
|
|
689
690
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
690
691
|
|
|
691
692
|
```js
|
|
692
|
-
import { pluginReactLynx } from
|
|
693
|
-
import { defineConfig } from
|
|
693
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
694
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
694
695
|
|
|
695
696
|
export default defineConfig({
|
|
696
697
|
plugins: [
|
|
697
698
|
pluginReactLynx({
|
|
698
699
|
compat: {
|
|
699
|
-
removeComponentAttrRegex:
|
|
700
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
700
701
|
},
|
|
701
702
|
}),
|
|
702
703
|
],
|
|
@@ -782,22 +783,22 @@
|
|
|
782
783
|
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.
|
|
783
784
|
|
|
784
785
|
```tsx
|
|
785
|
-
import { useGesture, PanGesture } from
|
|
786
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
786
787
|
|
|
787
788
|
function App() {
|
|
788
789
|
const pan = useGesture(PanGesture);
|
|
789
790
|
|
|
790
791
|
pan
|
|
791
792
|
.onBegin((event, stateManager) => {
|
|
792
|
-
|
|
793
|
+
'main thread';
|
|
793
794
|
// some logic
|
|
794
795
|
})
|
|
795
796
|
.onUpdate((event, stateManager) => {
|
|
796
|
-
|
|
797
|
+
'main thread';
|
|
797
798
|
// some logic
|
|
798
799
|
})
|
|
799
800
|
.onEnd((event, stateManager) => {
|
|
800
|
-
|
|
801
|
+
'main thread';
|
|
801
802
|
// some logic
|
|
802
803
|
});
|
|
803
804
|
|
|
@@ -817,7 +818,7 @@
|
|
|
817
818
|
return;
|
|
818
819
|
}
|
|
819
820
|
|
|
820
|
-
console.log(
|
|
821
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
821
822
|
}
|
|
822
823
|
```
|
|
823
824
|
|
package/package.json
CHANGED