@lynx-js/react-canary 0.116.0-canary-20260123-444f83bb → 0.116.0
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.116.0
|
|
3
|
+
## 0.116.0
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
|
|
27
27
|
```typescript
|
|
28
28
|
function getStyle(ele: MainThread.Element) {
|
|
29
|
-
|
|
30
|
-
const width = ele.getComputedStyleProperty(
|
|
31
|
-
const transformMatrix = ele.getComputedStyleProperty(
|
|
29
|
+
'main thread';
|
|
30
|
+
const width = ele.getComputedStyleProperty('width'); // Returns 300px
|
|
31
|
+
const transformMatrix = ele.getComputedStyleProperty('transform'); // Returns matrix(2, 0, 0, 2, 200, 400)
|
|
32
32
|
}
|
|
33
33
|
```
|
|
34
34
|
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
```ts
|
|
44
44
|
const LazyComponent = lazy(async () => {
|
|
45
45
|
try {
|
|
46
|
-
const mod = await import(
|
|
46
|
+
const mod = await import('./lazy-bundle');
|
|
47
47
|
return mod.default;
|
|
48
48
|
} catch (error) {
|
|
49
49
|
console.error(`Lazy Bundle load failed message: ${error.message}`);
|
|
@@ -155,11 +155,11 @@
|
|
|
155
155
|
- 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))
|
|
156
156
|
|
|
157
157
|
```js
|
|
158
|
-
import { defineConfig, mergeConfig } from
|
|
159
|
-
import { createVitestConfig } from
|
|
158
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
159
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
160
160
|
|
|
161
161
|
const defaultConfig = await createVitestConfig({
|
|
162
|
-
runtimePkgName:
|
|
162
|
+
runtimePkgName: '@lynx-js/react',
|
|
163
163
|
experimental_enableReactCompiler: true,
|
|
164
164
|
});
|
|
165
165
|
|
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
```tsx
|
|
190
190
|
function App() {
|
|
191
191
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
192
|
-
|
|
192
|
+
'main thread';
|
|
193
193
|
event.stopPropagation();
|
|
194
194
|
// Or stop immediate propagation with
|
|
195
195
|
// event.stopImmediatePropagation();
|
|
@@ -287,10 +287,10 @@
|
|
|
287
287
|
- 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))
|
|
288
288
|
|
|
289
289
|
```ts
|
|
290
|
-
import type { MainThread } from
|
|
290
|
+
import type { MainThread } from '@lynx-js/types';
|
|
291
291
|
|
|
292
292
|
function startAnimation(ele: MainThread.Element) {
|
|
293
|
-
|
|
293
|
+
'main thread';
|
|
294
294
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
295
295
|
duration: 3000,
|
|
296
296
|
});
|
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
- 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))
|
|
320
320
|
|
|
321
321
|
```jsx
|
|
322
|
-
<list-item recyclable={false}
|
|
322
|
+
<list-item recyclable={false} />;
|
|
323
323
|
```
|
|
324
324
|
|
|
325
325
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -340,7 +340,7 @@
|
|
|
340
340
|
|
|
341
341
|
```ts
|
|
342
342
|
function handleTap() {
|
|
343
|
-
|
|
343
|
+
'main thread';
|
|
344
344
|
// The following check always returned false before this fix
|
|
345
345
|
if (myHandleTap) {
|
|
346
346
|
runOnBackground(myHandleTap)();
|
|
@@ -401,10 +401,10 @@
|
|
|
401
401
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
402
402
|
|
|
403
403
|
```js
|
|
404
|
-
import
|
|
405
|
-
import { root } from
|
|
404
|
+
import '@lynx-js/react/debug';
|
|
405
|
+
import { root } from '@lynx-js/react';
|
|
406
406
|
|
|
407
|
-
import { App } from
|
|
407
|
+
import { App } from './App.jsx';
|
|
408
408
|
|
|
409
409
|
root.render(<App />);
|
|
410
410
|
```
|
|
@@ -414,9 +414,9 @@
|
|
|
414
414
|
For example, you can use it like this:
|
|
415
415
|
|
|
416
416
|
```jsx
|
|
417
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
417
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
418
418
|
<WillBeUnmountIfRecycled />
|
|
419
|
-
</list-item
|
|
419
|
+
</list-item>;
|
|
420
420
|
```
|
|
421
421
|
|
|
422
422
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -424,7 +424,7 @@
|
|
|
424
424
|
- 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))
|
|
425
425
|
|
|
426
426
|
```jsx
|
|
427
|
-
<image async-mode={undefined}
|
|
427
|
+
<image async-mode={undefined} />;
|
|
428
428
|
```
|
|
429
429
|
|
|
430
430
|
## 0.111.1
|
|
@@ -470,7 +470,7 @@
|
|
|
470
470
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
471
471
|
|
|
472
472
|
```js
|
|
473
|
-
import { act } from
|
|
473
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
474
474
|
|
|
475
475
|
act(() => {
|
|
476
476
|
// ...
|
|
@@ -576,7 +576,8 @@
|
|
|
576
576
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
577
577
|
*/
|
|
578
578
|
experimental-batch-render-strategy={3}
|
|
579
|
-
|
|
579
|
+
>
|
|
580
|
+
</list>;
|
|
580
581
|
```
|
|
581
582
|
|
|
582
583
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -694,7 +695,7 @@
|
|
|
694
695
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
695
696
|
|
|
696
697
|
```tsx
|
|
697
|
-
import { useErrorBoundary } from
|
|
698
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
698
699
|
```
|
|
699
700
|
|
|
700
701
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -746,13 +747,13 @@
|
|
|
746
747
|
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.
|
|
747
748
|
|
|
748
749
|
```js
|
|
749
|
-
import { runOnBackground } from
|
|
750
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
750
751
|
|
|
751
752
|
const onTap = async () => {
|
|
752
|
-
|
|
753
|
+
'main thread';
|
|
753
754
|
const text = await runOnBackground(() => {
|
|
754
|
-
|
|
755
|
-
return
|
|
755
|
+
'background only';
|
|
756
|
+
return 'Hello, world!';
|
|
756
757
|
})();
|
|
757
758
|
console.log(text);
|
|
758
759
|
};
|
|
@@ -787,9 +788,9 @@
|
|
|
787
788
|
|
|
788
789
|
```ts
|
|
789
790
|
// These imports will be removed from the final bundle
|
|
790
|
-
import type { Foo } from
|
|
791
|
-
import { type Bar } from
|
|
792
|
-
import { xyz } from
|
|
791
|
+
import type { Foo } from 'xyz';
|
|
792
|
+
import { type Bar } from 'xyz';
|
|
793
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
793
794
|
```
|
|
794
795
|
|
|
795
796
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -829,7 +830,7 @@
|
|
|
829
830
|
const f = undefined;
|
|
830
831
|
|
|
831
832
|
function mts() {
|
|
832
|
-
|
|
833
|
+
'main thread';
|
|
833
834
|
// throws in background rendering
|
|
834
835
|
f && runOnBackground(f)();
|
|
835
836
|
}
|
|
@@ -863,14 +864,14 @@
|
|
|
863
864
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
864
865
|
|
|
865
866
|
```js
|
|
866
|
-
import { pluginReactLynx } from
|
|
867
|
-
import { defineConfig } from
|
|
867
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
868
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
868
869
|
|
|
869
870
|
export default defineConfig({
|
|
870
871
|
plugins: [
|
|
871
872
|
pluginReactLynx({
|
|
872
873
|
compat: {
|
|
873
|
-
removeComponentAttrRegex:
|
|
874
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
874
875
|
},
|
|
875
876
|
}),
|
|
876
877
|
],
|
|
@@ -956,22 +957,22 @@
|
|
|
956
957
|
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.
|
|
957
958
|
|
|
958
959
|
```tsx
|
|
959
|
-
import { useGesture, PanGesture } from
|
|
960
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
960
961
|
|
|
961
962
|
function App() {
|
|
962
963
|
const pan = useGesture(PanGesture);
|
|
963
964
|
|
|
964
965
|
pan
|
|
965
966
|
.onBegin((event, stateManager) => {
|
|
966
|
-
|
|
967
|
+
'main thread';
|
|
967
968
|
// some logic
|
|
968
969
|
})
|
|
969
970
|
.onUpdate((event, stateManager) => {
|
|
970
|
-
|
|
971
|
+
'main thread';
|
|
971
972
|
// some logic
|
|
972
973
|
})
|
|
973
974
|
.onEnd((event, stateManager) => {
|
|
974
|
-
|
|
975
|
+
'main thread';
|
|
975
976
|
// some logic
|
|
976
977
|
});
|
|
977
978
|
|
|
@@ -991,7 +992,7 @@
|
|
|
991
992
|
return;
|
|
992
993
|
}
|
|
993
994
|
|
|
994
|
-
console.log(
|
|
995
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
995
996
|
}
|
|
996
997
|
```
|
|
997
998
|
|
package/package.json
CHANGED