alibaba · ClarkXia · Feb 11, 2025 · Jan 16, 2025 · Jan 16, 2025 · Jan 16, 2025
diff --git a/examples/custom-runtime/.browserslistrc b/examples/custom-runtime/.browserslistrc
@@ -0,0 +1 @@
+chrome 55
diff --git a/examples/custom-runtime/ice.config.mts b/examples/custom-runtime/ice.config.mts
@@ -0,0 +1,34 @@
+import { defineConfig } from '@ice/app';
+
+export default defineConfig(() => ({
+  ssg: false,
+  plugins: [
+    {
+      name: 'custom-runtime',
+      setup: (api) => {
+        // Customize the runtime
+        api.onGetConfig((config) => {
+          // Override the runtime config
+          config.runtime = {
+            exports: [
+              {
+                specifier: ['Meta', 'Title', 'Links', 'Main', 'Scripts'],
+                source: '@ice/runtime',
+              },
+              {
+                specifier: ['defineAppConfig'],
+                source: '@ice/runtime-kit',
+              },
+            ],
+            source: '../runtime',
+            server: '@ice/runtime/server',
+            router: {
+              source: '@/routes',
+            },
+          };
+        })
+      },
+    },
+  ],
+}));
+
diff --git a/examples/custom-runtime/package.json b/examples/custom-runtime/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@examples/custom-runtime",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "start": "ice start",
+    "build": "ice build"
+  },
+  "description": "",
+  "author": "",
+  "license": "MIT",
+  "dependencies": {
+    "@ice/app": "workspace:*",
+    "@ice/runtime": "workspace:*",
+    "@ice/runtime-kit": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.2"
+  }
+}
diff --git a/examples/custom-runtime/runtime.tsx b/examples/custom-runtime/runtime.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import type { RunClientAppOptions } from '@ice/runtime-kit';
+import { getAppConfig } from '@ice/runtime-kit';
+
+import ReactDOM from 'react-dom';
+
+const runClientApp = (options: RunClientAppOptions) => {
+  const { basename = '', createRoutes } = options;
+  // Normalize pathname with leading slash
+  const pathname = `/${window.location.pathname.replace(basename, '').replace(/^\/+/, '')}`;
+
+  const routes = createRoutes?.({ renderMode: 'CSR' });
+  const Component = routes?.find(route => route.path === pathname)?.component;
+
+  ReactDOM.render(
+    Component ? <Component /> : <div>404</div>,
+    document.getElementById('ice-container'),
+  );
+};
+
+export {
+  getAppConfig,
+  runClientApp,
+};
diff --git a/examples/custom-runtime/runtimeServer.tsx b/examples/custom-runtime/runtimeServer.tsx
diff --git a/examples/custom-runtime/src/app.tsx b/examples/custom-runtime/src/app.tsx
@@ -0,0 +1,5 @@
+import { defineAppConfig } from 'ice';
+
+export default defineAppConfig(() => ({
+
+}));
diff --git a/examples/custom-runtime/src/document.tsx b/examples/custom-runtime/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 Demo" />
+        <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/custom-runtime/src/pages/home.tsx b/examples/custom-runtime/src/pages/home.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+  return <h1>home</h1>;
+}
diff --git a/examples/custom-runtime/src/pages/index.tsx b/examples/custom-runtime/src/pages/index.tsx
@@ -0,0 +1,3 @@
+export default function Index() {
+  return <h1>index</h1>;
+}
diff --git a/examples/custom-runtime/src/routes.tsx b/examples/custom-runtime/src/routes.tsx
@@ -0,0 +1,13 @@
+import Index from './pages/index';
+import Home from './pages/home';
+
+export default () => [
+  {
+    path: '/',
+    component: Index,
+  },
+  {
+    path: '/home',
+    component: Home,
+  },
+];
diff --git a/examples/custom-runtime/src/typings.d.ts b/examples/custom-runtime/src/typings.d.ts
@@ -0,0 +1 @@
+/// <reference types="@ice/app/types" />
diff --git a/examples/custom-runtime/tsconfig.json b/examples/custom-runtime/tsconfig.json
@@ -0,0 +1,32 @@
+{
+  "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,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": true,
+    "skipLibCheck": true,
+    "paths": {
+      "@/*": ["./src/*"],
+      "ice": [".ice"]
+    }
+  },
+  "include": ["src", ".ice", "ice.config.*"],
+  "exclude": ["build", "public"]
+}
diff --git a/examples/with-antd-mobile/src/store.tsx b/examples/with-antd-mobile/src/store.tsx
@@ -1,4 +1,3 @@
-import type { ComponentWithChildren } from '@ice/runtime/types';
 import { useState } from 'react';
 import constate from 'constate';
 
