@xingtukeji/micro 1.0.2 → 1.0.3

package/dist/style.css

@@ -0,0 +1 @@
+.xt-micro{background-color:#fff}.xt-micro:before{align-items:center;content:"加载中";display:flex;justify-content:center;inset:0;position:absolute;z-index:-1}.micro-iframe{border:none;height:100%;margin:0;padding:0;width:100%}.micro-iframe:after{align-items:center;background:#fff;content:"加载中";display:flex;justify-content:center;inset:0;position:absolute}

package/dist/types/api.d.ts

@@ -0,0 +1,21 @@
+import { AppOption, App } from './index.d';
+import { microInit } from './child';
+/**
+ * 安装微应用
+ * @param app
+ */
+export declare const setupApp: (app: AppOption) => App | undefined;
+export declare const getApp: (name: string) => App;
+/**
+ * 启动微应用
+ * @param name 应用名称
+ * @param options 应用配置
+ * @returns
+ */
+export declare const startApp: (name: string, options?: Partial<AppOption>) => Promise<unknown>;
+/**
+ * 停止指定名称的应用程序
+ * @param {string} name - 应用程序的名称
+ */
+export declare const stopApp: (name: string) => void;
+export { microInit };

package/dist/types/child.d.ts

@@ -0,0 +1,16 @@
+import { MicroInitOptions } from './index.d';
+/**
+ * 微应用-子应用初始化
+ * 此时方法上下文是子应用
+ * 非必须，但建议使用
+ * @param options
+ */
+export declare const microInit: (options?: MicroInitOptions) => Promise<void>;
+/**
+ * 同步子应用路由到主应用路由
+ */
+export declare function syncUrlToWindow(): void;
+/**
+ * 同步主应用路由到子应用
+ */
+export declare function syncUrlToIframe(iframeWindow: Window): void;

package/dist/types/components/XTMicroView.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import('vue').DefineComponent<{
+    appId: StringConstructor;
+}, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, Readonly<import('vue').ExtractPropTypes<{
+    appId: StringConstructor;
+}>>, {}, {}>;
+export default _default;

package/dist/types/index.d.ts

@@ -0,0 +1,27 @@
+import { MicroApp } from './parent';
+export interface AppOption {
+  name: string
+  url: string
+  el?: HTMLElement | string
+  preload?: boolean
+  token?: () => string | string
+  params?: { [key: string]: any }
+  sync?: boolean
+}
+export interface App extends AppOption {
+  instance: MicroApp
+}
+export interface MicroInitOptions {
+  hideHeaderCssSelector?: string
+  authHandler?: (token: string) => void
+}
+
+// 扩展 Window 接口，防止ts报错
+declare global {
+  interface Window {
+    [key: string]: any
+  }
+}
+
+
+export * from './api'

package/dist/types/parent.d.ts

@@ -0,0 +1,28 @@
+import { AppOption, App } from './index.d';
+export declare const isMicro: import('vue').Ref<boolean>;
+export declare class MicroApp {
+    app: App | AppOption;
+    dom: HTMLIFrameElement | undefined;
+    panel: HTMLElement | undefined;
+    constructor(app: AppOption);
+    mount(el: HTMLElement | string | undefined, isHide?: boolean): void;
+    unmount(): void;
+    /**
+     * 预加载渲染
+     * TODO 还差用户切走之后，如何将ifr还原回去，等待下次载入
+     * @param el 挂载dom对象
+     */
+    preloadRender(el: HTMLElement | string | undefined): void;
+    /**
+     * 预加载app，先放到body，待启动时，挪过来
+     */
+    preload(): void;
+    changeOptions(options: Partial<AppOption>): void;
+    onLoad(_event: Event): void;
+    onUnload(_event: Event): void;
+    onError(): void;
+}
+/**
+ * 初始化主应用微前端
+ */
+export declare const mainMicroInit: () => void;

package/dist/types/types.d.ts

@@ -0,0 +1 @@
+export declare const CONSTANT: Record<string, string>;

package/dist/types/utils.d.ts

@@ -0,0 +1,8 @@
+export declare function getQueryParameter(name: string, url?: string): string | null;
+export declare function getAbsolutePath(url: string | undefined, base: string, hash?: boolean): string | undefined;
+export declare function anchorElementGenerator(url: string): HTMLAnchorElement;
+export declare function getAnchorElementQueryMap(anchorElement: HTMLAnchorElement): {
+    [key: string]: string;
+};
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay: number): (...args: Parameters<T>) => void;
+export declare function addOrReplaceUrlParam(url: string, paramName: string, paramValue: string): string;

