Merge pull request #5684 from alibaba/release/3.0

Release/3.0.3
alibaba · Dec 15, 2022 · b70b95e · b70b95e
2 parents 0e8b583 + 05aeb94
commit b70b95e
Show file tree

Hide file tree

Showing 80 changed files with 1,260 additions and 150 deletions.
diff --git a/examples/icestark-child/ice.config.mts b/examples/icestark-child/ice.config.mts
@@ -0,0 +1,10 @@
+import { defineConfig } from '@ice/app';
+import icestark from '@ice/plugin-icestark';
+
+export default defineConfig(() => ({
+  plugins: [
+    icestark({
+      type: 'child',
+    }),
+  ]
+}));
diff --git a/examples/icestark-child/package.json b/examples/icestark-child/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "icestarkchild",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/plugin-icestark": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.2"
+  }
+}
diff --git a/examples/icestark-child/public/favicon.ico b/examples/icestark-child/public/favicon.ico
diff --git a/examples/icestark-child/src/app.tsx b/examples/icestark-child/src/app.tsx
@@ -0,0 +1,19 @@
+import { defineAppConfig } from 'ice';
+import { defineChildConfig } from '@ice/plugin-icestark/esm/types';
+
+export const icestark = defineChildConfig(() => {
+  return {
+    mount: () => {
+      console.log('mount');
+    },
+    unmount: () => {
+      console.log('unmount');
+    },
+  };
+});
+
+export default defineAppConfig(() => ({
+  app: {
+    rootId: 'app',
+  },
+}));
diff --git a/examples/icestark-child/src/document.tsx b/examples/icestark-child/src/document.tsx
@@ -0,0 +1,30 @@
+import { Meta, Title, Links, Main, Scripts, useAppData } from 'ice';
+import type { AppData } from '@/types';
+
+function Document() {
+  const appData = useAppData<AppData>();
+
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `console.log('${appData?.title}')`,
+          }}
+        />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/icestark-child/src/pages/about.tsx b/examples/icestark-child/src/pages/about.tsx
@@ -0,0 +1,10 @@
+import { Link } from 'ice';
+
+export default function About() {
+  return (
+    <>
+      <h2>About Page</h2>
+      <Link to="/">home</Link>
+    </>
+  );
+}
diff --git a/examples/icestark-child/src/pages/index.tsx b/examples/icestark-child/src/pages/index.tsx
@@ -0,0 +1,10 @@
+import { Link } from 'ice';
+
+export default function Home() {
+  return (
+    <>
+      <h2>Home Page</h2>
+      <Link to="/about">about</Link>
+    </>
+  );
+}
diff --git a/examples/icestark-child/src/typings.d.ts b/examples/icestark-child/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/icestark-child/tsconfig.json b/examples/icestark-child/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/examples/icestark-layout/ice.config.mts b/examples/icestark-layout/ice.config.mts
@@ -0,0 +1,12 @@
+import { defineConfig } from '@ice/app';
+import icestark from '@ice/plugin-icestark';
+
+export default defineConfig(() => ({
+  ssr: false,
+  ssg: false,
+  plugins: [
+    icestark({
+      type: 'framework',
+    }),
+  ]
+}));
diff --git a/examples/icestark-layout/package.json b/examples/icestark-layout/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "icestark-framework",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/stark-app": "^1.5.0",
+    "@ice/plugin-icestark": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.2"
+  }
+}
diff --git a/examples/icestark-layout/public/favicon.ico b/examples/icestark-layout/public/favicon.ico
diff --git a/examples/icestark-layout/src/app.tsx b/examples/icestark-layout/src/app.tsx
@@ -0,0 +1,24 @@
+import { defineAppConfig } from 'ice';
+import { defineFrameworkConfig } from '@ice/plugin-icestark/esm/types';
+import FrameworkLayout from '@/components/FrameworkLayout';
+
+export const icestark = defineFrameworkConfig(() => ({
+  layout: FrameworkLayout,
+  getApps: () => ([{
+    path: '/seller',
+    title: '商家平台',
+    loadScriptMode: 'import',
+    entry: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-seller-ice-vite/index.html',
+  }, {
+    path: '/waiter',
+    title: '小二平台',
+    loadScriptMode: 'import',
+    entry: 'https://iceworks.oss-cn-hangzhou.aliyuncs.com/icestark/child-vue3-vite/index.html',
+  }]),
+}));
+
+export default defineAppConfig(() => ({
+  app: {
+    rootId: 'app',
+  },
+}));
diff --git a/examples/icestark-layout/src/components/FrameworkLayout.tsx b/examples/icestark-layout/src/components/FrameworkLayout.tsx
@@ -0,0 +1,16 @@
+import { AppLink } from '@ice/stark-app';
+
+export default function FrameworkLayout({ children }) {
+  return (
+    <>
+      <ul>
+        <li><AppLink to="/seller">seller 应用</AppLink></li>
+        <li><AppLink to="/waiter">waiter 应用</AppLink></li>
+        <li><AppLink to="/">主应用</AppLink></li>
+      </ul>
+      <div>
+        {children}
+      </div>
+    </>
+  );
+}
diff --git a/examples/icestark-layout/src/document.tsx b/examples/icestark-layout/src/document.tsx
@@ -0,0 +1,30 @@
+import { Meta, Title, Links, Main, Scripts, useAppData } from 'ice';
+import type { AppData } from '@/types';
+
+function Document() {
+  const appData = useAppData<AppData>();
+
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE Demo" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `console.log('${appData?.title}')`,
+          }}
+        />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/icestark-layout/src/global.css b/examples/icestark-layout/src/global.css
@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}
diff --git a/examples/icestark-layout/src/pages/about.tsx b/examples/icestark-layout/src/pages/about.tsx
@@ -0,0 +1,10 @@
+import { Link } from 'ice';
+
+export default function About() {
+  return (
+    <>
+      <h2>About Page</h2>
+      <Link to="/">home</Link>
+    </>
+  );
+}
diff --git a/examples/icestark-layout/src/pages/index.tsx b/examples/icestark-layout/src/pages/index.tsx
@@ -0,0 +1,10 @@
+import { Link } from 'ice';
+
+export default function Home() {
+  return (
+    <>
+      <h2>Home Page</h2>
+      <Link to="/about">about</Link>
+    </>
+  );
+}
diff --git a/examples/icestark-layout/src/typings.d.ts b/examples/icestark-layout/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/icestark-layout/tsconfig.json b/examples/icestark-layout/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "ESNext",
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "lib": ["es6", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "rootDir": "./",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": false,
+    "importHelpers": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/packages/appear/CHANGELOG.md b/packages/appear/CHANGELOG.md
@@ -1,5 +1,9 @@
 # @ice/appear
 
+## v0.1.4
+
+- [fix] the ref can't be find in child of VisibilityChange component
+
 ## v0.1.0
 
 - [feat] support VisibilityChange.
diff --git a/packages/appear/package.json b/packages/appear/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ice/appear",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "",
   "main": "./esm/index.js",
   "types": "./esm/index.d.ts",

diff --git a/packages/appear/src/index.tsx b/packages/appear/src/index.tsx
@@ -1,4 +1,5 @@
 import { Children, useRef, useEffect, useCallback } from 'react';
+import type { Ref } from 'react';
 import { isFunction } from './type';
 import { observerElement, VisibilityChangeEvent } from './visibility';
 
@@ -9,7 +10,8 @@ function VisibilityChange(props: any) {
     children,
   } = props;
 
-  const ref = useRef(null);
+  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;
@@ -18,7 +20,7 @@ function VisibilityChange(props: any) {
     // 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 HTMLElement);
+      observerElement(eventTarget as Element);
       eventTarget.addEventListener(eventName, handler);
     }
     return () => {

diff --git a/packages/appear/tests/visibilityChange.test.tsx b/packages/appear/tests/visibilityChange.test.tsx
@@ -13,7 +13,28 @@ describe('visibilytyChange', () => {
       function App() {
         return (<VisibilityChange
           onAppear={() => {
-            resolve();
+            resolve(true);
+          }}
+        >
+          <span>content</span>
+        </VisibilityChange>);
+      }
+
+      render(<App />);
+    });
+  });
+
+  it('child shold work with ref', () => {
+    return new Promise(resolve => {
+      function App() {
+        const ref = React.useRef(null);
+        React.useEffect(() => {
+          if (ref) {
+            resolve(true);
+          }
+        }, [ref]);
+        return (<VisibilityChange
+          onAppear={() => {
           }}
         >
           <span>content</span>