@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 CHANGED
@@ -1,6 +1,6 @@
1
1
  # @lynx-js/react
2
2
 
3
- ## 0.116.0-canary-20260123091955-444f83bb390520f0c669bc522a70fb6d5709d63a
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
- "main thread";
30
- const width = ele.getComputedStyleProperty("width"); // Returns 300px
31
- const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400)
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("./lazy-bundle");
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 "vitest/config";
159
- import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
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: "@lynx-js/react",
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
- "main thread";
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 "@lynx-js/types";
290
+ import type { MainThread } from '@lynx-js/types';
291
291
 
292
292
  function startAnimation(ele: MainThread.Element) {
293
- "main thread";
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
- "main thread";
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 "@lynx-js/react/debug";
405
- import { root } from "@lynx-js/react";
404
+ import '@lynx-js/react/debug';
405
+ import { root } from '@lynx-js/react';
406
406
 
407
- import { App } from "./App.jsx";
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="1">
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 "@lynx-js/react/testing-library";
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
- ></list>
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 "@lynx-js/react";
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 "@lynx-js/react";
750
+ import { runOnBackground } from '@lynx-js/react';
750
751
 
751
752
  const onTap = async () => {
752
- "main thread";
753
+ 'main thread';
753
754
  const text = await runOnBackground(() => {
754
- "background only";
755
- return "Hello, world!";
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 "xyz";
791
- import { type Bar } from "xyz";
792
- import { xyz } from "xyz"; // When xyz is not used
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
- "main thread";
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 "@lynx-js/react-rsbuild-plugin";
867
- import { defineConfig } from "@lynx-js/rspeedy";
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: "YOUR REGEX",
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 "@lynx-js/gesture-runtime";
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
- "main thread";
967
+ 'main thread';
967
968
  // some logic
968
969
  })
969
970
  .onUpdate((event, stateManager) => {
970
- "main thread";
971
+ 'main thread';
971
972
  // some logic
972
973
  })
973
974
  .onEnd((event, stateManager) => {
974
- "main thread";
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("not __LEPUS__"); // This can be removed now
995
+ console.log('not __LEPUS__'); // This can be removed now
995
996
  }
996
997
  ```
997
998
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/react-canary",
3
- "version": "0.116.0-canary-20260123-444f83bb",
3
+ "version": "0.116.0",
4
4
  "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -5,7 +5,7 @@
5
5
  Rslib v0.19.1
6
6
 
7
7
  info build started...
8
- ready built in 0.18 s
8
+ ready built in 0.27 s
9
9
 
10
10
  File (esm) Size 
11
11
  dist/index.js 10.1 kB