@lynx-js/react-canary 0.115.4-canary-20260111-9646114b → 0.115.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 +39 -38
- 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.115.4
|
|
3
|
+
## 0.115.4
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
|
|
13
13
|
```typescript
|
|
14
14
|
function getStyle(ele: MainThread.Element) {
|
|
15
|
-
|
|
16
|
-
const width = ele.getComputedStyleProperty(
|
|
17
|
-
const transformMatrix = ele.getComputedStyleProperty(
|
|
15
|
+
'main thread';
|
|
16
|
+
const width = ele.getComputedStyleProperty('width'); // Returns 300px
|
|
17
|
+
const transformMatrix = ele.getComputedStyleProperty('transform'); // Returns matrix(2, 0, 0, 2, 200, 400)
|
|
18
18
|
}
|
|
19
19
|
```
|
|
20
20
|
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
```ts
|
|
30
30
|
const LazyComponent = lazy(async () => {
|
|
31
31
|
try {
|
|
32
|
-
const mod = await import(
|
|
32
|
+
const mod = await import('./lazy-bundle');
|
|
33
33
|
return mod.default;
|
|
34
34
|
} catch (error) {
|
|
35
35
|
console.error(`Lazy Bundle load failed message: ${error.message}`);
|
|
@@ -141,11 +141,11 @@
|
|
|
141
141
|
- 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))
|
|
142
142
|
|
|
143
143
|
```js
|
|
144
|
-
import { defineConfig, mergeConfig } from
|
|
145
|
-
import { createVitestConfig } from
|
|
144
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
145
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
146
146
|
|
|
147
147
|
const defaultConfig = await createVitestConfig({
|
|
148
|
-
runtimePkgName:
|
|
148
|
+
runtimePkgName: '@lynx-js/react',
|
|
149
149
|
experimental_enableReactCompiler: true,
|
|
150
150
|
});
|
|
151
151
|
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
```tsx
|
|
176
176
|
function App() {
|
|
177
177
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
178
|
-
|
|
178
|
+
'main thread';
|
|
179
179
|
event.stopPropagation();
|
|
180
180
|
// Or stop immediate propagation with
|
|
181
181
|
// event.stopImmediatePropagation();
|
|
@@ -273,10 +273,10 @@
|
|
|
273
273
|
- 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))
|
|
274
274
|
|
|
275
275
|
```ts
|
|
276
|
-
import type { MainThread } from
|
|
276
|
+
import type { MainThread } from '@lynx-js/types';
|
|
277
277
|
|
|
278
278
|
function startAnimation(ele: MainThread.Element) {
|
|
279
|
-
|
|
279
|
+
'main thread';
|
|
280
280
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
281
281
|
duration: 3000,
|
|
282
282
|
});
|
|
@@ -305,7 +305,7 @@
|
|
|
305
305
|
- 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))
|
|
306
306
|
|
|
307
307
|
```jsx
|
|
308
|
-
<list-item recyclable={false}
|
|
308
|
+
<list-item recyclable={false} />;
|
|
309
309
|
```
|
|
310
310
|
|
|
311
311
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -326,7 +326,7 @@
|
|
|
326
326
|
|
|
327
327
|
```ts
|
|
328
328
|
function handleTap() {
|
|
329
|
-
|
|
329
|
+
'main thread';
|
|
330
330
|
// The following check always returned false before this fix
|
|
331
331
|
if (myHandleTap) {
|
|
332
332
|
runOnBackground(myHandleTap)();
|
|
@@ -387,10 +387,10 @@
|
|
|
387
387
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
388
388
|
|
|
389
389
|
```js
|
|
390
|
-
import
|
|
391
|
-
import { root } from
|
|
390
|
+
import '@lynx-js/react/debug';
|
|
391
|
+
import { root } from '@lynx-js/react';
|
|
392
392
|
|
|
393
|
-
import { App } from
|
|
393
|
+
import { App } from './App.jsx';
|
|
394
394
|
|
|
395
395
|
root.render(<App />);
|
|
396
396
|
```
|
|
@@ -400,9 +400,9 @@
|
|
|
400
400
|
For example, you can use it like this:
|
|
401
401
|
|
|
402
402
|
```jsx
|
|
403
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
403
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
404
404
|
<WillBeUnmountIfRecycled />
|
|
405
|
-
</list-item
|
|
405
|
+
</list-item>;
|
|
406
406
|
```
|
|
407
407
|
|
|
408
408
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -410,7 +410,7 @@
|
|
|
410
410
|
- 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))
|
|
411
411
|
|
|
412
412
|
```jsx
|
|
413
|
-
<image async-mode={undefined}
|
|
413
|
+
<image async-mode={undefined} />;
|
|
414
414
|
```
|
|
415
415
|
|
|
416
416
|
## 0.111.1
|
|
@@ -456,7 +456,7 @@
|
|
|
456
456
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
457
457
|
|
|
458
458
|
```js
|
|
459
|
-
import { act } from
|
|
459
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
460
460
|
|
|
461
461
|
act(() => {
|
|
462
462
|
// ...
|
|
@@ -562,7 +562,8 @@
|
|
|
562
562
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
563
563
|
*/
|
|
564
564
|
experimental-batch-render-strategy={3}
|
|
565
|
-
|
|
565
|
+
>
|
|
566
|
+
</list>;
|
|
566
567
|
```
|
|
567
568
|
|
|
568
569
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -680,7 +681,7 @@
|
|
|
680
681
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
681
682
|
|
|
682
683
|
```tsx
|
|
683
|
-
import { useErrorBoundary } from
|
|
684
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
684
685
|
```
|
|
685
686
|
|
|
686
687
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -732,13 +733,13 @@
|
|
|
732
733
|
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.
|
|
733
734
|
|
|
734
735
|
```js
|
|
735
|
-
import { runOnBackground } from
|
|
736
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
736
737
|
|
|
737
738
|
const onTap = async () => {
|
|
738
|
-
|
|
739
|
+
'main thread';
|
|
739
740
|
const text = await runOnBackground(() => {
|
|
740
|
-
|
|
741
|
-
return
|
|
741
|
+
'background only';
|
|
742
|
+
return 'Hello, world!';
|
|
742
743
|
})();
|
|
743
744
|
console.log(text);
|
|
744
745
|
};
|
|
@@ -773,9 +774,9 @@
|
|
|
773
774
|
|
|
774
775
|
```ts
|
|
775
776
|
// These imports will be removed from the final bundle
|
|
776
|
-
import type { Foo } from
|
|
777
|
-
import { type Bar } from
|
|
778
|
-
import { xyz } from
|
|
777
|
+
import type { Foo } from 'xyz';
|
|
778
|
+
import { type Bar } from 'xyz';
|
|
779
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
779
780
|
```
|
|
780
781
|
|
|
781
782
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -815,7 +816,7 @@
|
|
|
815
816
|
const f = undefined;
|
|
816
817
|
|
|
817
818
|
function mts() {
|
|
818
|
-
|
|
819
|
+
'main thread';
|
|
819
820
|
// throws in background rendering
|
|
820
821
|
f && runOnBackground(f)();
|
|
821
822
|
}
|
|
@@ -849,14 +850,14 @@
|
|
|
849
850
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
850
851
|
|
|
851
852
|
```js
|
|
852
|
-
import { pluginReactLynx } from
|
|
853
|
-
import { defineConfig } from
|
|
853
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
854
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
854
855
|
|
|
855
856
|
export default defineConfig({
|
|
856
857
|
plugins: [
|
|
857
858
|
pluginReactLynx({
|
|
858
859
|
compat: {
|
|
859
|
-
removeComponentAttrRegex:
|
|
860
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
860
861
|
},
|
|
861
862
|
}),
|
|
862
863
|
],
|
|
@@ -942,22 +943,22 @@
|
|
|
942
943
|
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.
|
|
943
944
|
|
|
944
945
|
```tsx
|
|
945
|
-
import { useGesture, PanGesture } from
|
|
946
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
946
947
|
|
|
947
948
|
function App() {
|
|
948
949
|
const pan = useGesture(PanGesture);
|
|
949
950
|
|
|
950
951
|
pan
|
|
951
952
|
.onBegin((event, stateManager) => {
|
|
952
|
-
|
|
953
|
+
'main thread';
|
|
953
954
|
// some logic
|
|
954
955
|
})
|
|
955
956
|
.onUpdate((event, stateManager) => {
|
|
956
|
-
|
|
957
|
+
'main thread';
|
|
957
958
|
// some logic
|
|
958
959
|
})
|
|
959
960
|
.onEnd((event, stateManager) => {
|
|
960
|
-
|
|
961
|
+
'main thread';
|
|
961
962
|
// some logic
|
|
962
963
|
});
|
|
963
964
|
|
|
@@ -977,7 +978,7 @@
|
|
|
977
978
|
return;
|
|
978
979
|
}
|
|
979
980
|
|
|
980
|
-
console.log(
|
|
981
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
981
982
|
}
|
|
982
983
|
```
|
|
983
984
|
|
package/package.json
CHANGED