Merge pull request #6416 from alibaba/release/next

Release 3.2.9

examples/basic-project/src/app.tsx

@@ -42,3 +42,7 @@ export const dataLoader = defineDataLoader(() => {
     });
   });
 });
+
+export const runApp = (render) => {
+  render();
+};

packages/appear/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @ice/appear
 
+## 0.2.0
+
+### Minor Changes
+
+- 8af84529: chore: weex support for ice appear
+
+### Patch Changes
+
+- f0d79065: fix(appear): fixup listener attach for ref callback
+
 ## v0.1.5
 
 - [chore] bump version for pegasus component
@@ -10,4 +20,4 @@
 
 ## v0.1.0
 
-- [feat] support VisibilityChange.
+- [feat] support VisibilityChange.

packages/appear/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/appear",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "",
   "main": "./esm/index.js",
   "types": "./esm/index.d.ts",

packages/appear/src/index.tsx

@@ -1,41 +1,14 @@
-import { Children, useRef, useEffect, useCallback } from 'react';
-import type { Ref } from 'react';
-import { isFunction } from './type';
-import { observerElement, VisibilityChangeEvent } from './visibility';
+import type * as React from 'react';
+import WebAppear from './web';
+import WeexAppear from './weex';
+import type { AppearProps } from './typings.js';
 
-function VisibilityChange(props: any) {
-  const {
-    onAppear,
-    onDisappear,
-    children,
-  } = props;
+let Appear: React.ForwardRefExoticComponent<AppearProps & React.RefAttributes<any>>;
 
-  const defaultRef: Ref<Node> = useRef<Node>();
-  const ref: Ref<Node> = (children && children.ref) ? children.ref : defaultRef;
-
-  const listen = useCallback((eventName: string, handler: Function) => {
-    const { current } = ref;
-    // Rax components will set custom ref by useImperativeHandle.
-    // So We should get eventTarget by _nativeNode.
-    // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
-    if (current && isFunction(handler)) {
-      const eventTarget = current._nativeNode || current;
-      observerElement(eventTarget as Element);
-      eventTarget.addEventListener(eventName, handler);
-    }
-    return () => {
-      const { current } = ref;
-      if (current) {
-        const eventTarget = current._nativeNode || current;
-        eventTarget.removeEventListener(eventName, handler);
-      }
-    };
-  }, [ref]);
-
-  useEffect(() => listen(VisibilityChangeEvent.appear, onAppear), [ref, onAppear, listen]);
-  useEffect(() => listen(VisibilityChangeEvent.disappear, onDisappear), [ref, onDisappear, listen]);
-
-  return Children.only({ ...children, ref });
+if (import.meta.target === 'weex') {
+  Appear = WeexAppear;
+} else {
+  Appear = WebAppear as any;
 }
 
-export default VisibilityChange;
+export default Appear;

packages/appear/src/runtime.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@ice/pkg/types" />
+
+interface ImportMeta {
+  // The build target
+  target: 'weex' | 'web';
+}
+
+
+interface Node {
+  _nativeNode: Node;
+}

packages/appear/src/typings.ts

@@ -0,0 +1,17 @@
+import type * as React from 'react';
+
+export interface AppearProps {
+  children: React.ReactElement;
+  /**
+   * Triggered when the element enters the visible area.
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  onAppear?: (e: CustomEvent) => void;
+  /**
+   * Triggered when the element leaves the visible area.
+   * @param {CustomEvent} e
+   * @returns {void}
+   */
+  onDisappear?: (e: CustomEvent) => void;
+}

packages/appear/src/web/index.tsx

@@ -0,0 +1,53 @@
+import { Children, useRef, useEffect, useCallback } from 'react';
+import type { Ref, RefObject } from 'react';
+import { isFunction } from './type';
+import { observerElement, VisibilityChangeEvent } from './visibility';
+
+interface Node {
+  _nativeNode?: Node;
+}
+
+export default function VisibilityChange(props: any) {
+  const { onAppear, onDisappear, children } = props;
+
+  const defaultRef: Ref<Node> = useRef<Node>();
+
+  const ref: RefObject<Node> = children.ref
+    ? typeof children.ref === 'object'
+      ? children.ref
+      : defaultRef
+    : defaultRef;
+
+  useEffect(() => {
+    if (typeof children.ref === 'function') {
+      children.ref(ref.current);
+    }
+  }, [ref, children]);
+
+  const listen = useCallback(
+    (eventName: string, handler: EventListenerOrEventListenerObject) => {
+      const { current } = ref;
+      // Rax components will set custom ref by useImperativeHandle.
+      // So We should get eventTarget by _nativeNode.
+      // https://github.com/raxjs/rax-components/blob/master/packages/rax-textinput/src/index.tsx#L151
+      if (current && isFunction(handler)) {
+        const eventTarget = current._nativeNode || current;
+        observerElement(eventTarget as Element);
+        eventTarget.addEventListener(eventName, handler);
+      }
+      return () => {
+        const { current } = ref;
+        if (current) {
+          const eventTarget = current._nativeNode || current;
+          eventTarget.removeEventListener(eventName, handler);
+        }
+      };
+    },
+    [ref],
+  );
+
+  useEffect(() => listen(VisibilityChangeEvent.appear, onAppear), [ref, onAppear, listen]);
+  useEffect(() => listen(VisibilityChangeEvent.disappear, onDisappear), [ref, onDisappear, listen]);
+
+  return Children.only({ ...children, ref });
+}

packages/appear/src/type.ts → packages/appear/src/web/type.ts

@@ -1,3 +1,3 @@
 export function isFunction(obj: any): obj is Function {
   return typeof obj === 'function';
-}
+}

