feat: dynamic API (#6831)

* chore: save * feat: basic dynamic * feat: export from ice/runtime * test: with-dynamic * test(with-dynamic): name export * feat: use useMounted * chore: cmt * chore: up lock file * chore: use universal-env * fix: ci * Revert "chore: use universal-env" This reverts commit 98f5dff. * chore: optimize logic
alibaba · Mar 20, 2024 · 25c7584 · 25c7584
1 parent 8275f13
commit 25c7584
Show file tree

Hide file tree

Showing 22 changed files with 361 additions and 1 deletion.
diff --git a/examples/with-dynamic/.browserslistrc b/examples/with-dynamic/.browserslistrc
@@ -0,0 +1 @@
+chrome 55
diff --git a/examples/with-dynamic/ice.config.mts b/examples/with-dynamic/ice.config.mts
@@ -0,0 +1,5 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig(() => ({
+  ssr: true,
+}));
diff --git a/examples/with-dynamic/package.json b/examples/with-dynamic/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/with-dynamic",
+  "private": true,
+  "version": "1.0.0",
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "ICE example with dynamic",
+  "author": "ICE Team",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.17",
+    "@types/react-dom": "^18.0.6"
+  }
+}
diff --git a/examples/with-dynamic/src/app.tsx b/examples/with-dynamic/src/app.tsx
@@ -0,0 +1,6 @@
+export default {
+  app: {
+    rootId: 'app',
+    type: 'browser',
+  },
+};
diff --git a/examples/with-dynamic/src/components/nonssr.tsx b/examples/with-dynamic/src/components/nonssr.tsx
@@ -0,0 +1,6 @@
+export default (props) => {
+  window.addEventListener('load', () => {
+    console.log('load');
+  });
+  return <div>{props.text}</div>;
+};
diff --git a/examples/with-dynamic/src/components/normal.tsx b/examples/with-dynamic/src/components/normal.tsx
@@ -0,0 +1,7 @@
+export default () => {
+  return <div>normal text</div>;
+};
+
+export function NameExportComp() {
+  return <div>name exported</div>;
+}
diff --git a/examples/with-dynamic/src/document.tsx b/examples/with-dynamic/src/document.tsx
@@ -0,0 +1,22 @@
+import { Meta, Title, Links, Main, Scripts } from 'ice';
+
+function Document() {
+  return (
+    <html>
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="description" content="ICE 3 Example for plugin request." />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Title />
+        <Links />
+      </head>
+      <body>
+        <Main />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default Document;
diff --git a/examples/with-dynamic/src/pages/nonssr/no-ssr-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/no-ssr-fallback.tsx
@@ -0,0 +1,10 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'), {
+  ssr: false,
+  fallback: () => <div>fallback</div>,
+});
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/no-ssr-no-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/no-ssr-no-fallback.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'), {
+  ssr: false,
+});
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/ssr-no-fallback.tsx b/examples/with-dynamic/src/pages/nonssr/ssr-no-fallback.tsx
@@ -0,0 +1,7 @@
+import { dynamic } from '@ice/runtime';
+
+const NonSSR = dynamic(() => import('@/components/nonssr'));
+
+export default () => {
+  return <NonSSR text={'hello world'} />;
+};
diff --git a/examples/with-dynamic/src/pages/nonssr/without-dynamic.tsx b/examples/with-dynamic/src/pages/nonssr/without-dynamic.tsx
@@ -0,0 +1,5 @@
+import NonSsr from '@/components/nonssr';
+
+export default () => {
+  return <NonSsr text={'without dynamic'} />;
+};
diff --git a/examples/with-dynamic/src/pages/normal/bare-import.tsx b/examples/with-dynamic/src/pages/normal/bare-import.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const Normal = dynamic(import('../../components/normal'), {
+  fallback: () => <div>bare import fallback</div>,
+});
+
+export default () => {
+  return <Normal />;
+};
diff --git a/examples/with-dynamic/src/pages/normal/basic.tsx b/examples/with-dynamic/src/pages/normal/basic.tsx
@@ -0,0 +1,9 @@
+import { dynamic } from '@ice/runtime';
+
+const Normal = dynamic(() => import('../../components/normal'), {
+  fallback: () => <div>normal fallback</div>,
+});
+
+export default () => {
+  return <Normal />;
+};
diff --git a/examples/with-dynamic/src/pages/normal/name-export.tsx b/examples/with-dynamic/src/pages/normal/name-export.tsx
@@ -0,0 +1,13 @@
+import { dynamic } from '@ice/runtime';
+
+const Normal = dynamic(
+  import('../../components/normal').then((mod) => {
+    return {
+      default: mod.NameExportComp,
+    };
+  }),
+);
+
+export default () => {
+  return <Normal />;
+};
diff --git a/examples/with-dynamic/src/typings.d.ts b/examples/with-dynamic/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/with-dynamic/tsconfig.json b/examples/with-dynamic/tsconfig.json
@@ -0,0 +1,44 @@
+{
+  "compileOnSave": false,
+  "buildOnSave": false,
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "build",
+    "module": "esnext",
+    "target": "es6",
+    "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,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ],
+      "ice": [
+        ".ice"
+      ]
+    }
+  },
+  "include": [
+    "src",
+    ".ice", "src/pages/with-dynamic/.tsx",
+  ],
+  "exclude": [
+    "build",
+    "public"
+  ]
+}
diff --git a/packages/ice/src/constant.ts b/packages/ice/src/constant.ts
@@ -69,6 +69,7 @@ export const RUNTIME_EXPORTS = [
       'Await',
       'usePageLifecycle',
       'unstable_useDocumentData',
+      'dynamic',
     ],
     alias: {
       usePublicAppContext: 'useAppContext',

diff --git a/packages/runtime/src/dynamic.tsx b/packages/runtime/src/dynamic.tsx
@@ -0,0 +1,55 @@
+import type { ReactNode } from 'react';
+import React, { Suspense, lazy } from 'react';
+import useMounted from './useMounted.js';
+
+const isServer = import.meta.renderer === 'server';
+
+type ComponentModule<P = {}> = { default: React.ComponentType<P> };
+
+export type LoaderComponent<P = {}> = Promise<React.ComponentType<P> | ComponentModule<P>>;
+
+export type Loader<P = {}> = (() => LoaderComponent<P>) | LoaderComponent<P>;
+
+export interface DynamicOptions {
+  /** @default true */
+  ssr?: boolean;
+  /** the fallback UI to render before the actual is loaded */
+  fallback?: () => ReactNode;
+}
+
+// Normalize loader to return the module as form { default: Component } for `React.lazy`.
+function convertModule<P>(mod: React.ComponentType<P> | ComponentModule<P>) {
+  return { default: (mod as ComponentModule<P>)?.default || mod };
+}
+
+const DefaultFallback = () => null;
+
+export function dynamic<P = {}>(loader: Loader<P>, option?: DynamicOptions) {
+  const { ssr = true, fallback = DefaultFallback } = option || {};
+  let realLoader;
+  // convert dynamic(import('xxx')) to dynamic(() => import('xxx'))
+  if (loader instanceof Promise) {
+    realLoader = () => loader;
+  } else if (typeof loader === 'function') {
+    realLoader = loader;
+  }
+  if (!realLoader) return DefaultFallback;
+  const Fallback = fallback;
+
+  if (!ssr && isServer) {
+    return () => <Fallback />;
+  }
+
+  const LazyComp = lazy(() => realLoader().then(convertModule));
+  return (props) => {
+    const hasMounted = useMounted();
+
+    return ssr || hasMounted ? (
+      <Suspense fallback={<Fallback />}>
+        <LazyComp {...props} />
+      </Suspense>
+    ) : (
+      <Fallback />
+    );
+  };
+}
diff --git a/packages/runtime/src/index.ts b/packages/runtime/src/index.ts
@@ -50,7 +50,7 @@ import useMounted from './useMounted.js';
 import usePageLifecycle from './usePageLifecycle.js';
 import { withSuspense, useSuspenseData } from './Suspense.js';
 import { createRouteLoader, WrapRouteComponent, RouteErrorComponent, Await } from './routes.js';
-
+import { dynamic } from './dynamic.js';
 function useAppContext() {
   console.warn('import { useAppContext } from \'@ice/runtime\'; is deprecated, please use import { useAppContext } from \'ice\'; instead.');
   return useInternalAppContext();
@@ -117,6 +117,7 @@ export {
   callDataLoader,
   getRequestContext,
   history,
+  dynamic,
 
   useActive,
   KeepAliveOutlet,

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml