@lynx-js/react-canary 0.114.2-canary-20251012-dd7c14a8 → 0.114.2

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.
Files changed (2) hide show
  1. package/CHANGELOG.md +32 -31
  2. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @lynx-js/react
2
2
 
3
- ## 0.114.2-canary-20251012050336-dd7c14a838a10804949a953d0f5b54f34ba7cc67
3
+ ## 0.114.2
4
4
 
5
5
  ### Patch Changes
6
6
 
@@ -15,7 +15,7 @@
15
15
  ```tsx
16
16
  function App() {
17
17
  function handleInnerTap(event: MainThread.TouchEvent) {
18
- "main thread";
18
+ 'main thread';
19
19
  event.stopPropagation();
20
20
  // Or stop immediate propagation with
21
21
  // event.stopImmediatePropagation();
@@ -113,10 +113,10 @@
113
113
  - 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))
114
114
 
115
115
  ```ts
116
- import type { MainThread } from "@lynx-js/types";
116
+ import type { MainThread } from '@lynx-js/types';
117
117
 
118
118
  function startAnimation(ele: MainThread.Element) {
119
- "main thread";
119
+ 'main thread';
120
120
  const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
121
121
  duration: 3000,
122
122
  });
@@ -145,7 +145,7 @@
145
145
  - 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))
146
146
 
147
147
  ```jsx
148
- <list-item recyclable={false} />
148
+ <list-item recyclable={false} />;
149
149
  ```
150
150
 
151
151
  - feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
@@ -166,7 +166,7 @@
166
166
 
167
167
  ```ts
168
168
  function handleTap() {
169
- "main thread";
169
+ 'main thread';
170
170
  // The following check always returned false before this fix
171
171
  if (myHandleTap) {
172
172
  runOnBackground(myHandleTap)();
@@ -227,10 +227,10 @@
227
227
  Add the import to `@lynx-js/react/debug` at the first line of the entry:
228
228
 
229
229
  ```js
230
- import "@lynx-js/react/debug";
231
- import { root } from "@lynx-js/react";
230
+ import '@lynx-js/react/debug';
231
+ import { root } from '@lynx-js/react';
232
232
 
233
- import { App } from "./App.jsx";
233
+ import { App } from './App.jsx';
234
234
 
235
235
  root.render(<App />);
236
236
  ```
@@ -240,9 +240,9 @@
240
240
  For example, you can use it like this:
241
241
 
242
242
  ```jsx
243
- <list-item defer={{ unmountRecycled: true }} item-key="1">
243
+ <list-item defer={{ unmountRecycled: true }} item-key='1'>
244
244
  <WillBeUnmountIfRecycled />
245
- </list-item>
245
+ </list-item>;
246
246
  ```
247
247
 
248
248
  Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
@@ -250,7 +250,7 @@
250
250
  - 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))
251
251
 
252
252
  ```jsx
253
- <image async-mode={undefined} />
253
+ <image async-mode={undefined} />;
254
254
  ```
255
255
 
256
256
  ## 0.111.1
@@ -296,7 +296,7 @@
296
296
  - Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
297
297
 
298
298
  ```js
299
- import { act } from "@lynx-js/react/testing-library";
299
+ import { act } from '@lynx-js/react/testing-library';
300
300
 
301
301
  act(() => {
302
302
  // ...
@@ -402,7 +402,8 @@
402
402
  * 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
403
403
  */
404
404
  experimental-batch-render-strategy={3}
405
- ></list>
405
+ >
406
+ </list>;
406
407
  ```
407
408
 
408
409
  - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
@@ -520,7 +521,7 @@
520
521
  You can now use `useErrorBoundary` it in TypeScript like this:
521
522
 
522
523
  ```tsx
523
- import { useErrorBoundary } from "@lynx-js/react";
524
+ import { useErrorBoundary } from '@lynx-js/react';
524
525
  ```
525
526
 
526
527
  - Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
@@ -572,13 +573,13 @@
572
573
  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.
573
574
 
574
575
  ```js
575
- import { runOnBackground } from "@lynx-js/react";
576
+ import { runOnBackground } from '@lynx-js/react';
576
577
 
577
578
  const onTap = async () => {
578
- "main thread";
579
+ 'main thread';
579
580
  const text = await runOnBackground(() => {
580
- "background only";
581
- return "Hello, world!";
581
+ 'background only';
582
+ return 'Hello, world!';
582
583
  })();
583
584
  console.log(text);
584
585
  };
@@ -613,9 +614,9 @@
613
614
 
614
615
  ```ts
615
616
  // These imports will be removed from the final bundle
616
- import type { Foo } from "xyz";
617
- import { type Bar } from "xyz";
618
- import { xyz } from "xyz"; // When xyz is not used
617
+ import type { Foo } from 'xyz';
618
+ import { type Bar } from 'xyz';
619
+ import { xyz } from 'xyz'; // When xyz is not used
619
620
  ```
620
621
 
621
622
  See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
@@ -655,7 +656,7 @@
655
656
  const f = undefined;
656
657
 
657
658
  function mts() {
658
- "main thread";
659
+ 'main thread';
659
660
  // throws in background rendering
660
661
  f && runOnBackground(f)();
661
662
  }
@@ -689,14 +690,14 @@
689
690
  - a30c83d: Add `compat.removeComponentAttrRegex`.
690
691
 
691
692
  ```js
692
- import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
693
- import { defineConfig } from "@lynx-js/rspeedy";
693
+ import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
694
+ import { defineConfig } from '@lynx-js/rspeedy';
694
695
 
695
696
  export default defineConfig({
696
697
  plugins: [
697
698
  pluginReactLynx({
698
699
  compat: {
699
- removeComponentAttrRegex: "YOUR REGEX",
700
+ removeComponentAttrRegex: 'YOUR REGEX',
700
701
  },
701
702
  }),
702
703
  ],
@@ -782,22 +783,22 @@
782
783
  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.
783
784
 
784
785
  ```tsx
785
- import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
786
+ import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
786
787
 
787
788
  function App() {
788
789
  const pan = useGesture(PanGesture);
789
790
 
790
791
  pan
791
792
  .onBegin((event, stateManager) => {
792
- "main thread";
793
+ 'main thread';
793
794
  // some logic
794
795
  })
795
796
  .onUpdate((event, stateManager) => {
796
- "main thread";
797
+ 'main thread';
797
798
  // some logic
798
799
  })
799
800
  .onEnd((event, stateManager) => {
800
- "main thread";
801
+ 'main thread';
801
802
  // some logic
802
803
  });
803
804
 
@@ -817,7 +818,7 @@
817
818
  return;
818
819
  }
819
820
 
820
- console.log("not __LEPUS__"); // This can be removed now
821
+ console.log('not __LEPUS__'); // This can be removed now
821
822
  }
822
823
  ```
823
824
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/react-canary",
3
- "version": "0.114.2-canary-20251012-dd7c14a8",
3
+ "version": "0.114.2",
4
4
  "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
5
5
  "repository": {
6
6
  "type": "git",