@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.
Files changed (2) hide show
  1. package/CHANGELOG.md +39 -38
  2. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @lynx-js/react
2
2
 
3
- ## 0.116.1-canary-20260126070444-99c412f6b261bd2e51d193cb06bee59c5a2b1285
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
- "main thread";
36
- const width = ele.getComputedStyleProperty("width"); // Returns 300px
37
- const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400)
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("./lazy-bundle");
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 "vitest/config";
165
- import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
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: "@lynx-js/react",
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
- "main thread";
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 "@lynx-js/types";
296
+ import type { MainThread } from '@lynx-js/types';
297
297
 
298
298
  function startAnimation(ele: MainThread.Element) {
299
- "main thread";
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
- "main thread";
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 "@lynx-js/react/debug";
411
- import { root } from "@lynx-js/react";
410
+ import '@lynx-js/react/debug';
411
+ import { root } from '@lynx-js/react';
412
412
 
413
- import { App } from "./App.jsx";
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="1">
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 "@lynx-js/react/testing-library";
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
- ></list>
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 "@lynx-js/react";
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 "@lynx-js/react";
756
+ import { runOnBackground } from '@lynx-js/react';
756
757
 
757
758
  const onTap = async () => {
758
- "main thread";
759
+ 'main thread';
759
760
  const text = await runOnBackground(() => {
760
- "background only";
761
- return "Hello, world!";
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 "xyz";
797
- import { type Bar } from "xyz";
798
- import { xyz } from "xyz"; // When xyz is not used
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
- "main thread";
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 "@lynx-js/react-rsbuild-plugin";
873
- import { defineConfig } from "@lynx-js/rspeedy";
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: "YOUR REGEX",
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 "@lynx-js/gesture-runtime";
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
- "main thread";
973
+ 'main thread';
973
974
  // some logic
974
975
  })
975
976
  .onUpdate((event, stateManager) => {
976
- "main thread";
977
+ 'main thread';
977
978
  // some logic
978
979
  })
979
980
  .onEnd((event, stateManager) => {
980
- "main thread";
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("not __LEPUS__"); // This can be removed now
1001
+ console.log('not __LEPUS__'); // This can be removed now
1001
1002
  }
1002
1003
  ```
1003
1004
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/react-canary",
3
- "version": "0.116.1-canary-20260126-99c412f6",
3
+ "version": "0.116.1",
4
4
  "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
5
5
  "repository": {
6
6
  "type": "git",