@xingtukeji/micro 1.1.11 → 1.1.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +5 -0
  2. package/dist/index.js +104 -98
  3. package/package.json +1 -1
package/README.md CHANGED
@@ -48,3 +48,8 @@ microInit({
48
48
  ```javascript
49
49
  http://192.168.100.127:8000/console/?__XT_MICRO_microtest2=http://localhost:5173/?test=123#/page2#/micro/microtest2
50
50
  ```
51
+
52
+ ```javascript
53
+ window.__XT_MICRO_VERSION; //获取微前端框架版本
54
+ window.__XT_MICRO_APP; //获取微应用信息,包括主应用的 location 信息
55
+ ```
package/dist/index.js CHANGED
@@ -1,41 +1,43 @@
1
1
  (function(){"use strict";try{if(typeof document!="undefined"){var e=document.createElement("style");e.appendChild(document.createTextNode('.xt-micro{width:100%;height:100%;overflow:hidden;background-color:transparent}.xt-micro:before{content:"加载中";position:absolute;inset: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;inset:0;display:flex;justify-content:center;align-items:center;background:#fff}')),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
2
- var L = Object.defineProperty, v = Object.defineProperties;
3
- var b = Object.getOwnPropertyDescriptors;
2
+ var v = Object.defineProperty, L = Object.defineProperties;
3
+ var T = Object.getOwnPropertyDescriptors;
4
4
  var M = Object.getOwnPropertySymbols;
5
- var T = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
6
- var _ = (e, t, n) => t in e ? L(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, d = (e, t) => {
5
+ var b = Object.prototype.hasOwnProperty, x = Object.prototype.propertyIsEnumerable;
6
+ var y = (e, t, n) => t in e ? v(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, l = (e, t) => {
7
7
  for (var n in t || (t = {}))
8
- T.call(t, n) && _(e, n, t[n]);
8
+ b.call(t, n) && y(e, n, t[n]);
9
9
  if (M)
10
10
  for (var n of M(t))
11
- x.call(t, n) && _(e, n, t[n]);
11
+ x.call(t, n) && y(e, n, t[n]);
12
12
  return e;
13
- }, f = (e, t) => v(e, b(t));
14
- var m = (e, t, n) => (_(e, typeof t != "symbol" ? t + "" : t, n), n);
13
+ }, f = (e, t) => L(e, T(t));
14
+ var m = (e, t, n) => (y(e, typeof t != "symbol" ? t + "" : t, n), n);
15
15
  var g = (e, t, n) => new Promise((r, o) => {
16
- var a = (l) => {
16
+ var a = (d) => {
17
17
  try {
18
- i(n.next(l));
18
+ s(n.next(d));
19
19
  } catch (h) {
20
20
  o(h);
21
21
  }
22
- }, s = (l) => {
22
+ }, c = (d) => {
23
23
  try {
24
- i(n.throw(l));
24
+ s(n.throw(d));
25
25
  } catch (h) {
26
26
  o(h);
27
27
  }
28
- }, i = (l) => l.done ? r(l.value) : Promise.resolve(l.value).then(a, s);
29
- i((n = n.apply(e, t)).next());
28
+ }, s = (d) => d.done ? r(d.value) : Promise.resolve(d.value).then(a, c);
29
+ s((n = n.apply(e, t)).next());
30
30
  });
31
31
  import { ref as P, defineComponent as $, watch as X, onMounted as k, onUnmounted as H, openBlock as N, createElementBlock as j, mergeProps as B } from "vue";
32
- const c = {
32
+ const i = {
33
33
  KEY: "$xtm",
34
34
  // 父应用注入子应用实例的key
35
35
  IS_MICRO: "__XT_MICRO",
36
36
  // 是否在微应用中
37
37
  MICRO_NAME: "__XT_MICRO_NAME",
38
38
  // 微应用名称
39
+ MICRO_TYPE: "__XT_MICRO_TYPE",
40
+ // 微应用类型 'parent' | 'child'
39
41
  MICRO_TOKEN: "__XT_MICRO_TOKEN",
40
42
  // 微应用token
41
43
  MICRO_APP: "__XT_MICRO_APP",
@@ -77,16 +79,16 @@ function K(e, t) {
77
79
  };
78
80
  }
79
81
  function C(e, t, n) {
80
- const [r, o] = e.split("#"), a = new URL(r), s = a.searchParams;
81
- return t = c.URL_PARAM_PREFIX + t, s.has(t) ? s.set(t, n) : s.append(t, n), o && (a.hash = o), a.search = s.toString(), a.toString();
82
+ const [r, o] = e.split("#"), a = new URL(r), c = a.searchParams;
83
+ return t = i.URL_PARAM_PREFIX + t, c.has(t) ? c.set(t, n) : c.append(t, n), o && (a.hash = o), a.search = c.toString(), a.toString();
82
84
  }
83
85
  const S = (e) => g(void 0, null, function* () {
84
86
  return new Promise((t) => {
85
87
  window.addEventListener("message", (n) => {
86
- n.data.cmd === "$xt/micro/info" && (n.data.data.mainMicroVersion !== u && console.warn(
88
+ console.debug("child ipcSyncAppInfo receive message", n.data), n.data.cmd === "$xt/micro/info" && (n.data.data.mainMicroVersion !== u && console.warn(
87
89
  `子应用版本与主应用版本不一致,${e}子应用版本:${u},主应用版本:${n.data.data.mainMicroVersion}`
88
90
  ), t(n.data.data));
89
- }), window.parent.postMessage(
91
+ }), console.debug("child ipcSyncAppInfo send message", e), window.parent.postMessage(
90
92
  {
91
93
  cmd: "$xt/micro/info",
92
94
  data: e
@@ -104,7 +106,7 @@ const S = (e) => g(void 0, null, function* () {
104
106
  getQueryParameter: p,
105
107
  ipcSyncAppInfo: S
106
108
  }, Symbol.toStringTag, { value: "Module" })), O = P(!1);
107
- Object.defineProperty(window, c.IS_MICRO, {
109
+ Object.defineProperty(window, i.IS_MICRO, {
108
110
  get: function() {
109
111
  return O.value;
110
112
  },
@@ -112,37 +114,37 @@ Object.defineProperty(window, c.IS_MICRO, {
112
114
  O.value = e;
113
115
  }
114
116
  });
115
- const R = (e) => `${c.DOM_ID_PREFIX}${e}`, D = (e) => {
116
- function t(i) {
117
- return i !== null && typeof i == "object" && !Array.isArray(i);
117
+ const I = (e) => `${i.DOM_ID_PREFIX}${e}`, D = (e) => {
118
+ function t(s) {
119
+ return s !== null && typeof s == "object" && !Array.isArray(s);
118
120
  }
119
121
  const n = typeof e.params == "function" ? e.params() : t(e.params) ? e.params : {}, r = typeof e.token == "function" ? e.token() : t(e.token) ? e.token : "", o = new URL(
120
122
  e.url.indexOf("http") > -1 ? e.url : window.location.origin + e.url
121
- ), a = p(c.URL_PARAM_PREFIX + e.name);
123
+ ), a = p(i.URL_PARAM_PREFIX + e.name);
122
124
  if (a) {
123
- const i = E(a, e.url, !0);
124
- if (i) {
125
- const l = new URL(i);
126
- l.searchParams.forEach((A, U) => {
125
+ const s = E(a, e.url, !0);
126
+ if (s) {
127
+ const d = new URL(s);
128
+ d.searchParams.forEach((A, U) => {
127
129
  o.searchParams.set(U, A);
128
- }), o.hash = l.hash;
130
+ }), o.hash = d.hash;
129
131
  }
130
132
  }
131
- if (o.searchParams.set(c.IS_MICRO, !0 + ""), o.searchParams.set(c.MICRO_NAME, e.name), r && o.searchParams.set(c.MICRO_TOKEN, r), n)
132
- for (let i of Object.keys(n))
133
- o.searchParams.set(i, n[i]);
134
- const s = new URL(window.location.href);
135
- return s.searchParams.delete(e.name), window.history.replaceState({}, "", s.href), o.href;
136
- }, W = () => {
133
+ if (o.searchParams.set(i.IS_MICRO, !0 + ""), o.searchParams.set(i.MICRO_NAME, e.name), r && o.searchParams.set(i.MICRO_TOKEN, r), n)
134
+ for (let s of Object.keys(n))
135
+ o.searchParams.set(s, n[s]);
136
+ const c = new URL(window.location.href);
137
+ return c.searchParams.delete(e.name), window.history.replaceState({}, "", c.href), o.href;
138
+ }, Y = () => {
137
139
  const e = document.createElement("div");
138
140
  return e.innerHTML = "应用加载中...", e.style.textAlign = "center", e.style.lineHeight = "100px", e.style.fontSize = "20px", e.style.color = "#999", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.right = "0", e.style.bottom = "0", e.style.zIndex = "999", e.style.background = "transparent", e.style["mix-blend-mode"] = "difference", e;
139
- }, q = (e) => {
141
+ }, W = (e) => {
140
142
  e.style.opacity = "0", setTimeout(() => {
141
143
  e.remove();
142
144
  }, 500);
143
- }, z = (e) => {
145
+ }, q = (e) => {
144
146
  const t = document.createElement("iframe");
145
- t.id = R(e.app.name);
147
+ t.id = I(e.app.name);
146
148
  const n = D(e.app);
147
149
  t.src = n, t.style.width = "100%", t.style.height = "100%", t.style.border = "none", t.style.margin = "0", t.style.padding = "0", t.style.backgroundColor = "transparent", t.style["color-scheme"] = "unset", t.style.visibility = "hidden", t.addEventListener("load", (o) => (t.style.visibility = "visible", e.onLoad.call(e, o))), t.addEventListener(
148
150
  "error",
@@ -158,7 +160,7 @@ const R = (e) => `${c.DOM_ID_PREFIX}${e}`, D = (e) => {
158
160
  });
159
161
  return r.observe(e.panel, { childList: !0 }), t;
160
162
  };
161
- class G {
163
+ class z {
162
164
  constructor(t) {
163
165
  m(this, "app");
164
166
  m(this, "dom");
@@ -171,9 +173,9 @@ class G {
171
173
  let r;
172
174
  if (t ? (typeof t == "string" ? r = document.querySelector(t) : r = t, r.innerHTML = "") : r = document.body, r) {
173
175
  this.panel = r;
174
- let o = document.getElementById(R(this.app.name));
175
- o || (o = z(this), this.dom = o), n ? o.style.display = "none" : o.style.removeProperty("display");
176
- const a = W();
176
+ let o = document.getElementById(I(this.app.name));
177
+ o || (o = q(this), this.dom = o), n ? o.style.display = "none" : o.style.removeProperty("display");
178
+ const a = Y();
177
179
  this.loadingTimer = setTimeout(() => {
178
180
  this.loading = a, r.appendChild(a);
179
181
  }, 1e3), r.appendChild(o);
@@ -182,7 +184,7 @@ class G {
182
184
  }
183
185
  unmount() {
184
186
  var n;
185
- const t = document.getElementById(R(this.app.name));
187
+ const t = document.getElementById(I(this.app.name));
186
188
  if (t)
187
189
  this.app.preload ? (t.style.display = "none", document.body.appendChild(t)) : (n = this.panel) == null || n.removeChild(t);
188
190
  else
@@ -207,10 +209,10 @@ class G {
207
209
  this.dom.src = t;
208
210
  }
209
211
  changeOptions(t) {
210
- this.app = d(d({}, this.app), t);
212
+ this.app = l(l({}, this.app), t);
211
213
  }
212
214
  onLoad(t) {
213
- console.debug("app onLoad", this.app.name), this.loadingTimer && clearTimeout(this.loadingTimer), this.loading && q(this.loading), Q(this), this.app.onLoad && this.app.onLoad(t, this);
215
+ console.debug("app onLoad", this.app.name), this.loadingTimer && clearTimeout(this.loadingTimer), this.loading && W(this.loading), G(this), this.app.onLoad && this.app.onLoad(t, this);
214
216
  }
215
217
  onUnload(t) {
216
218
  console.debug("app onUnload", this.app.name), this.app.onUnload && this.app.onUnload(t, this);
@@ -219,7 +221,7 @@ class G {
219
221
  console.error("app onError", this.app.name), this.app.onError && this.app.onError(t, this);
220
222
  }
221
223
  }
222
- const Q = (e) => {
224
+ const G = (e) => {
223
225
  var t, n;
224
226
  (n = (t = e.dom) == null ? void 0 : t.contentWindow) == null || n.postMessage(
225
227
  {
@@ -234,13 +236,13 @@ const Q = (e) => {
234
236
  },
235
237
  "*"
236
238
  );
237
- }, Y = () => {
238
- window.addEventListener("message", (e) => {
239
+ }, Q = () => {
240
+ window[i.MICRO_TYPE] = "parent", window.addEventListener("message", (e) => {
239
241
  if (e.data.cmd === "$xt/micro/sync") {
240
242
  const t = [
241
- c.IS_MICRO,
242
- c.MICRO_NAME,
243
- c.MICRO_TOKEN
243
+ i.IS_MICRO,
244
+ i.MICRO_NAME,
245
+ i.MICRO_TOKEN
244
246
  ], n = new URL(
245
247
  window.decodeURIComponent(e.data.data.url),
246
248
  e.origin
@@ -248,8 +250,8 @@ const Q = (e) => {
248
250
  for (let a of t)
249
251
  n.searchParams.delete(a);
250
252
  const r = new URL(window.location.href);
251
- r.searchParams.forEach((a, s) => {
252
- s.startsWith(c.URL_PARAM_PREFIX) && r.searchParams.delete(s);
253
+ r.searchParams.forEach((a, c) => {
254
+ c.startsWith(i.URL_PARAM_PREFIX) && r.searchParams.delete(c);
253
255
  });
254
256
  const o = C(
255
257
  r.href,
@@ -258,7 +260,8 @@ const Q = (e) => {
258
260
  );
259
261
  window.history.replaceState(null, "", o);
260
262
  } else if (e.data.cmd === "$xt/micro/info") {
261
- const t = y(e.data.data);
263
+ console.debug("parent 「$xt/micro/info」 receive message", e.data);
264
+ const t = _(e.data.data);
262
265
  e.source.postMessage(
263
266
  {
264
267
  cmd: "$xt/micro/info",
@@ -287,52 +290,55 @@ const Q = (e) => {
287
290
  }
288
291
  });
289
292
  }, ie = (...t) => g(void 0, [...t], function* (e = {}) {
290
- const n = p(c.IS_MICRO), r = p(c.MICRO_NAME);
291
- n && (window[c.IS_MICRO] = !0), r && S(r).then((s) => {
292
- window[c.MICRO_APP] = d({
293
+ window[i.MICRO_TYPE] = "child";
294
+ const n = p(i.IS_MICRO), r = p(i.MICRO_NAME);
295
+ if (console.debug("child microInit", n, r), n && (window[i.IS_MICRO] = n === "true"), r && S(r).then((o) => {
296
+ window[i.MICRO_APP] = l({
293
297
  microVersion: u
294
- }, s);
295
- });
296
- function o(s) {
297
- var i = document.styleSheets[0];
298
- if (!i) {
299
- var l = document.createElement("style");
300
- document.head.appendChild(l), i = l.sheet;
301
- }
302
- i.insertRule(s, i.cssRules.length);
303
- }
304
- window[c.IS_MICRO] && e.hideHeaderCssSelector && (Array.isArray(e.hideHeaderCssSelector) ? e.hideHeaderCssSelector.forEach((s) => {
305
- o(`${s} { display: none !important; }`);
306
- }) : o(
307
- `${e.hideHeaderCssSelector} { display: none !important; }`
308
- )), window.addEventListener("message", (s) => {
309
- s.data.cmd === `$xt/micro/${r}` && I();
310
- }), J(window);
311
- const a = p(c.MICRO_TOKEN);
312
- e.authHandler && a && (yield e.authHandler(a));
298
+ }, o);
299
+ }), window[i.IS_MICRO]) {
300
+ let o = function(c) {
301
+ var s = document.styleSheets[0];
302
+ if (!s) {
303
+ var d = document.createElement("style");
304
+ document.head.appendChild(d), s = d.sheet;
305
+ }
306
+ s.insertRule(c, s.cssRules.length);
307
+ };
308
+ window[i.IS_MICRO] && e.hideHeaderCssSelector && (Array.isArray(e.hideHeaderCssSelector) ? e.hideHeaderCssSelector.forEach((c) => {
309
+ o(`${c} { display: none !important; }`);
310
+ }) : o(
311
+ `${e.hideHeaderCssSelector} { display: none !important; }`
312
+ )), window.addEventListener("message", (c) => {
313
+ c.data.cmd === `$xt/micro/${r}` && R();
314
+ }), J(window);
315
+ const a = p(i.MICRO_TOKEN);
316
+ e.authHandler && a && (yield e.authHandler(a));
317
+ } else
318
+ console.warn("当前环境非微应用环境");
313
319
  });
314
320
  function J(e) {
315
321
  const t = e.history, n = t.pushState, r = t.replaceState;
316
- t.pushState = function(o, a, s) {
317
- const i = f(d(d({}, t.state || {}), o), {
322
+ t.pushState = function(o, a, c) {
323
+ const s = f(l(l({}, t.state || {}), o), {
318
324
  // 添加新数据
319
325
  _patchedByParent: !0
320
326
  // 可选:标记这是被父窗口修改的状态
321
327
  });
322
- n.call(t, i, a, s), I();
323
- }, t.replaceState = function(o, a, s) {
324
- const i = f(d(d({}, t.state || {}), o), {
328
+ n.call(t, s, a, c), R();
329
+ }, t.replaceState = function(o, a, c) {
330
+ const s = f(l(l({}, t.state || {}), o), {
325
331
  // 添加新数据
326
332
  _patchedByParent: !0
327
333
  // 可选:标记这是被父窗口修改的状态
328
334
  });
329
- r.call(t, i, a, s), I();
335
+ r.call(t, s, a, c), R();
330
336
  };
331
337
  }
332
- function I() {
333
- if (!window[c.MICRO_APP])
338
+ function R() {
339
+ if (!window[i.MICRO_APP])
334
340
  return;
335
- const { name: e, sync: t, mainBaseURL: n } = window[c.MICRO_APP], r = window.location.pathname + window.location.search + window.location.hash;
341
+ const { name: e, sync: t, mainBaseURL: n } = window[i.MICRO_APP], r = window.location.pathname + window.location.search + window.location.hash;
336
342
  window.parent.postMessage(
337
343
  {
338
344
  cmd: "$xt/micro/sync",
@@ -355,17 +361,17 @@ const Z = {
355
361
  return;
356
362
  }
357
363
  const t = Object.assign({}, Z, e);
358
- return w[e.name] = f(d({}, t), {
359
- instance: new G(e)
364
+ return w[e.name] = f(l({}, t), {
365
+ instance: new z(e)
360
366
  }), w[e.name];
361
- }, y = (e) => w[e], ee = (e, t) => w[e.name] = d(d({}, e), t), te = (e, t) => new Promise((n, r) => {
362
- let o = y(e);
367
+ }, _ = (e) => w[e], ee = (e, t) => w[e.name] = l(l({}, e), t), te = (e, t) => new Promise((n, r) => {
368
+ let o = _(e);
363
369
  o ? (t && (o.instance.changeOptions(t), o = ee(o, t)), o.preload ? o.instance.preloadRender(o.el) : o.instance.mount(o.el), n(o)) : r("app not found");
364
370
  }), ne = (e) => {
365
- let t = y(e);
371
+ let t = _(e);
366
372
  t && t.instance.unmount();
367
- }, le = (e) => {
368
- let t = y(e);
373
+ }, de = (e) => {
374
+ let t = _(e);
369
375
  t && t.instance.reload();
370
376
  }, oe = /* @__PURE__ */ $({
371
377
  __name: "XTMicroView",
@@ -392,18 +398,18 @@ const Z = {
392
398
  }, o.$attrs, { class: "xt-micro" }), null, 16));
393
399
  }
394
400
  });
395
- window[c.MICRO_VERSION] = u;
396
- const de = {
401
+ window[i.MICRO_VERSION] = u;
402
+ const le = {
397
403
  install: (e, t = {}) => {
398
- e.component("xt-micro-view", oe), Y();
404
+ e.component("xt-micro-view", oe), Q();
399
405
  }
400
406
  };
401
407
  export {
402
408
  oe as XTMicroView,
403
- de as default,
404
- y as getApp,
409
+ le as default,
410
+ _ as getApp,
405
411
  ie as microInit,
406
- le as reloadApp,
412
+ de as reloadApp,
407
413
  ce as setupApp,
408
414
  te as startApp,
409
415
  ne as stopApp,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@xingtukeji/micro",
3
- "version": "1.1.11",
3
+ "version": "1.1.12",
4
4
  "private": false,
5
5
  "description": "",
6
6
  "main": "dist/index.js",