@lynx-js/react-canary 0.116.1 → 0.116.2-canary-20260127-80025087

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,5 +1,11 @@
1
1
  # @lynx-js/react
2
2
 
3
+ ## 0.116.2-canary-20260127124638-80025087ef1b17a9d4c26823fd13b5405bb64dc0
4
+
5
+ ### Patch Changes
6
+
7
+ - Bump `swc_core` v53. ([#2071](https://github.com/lynx-family/lynx-stack/pull/2071))
8
+
3
9
  ## 0.116.1
4
10
 
5
11
  ### Patch Changes
@@ -32,9 +38,9 @@
32
38
 
33
39
  ```typescript
34
40
  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)
41
+ "main thread";
42
+ const width = ele.getComputedStyleProperty("width"); // Returns 300px
43
+ const transformMatrix = ele.getComputedStyleProperty("transform"); // Returns matrix(2, 0, 0, 2, 200, 400)
38
44
  }
39
45
  ```
40
46
 
@@ -49,7 +55,7 @@
49
55
  ```ts
50
56
  const LazyComponent = lazy(async () => {
51
57
  try {
52
- const mod = await import('./lazy-bundle');
58
+ const mod = await import("./lazy-bundle");
53
59
  return mod.default;
54
60
  } catch (error) {
55
61
  console.error(`Lazy Bundle load failed message: ${error.message}`);
@@ -161,11 +167,11 @@
161
167
  - 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
168
 
163
169
  ```js
164
- import { defineConfig, mergeConfig } from 'vitest/config';
165
- import { createVitestConfig } from '@lynx-js/react/testing-library/vitest-config';
170
+ import { defineConfig, mergeConfig } from "vitest/config";
171
+ import { createVitestConfig } from "@lynx-js/react/testing-library/vitest-config";
166
172
 
167
173
  const defaultConfig = await createVitestConfig({
168
- runtimePkgName: '@lynx-js/react',
174
+ runtimePkgName: "@lynx-js/react",
169
175
  experimental_enableReactCompiler: true,
170
176
  });
171
177
 
@@ -195,7 +201,7 @@
195
201
  ```tsx
196
202
  function App() {
197
203
  function handleInnerTap(event: MainThread.TouchEvent) {
198
- 'main thread';
204
+ "main thread";
199
205
  event.stopPropagation();
200
206
  // Or stop immediate propagation with
201
207
  // event.stopImmediatePropagation();
@@ -293,10 +299,10 @@
293
299
  - 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
300
 
295
301
  ```ts
296
- import type { MainThread } from '@lynx-js/types';
302
+ import type { MainThread } from "@lynx-js/types";
297
303
 
298
304
  function startAnimation(ele: MainThread.Element) {
299
- 'main thread';
305
+ "main thread";
300
306
  const animation = ele.animate([{ opacity: 0 }, { opacity: 1 }], {
301
307
  duration: 3000,
302
308
  });
@@ -325,7 +331,7 @@
325
331
  - 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
332
 
327
333
  ```jsx
328
- <list-item recyclable={false} />;
334
+ <list-item recyclable={false} />
329
335
  ```
330
336
 
331
337
  - feat: Support using a host element as direct child of Suspense ([#1455](https://github.com/lynx-family/lynx-stack/pull/1455))
@@ -346,7 +352,7 @@
346
352
 
347
353
  ```ts
348
354
  function handleTap() {
349
- 'main thread';
355
+ "main thread";
350
356
  // The following check always returned false before this fix
351
357
  if (myHandleTap) {
352
358
  runOnBackground(myHandleTap)();
@@ -407,10 +413,10 @@
407
413
  Add the import to `@lynx-js/react/debug` at the first line of the entry:
408
414
 
409
415
  ```js
410
- import '@lynx-js/react/debug';
411
- import { root } from '@lynx-js/react';
416
+ import "@lynx-js/react/debug";
417
+ import { root } from "@lynx-js/react";
412
418
 
413
- import { App } from './App.jsx';
419
+ import { App } from "./App.jsx";
414
420
 
415
421
  root.render(<App />);
416
422
  ```
@@ -420,9 +426,9 @@
420
426
  For example, you can use it like this:
421
427
 
422
428
  ```jsx
423
- <list-item defer={{ unmountRecycled: true }} item-key='1'>
429
+ <list-item defer={{ unmountRecycled: true }} item-key="1">
424
430
  <WillBeUnmountIfRecycled />
425
- </list-item>;
431
+ </list-item>
426
432
  ```
427
433
 
428
434
  Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
@@ -430,7 +436,7 @@
430
436
  - 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
437
 
432
438
  ```jsx
433
- <image async-mode={undefined} />;
439
+ <image async-mode={undefined} />
434
440
  ```
435
441
 
436
442
  ## 0.111.1
@@ -476,7 +482,7 @@
476
482
  - Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
477
483
 
478
484
  ```js
479
- import { act } from '@lynx-js/react/testing-library';
485
+ import { act } from "@lynx-js/react/testing-library";
480
486
 
481
487
  act(() => {
482
488
  // ...
@@ -582,8 +588,7 @@
582
588
  * 3: Full Resolution - Batch render with async property and element tree resolution for list item subtree
583
589
  */
584
590
  experimental-batch-render-strategy={3}
585
- >
586
- </list>;
591
+ ></list>
587
592
  ```
588
593
 
589
594
  - rename @lynx-js/test-environment to @lynx-js/testing-environment ([#704](https://github.com/lynx-family/lynx-stack/pull/704))
@@ -701,7 +706,7 @@
701
706
  You can now use `useErrorBoundary` it in TypeScript like this:
702
707
 
703
708
  ```tsx
704
- import { useErrorBoundary } from '@lynx-js/react';
709
+ import { useErrorBoundary } from "@lynx-js/react";
705
710
  ```
706
711
 
707
712
  - Modified the format of data sent from background threads to the main thread. ([#207](https://github.com/lynx-family/lynx-stack/pull/207))
@@ -753,13 +758,13 @@
753
758
  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.
754
759
 
755
760
  ```js
756
- import { runOnBackground } from '@lynx-js/react';
761
+ import { runOnBackground } from "@lynx-js/react";
757
762
 
758
763
  const onTap = async () => {
759
- 'main thread';
764
+ "main thread";
760
765
  const text = await runOnBackground(() => {
761
- 'background only';
762
- return 'Hello, world!';
766
+ "background only";
767
+ return "Hello, world!";
763
768
  })();
764
769
  console.log(text);
765
770
  };
@@ -794,9 +799,9 @@
794
799
 
795
800
  ```ts
796
801
  // These imports will be removed from the final bundle
797
- import type { Foo } from 'xyz';
798
- import { type Bar } from 'xyz';
799
- import { xyz } from 'xyz'; // When xyz is not used
802
+ import type { Foo } from "xyz";
803
+ import { type Bar } from "xyz";
804
+ import { xyz } from "xyz"; // When xyz is not used
800
805
  ```
801
806
 
802
807
  See [TypeScript - verbatimModuleSyntax](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) for details.
@@ -836,7 +841,7 @@
836
841
  const f = undefined;
837
842
 
838
843
  function mts() {
839
- 'main thread';
844
+ "main thread";
840
845
  // throws in background rendering
841
846
  f && runOnBackground(f)();
842
847
  }
@@ -870,14 +875,14 @@
870
875
  - a30c83d: Add `compat.removeComponentAttrRegex`.
871
876
 
872
877
  ```js
873
- import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
874
- import { defineConfig } from '@lynx-js/rspeedy';
878
+ import { pluginReactLynx } from "@lynx-js/react-rsbuild-plugin";
879
+ import { defineConfig } from "@lynx-js/rspeedy";
875
880
 
876
881
  export default defineConfig({
877
882
  plugins: [
878
883
  pluginReactLynx({
879
884
  compat: {
880
- removeComponentAttrRegex: 'YOUR REGEX',
885
+ removeComponentAttrRegex: "YOUR REGEX",
881
886
  },
882
887
  }),
883
888
  ],
@@ -963,22 +968,22 @@
963
968
  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.
964
969
 
965
970
  ```tsx
966
- import { useGesture, PanGesture } from '@lynx-js/gesture-runtime';
971
+ import { useGesture, PanGesture } from "@lynx-js/gesture-runtime";
967
972
 
968
973
  function App() {
969
974
  const pan = useGesture(PanGesture);
970
975
 
971
976
  pan
972
977
  .onBegin((event, stateManager) => {
973
- 'main thread';
978
+ "main thread";
974
979
  // some logic
975
980
  })
976
981
  .onUpdate((event, stateManager) => {
977
- 'main thread';
982
+ "main thread";
978
983
  // some logic
979
984
  })
980
985
  .onEnd((event, stateManager) => {
981
- 'main thread';
986
+ "main thread";
982
987
  // some logic
983
988
  });
984
989
 
@@ -998,7 +1003,7 @@
998
1003
  return;
999
1004
  }
1000
1005
 
1001
- console.log('not __LEPUS__'); // This can be removed now
1006
+ console.log("not __LEPUS__"); // This can be removed now
1002
1007
  }
1003
1008
  ```
1004
1009
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-js/react-canary",
3
- "version": "0.116.1",
3
+ "version": "0.116.2-canary-20260127-80025087",
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.19 s
8
+ ready built in 0.25 s
9
9
 
10
10
  File (esm) Size 
11
11
  dist/index.js 10.1 kB