@@ -12,7 +11,7 @@ function useCounter() {
 
 const [CounterProvider, useCounterContext] = constate(useCounter);
 
-export const StoreProvider: ComponentWithChildren = ({ children }) => {
+export const StoreProvider = ({ children }) => {
   return <CounterProvider>{ children } </CounterProvider>;
 };
 

diff --git a/package.json b/package.json
@@ -75,5 +75,8 @@
       "[email protected]": "patches/[email protected]",
       "@rspack/[email protected]": "patches/@[email protected]"
     }
-  }
+  },
+  "workspaces": [
+    "packages/runtime-kit"
+  ]
 }
diff --git a/packages/ice/package.json b/packages/ice/package.json
@@ -50,6 +50,7 @@
     "@ice/bundles": "workspace:*",
     "@ice/route-manifest": "workspace:*",
     "@ice/runtime": "workspace:^",
+    "@ice/runtime-kit": "workspace:^",
     "@ice/shared-config": "workspace:*",
     "@ice/webpack-config": "workspace:*",
     "@ice/rspack-config": "workspace:*",

diff --git a/packages/ice/src/bundler/config/getUrls.ts b/packages/ice/src/bundler/config/getUrls.ts
@@ -1,6 +1,6 @@
 import type { TaskConfig } from 'build-scripts';
 import type { Config } from '@ice/shared-config/types';
-import type { AppConfig } from '@ice/runtime/types';
+import type { AppConfig } from '@ice/runtime-kit';
 import type { Configuration as DevServerConfiguration } from 'webpack-dev-server';
 import type { Configuration as RSPackDevServerConfiguration } from '@rspack/dev-server';
 

diff --git a/packages/ice/src/bundler/types.ts b/packages/ice/src/bundler/types.ts
@@ -1,7 +1,7 @@
 import type { Config } from '@ice/shared-config/types';
 import type ora from '@ice/bundles/compiled/ora/index.js';
 import type { Stats as WebpackStats } from '@ice/bundles/compiled/webpack/index.js';
-import type { AppConfig } from '@ice/runtime/types';
+import type { AppConfig } from '@ice/runtime-kit';
 import type { Configuration, MultiCompiler, MultiStats } from '@rspack/core';
 import type { Context as DefaultContext, TaskConfig } from 'build-scripts';
 import type { ServerCompiler, GetAppConfig, GetRoutesConfig, GetDataloaderConfig, ExtendsPluginAPI } from '../types/plugin.js';

