feat: runtime kit

examples/custom-runtime/ice.config.mts

@@ -22,6 +22,9 @@ export default defineConfig(() => ({
             ],
             source: '../runtime',
             server: '@ice/runtime/server',
+            router: {
+              source: '@/routes',
+            },
           };
         })
       },

examples/custom-runtime/runtime.tsx

@@ -5,8 +5,17 @@ import { getAppConfig } from '@ice/runtime-kit';
 import ReactDOM from 'react-dom';
 
 const runClientApp = (options: RunClientAppOptions) => {
-  console.log('runClientApp', options);
-  ReactDOM.render(<div>Hello World</div>, document.getElementById('ice-container'));
+  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 {

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,
+  },
+];

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>;
 };
 

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:*",

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';
 

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';
 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';

packages/ice/src/createService.ts

@@ -7,7 +7,7 @@ import webpack from '@ice/bundles/compiled/webpack/index.js';
 import { Context } from 'build-scripts';
 import type { CommandArgs, CommandName, 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';
 import * as config from './config.js';
 import test from './commands/test.js';
 import webpackBundler from './bundler/webpack/index.js';

packages/ice/src/esbuild/assets.ts

@@ -2,7 +2,7 @@ import * as path from 'path';
 import * as mrmime from 'mrmime';
 import fs from 'fs-extra';
 import type { PluginBuild } from 'esbuild';
-import type { AssetsManifest } from '@ice/runtime/types';
+import type { AssetsManifest } from '@ice/runtime-kit';
 
 export const ASSET_TYPES = [
   // images

packages/ice/src/types/plugin.ts

@@ -4,7 +4,7 @@ import type { Configuration, Stats, WebpackOptionsNormalized } from '@ice/bundle
 import type { esbuild } from '@ice/bundles';
 import type { DefineExtraRoutes, NestedRouteManifest } from '@ice/route-manifest';
 import type { Config } from '@ice/shared-config/types';
-import type { AppConfig, AssetsManifest } from '@ice/runtime/types';
+import type { AppConfig, AssetsManifest } from '@ice/runtime-kit';
 import type ServerCompileTask from '../utils/ServerCompileTask.js';
 import type { CreateLogger } from '../utils/logger.js';
 import type { DeclarationData, AddRenderFile, AddTemplateFiles, ModifyRenderData, AddDataLoaderImport, Render } from './generator.js';

packages/ice/src/utils/injectInitialEntry.ts

@@ -1,6 +1,6 @@
 import path from 'path';
 import fse from 'fs-extra';
-import type { RouteItem } from '@ice/runtime/types';
+import type { RouteItem } from '@ice/runtime';
 import matchRoutes from '@ice/runtime/matchRoutes';
 import { logger } from './logger.js';
 import type RouteManifest from './routeManifest.js';

packages/ice/src/utils/runtimeEnv.ts

@@ -3,7 +3,7 @@ import * as fs from 'fs';
 import * as dotenv from 'dotenv';
 import { expand as dotenvExpand } from 'dotenv-expand';
 import type { CommandArgs } from 'build-scripts';
-import type { AppConfig } from '@ice/runtime/types';
+import type { AppConfig } from '@ice/runtime-kit';
 
 export interface Envs {
   [key: string]: string;

packages/plugin-auth/src/runtime/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RuntimePlugin, AppProvider, RouteWrapper } from '@ice/runtime/types';
+import type { RuntimePlugin, AppProvider, RouteWrapper } from '@ice/runtime';
 import type { AuthConfig, AuthType, Auth } from '../types.js';
 import { AuthProvider, useAuth, withAuth } from './Auth.js';
 import type { InjectProps } from './Auth.js';

packages/plugin-auth/src/types.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { RouteConfig } from '@ice/runtime/types';
+import type { RouteConfig } from '@ice/runtime';
 
 export interface AuthConfig {
   initialAuth: {

packages/plugin-i18n/src/runtime/index.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RuntimePlugin } from '@ice/runtime/types';
+import type { RuntimePlugin } from '@ice/runtime';
 import detectLocale from '../utils/detectLocale.js';
 import type { I18nAppConfig, I18nConfig } from '../types.js';
 import getLocaleRedirectPath from '../utils/getLocaleRedirectPath.js';
@@ -86,4 +86,4 @@ const runtime: RuntimePlugin<{ i18nConfig: I18nConfig }> = async (
 
 export default runtime;
 
-export { useLocale, withLocale };
+export { useLocale, withLocale };

packages/plugin-icestark/src/runtime/child.tsx

@@ -1,5 +1,5 @@
 import * as ReactDOM from 'react-dom/client';
-import type { RuntimePlugin } from '@ice/runtime/types';
+import type { RuntimePlugin } from '@ice/runtime';
 import type { LifecycleOptions } from '../types';
 
 const runtime: RuntimePlugin<LifecycleOptions> = ({ setRender }, runtimeOptions) => {

packages/plugin-icestark/src/runtime/framework.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AppRouter, AppRoute } from '@ice/stark';
-import type { RuntimePlugin, ClientAppRouterProps } from '@ice/runtime/types';
+import type { RuntimePlugin, ClientAppRouterProps } from '@ice/runtime';
 import type { RouteInfo, AppConfig } from '../types';
 
 const { useState, useEffect } = React;

packages/plugin-intl/src/runtime-simple.ts

@@ -1,4 +1,4 @@
-import type { RuntimePlugin } from '@ice/runtime/types';
+import type { RuntimePlugin } from '@ice/runtime';
 import { getDefaultLocale, getLocaleMessages, EXPORT_NAME } from './intl-until.js';
 
 let currentLocale = getDefaultLocale();

packages/plugin-intl/src/runtime.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { createIntl, createIntlCache, RawIntlProvider, useIntl } from 'react-intl';
 import type { IntlShape } from 'react-intl';
-import type { RuntimePlugin } from '@ice/runtime/types';
+import type { RuntimePlugin } from '@ice/runtime';
 import { getDefaultLocale, getLocaleMessages, EXPORT_NAME } from './intl-until.js';
 import type { LocaleConfig } from './types.js';
 

packages/plugin-miniapp/src/runtime/index.ts

@@ -1,4 +1,4 @@
-import type { RuntimePlugin } from '@ice/runtime/types';
+import type { RuntimePlugin } from '@ice/runtime';
 import type { MiniappLifecycles } from '@ice/miniapp-runtime/esm/types';
 
 export function defineMiniappConfig(

packages/plugin-request/src/runtime.ts

@@ -1,4 +1,4 @@
-import type { StaticRuntimePlugin } from '@ice/runtime/types';
+import type { StaticRuntimePlugin } from '@ice/runtime';
 import { createAxiosInstance, setAxiosInstance } from './request.js';
 import type { RequestConfig } from './types';
 

packages/plugin-store/src/runtime.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RuntimePlugin, AppProvider, RouteWrapper } from '@ice/runtime/types';
+import type { RuntimePlugin, AppProvider, RouteWrapper } from '@ice/runtime';
 import { PAGE_STORE_INITIAL_STATES, PAGE_STORE_PROVIDER } from './constants.js';
 import type { StoreConfig } from './types.js';
 

packages/runtime-kit/package.json

@@ -5,6 +5,7 @@
   "main": "./esm/index.js",
   "module": "./esm/index.js",
   "types": "./esm/index.d.ts",
+  "type": "module",
   "files": [
     "esm"
   ],

packages/runtime-kit/src/dataLoader.ts

@@ -1,8 +1,9 @@
-import getRequestContext from './requestContext.js';
+import { getRequestContext } from './requestContext.js';
 import type {
   RequestContext, RenderMode, AppExport,
   RuntimeModules, StaticRuntimePlugin, CommonJsRuntime,
   Loader, DataLoaderResult, StaticDataLoader, DataLoaderConfig, DataLoaderOptions,
+  RunClientAppOptions,
 } from './types.js';
 
 interface Loaders {
@@ -14,8 +15,8 @@ interface CachedResult {
 }
 
 interface Options {
-  fetcher: (config: StaticDataLoader) => Promise<any>;
-  decorator: (dataLoader: Function, id?: number) => Function;
+  fetcher: RunClientAppOptions['dataLoaderFetcher'];
+  decorator: RunClientAppOptions['dataLoaderDecorator'];
   runtimeModules: RuntimeModules['statics'];
   appExport: AppExport;
 }
@@ -49,18 +50,16 @@ export function defineStaticDataLoader(dataLoader: Loader): DataLoaderConfig {
  * Custom fetcher for load static data loader config.
  * Set globally to avoid passing this fetcher too deep.
  */
-let dataLoaderFetcher: (config: StaticDataLoader) => Promise<any>;
-export function setFetcher(customFetcher: (config: StaticDataLoader) => Promise<any>): void {
+let dataLoaderFetcher: RunClientAppOptions['dataLoaderFetcher'];
+export function setFetcher(customFetcher: RunClientAppOptions['dataLoaderFetcher']): void {
   dataLoaderFetcher = customFetcher;
 }
 
 /**
  * Custom decorator for deal with data loader.
  */
-let dataLoaderDecorator = (dataLoader: Function, id?: number): Function => {
-  return dataLoader;
-};
-export function setDecorator(customDecorator: (dataLoader: Function, id?: number) => Function): void {
+let dataLoaderDecorator: RunClientAppOptions['dataLoaderDecorator'];
+export function setDecorator(customDecorator: RunClientAppOptions['dataLoaderDecorator']): void {
   dataLoaderDecorator = customDecorator;
 }
 
@@ -125,7 +124,7 @@ export function loadDataByCustomFetcher(config: StaticDataLoader): Promise<any>
   } catch (error) {
     console.error('parse template error: ', error);
   }
-  return dataLoaderFetcher(parsedConfig);
+  return dataLoaderFetcher?.(parsedConfig);
 }
 
 /**
@@ -142,7 +141,7 @@ export function callDataLoader(dataLoader: Loader, requestContext: RequestContex
     return loadDataByCustomFetcher(dataLoader);
   }
 
-  return dataLoaderDecorator(dataLoader)(requestContext);
+  return dataLoaderDecorator?.(dataLoader)?.(requestContext);
 }
 
 const cache = new Map<string, CachedResult>();

packages/runtime-kit/src/requestContext.ts

@@ -8,7 +8,7 @@ interface Location {
 /**
  * context for getData both in server and client side.
  */
-export default function getRequestContext(location: Location, serverContext: ServerContext = {}): RequestContext {
+export function getRequestContext(location: Location, serverContext: ServerContext = {}): RequestContext {
   const { pathname, search } = location;
   // Use query form server context first to avoid unnecessary parsing.
   // @ts-ignore

packages/runtime-kit/src/types.ts

@@ -3,6 +3,7 @@ import type { ComponentType, PropsWithChildren } from 'react';
 import type { HydrationOptions, Root } from 'react-dom/client';
 
 // Basic Types
+export type AppData = any;
 export type RouteData = any;
 export type RenderMode = 'SSR' | 'SSG' | 'CSR';
 
@@ -181,7 +182,7 @@ type UseConfig = () => RouteConfig<Record<string, any>>;
 type UseData = () => RouteData;
 type UseAppContext = () => AppContext;
 
-export interface RuntimeAPI {
+export interface RuntimeAPI<T = History> {
   setAppRouter?: SetAppRouter;
   getAppRouter: GetAppRouter;
   addProvider: AddProvider;
@@ -193,12 +194,12 @@ export interface RuntimeAPI {
   useData: UseData;
   useConfig: UseConfig;
   useAppContext: UseAppContext;
-  history: History;
+  history: T;
 }
 
 // Plugin Types
-export interface RuntimePlugin<T = Record<string, any>> {
-  (apis: RuntimeAPI, runtimeOptions?: T): Promise<void> | void;
+export interface RuntimePlugin<T = Record<string, any>, H = History> {
+  (apis: RuntimeAPI<H>, runtimeOptions?: T): Promise<void> | void;
 }
 
 export interface StaticRuntimeAPI {
@@ -253,7 +254,7 @@ export interface RunClientAppOptions<T = any> {
   basename?: string;
   memoryRouter?: boolean;
   runtimeOptions?: Record<string, any>;
-  dataLoaderFetcher?: (config: StaticDataLoader) => void;
+  dataLoaderFetcher?: (config: StaticDataLoader) => any;
   dataLoaderDecorator?: (loader: Loader, index?: number) => (requestContext: RequestContext) => DataLoaderResult;
 }
 

packages/runtime-kit/tsconfig.json

@@ -4,8 +4,8 @@
     "baseUrl": "./",
     "rootDir": "src",
     "outDir": "esm",
-    "module": "ES2020"
+    "module": "ES2020",
+    "moduleResolution": "NodeNext",
   },
-  "include": ["src"],
-  "exclude": ["node_modules", "dist"]
+  "include": ["src"]
 }

packages/runtime/src/AppContext.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { AppContext } from './types.js';
+import type { AppContext } from '@ice/runtime-kit';
 
 const Context = React.createContext<AppContext | undefined>(undefined);
 

packages/runtime/src/Document.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import type { WindowContext, RouteMatch, AssetsManifest } from './types.js';
+import type { AssetsManifest } from '@ice/runtime-kit';
+import type { WindowContext, RouteMatch } from './types.js';
 import { useAppContext, useAppData } from './AppContext.js';
 import { getMeta, getTitle, getLinks, getScripts } from './routesConfig.js';
 import getCurrentRoutePath from './utils/getCurrentRoutePath.js';

packages/runtime/src/RouteContext.ts

@@ -1,5 +1,5 @@
 import { useLoaderData } from 'react-router-dom';
-import type { RouteConfig } from './types.js';
+import type { RouteConfig } from '@ice/runtime-kit';
 
 function useData<T = any>(): T {
   return (useLoaderData() as any)?.data;

packages/runtime/src/RouteWrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { RouteWrapperConfig, ComponentModule } from './types.js';
+import type { RouteWrapperConfig, ComponentModule } from '@ice/runtime-kit';
 
 interface Props {
   id: string;

packages/runtime/src/Suspense.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { ReactNode } from 'react';
+import type { RequestContext } from '@ice/runtime-kit';
 import { useAppContext } from './AppContext.js';
 import proxyData from './proxyData.js';
-import type { RequestContext } from './types.js';
 
 const LOADER = '__ICE_SUSPENSE_LOADER__';
 const isClient = typeof window !== 'undefined' && 'onload' in window;