@lynx-js/react-canary 0.116.1-canary-20260126-99c412f6 → 0.116.1
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/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.116.1
|
|
3
|
+
## 0.116.1
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
|
|
33
33
|
```typescript
|
|
34
34
|
function getStyle(ele: MainThread.Element) {
|
|
35
|
-
|
|
36
|
-
const width = ele.getComputedStyleProperty(
|
|
37
|
-
const transformMatrix = ele.getComputedStyleProperty(
|
|
35
|
+
'main thread';
|
|
36
|
+
const width = ele.getComputedStyleProperty('width'); // Returns 300px
|
|
37
|
+
const transformMatrix = ele.getComputedStyleProperty('transform'); // Returns matrix(2, 0, 0, 2, 200, 400)
|
|
38
38
|
}
|
|
39
39
|
```
|
|
40
40
|
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
```ts
|
|
50
50
|
const LazyComponent = lazy(async () => {
|
|
51
51
|
try {
|
|
52
|
-
const mod = await import(
|
|
52
|
+
const mod = await import('./lazy-bundle');
|
|
53
53
|
return mod.default;
|
|
54
54
|
} catch (error) {
|
|
55
55
|
console.error(`Lazy Bundle load failed message: ${error.message}`);
|
|
@@ -161,11 +161,11 @@
|
|
|
161
161
|
- 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))
|
|
162
162
|
|
|
163
163
|
```js
|
|
164
|
-
import { defineConfig, mergeConfig } from
|
|
165
|
-
import { createVitestConfig } from
|
|
164
|
+
import { defineConfig, mergeConfig } from 'vitest/config';
|
|
165
|
+
import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
|
|
166
166
|
|
|
167
167
|
const defaultConfig = await createVitestConfig({
|
|
168
|
-
runtimePkgName:
|
|
168
|
+
runtimePkgName: '@lynx-js/react',
|
|
169
169
|
experimental_enableReactCompiler: true,
|
|
170
170
|
});
|
|
171
171
|
|
|
@@ -195,7 +195,7 @@
|
|
|
195
195
|
```tsx
|
|
196
196
|
function App() {
|
|
197
197
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
198
|
-
|
|
198
|
+
'main thread';
|
|
199
199
|
event.stopPropagation();
|
|
200
200
|
// Or stop immediate propagation with
|
|
201
201
|
// event.stopImmediatePropagation();
|
|
@@ -293,10 +293,10 @@
|
|
|
293
293
|
- 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))
|
|
294
294
|
|
|
295
295
|
```ts
|
|
296
|
-
import type { MainThread } from
|
|
296
|
+
import type { MainThread } from '@lynx-js/types';
|
|
297
297
|
|
|
298
298
|
function startAnimation(ele: MainThread.Element) {
|
|
299
|
-
|
|
299
|
+
'main thread';
|
|
300
300
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
301
301
|
duration: 3000,
|
|
302
302
|
});
|
|
@@ -325,7 +325,7 @@
|
|
|
325
325
|
- 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))
|
|
326
326
|
|
|
327
327
|
```jsx
|
|
328
|
-
<list-item recyclable={false}
|
|
328
|
+
<list-item recyclable={false} />;
|
|
329
329
|
```
|
|
330
330
|
|
|
331
331
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -346,7 +346,7 @@
|
|
|
346
346
|
|
|
347
347
|
```ts
|
|
348
348
|
function handleTap() {
|
|
349
|
-
|
|
349
|
+
'main thread';
|
|
350
350
|
// The following check always returned false before this fix
|
|
351
351
|
if (myHandleTap) {
|
|
352
352
|
runOnBackground(myHandleTap)();
|
|
@@ -407,10 +407,10 @@
|
|
|
407
407
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
408
408
|
|
|
409
409
|
```js
|
|
410
|
-
import
|
|
411
|
-
import { root } from
|
|
410
|
+
import '@lynx-js/react/debug';
|
|
411
|
+
import { root } from '@lynx-js/react';
|
|
412
412
|
|
|
413
|
-
import { App } from
|
|
413
|
+
import { App } from './App.jsx';
|
|
414
414
|
|
|
415
415
|
root.render(<App />);
|
|
416
416
|
```
|
|
@@ -420,9 +420,9 @@
|
|
|
420
420
|
For example, you can use it like this:
|
|
421
421
|
|
|
422
422
|
```jsx
|
|
423
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
423
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
424
424
|
<WillBeUnmountIfRecycled />
|
|
425
|
-
</list-item
|
|
425
|
+
</list-item>;
|
|
426
426
|
```
|
|
427
427
|
|
|
428
428
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -430,7 +430,7 @@
|
|
|
430
430
|
- 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))
|
|
431
431
|
|
|
432
432
|
```jsx
|
|
433
|
-
<image async-mode={undefined}
|
|
433
|
+
<image async-mode={undefined} />;
|
|
434
434
|
```
|
|
435
435
|
|
|
436
436
|
## 0.111.1
|
|
@@ -476,7 +476,7 @@
|
|
|
476
476
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
477
477
|
|
|
478
478
|
```js
|
|
479
|
-
import { act } from
|
|
479
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
480
480
|
|
|
481
481
|
act(() => {
|
|
482
482
|
// ...
|
|
@@ -582,7 +582,8 @@
|
|
|
582
582
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
583
583
|
*/
|
|
584
584
|
experimental-batch-render-strategy={3}
|
|
585
|
-
|
|
585
|
+
>
|
|
586
|
+
</list>;
|
|
586
587
|
```
|
|
587
588
|
|
|
588
589
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -700,7 +701,7 @@
|
|
|
700
701
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
701
702
|
|
|
702
703
|
```tsx
|
|
703
|
-
import { useErrorBoundary } from
|
|
704
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
704
705
|
```
|
|
705
706
|
|
|
706
707
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -752,13 +753,13 @@
|
|
|
752
753
|
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.
|
|
753
754
|
|
|
754
755
|
```js
|
|
755
|
-
import { runOnBackground } from
|
|
756
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
756
757
|
|
|
757
758
|
const onTap = async () => {
|
|
758
|
-
|
|
759
|
+
'main thread';
|
|
759
760
|
const text = await runOnBackground(() => {
|
|
760
|
-
|
|
761
|
-
return
|
|
761
|
+
'background only';
|
|
762
|
+
return 'Hello, world!';
|
|
762
763
|
})();
|
|
763
764
|
console.log(text);
|
|
764
765
|
};
|
|
@@ -793,9 +794,9 @@
|
|
|
793
794
|
|
|
794
795
|
```ts
|
|
795
796
|
// These imports will be removed from the final bundle
|
|
796
|
-
import type { Foo } from
|
|
797
|
-
import { type Bar } from
|
|
798
|
-
import { xyz } from
|
|
797
|
+
import type { Foo } from 'xyz';
|
|
798
|
+
import { type Bar } from 'xyz';
|
|
799
|
+
import { xyz } from 'xyz'; // When xyz is not used
|
|
799
800
|
```
|
|
800
801
|
|
|
801
802
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -835,7 +836,7 @@
|
|
|
835
836
|
const f = undefined;
|
|
836
837
|
|
|
837
838
|
function mts() {
|
|
838
|
-
|
|
839
|
+
'main thread';
|
|
839
840
|
// throws in background rendering
|
|
840
841
|
f && runOnBackground(f)();
|
|
841
842
|
}
|
|
@@ -869,14 +870,14 @@
|
|
|
869
870
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
870
871
|
|
|
871
872
|
```js
|
|
872
|
-
import { pluginReactLynx } from
|
|
873
|
-
import { defineConfig } from
|
|
873
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
874
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
874
875
|
|
|
875
876
|
export default defineConfig({
|
|
876
877
|
plugins: [
|
|
877
878
|
pluginReactLynx({
|
|
878
879
|
compat: {
|
|
879
|
-
removeComponentAttrRegex:
|
|
880
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
880
881
|
},
|
|
881
882
|
}),
|
|
882
883
|
],
|
|
@@ -962,22 +963,22 @@
|
|
|
962
963
|
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.
|
|
963
964
|
|
|
964
965
|
```tsx
|
|
965
|
-
import { useGesture, PanGesture } from
|
|
966
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
966
967
|
|
|
967
968
|
function App() {
|
|
968
969
|
const pan = useGesture(PanGesture);
|
|
969
970
|
|
|
970
971
|
pan
|
|
971
972
|
.onBegin((event, stateManager) => {
|
|
972
|
-
|
|
973
|
+
'main thread';
|
|
973
974
|
// some logic
|
|
974
975
|
})
|
|
975
976
|
.onUpdate((event, stateManager) => {
|
|
976
|
-
|
|
977
|
+
'main thread';
|
|
977
978
|
// some logic
|
|
978
979
|
})
|
|
979
980
|
.onEnd((event, stateManager) => {
|
|
980
|
-
|
|
981
|
+
'main thread';
|
|
981
982
|
// some logic
|
|
982
983
|
});
|
|
983
984
|
|
|
@@ -997,7 +998,7 @@
|
|
|
997
998
|
return;
|
|
998
999
|
}
|
|
999
1000
|
|
|
1000
|
-
console.log(
|
|
1001
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
1001
1002
|
}
|
|
1002
1003
|
```
|
|
1003
1004
|
|
package/package.json
CHANGED