diff --git a/packages/miniapp-runtime/src/types.ts b/packages/miniapp-runtime/src/types.ts
   * @see https://developers.weixin.qq.com/miniprogram/dev/framework/material/support_material.html
   */
  supportedMaterials?: {
    /** 支持文件类型的MimeType，音频，视频支持二级配置的通配模式，例如: video/*。通配模式配置和精确类型配置同时存在时，则优先使用精确类型的配置(例如video/*和video/mp4同时存在，会优先使用video/mp4的配置)。 */
    materialType: string;
    /** 开发者配置的标题，在素材页面会展示该标题，配置中必须包含${nickname}, 代码包编译后会自动替换为小程序名称，如果声明了简称则会优先使用简称。除去${nickname}其余字数不得超过6个。 */
    name: string;
diff --git a/packages/plugin-miniapp/src/helper/utils.ts b/packages/plugin-miniapp/src/helper/utils.ts
 import { createRequire } from 'node:module';
 import { fileURLToPath } from 'node:url';
 import * as child_process from 'node:child_process';
 import { createHash } from 'node:crypto';
 import * as os from 'node:os';
 import * as path from 'node:path';
  processTypeEnum,
  processTypeMap,
  REG_CSS_IMPORT,
  REG_JSON,
  REG_NODE_MODULES,
  SCRIPT_EXT,
 } from './constants.js';
 import { chalk } from './terminal.js';

 const { execSync } = child_process;
 const { camelCase, flatMap, isPlainObject, mergeWith } = lodash;

 const require = createRequire(fileURLToPath(import.meta.url));
    return true;
  }
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
 export const mergeVisitors = (src, ...args) => {
  const validFuncs = ['exit', 'enter'];
  return mergeWith(src, ...args, (value, srcValue, key, object, srcObject) => {
    if (!object.hasOwnProperty(key) || !srcObject.hasOwnProperty(key)) {
      return undefined;
    }

diff --git a/packages/plugin-miniapp/src/miniapp/html/index.ts b/packages/plugin-miniapp/src/miniapp/html/index.ts

 // 收集使用到的小程序组件
 export default function onParseCreateElement({ nodeName, componentConfig }: OnParseCreateElementArgs) {
  if (!(inlineElements.includes(nodeName) || blockElements.includes(nodeName) || specialElements.includes(nodeName))) return;

  const simple = ['audio', 'button', 'canvas', 'form', 'label', 'progress', 'textarea', 'video'];
  const special = {
diff --git a/packages/plugin-miniapp/src/miniapp/index.ts b/packages/plugin-miniapp/src/miniapp/index.ts
 const getMiniappTask = ({ rootDir, command, target, configAPI, runtimeDir, nativeConfig }): Config => {
  const entry = getEntry(rootDir, runtimeDir);
  const mode = command === 'start' ? 'development' : 'production';
  const { template, globalObject, fileType, projectConfigJson, modifyBuildAssets, components } = getMiniappTargetConfig(target);
  const { plugins, module } = getMiniappWebpackConfig({
    rootDir,
    template,
	* @see https://developers.weixin.qq.com/miniprogram/dev/framework/material/support_material.html
	*/
	supportedMaterials?: {
	/** 支持文件类型的MimeType，音频，视频支持二级配置的通配模式，例如: video/。通配模式配置和精确类型配置同时存在时，则优先使用精确类型的配置(例如video/和video/mp4同时存在，会优先使用video/mp4的配置)。 */
Check warning on line 435 in packages/miniapp-runtime/src/types.ts GitHub Actions / build (16.x, windows-latest) `This line has a length of 131. Maximum allowed is 120` Check warning on line 435 in packages/miniapp-runtime/src/types.ts GitHub Actions / build (16.x, ubuntu-latest) `This line has a length of 131. Maximum allowed is 120` Check warning on line 435 in packages/miniapp-runtime/src/types.ts GitHub Actions / build (18.x, windows-latest) `This line has a length of 131. Maximum allowed is 120` Check warning on line 435 in packages/miniapp-runtime/src/types.ts GitHub Actions / build (18.x, ubuntu-latest) `This line has a length of 131. Maximum allowed is 120`
	materialType: string;
	/** 开发者配置的标题，在素材页面会展示该标题，配置中必须包含${nickname}, 代码包编译后会自动替换为小程序名称，如果声明了简称则会优先使用简称。除去${nickname}其余字数不得超过6个。 */
	name: string;
	import { createRequire } from 'node:module';
	import { fileURLToPath } from 'node:url';
	import * as child_process from 'node:child_process';
Check warning on line 3 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `Identifier 'child_process' is not in camel case` Check warning on line 3 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `Identifier 'child_process' is not in camel case` Check warning on line 3 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `Identifier 'child_process' is not in camel case` Check warning on line 3 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `Identifier 'child_process' is not in camel case`
	import { createHash } from 'node:crypto';
	import * as os from 'node:os';
	import * as path from 'node:path';
	processTypeEnum,
	processTypeMap,
	REG_CSS_IMPORT,
	REG_JSON,
Check warning on line 15 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `'REG_JSON' is defined but never used. Allowed unused vars must match /[iI]gnored\|createElement/u` Check warning on line 15 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `'REG_JSON' is defined but never used. Allowed unused vars must match /[iI]gnored\|createElement/u` Check warning on line 15 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `'REG_JSON' is defined but never used. Allowed unused vars must match /[iI]gnored\|createElement/u` Check warning on line 15 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `'REG_JSON' is defined but never used. Allowed unused vars must match /[iI]gnored\|createElement/u`
	REG_NODE_MODULES,
	SCRIPT_EXT,
	} from './constants.js';
	import { chalk } from './terminal.js';

	const { execSync } = child_process;
Check warning on line 21 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `Identifier 'child_process' is not in camel case` Check warning on line 21 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `Identifier 'child_process' is not in camel case` Check warning on line 21 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `Identifier 'child_process' is not in camel case` Check warning on line 21 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `Identifier 'child_process' is not in camel case`
	const { camelCase, flatMap, isPlainObject, mergeWith } = lodash;

	const require = createRequire(fileURLToPath(import.meta.url));
	return true;
	}
	for (const key in obj) {
	if (obj.hasOwnProperty(key)) {
Check warning on line 196 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 196 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 196 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 196 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object`
	return false;
	}
	}
	export const mergeVisitors = (src, ...args) => {
	const validFuncs = ['exit', 'enter'];
	return mergeWith(src, ...args, (value, srcValue, key, object, srcObject) => {
	if (!object.hasOwnProperty(key) \|\| !srcObject.hasOwnProperty(key)) {
Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (16.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, windows-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object` Check warning on line 422 in packages/plugin-miniapp/src/helper/utils.ts GitHub Actions / build (18.x, ubuntu-latest) `Do not access Object.prototype method 'hasOwnProperty' from target object`
	return undefined;
	}

	// 收集使用到的小程序组件
	export default function onParseCreateElement({ nodeName, componentConfig }: OnParseCreateElementArgs) {
	if (!(inlineElements.includes(nodeName) \|\| blockElements.includes(nodeName) \|\| specialElements.includes(nodeName))) return;
Check warning on line 103 in packages/plugin-miniapp/src/miniapp/html/index.ts GitHub Actions / build (16.x, windows-latest) `This line has a length of 125. Maximum allowed is 120` Check warning on line 103 in packages/plugin-miniapp/src/miniapp/html/index.ts GitHub Actions / build (16.x, ubuntu-latest) `This line has a length of 125. Maximum allowed is 120` Check warning on line 103 in packages/plugin-miniapp/src/miniapp/html/index.ts GitHub Actions / build (18.x, windows-latest) `This line has a length of 125. Maximum allowed is 120` Check warning on line 103 in packages/plugin-miniapp/src/miniapp/html/index.ts GitHub Actions / build (18.x, ubuntu-latest) `This line has a length of 125. Maximum allowed is 120`

	const simple = ['audio', 'button', 'canvas', 'form', 'label', 'progress', 'textarea', 'video'];
	const special = {
	const getMiniappTask = ({ rootDir, command, target, configAPI, runtimeDir, nativeConfig }): Config => {
	const entry = getEntry(rootDir, runtimeDir);
	const mode = command === 'start' ? 'development' : 'production';
	const { template, globalObject, fileType, projectConfigJson, modifyBuildAssets, components } = getMiniappTargetConfig(target);
Check warning on line 36 in packages/plugin-miniapp/src/miniapp/index.ts GitHub Actions / build (16.x, windows-latest) `This line has a length of 128. Maximum allowed is 120` Check warning on line 36 in packages/plugin-miniapp/src/miniapp/index.ts GitHub Actions / build (16.x, ubuntu-latest) `This line has a length of 128. Maximum allowed is 120` Check warning on line 36 in packages/plugin-miniapp/src/miniapp/index.ts GitHub Actions / build (18.x, windows-latest) `This line has a length of 128. Maximum allowed is 120` Check warning on line 36 in packages/plugin-miniapp/src/miniapp/index.ts GitHub Actions / build (18.x, ubuntu-latest) `This line has a length of 128. Maximum allowed is 120`
	const { plugins, module } = getMiniappWebpackConfig({
	rootDir,
	template,