@lynx-js/react-canary 0.114.4-canary-20251106-5eb6d949 → 0.114.4
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.114.4
|
|
3
|
+
## 0.114.4
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
- 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))
|
|
34
34
|
|
|
35
35
|
```js
|
|
36
|
-
import { defineConfig, mergeConfig } from
|
|
37
|
-
import { createVitestConfig } from
|
|
36
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
37
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
38
38
|
|
|
39
39
|
const defaultConfig = await createVitestConfig({
|
|
40
|
-
runtimePkgName:
|
|
40
|
+
runtimePkgName: '@lynx-js/react',
|
|
41
41
|
experimental_enableReactCompiler: true,
|
|
42
42
|
});
|
|
43
43
|
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
```tsx
|
|
68
68
|
function App() {
|
|
69
69
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
70
|
-
|
|
70
|
+
'main thread';
|
|
71
71
|
event.stopPropagation();
|
|
72
72
|
// Or stop immediate propagation with
|
|
73
73
|
// event.stopImmediatePropagation();
|
|
@@ -165,10 +165,10 @@
|
|
|
165
165
|
- 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))
|
|
166
166
|
|
|
167
167
|
```ts
|
|
168
|
-
import type { MainThread } from
|
|
168
|
+
import type { MainThread } from '@lynx-js/types';
|
|
169
169
|
|
|
170
170
|
function startAnimation(ele: MainThread.Element) {
|
|
171
|
-
|
|
171
|
+
'main thread';
|
|
172
172
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
173
173
|
duration: 3000,
|
|
174
174
|
});
|
|
@@ -197,7 +197,7 @@
|
|
|
197
197
|
- 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))
|
|
198
198
|
|
|
199
199
|
```jsx
|
|
200
|
-
<list-item recyclable={false}
|
|
200
|
+
<list-item recyclable={false} />;
|
|
201
201
|
```
|
|
202
202
|
|
|
203
203
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
|
|
219
219
|
```ts
|
|
220
220
|
function handleTap() {
|
|
221
|
-
|
|
221
|
+
'main thread';
|
|
222
222
|
// The following check always returned false before this fix
|
|
223
223
|
if (myHandleTap) {
|
|
224
224
|
runOnBackground(myHandleTap)();
|
|
@@ -279,10 +279,10 @@
|
|
|
279
279
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
280
280
|
|
|
281
281
|
```js
|
|
282
|
-
import
|
|
283
|
-
import { root } from
|
|
282
|
+
import '@lynx-js/react/debug';
|
|
283
|
+
import { root } from '@lynx-js/react';
|
|
284
284
|
|
|
285
|
-
import { App } from
|
|
285
|
+
import { App } from './App.jsx';
|
|
286
286
|
|
|
287
287
|
root.render(<App />);
|
|
288
288
|
```
|
|
@@ -292,9 +292,9 @@
|
|
|
292
292
|
For example, you can use it like this:
|
|
293
293
|
|
|
294
294
|
```jsx
|
|
295
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
295
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
296
296
|
<WillBeUnmountIfRecycled />
|
|
297
|
-
</list-item
|
|
297
|
+
</list-item>;
|
|
298
298
|
```
|
|
299
299
|
|
|
300
300
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -302,7 +302,7 @@
|
|
|
302
302
|
- 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))
|
|
303
303
|
|
|
304
304
|
```jsx
|
|
305
|
-
<image async-mode={undefined}
|
|
305
|
+
<image async-mode={undefined} />;
|
|
306
306
|
```
|
|
307
307
|
|
|
308
308
|
## 0.111.1
|
|
@@ -348,7 +348,7 @@
|
|
|
348
348
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
349
349
|
|
|
350
350
|
```js
|
|
351
|
-
import { act } from
|
|
351
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
352
352
|
|
|
353
353
|
act(() => {
|
|
354
354
|
// ...
|
|
@@ -454,7 +454,8 @@
|
|
|
454
454
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
455
455
|
*/
|
|
456
456
|
experimental-batch-render-strategy={3}
|
|
457
|
-
|
|
457
|
+
>
|
|
458
|
+
</list>;
|
|
458
459
|
```
|
|
459
460
|
|
|
460
461
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -572,7 +573,7 @@
|
|
|
572
573
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
573
574
|
|
|
574
575
|
```tsx
|
|
575
|
-
import { useErrorBoundary } from
|
|
576
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
576
577
|
```
|
|
577
578
|
|
|
578
579
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -624,13 +625,13 @@
|
|
|
624
625
|
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.
|
|
625
626
|
|
|
626
627
|
```js
|
|
627
|
-
import { runOnBackground } from
|
|
628
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
628
629
|
|
|
629
630
|
const onTap = async () => {
|
|
630
|
-
|
|
631
|
+
'main thread';
|
|
631
632
|
const text = await runOnBackground(() => {
|
|
632
|
-
|
|
633
|
-
return
|
|
633
|
+
'background only';
|
|
634
|
+
return 'Hello, world!';
|
|
634
635
|
})();
|
|
635
636
|
console.log(text);
|
|
636
637
|
};
|
|
@@ -665,9 +666,9 @@
|
|
|
665
666
|
|
|
666
667
|
```ts
|
|
667
668
|
// These imports will be removed from the final bundle
|
|
668
|
-
import type { Foo } from
|
|
669
|
-
import { type Bar } from
|
|
670
|
-
import { xyz } from
|
|
669
|
+
import type { Foo } from 'xyz';
|
|
670
|
+
import { type Bar } from 'xyz';
|
|
671
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
671
672
|
```
|
|
672
673
|
|
|
673
674
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -707,7 +708,7 @@
|
|
|
707
708
|
const f = undefined;
|
|
708
709
|
|
|
709
710
|
function mts() {
|
|
710
|
-
|
|
711
|
+
'main thread';
|
|
711
712
|
// throws in background rendering
|
|
712
713
|
f && runOnBackground(f)();
|
|
713
714
|
}
|
|
@@ -741,14 +742,14 @@
|
|
|
741
742
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
742
743
|
|
|
743
744
|
```js
|
|
744
|
-
import { pluginReactLynx } from
|
|
745
|
-
import { defineConfig } from
|
|
745
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
746
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
746
747
|
|
|
747
748
|
export default defineConfig({
|
|
748
749
|
plugins: [
|
|
749
750
|
pluginReactLynx({
|
|
750
751
|
compat: {
|
|
751
|
-
removeComponentAttrRegex:
|
|
752
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
752
753
|
},
|
|
753
754
|
}),
|
|
754
755
|
],
|
|
@@ -834,22 +835,22 @@
|
|
|
834
835
|
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.
|
|
835
836
|
|
|
836
837
|
```tsx
|
|
837
|
-
import { useGesture, PanGesture } from
|
|
838
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
838
839
|
|
|
839
840
|
function App() {
|
|
840
841
|
const pan = useGesture(PanGesture);
|
|
841
842
|
|
|
842
843
|
pan
|
|
843
844
|
.onBegin((event, stateManager) => {
|
|
844
|
-
|
|
845
|
+
'main thread';
|
|
845
846
|
// some logic
|
|
846
847
|
})
|
|
847
848
|
.onUpdate((event, stateManager) => {
|
|
848
|
-
|
|
849
|
+
'main thread';
|
|
849
850
|
// some logic
|
|
850
851
|
})
|
|
851
852
|
.onEnd((event, stateManager) => {
|
|
852
|
-
|
|
853
|
+
'main thread';
|
|
853
854
|
// some logic
|
|
854
855
|
});
|
|
855
856
|
|
|
@@ -869,7 +870,7 @@
|
|
|
869
870
|
return;
|
|
870
871
|
}
|
|
871
872
|
|
|
872
|
-
console.log(
|
|
873
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
873
874
|
}
|
|
874
875
|
```
|
|
875
876
|
|
package/package.json
CHANGED