packages/appear/src/weex/index.tsx

@@ -0,0 +1,36 @@
+import type { ForwardedRef } from 'react';
+import { useEffect, useRef, forwardRef, cloneElement, Children } from 'react';
+import type { AppearProps } from '../typings';
+
+const WeexAppear = forwardRef<any, AppearProps>((props, ref) => {
+  const internalRef = useRef<HTMLDivElement>(null);
+  const childrenRef: ForwardedRef<HTMLDivElement> = ref ?? internalRef;
+
+  const { children, onAppear, onDisappear } = props;
+
+  useEffect(() => {
+    // Use copy of childrenRef to avoid ref value changed in cleanup phase.
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    // Return early if onAppear callback not specified.
+    onAppear && nodeRef?.addEventListener('appear', (e: CustomEvent) => onAppear(e));
+
+    return () => {
+      onAppear && nodeRef?.removeEventListener('appear', (e: CustomEvent) => onAppear(e));
+    };
+  }, [childrenRef, onAppear]);
+
+  useEffect(() => {
+    const nodeRef = typeof childrenRef === 'object' ? childrenRef.current : null;
+
+    onDisappear && nodeRef?.addEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+
+    return () => {
+      onDisappear && nodeRef?.removeEventListener('disappear', (e: CustomEvent) => onDisappear(e));
+    };
+  }, [childrenRef, onDisappear]);
+
+  return cloneElement(Children.only(children), { ref: childrenRef });
+});
+
+export default WeexAppear;

packages/ice/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 3.2.9
+
+### Patch Changes
+
+- a96af97b: fix: render twice when navigate and bump react-router to 6.14.2
+- 67eae5c1: feat: support app config of runApp
+- Updated dependencies [a96af97b]
+- Updated dependencies [d33f3e65]
+- Updated dependencies [11dd752b]
+- Updated dependencies [67eae5c1]
+  - @ice/runtime@1.2.7
+
 ## 3.2.8
 
 ### Patch Changes

packages/ice/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/app",
-  "version": "3.2.8",
+  "version": "3.2.9",
   "description": "provide scripts and configuration used by web framework ice",
   "type": "module",
   "main": "./esm/index.js",
@@ -38,7 +38,7 @@
   "dependencies": {
     "@ice/bundles": "0.1.12",
     "@ice/route-manifest": "1.2.0",
-    "@ice/runtime": "^1.2.6",
+    "@ice/runtime": "^1.2.7",
     "@ice/webpack-config": "1.0.19",
     "@swc/helpers": "0.5.1",
     "@types/express": "^4.17.14",
@@ -80,7 +80,7 @@
     "esbuild": "^0.17.16",
     "jest": "^29.0.2",
     "react": "^18.2.0",
-    "react-router": "6.11.2",
+    "react-router": "6.14.2",
     "sass": "^1.50.0",
     "unplugin": "^0.9.0",
     "webpack": "^5.86.0",

packages/ice/templates/core/entry.client.tsx.ejs

@@ -9,6 +9,8 @@ import createRoutes from './routes';
 <% } -%>
 <%- runtimeOptions.imports %>
 <% if(dataLoaderImport.imports) {-%><%-dataLoaderImport.imports%><% } -%>
