feat: refactor ice runtime

alibaba · Jan 16, 2025 · 2c6900e · 2c6900e
1 parent cd2b97e
commit 2c6900e
Show file tree

Hide file tree

Showing 15 changed files with 1,430 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -74,5 +74,8 @@
       "@rspack/[email protected]": "patches/@[email protected]",
       "[email protected]": "patches/[email protected]"
     }
-  }
+  },
+  "workspaces": [
+    "packages/runtime-kit"
+  ]
 }
diff --git a/packages/ice/src/createService.ts b/packages/ice/src/createService.ts
@@ -246,7 +246,7 @@ async function createService({ rootDir, command, commandArgs }: CreateServiceOpt
   // Get first task config as default platform config.
   const platformTaskConfig = taskConfigs[0];
 
-  const iceRuntimePath = '@ice/runtime';
+  const iceRuntimePath = platformTaskConfig.config.runtimeSource || '@ice/runtime';
   // Only when code splitting use the default strategy or set to `router`, the router will be lazy loaded.
   const lazy = [true, 'chunks', 'page', 'page-vendors'].includes(userConfig.codeSplitting);
   const { routeImports, routeDefinition } = getRoutesDefinition({

diff --git a/packages/ice/src/plugins/task.ts b/packages/ice/src/plugins/task.ts
@@ -33,6 +33,7 @@ const getDefaultTaskConfig = ({ rootDir, command }): Config => {
     logging: process.env.WEBPACK_LOGGING || defaultLogging,
     minify: command === 'build',
     useDevServer: true,
+    runtimeSource: '@ice/runtime',
   };
 };
 

diff --git a/packages/ice/templates/core/entry.client.tsx.ejs b/packages/ice/templates/core/entry.client.tsx.ejs
@@ -1,6 +1,5 @@
 <% if (importCoreJs) { -%>import 'core-js';<% } %>
 <%- entry.imports %>
-import { createElement, Fragment } from 'react';
 import { runClientApp, getAppConfig } from '<%- iceRuntimePath %>';
 import { commons, statics } from './runtime-modules';
 import * as app from '@/app';
@@ -15,19 +14,6 @@ const getRouterBasename = () => {
   const appConfig = getAppConfig(app);
   return appConfig?.router?.basename ?? <%- basename %> ?? '';
 }
-// Add react fragment for split chunks of app.
-// Otherwise chunk of route component will pack @ice/jsx-runtime and depend on framework bundle.
-const App = <></>;
-
-<% if (!dataLoaderImport.imports && hasDataLoader) {-%>
-let dataLoaderFetcher = (options) => {
-  return window.fetch(options.url, options);
-}
-
-let dataLoaderDecorator = (dataLoader) => {
-  return dataLoader;
-}
-<% } -%>
 
 const renderOptions: RunClientAppOptions = {
   app,
@@ -39,7 +25,7 @@ const renderOptions: RunClientAppOptions = {
   basename: getRouterBasename(),
   hydrate: <%- hydrate %>,
   memoryRouter: <%- memoryRouter || false %>,
-<% if (hasDataLoader) { -%>
+<% if (dataLoaderImport.imports && hasDataLoader) { -%>
   dataLoaderFetcher,
   dataLoaderDecorator,<% } -%>
   runtimeOptions: {
@@ -50,27 +36,23 @@ const renderOptions: RunClientAppOptions = {
   },
 };
 
-const defaultRender = (customOptions: Partial<RunClientAppOptions> = {}) => {
-  return runClientApp({
-    ...renderOptions,
-    ...customOptions,
-    runtimeOptions: {
-      ...(renderOptions.runtimeOptions || {}),
-      ...customOptions.runtimeOptions,
-    },
-  });
-};
-
-const renderApp = (appExport: any, customOptions: Partial<RunClientAppOptions>) => {
-  if (appExport.runApp) {
-    return appExport.runApp(defaultRender, renderOptions);
-  } else {
-    return defaultRender(customOptions);
-  }
-};
+const mergeOptions = (customOptions: Partial<RunClientAppOptions> = {}): RunClientAppOptions => ({
+  ...renderOptions,
+  ...customOptions,
+  runtimeOptions: {
+    ...renderOptions.runtimeOptions,
+    ...customOptions.runtimeOptions,
+  },
+});
 
-const render = (customOptions: Partial<RunClientAppOptions> = {}) => {
-  return renderApp(app, customOptions);
+const render = () => {
+  return app.runApp?.(
+    (customOptions: Partial<RunClientAppOptions> = {}) => {
+      const options = mergeOptions(customOptions);
+      return runClientApp(options);
+    },
+    renderOptions
+  ) ?? runClientApp(renderOptions);
 };
 
 <%- entryCode %>

diff --git a/packages/runtime-kit/package.json b/packages/runtime-kit/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@ice/runtime-kit",
+  "version": "0.1.0",
+  "description": "Runtime utilities and tools for ICE framework",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "watch": "tsup --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.0.8",
+    "@types/react-dom": "^18.0.3",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alibaba/ice.git"
+  },
+  "bugs": {
+    "url": "https://github.com/alibaba/ice/issues"
+  },
+  "homepage": "https://ice.work",
+  "license": "MIT"
+}
diff --git a/packages/runtime-kit/src/appConfig.ts b/packages/runtime-kit/src/appConfig.ts
@@ -0,0 +1,29 @@
+import type { AppConfig, AppExport } from './types.js';
+
+const defaultAppConfig: AppConfig = {
+  app: {
+    strict: false,
+    rootId: 'ice-container',
+  },
+  router: {
+    type: 'browser',
+  },
+} as const;
+
+export default function getAppConfig(appExport: AppExport): AppConfig {
+  const { default: appConfig = {} } = appExport || {};
+  const { app, router, ...others } = appConfig;
+
+  return {
+    app: { ...defaultAppConfig.app, ...app },
+    router: { ...defaultAppConfig.router, ...router },
+    ...others,
+  };
+}
+
+export const defineAppConfig = (
+  appConfigOrDefineAppConfig: AppConfig | (() => AppConfig),
+): AppConfig =>
+  (typeof appConfigOrDefineAppConfig === 'function'
+    ? appConfigOrDefineAppConfig()
+    : appConfigOrDefineAppConfig);