@lynx-js/react 0.110.1 → 0.111.1

package/CHANGELOG.md

@@ -1,5 +1,55 @@
 # @lynx-js/react
 
+## 0.111.1
+
+### Patch Changes
+
+- Wrap the main thread `renderPage` in preact `act` to ensure that the effects are flushed. ([#1170](https://github.com/lynx-family/lynx-stack/pull/1170))
+
+## 0.111.0
+
+### Minor Changes
+
+- Allow some `<list-item/>`s to be deferred and rendered in the background thread. ([#204](https://github.com/lynx-family/lynx-stack/pull/204))
+
+  Use the following syntax:
+
+  ```diff
+  <list>
+  -  <list-item item-key="...">
+  +  <list-item item-key="..." defer>
+        <SomeHeavyComponent />
+    </list-item>
+  </list>
+  ```
+
+  You should render your heavyweight components with the `defer` attribute to avoid blocking the main thread.
+
+### Patch Changes
+
+- Add missing alias of `@lynx-js/react` and `preact` in testing library, it will fix the `Failed to resolve import "@lynx-js/react/internal"` error in node_modules. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
+
+- Allow any types of `dataProcessors` in `lynx.registerDataProcessors`. ([#1200](https://github.com/lynx-family/lynx-stack/pull/1200))
+
+- Make `loadLazyBundle` being able to render the content on the first screen of the background thread. ([#1212](https://github.com/lynx-family/lynx-stack/pull/1212))
+
+- Fixed: An issue where the `lynxViewDidUpdate` callback did not trigger when data was updated from native. ([#1171](https://github.com/lynx-family/lynx-stack/pull/1171))
+
+  Notice:
+
+  - Even if no data changes are actually processed after calling `updateData()`, the `lynxViewDidUpdate` callback will still be triggered.
+  - Only one `lynxViewDidUpdate` callback will be triggered per render cycle. Consequently, if multiple `updateData()` calls are made within a single cycle but the data updates are batched, the number of `lynxViewDidUpdate` callbacks triggered may be less than the number of `updateData()` calls.
+
+- Supports `act` in testing library. ([#1182](https://github.com/lynx-family/lynx-stack/pull/1182))
+
+  ```js
+  import { act } from '@lynx-js/react/testing-library';
+
+  act(() => {
+    // ...
+  });
+  ```
+
 ## 0.110.1
 
 ### Patch Changes

package/components/lib/DeferredListItem.d.ts

@@ -0,0 +1,7 @@
+import type { FC, ReactNode } from 'react';
+export interface DeferredListItemProps {
+    defer?: boolean;
+    renderListItem: (children: ReactNode | undefined) => JSX.Element;
+    renderChildren: () => ReactNode;
+}
+export declare const DeferredListItem: FC<DeferredListItemProps>;

package/components/lib/DeferredListItem.jsx

@@ -0,0 +1,40 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+import { cloneElement as _cloneElement, useCallback, useRef, useState } from '@lynx-js/react';
+import { cloneElement as _cloneElementMainThread } from '@lynx-js/react/lepus';
+export const DeferredListItem = ({ defer, renderListItem, renderChildren }) => {
+    const __cloneElement = __MAIN_THREAD__ ? _cloneElementMainThread : _cloneElement;
+    const initialDeferRef = useRef(defer);
+    const prevDeferRef = useRef(defer);
+    const [isReady, setIsReady] = useState(!defer);
+    const onGetSnapshotInstance = useCallback((ctx) => {
+        'background only';
+        ctx.__extraProps ??= {};
+        // hack: preact ignore function property on dom
+        ctx.__extraProps['onComponentAtIndex'] = () => {
+            setIsReady(true);
+        };
+        ctx.__extraProps['onRecycleComponent'] = () => {
+            // TODO(hzy): figure out if we need to unmount the component when recycled
+            // setIsReady(false);
+        };
+        return () => {
+            delete ctx.__extraProps['onComponentAtIndex'];
+            delete ctx.__extraProps['onRecycleComponent'];
+        };
+    }, []);
+    if (__BACKGROUND__) {
+        if (prevDeferRef.current && !defer) {
+            setIsReady(true);
+        }
+        prevDeferRef.current = defer;
+    }
+    return initialDeferRef.current
+        ? __cloneElement(renderListItem(isReady ? renderChildren() : null), {
+            isReady: +isReady, // hack: preact specially handled boolean props
+            ref: onGetSnapshotInstance,
+        })
+        : renderListItem(renderChildren());
+};
+//# sourceMappingURL=DeferredListItem.jsx.map

package/components/lib/DeferredListItem.jsx.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeferredListItem.jsx","sourceRoot":"","sources":["../src/DeferredListItem.tsx"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAI1D,OAAO,EAAE,YAAY,IAAI,aAAa,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE9F,OAAO,EAAE,YAAY,IAAI,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAQ/E,MAAM,CAAC,MAAM,gBAAgB,GAA8B,CAAC,EAAE,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,EAAE,EAAE;IACvG,MAAM,cAAc,GAAG,eAAe,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,aAAa,CAAC;IAEjF,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACnC,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAC;IAC/C,MAAM,qBAAqB,GAAG,WAAW,CAAgC,CAAC,GAAG,EAAE,EAAE;QAC/E,iBAAiB,CAAC;QAElB,GAAI,CAAC,YAAY,KAAK,EAAE,CAAC;QAEzB,+CAA+C;QAC/C,GAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,GAAG,GAAG,EAAE;YAC7C,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,CAAC;QACF,GAAI,CAAC,YAAY,CAAC,oBAAoB,CAAC,GAAG,GAAG,EAAE;YAC7C,0EAA0E;YAC1E,qBAAqB;QACvB,CAAC,CAAC;QAEF,OAAO,GAAG,EAAE;YACV,OAAO,GAAI,CAAC,YAAa,CAAC,oBAAoB,CAAC,CAAC;YAChD,OAAO,GAAI,CAAC,YAAa,CAAC,oBAAoB,CAAC,CAAC;QAClD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,cAAc,EAAE,CAAC;QACnB,IAAI,YAAY,CAAC,OAAO,IAAI,CAAC,KAAK,EAAE,CAAC;YACnC,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC;QACD,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC;IAED,OAAO,eAAe,CAAC,OAAO;QAC5B,CAAC,CAAC,cAAc,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE;YAClE,OAAO,EAAE,CAAC,OAAO,EAAE,+CAA+C;YAClE,GAAG,EAAE,qBAAqB;SAC3B,CAAC;QACF,CAAC,CAAC,cAAc,CAAC,cAAc,EAAE,CAAC,CAAC;AACvC,CAAC,CAAC"}

package/components/lib/index.d.ts

@@ -1 +1,2 @@
 export { Page } from './Page.js';
+export { DeferredListItem } from './DeferredListItem.jsx';

package/components/lib/index.js

@@ -2,4 +2,5 @@
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 export { Page } from './Page.js';
+export { DeferredListItem } from './DeferredListItem.jsx';
 //# sourceMappingURL=index.js.map

package/components/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,wDAAwD;AACxD,yEAAyE;AACzE,0DAA0D;AAE1D,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC"}

package/components/src/DeferredListItem.tsx

@@ -0,0 +1,56 @@
+// Copyright 2025 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import type { FC, ReactNode, RefCallback } from 'react';
+
+import { cloneElement as _cloneElement, useCallback, useRef, useState } from '@lynx-js/react';
+import type { SnapshotInstance } from '@lynx-js/react/internal';
+import { cloneElement as _cloneElementMainThread } from '@lynx-js/react/lepus';
+
+export interface DeferredListItemProps {
+  defer?: boolean;
+  renderListItem: (children: ReactNode | undefined) => JSX.Element;
+  renderChildren: () => ReactNode;
+}
+
+export const DeferredListItem: FC<DeferredListItemProps> = ({ defer, renderListItem, renderChildren }) => {
+  const __cloneElement = __MAIN_THREAD__ ? _cloneElementMainThread : _cloneElement;
+
+  const initialDeferRef = useRef(defer);
+  const prevDeferRef = useRef(defer);
+  const [isReady, setIsReady] = useState(!defer);
+  const onGetSnapshotInstance = useCallback<RefCallback<SnapshotInstance>>((ctx) => {
+    'background only';
+
+    ctx!.__extraProps ??= {};
+
+    // hack: preact ignore function property on dom
+    ctx!.__extraProps['onComponentAtIndex'] = () => {
+      setIsReady(true);
+    };
+    ctx!.__extraProps['onRecycleComponent'] = () => {
+      // TODO(hzy): figure out if we need to unmount the component when recycled
+      // setIsReady(false);
+    };
+
+    return () => {
+      delete ctx!.__extraProps!['onComponentAtIndex'];
+      delete ctx!.__extraProps!['onRecycleComponent'];
+    };
+  }, []);
+
+  if (__BACKGROUND__) {
+    if (prevDeferRef.current && !defer) {
+      setIsReady(true);
+    }
+    prevDeferRef.current = defer;
+  }
+
+  return initialDeferRef.current
+    ? __cloneElement(renderListItem(isReady ? renderChildren() : null), {
+      isReady: +isReady, // hack: preact specially handled boolean props
+      ref: onGetSnapshotInstance,
+    })
+    : renderListItem(renderChildren());
+};

package/components/src/index.ts

@@ -3,3 +3,4 @@
 // LICENSE file in the root directory of this source tree.
 
 export { Page } from './Page.js';
+export { DeferredListItem } from './DeferredListItem.jsx';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react",
-  "version": "0.110.1",
+  "version": "0.111.1",
   "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
   "repository": {
     "type": "git",

package/refresh/.turbo/turbo-build.log

@@ -1,8 +1,12 @@
 
 > @lynx-js/react-refresh@0.1.0 build /home/runner/work/lynx-stack/lynx-stack/packages/react/refresh
-> esbuild --bundle src/index.ts --outfile=dist/index.js --external:@lynx-js/react --define:self=globalThis --format=esm --alias:preact=@lynx-js/react/internal --alias:preact/hooks=@lynx-js/react
+> rslib build
 
+  Rslib v0.10.5
 
-  dist/index.js  11.4kb
+info    build started...
+ready   built in 0.18 s
+
+File (esm)      Size      
+dist/index.js   10.5 kB
 
-⚡ Done in 22ms