@xingtukeji/micro 1.0.2 → 1.0.4

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.4",
   "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/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "jsx": "preserve",
+    "sourceMap": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "types": ["element-plus/global"],
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "./dist",
+        "rootDir": "./src",
+  },
+  "exclude": ["node_modules", "dist"],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/vite.config.ts

@@ -0,0 +1,27 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts';
+// import { name, version } from './package.json'
+
+export default defineConfig(({ mode }) => {
+  return {
+    base: './',
+    build: {
+      lib: {
+        entry: ['src/index.ts'],
+        name: '__xt_micro__',
+        formats: ['es'],
+        fileName: (format, entryName) => `index.js`,
+      },
+      target: 'es2015',
+      emptyOutDir: true, //去掉打包到项目外的警告
+      outDir: `./dist`,
+    },
+    plugins: [
+      vue(),
+      dts({
+        outDir: 'dist/types'
+    })
+    ],
+  }
+})

package/index.ts

@@ -1,291 +0,0 @@
-import qs from 'qs'
-import { ref } from 'vue'
-
-export interface AppOption {
-  name: string
-  url: string
-  el?: HTMLElement | string
-  preload?: boolean
-  token?: ()=>string | string
-  params?: { [key: string]: any }
-}
-export interface App extends AppOption {
-  instance: MicroApp
-}
-
-const _apps = []
-const CONSTANT = {
-  KEY: '$xtm',  // 父应用注入子应用实例的key
-  IS_MICRO: '__XT_MICRO', // 是否在微应用中
-  MICRO_NAME: '__XT_MICRO_NAME',  // 微应用名称
-  MICRO_TOKEN: '__XT_MICRO_TOKEN', // 微应用token
-  MICRO_APP: '__XT_MICRO_APP', // 微应用实例
-  DOM_ID_PREFIX: 'xt-micro-ifr-'  // dom id前缀
-}
-//dom id前缀
-// export const DOM_ID_PREFIX = 'xt-ifr-'
-
-/**
- * 判断是否在微应用中
- */
-const _isMicro = ref(false)
-Object.defineProperty(window, CONSTANT.IS_MICRO, {
-  get: function () {
-    return _isMicro.value
-  },
-  set: function (newValue) {
-    _isMicro.value = newValue
-  }
-})
-export const isMicro = _isMicro
-
-/**
- * 生成微应用id
- * 增加前缀
- * @param name 微应用名称（唯一）
- * @returns 返回dom id
- */
-const generateId = (name: string) => {
-  return `${CONSTANT.DOM_ID_PREFIX}${name}`
-}
-/**
- * 处理微应用url
- * @param url 微应用url
- * @param params 携带参数
- * @returns 拼接后的url
- */
-const generateURL = (app: AppOption) => {
-  function isObject(variable) {
-    return variable !== null && typeof variable === 'object' && !Array.isArray(variable)
-  }
-  const _parmas = typeof app.params === 'function' ? app.params() : isObject(app.params) ? app.params : {}
-  const _token = typeof app.token === 'function' ? app.token() : isObject(app.token) ? app.token : {}
-  return `${app.url}?${CONSTANT.IS_MICRO}=true
-            &${CONSTANT.MICRO_NAME}=${app.name}
-            &${CONSTANT.MICRO_TOKEN}=${_token}
-            &${qs.stringify(_parmas)}`
-}
-
-class MicroApp {
-  app: App | AppOption
-  dom: HTMLIFrameElement
-  panel: HTMLElement
-
-  constructor(app: AppOption) {
-    this.app = app
-    app.preload && this.preload()
-    return this
-  }
-
-  mount(el: HTMLElement | string, isHide = false) {
-    let panel: HTMLElement | null
-    if (el) {
-      if (typeof el === 'string') {
-        panel = document.querySelector(el)
-      } else {
-        panel = el
-      }
-      //这里清空了容器的内容，为了方便，如果还有其他元素需要特别处理，而且也影响元素再复用
-      panel.innerHTML = ''
-    } else {
-      panel = document.body
-    }
-
-    if (panel) {
-      let ifr = <HTMLIFrameElement>document.getElementById(generateId(this.app.name))
-      if (!ifr) {
-        ifr = document.createElement('iframe')
-        ifr.id = generateId(this.app.name)
-        const url = generateURL(this.app)
-        ifr.src = url
-        ifr.classList.add('micro-iframe')
-        ifr.addEventListener('load', (event)=>{
-          this.onLoad.call(this, event)
-        })
-        ifr.addEventListener('error', this.onError)
-        ifr.addEventListener('unload', this.onUnload)
-        this.dom = ifr
-      }
-      isHide ? (ifr.style.display = 'none') : ifr.style.removeProperty('display')
-      this.panel = panel
-      panel.appendChild(ifr)
-      
-    } else {
-      throw new Error('el not found')
-    }
-  }
-
-  unmount() {
-    const appDom = document.getElementById(generateId(this.app.name))
-    if (appDom) {
-      if (this.preload) {
-        appDom.style.display = 'none'
-        document.body.appendChild(appDom)
-      } else {
-        this.panel.removeChild(appDom)
-      }
-    } else {
-      throw new Error('app dom not found')
-    }
-  }
-
-  /**
-   * 预加载渲染
-   * TODO 还差用户切走之后，如何将ifr还原回去，等待下次载入
-   * @param el 挂载dom对象
-   */
-  preloadRender(el: HTMLElement | string) {
-
-    let appDom: HTMLElement | null = this.dom
-    this.mount(el)
-
-    // const appDom = document.getElementById(generateId(this.app.name))
-    // if (!appDom) {
-    //
-    //   this.render(el)
-    //   return
-    // }
-    //
-    // let panel
-    // if (typeof el === 'string') {
-    //   panel = document.querySelector(el)
-    // } else {
-    //   panel = el
-    // }
-    // appDom!.style.removeProperty('display')
-    // panel?.appendChild(appDom)
-  }
-
-  /**
-   * 预加载app，先放到body，待启动时，挪过来
-   */
-  preload() {
-    this.mount(undefined, true)
-  }
-
-  changeOptions(options: Partial<AppOption>) {
-    this.app = {
-      ...this.app,
-      ...options,
-    }
-  }
-
-  onLoad(event: Event) {
-    console.log('micro app load', this, event)
-    _postMicro(this.app)
-  }
-
-  onUnload() {
-
-  }
-
-  onError() {
-
-  }
-}
-
-/**
- * 安装微应用
- * @param app
- */
-export const setupApp = (app: AppOption) => {
-  //在子应用加载完成后，发送消息给子应用
-  // setTimeout(() => {
-  //   _postMicro(app)
-  // },0)
-  return (_apps[app.name] = {
-    ...app,
-    instance: new MicroApp(app),
-  })
-}
-
-export const getApp = (name: string) => {
-  return _apps[name]
-}
-
-const setApp = (app: App, options?: Partial<AppOption>) => {
-  return (_apps[app.name] = {
-    ...app,
-    ...options,
-  })
-}
-
-/**
- * 启动微应用
- * @param name 应用名称
- * @param options 应用配置
- * @returns
- */
-export const startApp = (name: string, options?: Partial<AppOption>) => {
-  return new Promise((resolve, reject) => {
-    let app = getApp(name)
-    if (app) {
-      if (options) {
-        app.instance.changeOptions(options)
-        app = setApp(app, options)
-      }
-      if (app.preload) {
-        app.instance.preloadRender(app.el)
-      } else {
-        app.instance.mount(app.el)
-      }
-      // _postMicro(app)
-      resolve(app)
-    } else {
-      reject('app not found')
-    }
-  })
-}
-
-export const stopApp = (name: string) => {
-  let app = getApp(name)
-  if (app) {
-    app.instance.unmount()
-  }
-}
-
-function getQueryParameter(name, url = window.location.href) {
-  name = name.replace(/[\[\]]/g, "\\$&");
-  var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
-      results = regex.exec(url);
-  if (!results) return null;
-  if (!results[2]) return '';
-  return decodeURIComponent(results[2].replace(/\+/g, " "));
-}
-
-interface MicroInitOptions{
-  authHandler?: (token: string) => void
-}
-/**
- * 微应用-子应用初始化
- * 非必须，但建议使用
- */
-export const microInit = (options: MicroInitOptions = {}) => {
-  //处理url参数
-  const micro = getQueryParameter(CONSTANT.IS_MICRO)
-  const microName = getQueryParameter(CONSTANT.MICRO_NAME)
-  //设置环境变量
-  if (micro) {
-    window[CONSTANT.IS_MICRO] = true
-  }
-  //监听message，设置环境变量
-  window.addEventListener('message', (e) => {
-    if (e.data.cmd === `$xt/micro/${microName}`) {
-      console.log('micro', e.data.data)
-      window[CONSTANT.MICRO_APP] = e.data.data
-    }
-  })
-
-  //处理token
-  const token = getQueryParameter(CONSTANT.MICRO_TOKEN)
-  options.authHandler && options.authHandler(token)
-}
-
-const _postMicro = (app: AppOption) => {
-  window.postMessage({ cmd: `$xt/micro/${app.name}`, data: {
-    name: app.name,
-    url: app.url,
-    preload: app.preload,
-    // params: app.params
-  } }, '*')
-}