+import type { RunClientAppOptions } from '@ice/runtime';
+
 const getRouterBasename = () => {
   const appConfig = getAppConfig(app);
   return appConfig?.router?.basename ?? <%- basename %> ?? '';
@@ -27,31 +29,47 @@ let dataLoaderDecorator = (dataLoader) => {
 }
 <% } -%>
 
-const render = (customOptions: Record<string, any> = {}) => {
-  const appProps = {
-    app,
-    runtimeModules: {
-      commons,
-      statics,
-    },
-    <% if (enableRoutes) { %>createRoutes,<% } %>
-    basename: getRouterBasename(),
-    hydrate: <%- hydrate %>,
-    memoryRouter: <%- memoryRouter || false %>,
-    dataLoaderFetcher,
-    dataLoaderDecorator,
+const renderOptions: RunClientAppOptions = {
+  app,
+  runtimeModules: {
+    commons,
+    statics,
+  },
+  <% if (enableRoutes) { %>createRoutes,<% } %>
+  basename: getRouterBasename(),
+  hydrate: <%- hydrate %>,
+  memoryRouter: <%- memoryRouter || false %>,
+  dataLoaderFetcher,
+  dataLoaderDecorator,
+  runtimeOptions: {
+<% if (runtimeOptions.exports) { -%>
+  <%- runtimeOptions.exports %>
+<% } -%>
+<% if (locals.customRuntimeOptions) { -%>...<%- JSON.stringify(customRuntimeOptions) %>,<% } -%>
+  },
+};
+
+const defaultRender = (customOptions: Partial<RunClientAppOptions> = {}) => {
+  return runClientApp({
+    ...renderOptions,
     ...customOptions,
     runtimeOptions: {
-  <% if (runtimeOptions.exports) { -%>
-    <%- runtimeOptions.exports %>
-  <% } -%>
-  <% if (locals.customRuntimeOptions) { -%>
-  ...<%- JSON.stringify(customRuntimeOptions) %>,
-  <% } -%>
+      ...(renderOptions.runtimeOptions || {}),
       ...customOptions.runtimeOptions,
     },
-  };
-  return runClientApp(appProps);
+  });
+};
+
+const renderApp = (appExport: any, customOptions: Partial<RunClientAppOptions>) => {
+  if (appExport.runApp) {
+    return appExport.runApp(defaultRender, renderOptions);
+  } else {
+    return defaultRender(customOptions);
+  }
+};
+
+const render = (customOptions: Partial<RunClientAppOptions> = {}) => {
+  renderApp(app, customOptions);
 };
 
 <%- entryCode %>

packages/ice/templates/core/routes.tsx.ejs

@@ -1,8 +1,10 @@
 import { createRouteLoader, WrapRouteComponent, RouteErrorComponent } from '@ice/runtime';
+import type { CreateRoutes } from '@ice/runtime';
 <%- routeImports.length ? routeImports.join('\n') + '\n\n' : ''; -%>
-export default ({
+const createRoutes: CreateRoutes = ({
   requestContext,
   renderMode,
 }) => ([
   <%- routeDefinition %>
 ]);
+export default createRoutes;

packages/plugin-i18n/package.json

@@ -55,8 +55,8 @@
     "webpack-dev-server": "^4.13.2"
   },
   "peerDependencies": {
-    "@ice/app": "^3.2.8",
-    "@ice/runtime": "^1.2.6"
+    "@ice/app": "^3.2.9",
+    "@ice/runtime": "^1.2.7"
   },
   "publishConfig": {
     "access": "public"

packages/plugin-pha/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 3.0.3
+
+### Patch Changes
+
+- e40a7cb2: fix: add `bounces` attr
+
 ## 3.0.2
 
 ### Patch Changes

packages/plugin-pha/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ice/plugin-pha",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "description": "ice.js plugin for PHA.",
   "license": "MIT",
   "type": "module",
@@ -25,7 +25,7 @@
     "htmlparser2": "^8.0.1"
   },
   "devDependencies": {
-    "@ice/app": "^3.2.8",
+    "@ice/app": "^3.2.9",
     "build-scripts": "^2.1.1-0",
     "esbuild": "^0.17.16",
     "webpack": "^5.86.0",