@lynx-js/react-canary 0.114.3-canary-20251023-9fb4623f → 0.114.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 +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.3
|
|
3
|
+
## 0.114.3
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
```tsx
|
|
24
24
|
function App() {
|
|
25
25
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
26
|
-
|
|
26
|
+
'main thread';
|
|
27
27
|
event.stopPropagation();
|
|
28
28
|
// Or stop immediate propagation with
|
|
29
29
|
// event.stopImmediatePropagation();
|
|
@@ -121,10 +121,10 @@
|
|
|
121
121
|
- 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))
|
|
122
122
|
|
|
123
123
|
```ts
|
|
124
|
-
import type { MainThread } from
|
|
124
|
+
import type { MainThread } from '@lynx-js/types';
|
|
125
125
|
|
|
126
126
|
function startAnimation(ele: MainThread.Element) {
|
|
127
|
-
|
|
127
|
+
'main thread';
|
|
128
128
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
129
129
|
duration: 3000,
|
|
130
130
|
});
|
|
@@ -153,7 +153,7 @@
|
|
|
153
153
|
- 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))
|
|
154
154
|
|
|
155
155
|
```jsx
|
|
156
|
-
<list-item recyclable={false}
|
|
156
|
+
<list-item recyclable={false} />;
|
|
157
157
|
```
|
|
158
158
|
|
|
159
159
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -174,7 +174,7 @@
|
|
|
174
174
|
|
|
175
175
|
```ts
|
|
176
176
|
function handleTap() {
|
|
177
|
-
|
|
177
|
+
'main thread';
|
|
178
178
|
// The following check always returned false before this fix
|
|
179
179
|
if (myHandleTap) {
|
|
180
180
|
runOnBackground(myHandleTap)();
|
|
@@ -235,10 +235,10 @@
|
|
|
235
235
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
236
236
|
|
|
237
237
|
```js
|
|
238
|
-
import
|
|
239
|
-
import { root } from
|
|
238
|
+
import '@lynx-js/react/debug';
|
|
239
|
+
import { root } from '@lynx-js/react';
|
|
240
240
|
|
|
241
|
-
import { App } from
|
|
241
|
+
import { App } from './App.jsx';
|
|
242
242
|
|
|
243
243
|
root.render(<App />);
|
|
244
244
|
```
|
|
@@ -248,9 +248,9 @@
|
|
|
248
248
|
For example, you can use it like this:
|
|
249
249
|
|
|
250
250
|
```jsx
|
|
251
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
251
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
252
252
|
<WillBeUnmountIfRecycled />
|
|
253
|
-
</list-item
|
|
253
|
+
</list-item>;
|
|
254
254
|
```
|
|
255
255
|
|
|
256
256
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
- 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))
|
|
259
259
|
|
|
260
260
|
```jsx
|
|
261
|
-
<image async-mode={undefined}
|
|
261
|
+
<image async-mode={undefined} />;
|
|
262
262
|
```
|
|
263
263
|
|
|
264
264
|
## 0.111.1
|
|
@@ -304,7 +304,7 @@
|
|
|
304
304
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
305
305
|
|
|
306
306
|
```js
|
|
307
|
-
import { act } from
|
|
307
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
308
308
|
|
|
309
309
|
act(() => {
|
|
310
310
|
// ...
|
|
@@ -410,7 +410,8 @@
|
|
|
410
410
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
411
411
|
*/
|
|
412
412
|
experimental-batch-render-strategy={3}
|
|
413
|
-
|
|
413
|
+
>
|
|
414
|
+
</list>;
|
|
414
415
|
```
|
|
415
416
|
|
|
416
417
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -528,7 +529,7 @@
|
|
|
528
529
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
529
530
|
|
|
530
531
|
```tsx
|
|
531
|
-
import { useErrorBoundary } from
|
|
532
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
532
533
|
```
|
|
533
534
|
|
|
534
535
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -580,13 +581,13 @@
|
|
|
580
581
|
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.
|
|
581
582
|
|
|
582
583
|
```js
|
|
583
|
-
import { runOnBackground } from
|
|
584
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
584
585
|
|
|
585
586
|
const onTap = async () => {
|
|
586
|
-
|
|
587
|
+
'main thread';
|
|
587
588
|
const text = await runOnBackground(() => {
|
|
588
|
-
|
|
589
|
-
return
|
|
589
|
+
'background only';
|
|
590
|
+
return 'Hello, world!';
|
|
590
591
|
})();
|
|
591
592
|
console.log(text);
|
|
592
593
|
};
|
|
@@ -621,9 +622,9 @@
|
|
|
621
622
|
|
|
622
623
|
```ts
|
|
623
624
|
// These imports will be removed from the final bundle
|
|
624
|
-
import type { Foo } from
|
|
625
|
-
import { type Bar } from
|
|
626
|
-
import { xyz } from
|
|
625
|
+
import type { Foo } from 'xyz';
|
|
626
|
+
import { type Bar } from 'xyz';
|
|
627
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
627
628
|
```
|
|
628
629
|
|
|
629
630
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -663,7 +664,7 @@
|
|
|
663
664
|
const f = undefined;
|
|
664
665
|
|
|
665
666
|
function mts() {
|
|
666
|
-
|
|
667
|
+
'main thread';
|
|
667
668
|
// throws in background rendering
|
|
668
669
|
f && runOnBackground(f)();
|
|
669
670
|
}
|
|
@@ -697,14 +698,14 @@
|
|
|
697
698
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
698
699
|
|
|
699
700
|
```js
|
|
700
|
-
import { pluginReactLynx } from
|
|
701
|
-
import { defineConfig } from
|
|
701
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
702
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
702
703
|
|
|
703
704
|
export default defineConfig({
|
|
704
705
|
plugins: [
|
|
705
706
|
pluginReactLynx({
|
|
706
707
|
compat: {
|
|
707
|
-
removeComponentAttrRegex:
|
|
708
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
708
709
|
},
|
|
709
710
|
}),
|
|
710
711
|
],
|
|
@@ -790,22 +791,22 @@
|
|
|
790
791
|
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.
|
|
791
792
|
|
|
792
793
|
```tsx
|
|
793
|
-
import { useGesture, PanGesture } from
|
|
794
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
794
795
|
|
|
795
796
|
function App() {
|
|
796
797
|
const pan = useGesture(PanGesture);
|
|
797
798
|
|
|
798
799
|
pan
|
|
799
800
|
.onBegin((event, stateManager) => {
|
|
800
|
-
|
|
801
|
+
'main thread';
|
|
801
802
|
// some logic
|
|
802
803
|
})
|
|
803
804
|
.onUpdate((event, stateManager) => {
|
|
804
|
-
|
|
805
|
+
'main thread';
|
|
805
806
|
// some logic
|
|
806
807
|
})
|
|
807
808
|
.onEnd((event, stateManager) => {
|
|
808
|
-
|
|
809
|
+
'main thread';
|
|
809
810
|
// some logic
|
|
810
811
|
});
|
|
811
812
|
|
|
@@ -825,7 +826,7 @@
|
|
|
825
826
|
return;
|
|
826
827
|
}
|
|
827
828
|
|
|
828
|
-
console.log(
|
|
829
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
829
830
|
}
|
|
830
831
|
```
|
|
831
832
|
|
package/package.json
CHANGED