@lynx-js/react-canary 0.114.3-canary-20251021-353312e0 → 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
CHANGED
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
# @lynx-js/react
|
|
2
2
|
|
|
3
|
-
## 0.114.3
|
|
3
|
+
## 0.114.3
|
|
4
4
|
|
|
5
5
|
### Patch Changes
|
|
6
6
|
|
|
7
|
+
- Initialize `ctxNotFoundEventListener` before each test in testing library ([#1888](https://github.com/lynx-family/lynx-stack/pull/1888))
|
|
8
|
+
|
|
7
9
|
- fix: main thread functions created during the initial render cannot correctly modify `MainThreadRef`s after hydration ([#1884](https://github.com/lynx-family/lynx-stack/pull/1884))
|
|
8
10
|
|
|
9
11
|
## 0.114.2
|
|
@@ -21,7 +23,7 @@
|
|
|
21
23
|
```tsx
|
|
22
24
|
function App() {
|
|
23
25
|
function handleInnerTap(event: MainThread.TouchEvent) {
|
|
24
|
-
|
|
26
|
+
'main thread';
|
|
25
27
|
event.stopPropagation();
|
|
26
28
|
// Or stop immediate propagation with
|
|
27
29
|
// event.stopImmediatePropagation();
|
|
@@ -119,10 +121,10 @@
|
|
|
119
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))
|
|
120
122
|
|
|
121
123
|
```ts
|
|
122
|
-
import type { MainThread } from
|
|
124
|
+
import type { MainThread } from '@lynx-js/types';
|
|
123
125
|
|
|
124
126
|
function startAnimation(ele: MainThread.Element) {
|
|
125
|
-
|
|
127
|
+
'main thread';
|
|
126
128
|
const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
|
|
127
129
|
duration: 3000,
|
|
128
130
|
});
|
|
@@ -151,7 +153,7 @@
|
|
|
151
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))
|
|
152
154
|
|
|
153
155
|
```jsx
|
|
154
|
-
<list-item recyclable={false}
|
|
156
|
+
<list-item recyclable={false} />;
|
|
155
157
|
```
|
|
156
158
|
|
|
157
159
|
- feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
|
|
@@ -172,7 +174,7 @@
|
|
|
172
174
|
|
|
173
175
|
```ts
|
|
174
176
|
function handleTap() {
|
|
175
|
-
|
|
177
|
+
'main thread';
|
|
176
178
|
// The following check always returned false before this fix
|
|
177
179
|
if (myHandleTap) {
|
|
178
180
|
runOnBackground(myHandleTap)();
|
|
@@ -233,10 +235,10 @@
|
|
|
233
235
|
Add the import to `@lynx-js/react/debug` at the first line of the entry:
|
|
234
236
|
|
|
235
237
|
```js
|
|
236
|
-
import
|
|
237
|
-
import { root } from
|
|
238
|
+
import '@lynx-js/react/debug';
|
|
239
|
+
import { root } from '@lynx-js/react';
|
|
238
240
|
|
|
239
|
-
import { App } from
|
|
241
|
+
import { App } from './App.jsx';
|
|
240
242
|
|
|
241
243
|
root.render(<App />);
|
|
242
244
|
```
|
|
@@ -246,9 +248,9 @@
|
|
|
246
248
|
For example, you can use it like this:
|
|
247
249
|
|
|
248
250
|
```jsx
|
|
249
|
-
<list-item defer={{ unmountRecycled: true }} item-key=
|
|
251
|
+
<list-item defer={{ unmountRecycled: true }} item-key='1'>
|
|
250
252
|
<WillBeUnmountIfRecycled />
|
|
251
|
-
</list-item
|
|
253
|
+
</list-item>;
|
|
252
254
|
```
|
|
253
255
|
|
|
254
256
|
Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
|
|
@@ -256,7 +258,7 @@
|
|
|
256
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))
|
|
257
259
|
|
|
258
260
|
```jsx
|
|
259
|
-
<image async-mode={undefined}
|
|
261
|
+
<image async-mode={undefined} />;
|
|
260
262
|
```
|
|
261
263
|
|
|
262
264
|
## 0.111.1
|
|
@@ -302,7 +304,7 @@
|
|
|
302
304
|
- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
|
|
303
305
|
|
|
304
306
|
```js
|
|
305
|
-
import { act } from
|
|
307
|
+
import { act } from '@lynx-js/react/testing-library';
|
|
306
308
|
|
|
307
309
|
act(() => {
|
|
308
310
|
// ...
|
|
@@ -408,7 +410,8 @@
|
|
|
408
410
|
* 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
|
|
409
411
|
*/
|
|
410
412
|
experimental-batch-render-strategy={3}
|
|
411
|
-
|
|
413
|
+
>
|
|
414
|
+
</list>;
|
|
412
415
|
```
|
|
413
416
|
|
|
414
417
|
- rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
|
|
@@ -526,7 +529,7 @@
|
|
|
526
529
|
You can now use `useErrorBoundary` it in TypeScript like this:
|
|
527
530
|
|
|
528
531
|
```tsx
|
|
529
|
-
import { useErrorBoundary } from
|
|
532
|
+
import { useErrorBoundary } from '@lynx-js/react';
|
|
530
533
|
```
|
|
531
534
|
|
|
532
535
|
- Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
|
|
@@ -578,13 +581,13 @@
|
|
|
578
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.
|
|
579
582
|
|
|
580
583
|
```js
|
|
581
|
-
import { runOnBackground } from
|
|
584
|
+
import { runOnBackground } from '@lynx-js/react';
|
|
582
585
|
|
|
583
586
|
const onTap = async () => {
|
|
584
|
-
|
|
587
|
+
'main thread';
|
|
585
588
|
const text = await runOnBackground(() => {
|
|
586
|
-
|
|
587
|
-
return
|
|
589
|
+
'background only';
|
|
590
|
+
return 'Hello, world!';
|
|
588
591
|
})();
|
|
589
592
|
console.log(text);
|
|
590
593
|
};
|
|
@@ -619,9 +622,9 @@
|
|
|
619
622
|
|
|
620
623
|
```ts
|
|
621
624
|
// These imports will be removed from the final bundle
|
|
622
|
-
import type { Foo } from
|
|
623
|
-
import { type Bar } from
|
|
624
|
-
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
|
|
625
628
|
```
|
|
626
629
|
|
|
627
630
|
See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
|
|
@@ -661,7 +664,7 @@
|
|
|
661
664
|
const f = undefined;
|
|
662
665
|
|
|
663
666
|
function mts() {
|
|
664
|
-
|
|
667
|
+
'main thread';
|
|
665
668
|
// throws in background rendering
|
|
666
669
|
f && runOnBackground(f)();
|
|
667
670
|
}
|
|
@@ -695,14 +698,14 @@
|
|
|
695
698
|
- a30c83d: Add `compat.removeComponentAttrRegex`.
|
|
696
699
|
|
|
697
700
|
```js
|
|
698
|
-
import { pluginReactLynx } from
|
|
699
|
-
import { defineConfig } from
|
|
701
|
+
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
|
|
702
|
+
import { defineConfig } from '@lynx-js/rspeedy';
|
|
700
703
|
|
|
701
704
|
export default defineConfig({
|
|
702
705
|
plugins: [
|
|
703
706
|
pluginReactLynx({
|
|
704
707
|
compat: {
|
|
705
|
-
removeComponentAttrRegex:
|
|
708
|
+
removeComponentAttrRegex: 'YOUR REGEX',
|
|
706
709
|
},
|
|
707
710
|
}),
|
|
708
711
|
],
|
|
@@ -788,22 +791,22 @@
|
|
|
788
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.
|
|
789
792
|
|
|
790
793
|
```tsx
|
|
791
|
-
import { useGesture, PanGesture } from
|
|
794
|
+
import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
|
|
792
795
|
|
|
793
796
|
function App() {
|
|
794
797
|
const pan = useGesture(PanGesture);
|
|
795
798
|
|
|
796
799
|
pan
|
|
797
800
|
.onBegin((event, stateManager) => {
|
|
798
|
-
|
|
801
|
+
'main thread';
|
|
799
802
|
// some logic
|
|
800
803
|
})
|
|
801
804
|
.onUpdate((event, stateManager) => {
|
|
802
|
-
|
|
805
|
+
'main thread';
|
|
803
806
|
// some logic
|
|
804
807
|
})
|
|
805
808
|
.onEnd((event, stateManager) => {
|
|
806
|
-
|
|
809
|
+
'main thread';
|
|
807
810
|
// some logic
|
|
808
811
|
});
|
|
809
812
|
|
|
@@ -823,7 +826,7 @@
|
|
|
823
826
|
return;
|
|
824
827
|
}
|
|
825
828
|
|
|
826
|
-
console.log(
|
|
829
|
+
console.log('not __LEPUS__'); // This can be removed now
|
|
827
830
|
}
|
|
828
831
|
```
|
|
829
832
|
|
package/package.json
CHANGED
|
@@ -7,6 +7,7 @@ import { injectUpdateMainThread } from "../../runtime/lib/lifecycle/patch/update
|
|
|
7
7
|
import { injectUpdateMTRefInitValue } from "../../runtime/lib/worklet/ref/updateInitValue.js";
|
|
8
8
|
import { injectCalledByNative } from "../../runtime/lib/lynx/calledByNative.js";
|
|
9
9
|
import { flushDelayedLifecycleEvents, injectTt } from "../../runtime/lib/lynx/tt.js";
|
|
10
|
+
import { addCtxNotFoundEventListener } from "../../runtime/lib/lifecycle/patch/error.js";
|
|
10
11
|
import { setRoot } from "../../runtime/lib/root.js";
|
|
11
12
|
import { SnapshotInstance, backgroundSnapshotInstanceManager, snapshotInstanceManager } from "../../runtime/lib/snapshot.js";
|
|
12
13
|
import { destroyWorklet } from "../../runtime/lib/worklet/destroy.js";
|
|
@@ -98,10 +99,6 @@ globalThis.onInjectBackgroundThreadGlobals = (target)=>{
|
|
|
98
99
|
}
|
|
99
100
|
target._document = setupBackgroundDocument({});
|
|
100
101
|
target.globalPipelineOptions = void 0;
|
|
101
|
-
const oldLynxCoreInject = globalThis.lynxCoreInject;
|
|
102
|
-
globalThis.lynxCoreInject = target.lynxCoreInject;
|
|
103
|
-
injectTt();
|
|
104
|
-
globalThis.lynxCoreInject = oldLynxCoreInject;
|
|
105
102
|
target.lynx.requireModuleAsync = async (url, callback)=>{
|
|
106
103
|
try {
|
|
107
104
|
callback(null, await __vite_ssr_dynamic_import__(url));
|
|
@@ -119,6 +116,8 @@ globalThis.onResetLynxTestingEnv = ()=>{
|
|
|
119
116
|
lynxTestingEnv.switchToMainThread();
|
|
120
117
|
initEventListeners();
|
|
121
118
|
lynxTestingEnv.switchToBackgroundThread();
|
|
119
|
+
injectTt();
|
|
120
|
+
addCtxNotFoundEventListener();
|
|
122
121
|
};
|
|
123
122
|
globalThis.onSwitchedToMainThread = ()=>{
|
|
124
123
|
if (onSwitchedToMainThread) onSwitchedToMainThread();
|