@lynx-js/react 0.111.0 → 0.111.2

package/CHANGELOG.md

@@ -1,5 +1,63 @@
 # @lynx-js/react
 
+## 0.111.2
+
+### Patch Changes
+
+- Optimize `componentAtIndex` by a few hundreds microseconds: avoiding manipulate `__pendingListUpdates` unless SnapshotInstance tree is changed ([#1201](https://github.com/lynx-family/lynx-stack/pull/1201))
+
+- Support alog of component rendering on production for better error reporting. Enable it by using `REACT_ALOG=true rspeedy dev/build` or defining `__ALOG__` to `true` in `lynx.config.js`: ([#1164](https://github.com/lynx-family/lynx-stack/pull/1164))
+
+  ```js
+  export default defineConfig({
+    // ...
+    source: {
+      define: {
+        __ALOG__: true,
+      },
+    },
+  });
+  ```
+
+- Make `preact/debug` work with `@lynx-js/react`. ([#1222](https://github.com/lynx-family/lynx-stack/pull/1222))
+
+- Introduce `@lynx-js/react/debug` which would include debugging warnings and error messages for common mistakes found. ([#1250](https://github.com/lynx-family/lynx-stack/pull/1250))
+
+  Add the import to `@lynx-js/react/debug` at the first line of the entry:
+
+  ```js
+  import '@lynx-js/react/debug';
+  import { root } from '@lynx-js/react';
+
+  import { App } from './App.jsx';
+
+  root.render(<App />);
+  ```
+
+- `<list-item/>` deferred now accepts an object with `unmountRecycled` property to control unmounting behavior when the item is recycled. ([#1302](https://github.com/lynx-family/lynx-stack/pull/1302))
+
+  For example, you can use it like this:
+
+  ```jsx
+  <list-item defer={{ unmountRecycled: true }} item-key='1'>
+    <WillBeUnmountIfRecycled />
+  </list-item>;
+  ```
+
+  Now the component will be unmounted when it is recycled, which can help with performance in certain scenarios.
+
+- 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))
+
+  ```jsx
+  <image async-mode={undefined} />;
+  ```
+
+## 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

package/components/lib/DeferredListItem.d.ts

@@ -1,6 +1,8 @@
 import type { FC, ReactNode } from 'react';
 export interface DeferredListItemProps {
-    defer?: boolean;
+    defer?: boolean | {
+        unmountRecycled?: boolean;
+    };
     renderListItem: (children: ReactNode | undefined) => JSX.Element;
     renderChildren: () => ReactNode;
 }

package/components/lib/DeferredListItem.jsx

@@ -16,8 +16,10 @@ export const DeferredListItem = ({ defer, renderListItem, renderChildren }) => {
             setIsReady(true);
         };
         ctx.__extraProps['onRecycleComponent'] = () => {
-            // TODO(hzy): figure out if we need to unmount the component when recycled
-            // setIsReady(false);
+            if (defer && typeof defer === 'object' && defer.unmountRecycled) {
+                // unmount the component when recycled
+                setIsReady(false);
+            }
         };
         return () => {
             delete ctx.__extraProps['onComponentAtIndex'];

package/components/lib/DeferredListItem.jsx.map

@@ -1 +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"}
+{"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,IAAI,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,eAAe,EAAE,CAAC;gBAChE,sCAAsC;gBACtC,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC;QACH,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/src/DeferredListItem.tsx

@@ -9,7 +9,7 @@ import type { SnapshotInstance } from '@lynx-js/react/internal';
 import { cloneElement as _cloneElementMainThread } from '@lynx-js/react/lepus';
 
 export interface DeferredListItemProps {
-  defer?: boolean;
+  defer?: boolean | { unmountRecycled?: boolean };
   renderListItem: (children: ReactNode | undefined) => JSX.Element;
   renderChildren: () => ReactNode;
 }
@@ -30,8 +30,10 @@ export const DeferredListItem: FC<DeferredListItemProps> = ({ defer, renderListI
       setIsReady(true);
     };
     ctx!.__extraProps['onRecycleComponent'] = () => {
-      // TODO(hzy): figure out if we need to unmount the component when recycled
-      // setIsReady(false);
+      if (defer && typeof defer === 'object' && defer.unmountRecycled) {
+        // unmount the component when recycled
+        setIsReady(false);
+      }
     };
 
     return () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/react",
-  "version": "0.111.0",
+  "version": "0.111.2",
   "description": "ReactLynx is a framework for developing Lynx applications with familiar React.",
   "repository": {
     "type": "git",
@@ -14,6 +14,11 @@
       "lazy": "./runtime/lazy/react.js",
       "default": "./runtime/lib/index.js"
     },
+    "./debug": {
+      "types": "./runtime/debug/index.d.ts",
+      "lazy": "./runtime/debug/index.js",
+      "default": "./runtime/debug/index.js"
+    },
     "./experimental/lazy/import": {
       "types": "./runtime/lazy/import.d.ts",
       "default": "./runtime/lazy/import.js"

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.11 s
+
+File (esm)      Size      
+dist/index.js   10.5 kB
 
-⚡ Done in 25ms