package/package.json

@@ -1,14 +1,20 @@
 {
   "name": "@xingtukeji/micro",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "private": false,
   "description": "",
-  "main": "index.ts",
+  "main": "dist/index.js",
+  "types": "dist/types/index.d.ts",
   "author": "",
   "license": "ISC",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "scripts": {}
+  "devDependencies": {
+    "vite-plugin-dts": "^4.5.0"
+  },
+  "scripts": {
+    "build": "vite build"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,23 @@
+const defaultList = [
+  require('postcss-import'), // 使css支持@import相互引入
+  // require('postcss-simple-vars'), // 使css支持变量($blue: #056ef0;)，老项目如果用到了sass里的变量，需要加载该插件
+  require('postcss-utilities'), // 支持常用工具(具体参照: https://github.com/ismamz/postcss-utilities#:~:text=postcss-utilities%20is%20a%20PostCSS%20plugin%20that%20includes%20the,started%20using%20postcss-utilities%20Try%20it%20in%20the%20browser%21)
+  require('postcss-nested'), // 支持嵌套语法，貌似postcss-preset-env里含语法嵌套，出现嵌套问题再尝试加载此插件
+  require('postcss-preset-env')({
+    stage: 0
+  }), // 对css4语法进行降阶(如自定义选择器),已经包含autoprefixer
+]
+const developmentList = [
+
+]
+
+const productionList = [
+  require('cssnano'), // css压缩
+]
+module.exports = {
+  parser: 'postcss-scss',
+  plugins: [
+    ...defaultList,
+    ...(process.env.NODE_ENV === 'development' ? developmentList : productionList)
+  ]
+}

package/src/api.ts

@@ -0,0 +1,108 @@
+import type {AppOption, App} from './index.d'
+import {MicroApp} from './parent'
+import {microInit} from './child'
+
+let _apps: Record<string, App> = {}
+
+const defaultAppOption: AppOption = {
+  url: '',
+  name: '',
+  sync: true
+}
+/**
+ * 安装微应用
+ * @param app
+ */
+export const setupApp = (app: AppOption): App | undefined => {
+  // 如果app的url属性不存在或者为空字符串或者为'undefined'，则打印错误信息并返回
+  if(!app.url || app.url === '' || app.url === 'undefined'){
+    console.error('app url is required', app)
+    return
+  }
+  // 将defaultAppOption对象中的属性赋值给app对象
+  const op = Object.assign({}, app, defaultAppOption)
+  // 将app对象中的属性和MicroApp类的实例赋值给_apps对象中的app.name属性
+  _apps[app.name] = {
+    ...op,
+    instance: new MicroApp(app),
+  }
+  // 返回_apps对象中的app.name属性
+  return _apps[app.name]
+}
+
+// 导出一个函数，用于获取指定名称的应用
+export const getApp = (name: string): App => {
+  // 返回指定名称的应用
+  return _apps[name]
+}
+
+/**
+ * 设置应用配置
+ * @param {App} app - 应用对象
+ * @param {Partial<AppOption>} options - 应用选项（可选）
+ * @returns {App} - 设置后的应用对象
+ */
+const setApp = (app: App, options?: Partial<AppOption>) => {
+  // 返回一个对象，该对象将app和options合并
+  return (_apps[app.name] = {
+    ...app,
+    ...options,
+  })
+}
+/**
+ * 启动微应用
+ * @param name 应用名称
+ * @param options 应用配置
+ * @returns
+ */
+export const startApp = (name: string, options?: Partial<AppOption>) => {
+  // 返回一个Promise对象
+  return new Promise((resolve, reject) => {
+    // 调用getApp函数，传入name参数，获取app对象
+    let app = getApp(name)
+    // 如果app对象存在
+    if (app) {
+      // 如果options参数存在
+      if (options) {
+        // 调用app对象的changeOptions方法，传入options参数
+        app.instance.changeOptions(options)
+        // 调用setApp函数，传入app对象和options参数，重新设置app对象
+        app = setApp(app, options)
+      }
+      // 如果app对象的preload属性存在
+      if (app.preload) {
+        // 调用app对象的preloadRender方法，传入app对象的el属性
+        app.instance.preloadRender(app.el)
+      } else {
+        // 否则，调用app对象的mount方法，传入app对象的el属性
+        app.instance.mount(app.el)
+      }
+      // 调用_postMicro函数，传入app对象
+      // _postMicro(app)
+      // 调用resolve方法，传入app对象
+      resolve(app)
+    } else {
+      // 否则，调用reject方法，传入'app not found'字符串
+      reject('app not found')
+    }
+  })
+}
+
+/**
+ * 停止指定名称的应用程序
+ * @param {string} name - 应用程序的名称
+ */
+export const stopApp = (name: string) => {
+  // 获取名为name的app
+  let app = getApp(name)
+  // 如果app存在
+  if (app) {
+    // 调用app的unmount方法
+    app.instance.unmount()
+  }
+}
+
+
+export {
+  microInit
+}

package/src/child.ts

@@ -0,0 +1,186 @@
+import {getQueryParameter} from './utils'
+import {CONSTANT} from './types'
+import {MicroApp} from './parent'
+import {MicroInitOptions} from './index.d'
+/**
+ * 微应用-子应用初始化
+ * 此时方法上下文是子应用
+ * 非必须，但建议使用
+ * @param options
+ */
+export const microInit = async (options: MicroInitOptions = {}) => {
+  //处理url参数
+  const micro = getQueryParameter(CONSTANT.IS_MICRO)
+  const microName = getQueryParameter(CONSTANT.MICRO_NAME)
+  //设置环境变量
+  if (micro) {
+    window[CONSTANT.IS_MICRO] = true
+  }
+  // console.log(`子应用「${microName}」初始化`, document)
+  // 尝试全局隐藏 header，该方式有一定的入侵，
+  function addGlobalStyle(css: string) {
+    var styleSheet = document.styleSheets[0];
+    if (!styleSheet) {
+        var style = document.createElement('style');
+        document.head.appendChild(style);
+        styleSheet = style.sheet!;
+    }
+    styleSheet.insertRule(css, styleSheet.cssRules.length);
+  }
+  // addGlobalStyle('._hedaui-header { display: none !important; }')
+  if(options.hideHeaderCssSelector) {
+    addGlobalStyle(`${options.hideHeaderCssSelector} { display: none !important; }`)
+  }
+  // 子应用监听message，设置环境变量
+  window.addEventListener('message', (e) => {
+    if (e.data.cmd === `$xt/micro/${microName}`) {
+      console.log('子应用收到消息：', microName, )
+      window[CONSTANT.MICRO_APP] = { ...e.data.data, mainBaseURL: e.origin }
+    }
+  })
+  patchIframeHistory(window)
+
+  // window.addEventListener('load', () => {
+  //   console.log('子应用加载完成：', microName, window.location.href)
+  //   // 监听 popstate 事件
+  //   // window.addEventListener('popstate', function (event) {
+  //   //   console.log('History state changed:', event.state);
+  //   //   // 在这里可以根据新的历史状态进行相应的页面更新操作
+  //   // });
+  //   // patchIframeHistory(window, "http://localhost:5173", "http://localhost:8888")
+  // })
+
+  
+
+  //处理token
+  const token = getQueryParameter(CONSTANT.MICRO_TOKEN)
+  options.authHandler && token &&  await options.authHandler(token)
+}
+
+//子应用给父应用同步路由
+const _syncMicroPath = (app: MicroApp) => {
+  // console.log(`子应用给父应用「${app.app.name}」同步路由`, app.dom)
+  const parentWindow = window.parent;
+  const message = 'Hello from child!';
+  parentWindow.postMessage(message, 'http://localhost:8080');
+  app.dom?.contentWindow?.postMessage
+  ({
+    cmd: `$xt/micro/${app.app.name}/sync`,
+    data: {
+      name: app.app.name,
+      url: app.app.url,
+      preload: app.app.preload,
+      // params: app.params
+    }
+  })
+}
+
+/**
+ * 对iframe的history的pushState和replaceState进行修改
+ * 将从location劫持后的数据修改回来，防止跨域错误
+ * 同步路由到主应用
+ * @param iframeWindow
+ * @param appHostPath 子应用的 host path
+ * @param mainHostPath 主应用的 host path
+ */
+function patchIframeHistory(iframeWindow: Window): void {
+  const history = iframeWindow.history;
+  const rawHistoryPushState = history.pushState;
+  const rawHistoryReplaceState = history.replaceState;
+  history.pushState = function (data: any, title: string, url?: string): void {
+    // debugger;
+    // const baseUrl =
+    //   mainHostPath + iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
+    // const mainUrl = getAbsolutePath(url?.replace(appHostPath, ""), baseUrl);
+    // const ignoreFlag = url === undefined;
+
+    rawHistoryPushState.call(history, data, title, url);
+    // if (ignoreFlag) return;
+    // updateBase(iframeWindow, appHostPath, mainHostPath);
+    syncUrlToWindow();
+  };
+  history.replaceState = function (data: any, title: string, url?: string): void {
+    // debugger;
+    // const baseUrl =
+    //   mainHostPath + iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
+    // const mainUrl = getAbsolutePath(url?.replace(appHostPath, ""), baseUrl);
+    // const ignoreFlag = url === undefined;
+
+    rawHistoryReplaceState.call(history, data, title, url);
+    // if (ignoreFlag) return;
+    // updateBase(iframeWindow, appHostPath, mainHostPath);
+    syncUrlToWindow();
+  };
+}
+/**
+ * 同步子应用路由到主应用路由
+ */
+// 导出一个函数，用于同步url到window
+export function syncUrlToWindow(): void {
+  if(!window[CONSTANT.MICRO_APP]) return
+  const { name, sync, mainBaseURL } = window[CONSTANT.MICRO_APP];
+  // console.trace('syncUrlToWindow')
+  //todo 此处应该postmessage到主应用，主应用再进行同步路由
+  const curUrl = window.location.pathname + window.location.search + window.location.hash;
+  window.parent.postMessage({
+    cmd: '$xt/micro/sync',
+    data: {
+      name: name,
+      url: window.encodeURIComponent(curUrl)
+    }
+  }, mainBaseURL);
+  
+  // debugger
+  // let winUrlElement = anchorElementGenerator(window.parent.location.href);
+  // const queryMap = getAnchorElementQueryMap(winUrlElement);
+  // // 非同步且url上没有当前id的查询参数，否则就要同步参数或者清理参数
+  // if (!sync && !queryMap[name]) { 
+  //   (winUrlElement = null)
+  //   return
+  // };
+  
+  // const curUrl = iframeWindow.location.pathname + iframeWindow.location.search + iframeWindow.location.hash;
+  // let validShortPath = "";
+  // // 同步
+  // if (sync) {
+  //   queryMap[name] = window.encodeURIComponent(
+  //     curUrl
+  //   );
+  //   // 清理
+  // } else {
+  //   delete queryMap[name];
+  // }
+  // const newQuery =
+  //   "?" +
+  //   Object.keys(queryMap)
+  //     .map((key) => key + "=" + queryMap[key])
+  //     .join("&");
+  // winUrlElement.search = newQuery;
+  // console.log('window', iframeWindow.parent.location.href)
+  // // if (winUrlElement.href !== iframeWindow.parent.location.href) {
+  // //   console.log('window', iframeWindow.parent)
+  // //   // iframeWindow.parent.history.replaceState(null, "", winUrlElement.href);
+  // //   // window.history.replaceState(null, "", winUrlElement.href);
+  // // }
+  // winUrlElement = null;
+}
+
+/**
+ * 同步主应用路由到子应用
+ */
+export function syncUrlToIframe(iframeWindow: Window): void {
+  // 获取当前路由路径
+  const { pathname, search, hash } = iframeWindow.location;
+  const { id, url, sync, execFlag, prefix, inject } = iframeWindow.__WUJIE;
+
+  // 只在浏览器刷新或者第一次渲染时同步
+  const idUrl = sync && !execFlag ? getSyncUrl(id, prefix) : url;
+  // 排除href跳转情况
+  const syncUrl = (/^http/.test(idUrl) ? null : idUrl) || url;
+  const { appRoutePath } = appRouteParse(syncUrl);
+
+  const preAppRoutePath = pathname + search + hash;
+  if (preAppRoutePath !== appRoutePath) {
+    iframeWindow.history.replaceState(null, "", inject.mainHostPath + appRoutePath);
+  }
+}

package/src/components/XTMicroView.vue

@@ -0,0 +1,72 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch, onUnmounted } from 'vue';
+import { startApp, stopApp } from '../api'
+const props = defineProps({
+  appId: String
+})
+
+const refPanel = ref()
+const init = () => {
+  props.appId && startApp(props.appId, {
+    el: refPanel.value
+  });
+}
+
+watch(() => props.appId, (newVal, oldVal) => {
+  if(newVal !== oldVal && oldVal){
+    stopApp(oldVal)
+  }
+  init()
+})
+
+
+onMounted(() => {
+  init()
+})
+
+onUnmounted(()=>{
+  console.log('微应用销毁', props.appId)
+})
+</script>
+
+<template>
+  <div ref="refPanel" class="xt-micro w-100% h-100% overflow-hidden"></div>
+</template>
+
+<style lang="postcss" scoped></style>
+<style>
+.xt-micro{
+  background-color: #fff;
+}
+.xt-micro::before{
+  content: '加载中';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right:0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: -1;
+}
+.micro-iframe{
+  width: 100%;
+  height: 100%;
+  border: none;
+  margin: 0;
+  padding: 0;
+}
+.micro-iframe::after{
+  content: '加载中';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right:0;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+</style>

package/src/index.d.ts

@@ -0,0 +1,29 @@
+
+import {MicroApp} from './parent'
+
+export interface AppOption {
+  name: string
+  url: string
+  el?: HTMLElement | string
+  preload?: boolean
+  token?: () => string | string
+  params?: { [key: string]: any }
+  sync?: boolean
+}
+export interface App extends AppOption {
+  instance: MicroApp
+}
+export interface MicroInitOptions {
+  hideHeaderCssSelector?: string
+  authHandler?: (token: string) => void
+}
+
+// 扩展 Window 接口，防止ts报错
+declare global {
+  interface Window {
+    [key: string]: any
+  }
+}
+
+
+export * from './api'

package/src/index.ts

@@ -0,0 +1,16 @@
+
+
+import type { App } from 'vue'
+import XTMicroView from './components/XTMicroView.vue'
+
+
+
+import {mainMicroInit} from './parent'
+export * from './api'
+
+export default {
+  install: (app: App, _options: any = {}) => {
+    app.component("xt-micro-view", XTMicroView);
+    mainMicroInit()
+  }
+}