@zxiaosi/sdk 1.0.0-beta.2 → 1.0.0

package/README.md

@@ -1,205 +1,21 @@
-## 路线规划
-
-- [规划图地址](https://excalidraw.com/#json=_CghR9MKEcgUt4SaYUXFY,V9n_bmADhi6JXp2TUk-ObA)
-
-![](https://cdn.zxiaosi.com/hexo/micro-sdk/sdk0.2.png)
-
-- [更多详情](https://zxiaosi.com/archives/c6c40209.html)
-
-## 快速开始
-
-```bash
-# 安装 @zxiaosi/sdk 对应的版本 0.5.x
-npm install -g @zxiaosi/create-sdk
-
-npx create-sdk
-```
-
 ## 项目介绍
 
-- 整个 `SDK` 都是围绕 `getRoutesApi`、`getUserInfoApi` 这两个接口进行设计的，旨在简化微前端应用的开发
-
-- `getRoutesApi` 接口用于获取应用路由信息，包括主应用和微应用的路由配置。因为 `Qiankun` 的 `entry` 配置比较特殊，所以 `主应用` 需要使用 `vite-plugin-mock` 插件 `mock` 接口
-  - 在本地开发是本地服务 `"entry": "http://localhost:5174"`
-  - 在生产环境是文件路径 `"entry": "/subapp/"`
-
-- `getUserInfoApi` 接口用于获取用户相关数据，以便进行权限控制和个性化设置。
-  - `user`：用户信息（必选）
-  - `permissions`：权限信息（必选）
-  - `role`：角色信息（可选）
-  - `setting`：配置信息（可选）
-
-## 核心代码
-
-### 主应用
-
-- 在 `main.ts` 中进行 `SDK` 的挂载
-
-  ```js
-  import {
-    sdk,
-    SdkApiPlugin,
-    SdkAppPlugin,
-    SdkClientPlugin,
-    SdkConfigPlugin,
-    SdkI18nPlugin,
-    SdkStoragePlugin,
-    SdkStorePlugin,
-    SdkUIPlugin,
-  } from '@zxiaosi/sdk';
-  import { createRoot } from 'react-dom/client';
-  import App from './App';
-
-  const getRoutesApi = async () => ({
-    code: 0,
-    data: [
-      { path: '/home', name: '首页', component: 'Home' },
-      { path: '/subapp', name: '微应用', component: 'Microapp',
-        routeAttr: `{"name": "subapp", "entry": "http://localhost:5174", "activeRule": "/subapp", "rootId": "sub-app"}`,
-      },
-    ],
-  })
-
-  const getUserInfoApi = async () => ({
-     code: 0,
-    data: { user: {}, permissions: ['/home', '/subapp'], roles: [], settings: {} },
-  })
-
-  const loginApi = async () => ({ code: 0, data: { token: 'xxxx' } })
-
-  /** 挂载 SDK */
-  sdk
-    .use(SdkApiPlugin, {
-      getRoutesApi,
-      getUserInfoApi,
-      loginApi,
-    })
-    .use(SdkAppPlugin)
-    .use(SdkClientPlugin)
-    .use(SdkConfigPlugin, {
-      qiankunMode: 'router',
-      proLayoutConfig: {
-        title: 'Demo',
-        layout: 'mix',
-      },
-    })
-    .use(SdkI18nPlugin)
-    .use(SdkStoragePlugin)
-    .use(SdkStorePlugin)
-    .use(SdkUIPlugin, { Home: () => <div>Home</div> })
-    .mount('sdk');
-
-  /** 渲染主应用 */
-  createRoot(document.getElementById('root')!).render(<App />);
-  ```
+- 整个 `SDK` 都是围绕 `sdk.app.user`、 `sdk.app.menus`、`sdk.app.microApps` 进行设计的，旨在简化微前端应用的开发
 
-- 在 `App.tsx` 中使用 `<Mainapp />` 组件渲染主应用
+- 主应用 `sdk.use(plugin, opts).mount('sdk')` → 微应用 `sdk.extend('sdk')` → 共享同一套状态与能力
 
-  ```js
-  import { sdk } from '@zxiaosi/sdk';
+- 架构图
 
-  function App() {
-    const Mainapp = sdk.ui.getComponent('Mainapp');
-    return <Mainapp />;
-  }
+  ![](https://cdn.zxiaosi.com/hexo/micro-sdk/sdk1.0.png)
 
-  export default App;
-  ```
+- [架构图地址](https://excalidraw.com/#json=D71Fw3vbEUxoaA-15i2Cj,VMKGJ8x_P3I1MrMbVBjgcw)
 
-### 微应用
+- [更多详情](https://zxiaosi.com/archives/113adf2d.html)
 
-- 在 `vite.config.ts` 中配置 `vite-plugin-qiankun-lite` 插件
-
-  ```js
-  import { defineConfig } from 'vite';
-  import react from '@vitejs/plugin-react';
-  import qiankun from 'vite-plugin-qiankun-lite';
-
-  export default defineConfig({
-    plugins: [
-      react(),
-      qiankun({ name: 'subapp', sandbox: !!process.env.VITE_SANDBOX }),
-    ],
-    server: {
-      port: 5174,
-    },
-  });
-  ```
-
-- 在 `main.ts` 中进行 `SDK` 的继承
-
-  ```js
-  import { sdk } from '@zxiaosi/sdk';
-  import { createRoot, type Root } from 'react-dom/client';
-  import App from './App.tsx';
-  import './index.css';
-
-  let root: Root;
-  const render = (props: any = {}) => {
-    const container = props?.container
-      ? props.container.querySelector('#root')
-      : document.getElementById('root');
-
-    root = createRoot(container);
-
-    root.render(<App />);
-  };
-
-  if (!window.__POWERED_BY_QIANKUN__) {
-    render();
-  }
-
-  export async function mount(props: any) {
-    console.log(`Microapp mount`, props);
-    sdk.extend('sdk'); // 继承 sdk 功能
-    render(props);
-  }
-
-  export async function unmount(props: any) {
-    console.log(`Microapp unmount`, props);
-    root.unmount();
-  }
-  ```
-
-- [可参考项目](https://github.com/zxiaosi-team/fontend-sdk/tree/master/packages)
-
-## 注意事项
-
-- `SDK` 不能在 `组件外` 进行使用，否则会报 `SDK 未初始化` 错误
-
-- 微应用使用 `sdk.ui.renderComponent('xxx')` 时，会报 `React 多实例` 的错误，需要使用 `vite-plugin-externals` 插件将 `React` 等依赖排除在打包之外。[更多详情](https://zxiaosi.com/archives/bc84a75a.html)
-  - 在主/子应用的 `index.html` 中使用 `cdn` 的方式去加载 `react` 和 `react-dom` 包
-
-    ```html
-    <!doctype html>
-    <html lang="en">
-      <head>
-        <title>%VITE_APP_TITLE%</title>
-        <script src="https://unpkg.com/react@18.3.1/umd/react.development.js"></script>
-        <script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js"></script>
-      </head>
-      <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.tsx"></script>
-      </body>
-    </html>
-    ```
-
-  - 在主/子应用中使用 `vite-plugin-externals` 插件去排除 `react` 和 `react-dom` 包
-
-    ```ts
-    import { viteExternalsPlugin } from 'vite-plugin-externals';
+## 快速开始
 
-    export default defineConfig({
-      plugins: [
-        viteExternalsPlugin({
-          react: 'React',
+```sh
+npm install -g @zxiaosi/create-sdk
 
-          // 开发环境不排除 react-dom 依赖, 防止热更新失效
-          // 或者 浏览器安装 React Developer Tools 插件
-          'react-dom': 'ReactDOM',
-          'react-dom/client': 'ReactDOM',
-        }),
-      ],
-    });
-    ```
+npx create-sdk
+```

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 import { ComponentType, ReactElement } from "react";
-import { NavigateFunction, UIMatch } from "react-router-dom";
-import { MicroApp, ObjectType, RegistrableApp } from "qiankun";
+import { Location, NavigateFunction, UIMatch } from "react-router-dom";
 import { StateCreator } from "zustand";
 
 //#region src/plugins/api/index.d.ts
@@ -8,24 +7,30 @@ interface ApiOptions {}
 /**
  * 请求插件
  */
-declare const SDKApiPlugin: SDKPlugin;
+declare const SDKApiPlugin: SDKPlugin<'api'>;
 //#endregion
 //#region src/plugins/app/index.d.ts
 interface AppOptions {
-  /** 菜单数据 */
-  menuData: any[];
-  /** 所有路由信息 */
-  allRoutes: any[];
-  /** 微应用信息 */
-  microApps: RegistrableApp<ObjectType>[];
-  /** 微应用实例 */
-  microAppsInstance: Map<string, MicroApp>;
   /** 用户信息 */
   user: UserInfo['user'];
+  /** 菜单数据 */
+  menus: any[];
   /** 用户权限 */
   permissions: UserInfo['permissions'];
   /** 用户设置 */
   settings: UserInfo['settings'];
+  /** 微应用信息 */
+  microApps: any[];
+  /** 微应用实例 */
+  microAppsInstance: Map<string, any>;
+  /**
+   * 初始化数据（登录跳转不刷新页面用）
+   */
+  initData?(): void | Promise<void>;
+  /**
+   * 手动加载微应用（与 Qiankun 一致）
+   */
+  loadMicroApp?(app: LoadableApp, configuration?: LoadMicroAppConfiguration, lifeCycles?: MicroAppLifeCycles): MicroAppInstance;
   /**
    * 获取国际化默认值
    * - 1. 本地缓存 `sdk.storage.getItem(sdk.storage.localeKey)`
@@ -49,10 +54,6 @@ interface AppOptions {
    * - 3. 最后使用菜单中第一项 `/`
    */
   getRedirectPath(): string;
-  /**
-   * 初始化数据
-   */
-  initData(): void | Promise<void>;
   /**
    * 跳转登录页
    * - 1. 清除 Token
@@ -72,10 +73,10 @@ interface AppOptions {
  * 应用插件
  *
  * @example
- * sdk.use(SDKAppPlugin, { menuData: [...] }).mount('xxx');
+ * sdk.use(SDKAppPlugin, { menus: [...] }).mount('xxx');
  * sdk.app.unmountMicroApp();
  */
-declare const SDKAppPlugin: SDKPlugin;
+declare const SDKAppPlugin: SDKPlugin<'app'>;
 //#endregion
 //#region src/plugins/components/index.d.ts
 interface ComponentsOptions {
@@ -106,12 +107,12 @@ interface ComponentsOptions {
  * sdk.components.setComponent(组件, '组件名称');
  * sdk.components.renderComponent('组件名称', props);
  */
-declare const SDKComponentsPlugin: SDKPlugin;
+declare const SDKComponentsPlugin: SDKPlugin<'components'>;
 //#endregion
 //#region src/plugins/config/index.d.ts
 interface ConfigOptions {
   /** 环境变量(主应用共享给微应用变量) */
-  env: Record<string, any>;
+  env: ObjectType;
   /** 主题 */
   theme: ThemeProps;
   /** 语言  */
@@ -121,7 +122,9 @@ interface ConfigOptions {
   /** 登录后跳转的路由 */
   defaultPath: string;
   /** 重定向字段 */
-  redirectField?: string;
+  redirectField: string;
+  /** 微应用生命周期 */
+  lifeCycles: MicroAppLifeCycles;
 }
 /**
  * 配置插件
@@ -130,7 +133,7 @@ interface ConfigOptions {
  * sdk.use(SDKConfigPlugin, { theme: 'light' }).mount('xxx');
  * console.log(sdk.api.theme); // 'light'
  */
-declare const SDKConfigPlugin: SDKPlugin;
+declare const SDKConfigPlugin: SDKPlugin<'config'>;
 //#endregion
 //#region src/plugins/i18n/index.d.ts
 interface I18nOptions {}
@@ -140,7 +143,7 @@ interface I18nOptions {}
  * @example
  * sdk.use(SDKI18nPlugin).mount('xxx');
  */
-declare const SDKI18nPlugin: SDKPlugin;
+declare const SDKI18nPlugin: SDKPlugin<'i18n'>;
 //#endregion
 //#region src/plugins/router/index.d.ts
 interface RouterOptions {
@@ -160,7 +163,7 @@ interface RouterOptions {
  * sdk.router.navigate; // 路由跳转
  * sdk.router.matches; // 面包屑信息
  */
-declare const SDKRouterPlugin: SDKPlugin;
+declare const SDKRouterPlugin: SDKPlugin<'router'>;
 //#endregion
 //#region src/plugins/storage/index.d.ts
 interface StorageOptions {
@@ -185,7 +188,7 @@ interface StorageOptions {
  * @example
  * sdk.use(SDKStoragePlugin).mount('xxx');
  */
-declare const SDKStoragePlugin: SDKPlugin;
+declare const SDKStoragePlugin: SDKPlugin<'storage'>;
 //#endregion
 //#region src/plugins/store/createLocale.d.ts
 interface LocaleStoreProps {
@@ -252,14 +255,17 @@ type StoreOptions = ReturnType<typeof createGlobalStore>;
  * @example sdk.store?.getState()?.setTheme('light')
  * @example sdk.store.subscribe((state) => state.theme, (theme) => { console.log('theme', theme) }, { fireImmediately: true }) // fireImmediately 立即变更
  */
-declare const SDKStorePlugin: SDKPlugin;
+declare const SDKStorePlugin: SDKPlugin<'store'>;
 //#endregion
 //#region src/types.d.ts
+type ObjectType = Record<string, any>;
 type ThemeProps = 'light' | 'dark' | (string & {});
 type LocaleProps = 'zh-CN' | 'en-US' | (string & {});
 interface UserInfo {
   /** 用户信息 */
   user?: any;
+  /** 菜单数据 */
+  menus?: any[];
   /** 用户权限 */
   permissions?: string[];
   /** 用户设置 */
@@ -291,16 +297,99 @@ interface SDKPlugins {
   /** 状态管理 */
   store: StoreOptions;
 }
-interface SDKPlugin {
+interface SDKPlugin<K extends keyof SDKPlugins> {
   /** 插件名称 */
   name: string;
   /** 插件安装方法 */
-  install(sdk: SDKInstance, options?: Record<string, any>): void;
+  install(sdk: SDKInstance, options?: ObjectType): void;
   /** 插件配置项 */
-  options?: Record<string, any>;
+  options?: Partial<SDKPlugins[K]> & ObjectType;
 }
-type SDKPluginOptions = Record<string, any | ((...args: any[]) => any)>;
 type SDKInstance = SDKCore & SDKPlugins;
+/**
+ * 微应用状态
+ */
+type MicroAppStatus = 'NOT_LOADED' | 'LOADING_SOURCE_CODE' | 'NOT_BOOTSTRAPPED' | 'BOOTSTRAPPING' | 'NOT_MOUNTED' | 'MOUNTING' | 'MOUNTED' | 'UPDATING' | 'UNMOUNTING' | 'UNLOADING' | 'SKIP_BECAUSE_BROKEN' | 'LOAD_ERROR';
+/**
+ * 微应用配置
+ */
+type LoadableApp<T extends object = ObjectType> = {
+  /** 微应用唯一名称 */name: string; /** 微应用入口 */
+  entry: string | {
+    scripts?: string[];
+    styles?: string[];
+    html?: string;
+  }; /** 传递给微应用的数据 */
+  props?: T;
+} & ({
+  /** 自定义函数 */render?: (props: {
+    appContent: string;
+    loading: boolean;
+  }) => any;
+} | {
+  /**
+   * 容器节点
+   * @example '#root'
+   * @example document.querySelector('#root')
+   */
+  container: string | HTMLElement;
+});
+/**
+ * 生命周期函数
+ */
+type LifeCycleFn = (app: LoadableApp, global: typeof window) => any;
+/**
+ * 生命周期钩子
+ */
+interface MicroAppLifeCycles {
+  beforeLoad?: LifeCycleFn | Array<LifeCycleFn>;
+  beforeMount?: LifeCycleFn | Array<LifeCycleFn>;
+  afterMount?: LifeCycleFn | Array<LifeCycleFn>;
+  beforeUnmount?: LifeCycleFn | Array<LifeCycleFn>;
+  afterUnmount?: LifeCycleFn | Array<LifeCycleFn>;
+}
+/**
+ * 加载配置
+ */
+interface LoadMicroAppConfiguration {
+  /** 开启沙箱 */
+  sandbox?: boolean | {
+    strictStyleIsolation?: boolean;
+    experimentalStyleIsolation?: boolean;
+  };
+  /** 是否为单实例场景，单实例指的是同一时间只会渲染一个微应用 */
+  singular?: boolean | ((app: LoadableApp<any>) => Promise<boolean>);
+  /** 自定义的 fetch 方法 */
+  prefetch?: boolean | 'all' | string[] | ((apps: any[]) => {
+    criticalAppNames: string[];
+    minorAppsName: string[];
+  });
+  /** 指定部分特殊的动态加载的微应用资源（css/js) 不被 qiankun 劫持处理 */
+  excludeAssetFilter?: (url: string) => boolean;
+  fetch?: typeof window.fetch | {
+    fn?: typeof window.fetch;
+    autoDecodeResponse?: boolean;
+  };
+  getPublicPath?: (entry: any) => string;
+  getTemplate?: (tpl: string) => string;
+  postProcessTemplate?: (tplResult: any) => any;
+  urlRerouteOnly?: boolean;
+  autoStart?: boolean;
+  [key: string]: any;
+}
+/**
+ * 微应用实例
+ */
+interface MicroAppInstance<T extends object = ObjectType> {
+  mount(): Promise<null>;
+  unmount(): Promise<null>;
+  update?(customProps: Partial<T>): Promise<any>;
+  getStatus(): MicroAppStatus;
+  loadPromise: Promise<null>;
+  bootstrapPromise: Promise<null>;
+  mountPromise: Promise<null>;
+  unmountPromise: Promise<null>;
+}
 //#endregion
 //#region src/core/index.d.ts
 /** SDK 类 */
@@ -325,9 +414,9 @@ declare class SDKCore {
    * @param plugin - 插件对象 {@link SDKPlugin}
    * @param options - 插件选项
    */
-  use(plugin: SDKPlugin, options?: SDKPlugin['options']): this;
+  use<K extends keyof SDKPlugins>(plugin: SDKPlugin<K>, options?: SDKPlugin<K>['options']): this;
 }
 /** 创建 SDK 实例 */
 declare const sdk: SDKInstance;
 //#endregion
-export { type ApiOptions, type AppOptions, type ComponentsOptions, type ConfigOptions, type I18nOptions, LocaleProps, type RouterOptions, SDKApiPlugin, SDKAppPlugin, SDKComponentsPlugin, SDKConfigPlugin, SDKCore, SDKI18nPlugin, SDKInstance, SDKPlugin, SDKPluginOptions, SDKPlugins, SDKRouterPlugin, SDKStoragePlugin, SDKStorePlugin, type StorageOptions, type StoreOptions, type StoreProps, type StoreSlice, ThemeProps, UserInfo, sdk };
+export { type ApiOptions, type AppOptions, type ComponentsOptions, type ConfigOptions, type I18nOptions, LifeCycleFn, LoadMicroAppConfiguration, LoadableApp, LocaleProps, MicroAppInstance, MicroAppLifeCycles, MicroAppStatus, ObjectType, type RouterOptions, SDKApiPlugin, SDKAppPlugin, SDKComponentsPlugin, SDKConfigPlugin, SDKCore, SDKI18nPlugin, SDKInstance, SDKPlugin, SDKPlugins, SDKRouterPlugin, SDKStoragePlugin, SDKStorePlugin, type StorageOptions, type StoreOptions, type StoreProps, type StoreSlice, ThemeProps, UserInfo, sdk };

package/dist/index.js

@@ -1 +1 @@
-import{Suspense as e,createElement as t,memo as n,useEffect as r,useState as i}from"react";import{Outlet as a,useLocation as o,useNavigate as s}from"react-router-dom";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{loadMicroApp as d}from"qiankun";import{createStore as f,useStore as p}from"zustand";import{useShallow as m}from"zustand/shallow";import{subscribeWithSelector as h}from"zustand/middleware";var g=class{name;_plugins=new Map;mount(e){this.name=e,window[e]=this}extend(e){let t=window[e];if(!t)throw Error(`SDK "${e}" not found`);Object.assign(this,t)}use(e,t={}){let{name:n,install:r}=e;if(!n)throw Error(`SDK - The plugin requires a name`);if(typeof r!=`function`)throw Error(`SDK - The plugin "${n}" requires an install function`);return r(this,t),this._plugins.set(n,{...e,options:t}),this}};const _=new g,v={name:`api`,install(e,t={}){e.api=t}};function y(e){if(!e||typeof e!=`object`)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)===`[object Object]`:!1}function b(e){return e===`__proto__`}function x(e,t){let n=Object.keys(t);for(let r=0;r<n.length;r++){let i=n[r];if(b(i))continue;let a=t[i],o=e[i];S(a)&&S(o)?e[i]=x(o,a):Array.isArray(a)?e[i]=x([],a):y(a)?e[i]=x({},a):(o===void 0||a!==void 0)&&(e[i]=a)}return e}function S(e){return y(e)||Array.isArray(e)}const C={name:`app`,install(e,t={}){e.app=x({menuData:[],allRoutes:[],microApps:[],microAppsInstance:new Map,user:null,permissions:[],settings:{},getDefaultLocale(){return e.storage.getItem(e.storage.localeKey)||e.config?.locale||navigator.language||`zh-CN`},getDefaultTheme(){let t=e.storage.getItem(e.storage.themeKey);if(t)return t;let n=e.config?.theme;if(n)return n;let r=window.matchMedia(`(prefers-color-scheme: dark)`);return r.matches&&r.matches?`dark`:`light`},getRedirectPath(){let t=e.config.defaultPath;if(t)return t;let n=new URLSearchParams(window.location.search),r=e.config.redirectField||`redirect`;return decodeURIComponent(n.get(r)||``)||`/`},initData:()=>{},pageToLogin(){e.storage.removeItem(e.storage.tokenKey),e.app.user=null,e.app.permissions=[],e.app.settings={};let t=location.pathname,n=e.config.loginPath,r=e.config.redirectField||`redirect`,i=t===n?n:`${n}?${r}=${encodeURIComponent(t||`/`)}`;e.router.navigate(i,{replace:!0}),e.app.unmountMicroApp()},unmountMicroApp(t){t?t.forEach(t=>{let n=e.app.microAppsInstance.get(t);n&&(n.unmount(),e.app.microAppsInstance.delete(t),e.app.microApps=e.app.microApps.filter(e=>e.name!==t))}):(e.app.microAppsInstance.forEach(e=>e.unmount()),e.app.microAppsInstance.clear(),e.app.microApps=[])}},t)}},w={layout:{height:`100vh`,display:`flex`,flexDirection:`column`,background:`#f5f7fb`},header:{height:64,padding:`0 24px`,background:`#fff`,borderBottom:`1px solid #e5e7eb`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,boxShadow:`0 2px 8px rgba(0,0,0,0.04)`,zIndex:10},logo:{fontSize:20,fontWeight:700,color:`#1677ff`,cursor:`pointer`,userSelect:`none`},logoutBtn:{height:36,padding:`0 16px`,border:`none`,borderRadius:8,background:`#ff4d4f`,color:`#fff`,cursor:`pointer`,transition:`0.2s`},main:{flex:1,display:`flex`,overflow:`hidden`},sidebar:{width:240,padding:16,background:`#fff`,borderRight:`1px solid #e5e7eb`,overflowY:`auto`},content:{flex:1,padding:20,overflowY:`auto`},contentCard:{minHeight:`100%`,padding:24,background:`#fff`,borderRadius:16,boxShadow:`0 2px 12px rgba(0,0,0,0.04)`},menuItem:{marginBottom:4},menuTitle:{height:42,padding:`0 14px`,display:`flex`,alignItems:`center`,borderRadius:10,color:`#1f2937`,cursor:`pointer`,transition:`0.2s`},menuChildren:{marginLeft:12,paddingLeft:12,borderLeft:`1px solid #e5e7eb`}},T=({items:e=[]})=>{let t=o(),n=s();return e?.length?e.map(e=>{let{key:r,name:i,path:a,children:o,hideInMenu:s=!1}=e;if(s)return null;let c=o&&o.filter(e=>!e.hideInMenu).length>0,d=t.pathname===a,f=e=>{d||(e.currentTarget.style.background=`#f3f4f6`)},p=e=>{d||(e.currentTarget.style.background=`transparent`)},m=()=>{c||n(a)};return u(`div`,{style:w.menuItem,children:[l(`div`,{style:{...w.menuTitle,...d?{background:`#e8f3ff`,color:`#1677ff`}:{},...c?{cursor:`not-allowed`}:{}},onMouseEnter:f,onMouseLeave:p,onClick:m,children:i}),c&&l(`div`,{style:w.menuChildren,children:l(T,{items:o})})]},r)}):null},E=()=>{let t=s(),n=o(),i=()=>{t(`/`)},c=()=>{_.app.pageToLogin()};return r(()=>{if(!_.app.user||Object.keys(_.app.user).length===0)return c();t(n.pathname)},[n.pathname]),u(`div`,{style:w.layout,children:[u(`header`,{style:w.header,children:[l(`div`,{style:w.logo,onClick:i,children:`Logo`}),l(`button`,{style:w.logoutBtn,onClick:c,onMouseEnter:e=>{e.currentTarget.style.opacity=`0.75`},onMouseLeave:e=>{e.currentTarget.style.opacity=`1`},children:`退出登录`})]}),u(`div`,{style:w.main,children:[l(`aside`,{style:w.sidebar,children:l(T,{items:_.app.menuData||[]})}),l(`main`,{style:w.content,children:l(`div`,{style:w.contentCard,children:l(e,{fallback:_.components.renderComponent(`Loading`,{isSuspense:!0}),children:l(a,{})})})})]})]})},D=({isInitData:e=!1,isSuspense:t=!1,isMicroApp:n=!1})=>l(`div`,{style:e?{width:`100%`,height:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`}:{},children:`Loading...`}),O={page:{height:`100vh`,display:`flex`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:16},btn:{height:36,padding:`0 60px`,border:`none`,borderRadius:8,background:`#1677ff`,color:`#fff`,cursor:`pointer`,transition:`0.2s`}},k=()=>{let[e,t]=i(!1);return u(`div`,{style:O.page,children:[l(`h2`,{children:`欢迎登录系统`}),l(`button`,{style:O.btn,onClick:async()=>{if(e)return;t(()=>!0),await new Promise(e=>setTimeout(()=>e(!0),500)),t(()=>!1),_.storage.setItem(_.storage.tokenKey,`123456`);let n=_.app.getRedirectPath();_.router.navigate(n,{replace:!0}),await _.app.initData?.()},onMouseEnter:e=>{e.currentTarget.style.opacity=`0.75`},onMouseLeave:e=>{e.currentTarget.style.opacity=`1`},children:e?`登录中...`:`登录`})]})},A={beforeLoad:[async e=>{console.log(`[LifeCycle] before load %c%s`,`color: green;`,e.name)}],beforeMount:[async e=>{console.log(`[LifeCycle] before mount %c%s`,`color: green;`,e.name)}],afterUnmount:[async e=>{console.log(`[LifeCycle] after unmount %c%s`,`color: green;`,e.name)}]};var j=n(({name:e,rootId:t})=>{let[n,i]=p(_.store,m(e=>[e.microAppLoading,e.setMicroAppLoading]));return r(()=>{if(!e)return;let t=_.app.microAppsInstance.get(e);if(t)t?.mount();else{let n=_.app.microApps.find(t=>t.name===e);if(!n)return;i(!0),t=d(n,{},A),t?.mountPromise?.finally(()=>{i(!1)}),_.app.microAppsInstance.set(e,t)}return()=>{t?.unmount()}},[e]),u(c,{children:[n&&_.components.renderComponent(`Loading`,{isMicroApp:!0}),l(`main`,{id:t})]})});const M=`components`,N={name:M,install(e,n={}){e[M]=x({Layout:E,Loading:D,Login:k,Microapp:j,setComponent:(t,n)=>{if(!t){console.error(`SDKComponentsPlugin - Component cannot be empty`);return}let r=n||t.displayName||t.name;if(!r){console.error(`SDKComponentsPlugin - Component name cannot be empty`);return}e.components[r]=t},getComponent:t=>t?e.components[t]:(console.error(`SDKComponentsPlugin - Component name cannot be empty`),null),renderComponent:(n,r={})=>{let i=e.components.getComponent(n);return i?t(i,r):(console.error(`SDKComponentsPlugin - Component ${n} not found`),null)}},n)}},P=`config`,F={name:P,install(e,t){e[P]=x({env:{},theme:``,locale:``,loginPath:`/login`,defaultPath:``,redirectField:`redirect`},t)}},I=`i18n`,L={name:I,install(e,t){e[I]=x({},t)}},R=`router`,z={name:R,install(e,t){e[R]=x({location:null,navigate:null,matches:null},t)}},B=`storage`,V={name:B,install(e,t){e[B]=x({localeKey:`locale`,themeKey:`theme`,tokenKey:`token`,setItem(e,t){localStorage.setItem(e,t)},getItem(e){return localStorage.getItem(e)},removeItem(e){localStorage.removeItem(e)},clear(){localStorage.clear()}},t)}},H=(e,t)=>({locale:``,setLocale:t=>{e(()=>({locale:t})),_.config.locale=t,_.storage.setItem(_.storage.localeKey,t),document.documentElement.setAttribute(`lang`,t)}}),U=(e,t)=>({microAppLoading:!1,setMicroAppLoading:t=>e(()=>({microAppLoading:t}))}),W=(e,t)=>({theme:``,setTheme:t=>{e(()=>({theme:t})),_.config.theme=t,_.storage.setItem(_.storage.themeKey,t),document.documentElement.setAttribute(`theme`,t)}}),G={user:{},permissions:[],settings:{}},K=(e,t)=>({userInfo:G,setUserInfo:t=>{e(()=>({userInfo:t})),_.app={..._.app,...t}},resetUserInfo:()=>{e(()=>({userInfo:G}))}}),q=e=>f()(h((...t)=>({...H(...t),...U(...t),...W(...t),...K(...t),...Object.values(e||{}).reduce((e,n)=>({...e,...n(...t)}),{})}))),J=`store`,Y={name:J,install(e,t={}){e[J]=q(t)}};export{v as SDKApiPlugin,C as SDKAppPlugin,N as SDKComponentsPlugin,F as SDKConfigPlugin,g as SDKCore,L as SDKI18nPlugin,z as SDKRouterPlugin,V as SDKStoragePlugin,Y as SDKStorePlugin,_ as sdk};
+import{Suspense as e,createElement as t,memo as n,useEffect as r,useState as i}from"react";import{Outlet as a,useLocation as o,useNavigate as s}from"react-router-dom";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{createStore as d,useStore as f}from"zustand";import{useShallow as p}from"zustand/shallow";import{subscribeWithSelector as m}from"zustand/middleware";var h=class{name;_plugins=new Map;mount(e){this.name=e,window[e]=this}extend(e){let t=window[e];if(!t)throw Error(`SDK "${e}" not found`);Object.assign(this,t)}use(e,t={}){let{name:n,install:r}=e;if(!n)throw Error(`SDK - The plugin requires a name`);if(typeof r!=`function`)throw Error(`SDK - The plugin "${n}" requires an install function`);return r(this,t),this._plugins.set(n,{...e,options:t}),this}};const g=new h,_={name:`api`,install(e,t={}){e.api=t}};function v(e){if(!e||typeof e!=`object`)return!1;let t=Object.getPrototypeOf(e);return t===null||t===Object.prototype||Object.getPrototypeOf(t)===null?Object.prototype.toString.call(e)===`[object Object]`:!1}function y(e){return e===`__proto__`}function b(e,t){let n=Object.keys(t);for(let r=0;r<n.length;r++){let i=n[r];if(y(i))continue;let a=t[i],o=e[i];x(a)&&x(o)?e[i]=b(o,a):Array.isArray(a)?e[i]=b([],a):v(a)?e[i]=b({},a):(o===void 0||a!==void 0)&&(e[i]=a)}return e}function x(e){return v(e)||Array.isArray(e)}const S={name:`app`,install(e,t={}){e.app=b({user:null,menus:[],permissions:[],settings:{},microApps:[],microAppsInstance:new Map,initData:void 0,loadMicroApp:void 0,getDefaultLocale(){return e.storage.getItem(e.storage.localeKey)||e.config?.locale||navigator.language||`zh-CN`},getDefaultTheme(){let t=e.storage.getItem(e.storage.themeKey);if(t)return t;let n=e.config?.theme;if(n)return n;let r=window.matchMedia(`(prefers-color-scheme: dark)`);return r.matches&&r.matches?`dark`:`light`},getRedirectPath(){let t=e.config.defaultPath;if(t)return t;let n=new URLSearchParams(window.location.search),r=e.config.redirectField||`redirect`;return decodeURIComponent(n.get(r)||``)||`/`},pageToLogin(){e.storage.removeItem(e.storage.tokenKey),e.store.getState().resetUserInfo();let t=location.pathname,n=e.config.loginPath,r=e.config.redirectField||`redirect`,i=t===n?n:`${n}?${r}=${encodeURIComponent(t||`/`)}`;e.router.navigate(i,{replace:!0}),e.app.unmountMicroApp()},unmountMicroApp(t){t?t.forEach(t=>{let n=e.app.microAppsInstance.get(t);n&&(n.unmount(),e.app.microAppsInstance.delete(t),e.app.microApps=e.app.microApps.filter(e=>e.name!==t))}):(e.app.microAppsInstance.forEach(e=>e.unmount()),e.app.microAppsInstance.clear(),e.app.microApps=[])}},t)}},C={layout:{height:`100vh`,display:`flex`,flexDirection:`column`,background:`#f5f7fb`},header:{height:64,padding:`0 24px`,background:`#fff`,borderBottom:`1px solid #e5e7eb`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,boxShadow:`0 2px 8px rgba(0,0,0,0.04)`,zIndex:10},logo:{fontSize:20,fontWeight:700,color:`#1677ff`,cursor:`pointer`,userSelect:`none`},logoutBtn:{height:36,padding:`0 16px`,border:`none`,borderRadius:8,background:`#ff4d4f`,color:`#fff`,cursor:`pointer`,transition:`0.2s`},main:{flex:1,display:`flex`,overflow:`hidden`},sidebar:{width:240,padding:16,background:`#fff`,borderRight:`1px solid #e5e7eb`,overflowY:`auto`},content:{flex:1,padding:20,overflowY:`auto`},contentCard:{minHeight:`100%`,padding:24,background:`#fff`,borderRadius:16,boxShadow:`0 2px 12px rgba(0,0,0,0.04)`},menuItem:{marginBottom:4},menuTitle:{height:42,padding:`0 14px`,display:`flex`,alignItems:`center`,borderRadius:10,color:`#1f2937`,cursor:`pointer`,transition:`0.2s`},menuChildren:{marginLeft:12,paddingLeft:12,borderLeft:`1px solid #e5e7eb`}},w=({items:e=[]})=>{let t=o(),n=s();return e?.length?e.map(e=>{let{key:r,name:i,path:a,children:o,hideInMenu:s=!1}=e;if(s)return null;let c=o&&o.filter(e=>!e.hideInMenu).length>0,d=t.pathname===a,f=e=>{d||(e.currentTarget.style.background=`#f3f4f6`)},p=e=>{d||(e.currentTarget.style.background=`transparent`)},m=()=>{c||n(a)};return u(`div`,{style:C.menuItem,children:[l(`div`,{style:{...C.menuTitle,...d?{background:`#e8f3ff`,color:`#1677ff`}:{},...c?{cursor:`not-allowed`}:{}},onMouseEnter:f,onMouseLeave:p,onClick:m,children:i}),c&&l(`div`,{style:C.menuChildren,children:l(w,{items:o})})]},r)}):null},T=()=>{let t=s(),n=o(),i=()=>{t(`/`)},c=()=>{g.app.pageToLogin()};return r(()=>{if(!g.app.user||Object.keys(g.app.user).length===0)return c();t(n.pathname)},[n.pathname]),u(`div`,{style:C.layout,children:[u(`header`,{style:C.header,children:[l(`div`,{style:C.logo,onClick:i,children:`Logo`}),l(`button`,{style:C.logoutBtn,onClick:c,onMouseEnter:e=>{e.currentTarget.style.opacity=`0.75`},onMouseLeave:e=>{e.currentTarget.style.opacity=`1`},children:`退出登录`})]}),u(`div`,{style:C.main,children:[l(`aside`,{style:C.sidebar,children:l(w,{items:g.app.menus||[]})}),l(`main`,{style:C.content,children:l(`div`,{style:C.contentCard,children:l(e,{fallback:g.components.renderComponent(`Loading`,{isSuspense:!0}),children:l(a,{})})})})]})]})},E=({isInitData:e=!1,isSuspense:t=!1,isMicroApp:n=!1})=>l(`div`,{style:e?{width:`100%`,height:`100%`,display:`flex`,alignItems:`center`,justifyContent:`center`}:{},children:`Loading...`}),D={page:{height:`100vh`,display:`flex`,flexDirection:`column`,justifyContent:`center`,alignItems:`center`,gap:16},btn:{height:36,padding:`0 60px`,border:`none`,borderRadius:8,background:`#1677ff`,color:`#fff`,cursor:`pointer`,transition:`0.2s`}},O=()=>{let[e,t]=i(!1);return u(`div`,{style:D.page,children:[l(`h2`,{children:`欢迎登录系统`}),l(`button`,{style:D.btn,onClick:async()=>{if(e)return;t(()=>!0),await new Promise(e=>setTimeout(()=>e(!0),500)),t(()=>!1),g.storage.setItem(g.storage.tokenKey,`123456`);let n=g.app.getRedirectPath();g.router.navigate(n,{replace:!0}),await g.app.initData?.()},onMouseEnter:e=>{e.currentTarget.style.opacity=`0.75`},onMouseLeave:e=>{e.currentTarget.style.opacity=`1`},children:e?`登录中...`:`登录`})]})};var k=n(({name:e,rootId:t})=>{let[n,i]=f(g.store,p(e=>[e.microAppLoading,e.setMicroAppLoading]));return r(()=>{if(!e)return;let t=g.app.microAppsInstance.get(e);if(t)t?.mount();else{let n=g.app.microApps.find(t=>t.name===e);if(!n)return;i(!0),t=g.app.loadMicroApp?.(n,{},g.config.lifeCycles),t?.mountPromise?.finally(()=>{i(!1)}),g.app.microAppsInstance.set(e,t)}return()=>{t?.unmount()}},[e]),u(c,{children:[n&&g.components.renderComponent(`Loading`,{isMicroApp:!0}),l(`main`,{id:t})]})});const A=`components`,j={name:A,install(e,n={}){e[A]=b({Layout:T,Loading:E,Login:O,Microapp:k,setComponent:(t,n)=>{if(!t){console.error(`SDKComponentsPlugin - Component cannot be empty`);return}let r=n||t.displayName||t.name;if(!r){console.error(`SDKComponentsPlugin - Component name cannot be empty`);return}e.components[r]=t},getComponent:t=>t?e.components[t]:(console.error(`SDKComponentsPlugin - Component name cannot be empty`),null),renderComponent:(n,r={})=>{let i=e.components.getComponent(n);return i?t(i,r):(console.error(`SDKComponentsPlugin - Component ${n} not found`),null)}},n)}},M=`config`,N={name:M,install(e,t){e[M]=b({env:{},theme:``,locale:``,loginPath:`/login`,defaultPath:``,redirectField:`redirect`,lifeCycles:{beforeLoad:e=>console.log(`[LifeCycle] before load`,e.name),beforeMount:e=>console.log(`[LifeCycle] before mount`,e.name),afterUnmount:e=>console.log(`[LifeCycle] after unmount`,e.name)}},t)}},P=`i18n`,F={name:P,install(e,t){e[P]=b({},t)}},I=`router`,L={name:I,install(e,t){e[I]=b({location:null,navigate:null,matches:null},t)}},R=`storage`,z={name:R,install(e,t){e[R]=b({localeKey:`locale`,themeKey:`theme`,tokenKey:`token`,setItem(e,t){localStorage.setItem(e,t)},getItem(e){return localStorage.getItem(e)},removeItem(e){localStorage.removeItem(e)},clear(){localStorage.clear()}},t)}},B=(e,t)=>({locale:``,setLocale:t=>{e(()=>({locale:t})),g.config.locale=t,g.storage.setItem(g.storage.localeKey,t),document.documentElement.setAttribute(`lang`,t)}}),V=(e,t)=>({microAppLoading:!1,setMicroAppLoading:t=>e(()=>({microAppLoading:t}))}),H=(e,t)=>({theme:``,setTheme:t=>{e(()=>({theme:t})),g.config.theme=t,g.storage.setItem(g.storage.themeKey,t),document.documentElement.setAttribute(`theme`,t)}}),U={user:null,menus:[],permissions:[],settings:{}},W=(e,t)=>({userInfo:U,setUserInfo:t=>{e(()=>({userInfo:t})),g.app={...g.app,...t}},resetUserInfo:()=>{e(()=>({userInfo:U})),g.app={...g.app,...U}}}),G=e=>d()(m((...t)=>({...B(...t),...V(...t),...H(...t),...W(...t),...Object.values(e||{}).reduce((e,n)=>({...e,...n(...t)}),{})}))),K=`store`,q={name:K,install(e,t={}){e[K]=G(t)}};export{_ as SDKApiPlugin,S as SDKAppPlugin,j as SDKComponentsPlugin,N as SDKConfigPlugin,h as SDKCore,F as SDKI18nPlugin,L as SDKRouterPlugin,z as SDKStoragePlugin,q as SDKStorePlugin,g as sdk};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zxiaosi/sdk",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0",
   "description": "A micro frontend kit",
   "keywords": [
     "micro frontend",
@@ -31,19 +31,16 @@
     "build": "tsdown",
     "dev": "tsdown --watch"
   },
-  "dependencies": {
-    "axios": "^1.13.6"
-  },
+  "dependencies": {},
   "devDependencies": {
-    "@tsdown/css": "^0.22.1",
+    "@tsdown/css": "^0.22.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "es-toolkit": "^1.47.0",
-    "tsdown": "^0.22.1",
+    "es-toolkit": "^1.47.1",
+    "tsdown": "^0.22.3",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {
-    "qiankun": "^2.10.16",
     "react": "^18.3.1 || >=19.0.0",
     "react-dom": "^18.3.1 || >=19.0.0",
     "react-router-dom": "^6.30.0",