@cloud-app-dev/vidc 2.3.0 → 3.0.0

package/es/LoaderApp/sandbox.back.js

@@ -0,0 +1,356 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+/**
+ * @file 全局window沙盒，隔离变量环境
+ */
+var originWindow = window;
+var constructableMap = new WeakMap();
+
+function isConstructable(fn) {
+  if (constructableMap.has(fn)) {
+    return constructableMap.get(fn);
+  }
+
+  var constructableFunctionRegex = /^function\b\s[A-Z].*/;
+  var classRegex = /^class\b/;
+  var constructable = fn.prototype && fn.prototype.constructor === fn && Object.getOwnPropertyNames(fn.prototype).length > 1 || constructableFunctionRegex.test(fn.toString()) || classRegex.test(fn.toString());
+  constructableMap.set(fn, constructable);
+  return constructable;
+}
+
+var naughtySafari = typeof document.all === 'function' && typeof document.all === 'undefined';
+var isCallable = naughtySafari ? function (fn) {
+  return typeof fn === 'function' && typeof fn !== 'undefined';
+} : function (fn) {
+  return typeof fn === 'function';
+};
+var boundedMap = new WeakMap();
+
+function isBoundedFunction(fn) {
+  if (boundedMap.has(fn)) {
+    return boundedMap.get(fn);
+  }
+
+  var bounded = fn.name.indexOf('bound ') === 0 && !fn.hasOwnProperty('prototype');
+  boundedMap.set(fn, bounded);
+  return bounded;
+}
+
+var functionBoundedValueMap = new WeakMap();
+
+function getTargetValue(target, value) {
+  var cachedBoundFunction = functionBoundedValueMap.get(value);
+
+  if (cachedBoundFunction) {
+    return cachedBoundFunction;
+  }
+
+  if (isCallable(value) && !isBoundedFunction(value) && !isConstructable(value)) {
+    var boundValue = Function.prototype.bind.call(value, target);
+
+    for (var key in value) {
+      boundValue[key] = value[key];
+    }
+
+    if (value.hasOwnProperty('prototype') && !boundValue.hasOwnProperty('prototype')) boundValue.prototype = value.prototype;
+    functionBoundedValueMap.set(value, boundValue);
+    return boundValue;
+  }
+
+  return value;
+}
+
+function getScript(scriptText) {
+  return '(function(window){with(window){;'.concat(scriptText, '\n').concat('}}).bind(window.proxy)(window.proxy);');
+}
+
+var rawAddEventListener = window.addEventListener;
+var rawRemoveEventListener = window.removeEventListener;
+var rawWindowInterval = window.setInterval;
+var rawWindowClearInterval = window.clearInterval;
+var rawWindowTimeout = window.setTimeout;
+var rawWindowClearTimeout = window.clearTimeout;
+var unscopables = {
+  undefined: true,
+  Array: true,
+  Object: true,
+  String: true,
+  Boolean: true,
+  Math: true,
+  Number: true,
+  Symbol: true,
+  parseFloat: true,
+  Float32Array: true
+};
+
+function createFakeWindow() {
+  var fakeWindow = {};
+  Object.getOwnPropertyNames(originWindow).forEach(function (key) {
+    var descriptor = Object.getOwnPropertyDescriptor(originWindow, key);
+
+    if (descriptor && !descriptor.configurable) {
+      var hasGetter = Object.prototype.hasOwnProperty.call(descriptor, 'get');
+
+      if (key === 'top' || key === 'parent' || key === 'self' || key === 'window') {
+        descriptor.configurable = true;
+
+        if (!hasGetter) {
+          descriptor.writable = true;
+        }
+      }
+
+      Object.defineProperty(fakeWindow, key, Object.freeze(descriptor));
+    }
+  });
+  return fakeWindow;
+}
+
+var Sandbox = /*#__PURE__*/function () {
+  function Sandbox(showlog) {
+    var _this = this;
+
+    _classCallCheck(this, Sandbox);
+
+    this.fakeWindow = createFakeWindow();
+    this.updateKeys = new Set();
+    this.listenerMap = new Map();
+    this.timeoutList = [];
+    this.intervalList = [];
+    this.originKeys = [];
+    this.showlog = false;
+    this.hasDisposed = false;
+    this.showlog = showlog;
+    this.proxy = new Proxy(window, {
+      set: function set(target, key, value) {
+        if (!_this.hasDisposed) {
+          _this.updateKeys.add(key);
+
+          try {
+            if (!_this.fakeWindow.hasOwnProperty(key) && target.hasOwnProperty(key)) {
+              // @ts-ignore
+              target[key] = value;
+            } else {
+              // @ts-ignore
+              _this.fakeWindow[key] = value;
+            }
+          } catch (error) {
+            console.error('set-key-error', key, error);
+            throw error;
+          }
+        }
+
+        return true;
+      },
+      get: function get(target, key) {
+        if (key === Symbol.unscopables) {
+          return unscopables;
+        } // @ts-ignore
+
+
+        if (key === 'window' || key === 'self' || key === 'global' || key === 'globalThis') {
+          return _this.proxy;
+        }
+
+        if (key === 'document') {
+          return target.document;
+        }
+
+        if (key === 'hasOwnProperty') {
+          return target.hasOwnProperty;
+        }
+
+        if (key === 'eval') {
+          return target.eval;
+        }
+
+        try {
+          console.log(key, target); // @ts-ignore
+
+          var value = key in target ? target[key] : _this.fakeWindow[key]; // @ts-ignore
+
+          if (isCallable(value) && !isBoundedFunction(value) && !isConstructable(value)) {
+            // @ts-ignore
+            // return target.matchMedia
+            value = Function.prototype.bind.call(value, target);
+          }
+
+          return getTargetValue(window, value);
+        } catch (error) {
+          console.error('get-key-error', key, error);
+          throw error;
+        }
+      },
+      has: function has(target, key) {
+        return key in unscopables || key in target || key in _this.fakeWindow; // return this.fakeWindow.hasOwnProperty(key)
+      }
+    }); // 事件
+
+    this.proxy.addEventListener = function (type, listener, options) {
+      if (!_this.hasDisposed) {
+        var listeners = _this.listenerMap.get(type) || [];
+
+        _this.listenerMap.set(type, [].concat(_toConsumableArray(listeners), [listener]));
+
+        return rawAddEventListener.call(window, type, listener, options);
+      }
+    };
+
+    this.proxy.removeEventListener = function (type, listener, options) {
+      var listeners = _this.listenerMap.get(type);
+
+      if (listeners && listeners.length) {
+        var listenerIndex = listeners.indexOf(listener);
+
+        if (listenerIndex !== -1) {
+          listeners.splice(listeners.indexOf(listener), 1);
+        }
+      }
+
+      return rawRemoveEventListener.call(window, type, listener, options);
+    }; // 定时器
+
+
+    this.proxy.setInterval = function (handler, timeout) {
+      if (!_this.hasDisposed) {
+        for (var _len = arguments.length, args = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+          args[_key - 2] = arguments[_key];
+        }
+
+        var intervalId = rawWindowInterval.apply(void 0, [handler, timeout].concat(args));
+
+        _this.intervalList.push(intervalId);
+
+        return intervalId;
+      } else {
+        return 0;
+      }
+    };
+
+    this.proxy.clearInterval = function (intervalId) {
+      var intervalIndex = _this.intervalList.indexOf(intervalId);
+
+      if (intervalIndex !== -1) {
+        _this.intervalList.splice(intervalIndex, 1);
+      }
+
+      return rawWindowClearInterval(intervalId);
+    };
+
+    this.proxy.setTimeout = function (handler, timeout) {
+      if (!_this.hasDisposed) {
+        for (var _len2 = arguments.length, args = new Array(_len2 > 2 ? _len2 - 2 : 0), _key2 = 2; _key2 < _len2; _key2++) {
+          args[_key2 - 2] = arguments[_key2];
+        }
+
+        var timeoutId = rawWindowTimeout.apply(void 0, [handler, timeout].concat(args));
+
+        _this.timeoutList.push(timeoutId);
+
+        return timeoutId;
+      } else {
+        return 0;
+      }
+    };
+
+    this.proxy.clearTimeout = function (timeoutId) {
+      var timeoutIndex = _this.timeoutList.indexOf(timeoutId);
+
+      if (timeoutIndex !== -1) {
+        _this.timeoutList.splice(timeoutIndex, 1);
+      }
+
+      return rawWindowClearTimeout(timeoutId);
+    };
+
+    this.originKeys = this.showWindowKeys(); // @ts-ignore
+
+    originWindow.proxy = this.proxy;
+  }
+
+  _createClass(Sandbox, [{
+    key: "execScript",
+    value: function execScript(scriptText) {
+      if (this.hasDisposed) {
+        throw new Error('sandbox has been destroyed');
+      }
+
+      var scriptTextWithSandbox = getScript(scriptText);
+      originWindow.eval(scriptTextWithSandbox);
+    }
+  }, {
+    key: "showWindowKeys",
+    value: function showWindowKeys() {
+      var originKeys = Object.keys(originWindow);
+
+      if (this.showlog === true) {
+        console.log('originWindow', originWindow);
+        console.log('updateKeys', this.updateKeys);
+        console.log('windowKeysLength', originKeys.length);
+      }
+
+      return originKeys;
+    }
+  }, {
+    key: "preview",
+    value: function preview() {
+      if (this.showlog === true) {
+        window.console.log('updateKeys', this.updateKeys);
+        window.console.log('listenerMap', this.listenerMap);
+        window.console.log('intervalList', this.intervalList);
+        window.console.log('timeoutList', this.timeoutList);
+      }
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      this.listenerMap.forEach(function (listeners, type) {
+        return _toConsumableArray(listeners).forEach(function (listener) {
+          return rawRemoveEventListener.call(window, type, listener);
+        });
+      });
+      this.listenerMap.clear();
+      this.intervalList.forEach(function (intervalId) {
+        return rawWindowClearInterval(intervalId);
+      });
+      this.intervalList = [];
+      this.timeoutList.forEach(function (timeoutId) {
+        return rawWindowClearTimeout(timeoutId);
+      });
+      this.timeoutList = [];
+      this.fakeWindow = createFakeWindow(); // const originKeys = this.showWindowKeys()
+      // const newKeys = []
+      // for (var i = 0; i < originKeys.length; i++) {
+      //     if (this.originKeys.indexOf(originKeys[i]) === -1) {
+      //         newKeys.push(originKeys)
+      //     }
+      // }
+      // @ts-ignore
+      // originWindow.newKeys = newKeys
+      // @ts-ignore
+
+      delete originWindow.proxy;
+      this.hasDisposed = true;
+      console.log('Sandbox was successfully destroyed');
+    }
+  }]);
+
+  return Sandbox;
+}();
+
+export default Sandbox;

package/es/LoaderApp/sandbox.d.ts

@@ -0,0 +1,12 @@
+interface OPTIONS {
+    inheritGlobal?: boolean;
+    blacklist?: string[];
+    docMap?: {
+        [key: string]: any;
+    };
+}
+declare class SandBox {
+    private updatedValueSet;
+    constructor(context?: Window & typeof globalThis, { blacklist, docMap }?: OPTIONS);
+}
+export default SandBox;

package/es/LoaderApp/sandbox.js

@@ -0,0 +1,110 @@
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+// 懒加载的脚本暂时没法拦截
+var SandBox = /*#__PURE__*/_createClass(function SandBox() {
+  var context = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : window;
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$blacklist = _ref.blacklist,
+      blacklist = _ref$blacklist === void 0 ? [] : _ref$blacklist,
+      _ref$docMap = _ref.docMap,
+      docMap = _ref$docMap === void 0 ? {} : _ref$docMap;
+
+  _classCallCheck(this, SandBox);
+
+  this.updatedValueSet = new Map();
+  var blackmap = {};
+
+  for (var i = 0; i < blacklist.length; i++) {
+    var name = blacklist[i];
+    blackmap[name] = true;
+  }
+
+  var updatedValueSet = this.updatedValueSet; // const proxyDocoment = createSandBoxDocument(docMap);
+
+  var proxy = new Proxy(context, {
+    set: function set(target, name, value) {
+      if (!target[name]) {
+        updatedValueSet.set(name, value);
+      } else {
+        target[name] = value;
+      }
+
+      return true;
+    },
+    get: function get(target, name) {
+      if (blackmap.hasOwnProperty(name)) {
+        console.error("Can't assess property: ".concat(name, " in blacklist"));
+        return undefined;
+      }
+
+      if (updatedValueSet.has(name)) {
+        return updatedValueSet.get(name);
+      } // if (
+      //   name === 'Object' ||
+      //   name === 'Symbol' ||
+      //   typeof name === 'symbol' ||
+      //   name === 'parseFloat' ||
+      //   name === 'parseInt' ||
+      //   name === 'Array' ||
+      //   name === 'Number' ||
+      //   name === 'Math' ||
+      //   name === 'String'||
+      //   name === 'Reflect'||
+      //   name === 'Boolean'||
+      //   name === 'isNaN'
+      // ) {
+      // } else {
+      //   console.log(name);
+      // }
+
+
+      switch (name) {
+        case 'window':
+        case 'global':
+        case 'self':
+        case 'globalThis':
+          return proxy;
+
+        case 'document':
+          return document;
+        // return proxyDocoment;
+      }
+
+      if (typeof target[name] === 'function' && /^[a-z]/.test(name)) {
+        return target[name].bind && target[name].bind(target);
+      } else {
+        return target[name];
+      }
+    }
+  });
+  return proxy;
+}); // function createSandBoxDocument(proxyMap: { [key: string]: any } = {}) {
+//   return new Proxy(document, {
+//     get(target: any, p: string): any {
+//       if (proxyMap.hasOwnProperty(p)) {
+//         return proxyMap[p];
+//       }
+//       if (typeof target[p] === 'function' && /^[a-z]/.test(p)) {
+//         return target[p].bind && target[p].bind(target);
+//       } else {
+//         return target[p];
+//       }
+//     },
+//   });
+// }
+// function text() {
+//   (function (global: any) {
+//     const s = global.document.createElement('span');
+//     s.innerHTML = '1111';
+//     console.log(global.document.head.appendChild(s));
+//   })(new SandBox(window, { docMap: { head: document.body } }));
+// }
+// text();
+
+
+export default SandBox;

package/es/LoaderApp/utils.d.ts

@@ -1,4 +1,4 @@
-import { AppItemType } from '../Config/interface';
+import { AppItemType } from '@cloud-app-dev/vidc/es/Config/interface';
 export declare const getMicroConfig: (appConfig: AppItemType, appProps: any, container: HTMLDivElement) => {
     title: string;
     routerPrefix: string;
@@ -13,3 +13,7 @@ export declare const getMicroConfig: (appConfig: AppItemType, appProps: any, con
 export declare function fetchStyle(style: string): Promise<string>;
 export declare const arrayify: <T>(list: CSSRuleList | any[]) => T[];
 export declare function rewrite(rules: CSSRule[], prefix?: string): string;
+export declare function importHTML(url: string): Promise<{
+    cssTexts: string[];
+    appInstance: any;
+}>;

package/es/LoaderApp/utils.js

@@ -155,11 +155,107 @@ function ruleStyle(rule, prefix) {
 function ruleMedia(rule, prefix) {
   var css = rewrite(arrayify(rule.cssRules), prefix);
   return "@media ".concat(rule.conditionText, " {").concat(css, "}");
-} // handle case:
-// @supports (display: grid) {}
+}
 
+var _global = window; // handle case:
+// @supports (display: grid) {}
 
 function ruleSupport(rule, prefix) {
   var css = rewrite(arrayify(rule.cssRules), prefix);
   return "@supports ".concat(rule.conditionText, " {").concat(css, "}");
+}
+
+var cache = {};
+export function importHTML(url) {
+  return __awaiter(this, void 0, void 0, /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var html, doc, scripts, srcs, entryIndex, index, entry, appInstance, res, links, cssHref, cssTexts, styles;
+    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!cache[url]) {
+              _context2.next = 4;
+              break;
+            }
+
+            _context2.t0 = cache[url];
+            _context2.next = 7;
+            break;
+
+          case 4:
+            _context2.next = 6;
+            return fetch(url).then(function (res) {
+              return res.text();
+            });
+
+          case 6:
+            _context2.t0 = _context2.sent;
+
+          case 7:
+            html = _context2.t0;
+
+            if (!cache[url]) {
+              cache[url] = html;
+            }
+
+            doc = new DOMParser().parseFromString(html, 'text/html');
+            scripts = Array.from(doc.querySelectorAll('script')).filter(function (v) {
+              return v.attributes.getNamedItem('src');
+            });
+            srcs = scripts.map(function (v) {
+              return v.getAttribute('src');
+            });
+            entryIndex = scripts.findIndex(function (v) {
+              return v.attributes.getNamedItem('entry');
+            });
+            index = entryIndex === -1 ? 0 : entryIndex;
+            entry = scripts[index];
+
+            if (entry) {
+              _context2.next = 17;
+              break;
+            }
+
+            throw new Error('微应用没有入口脚本！');
+
+          case 17:
+            _context2.next = 19;
+            return Promise.all(srcs.map(function (v) {
+              return _global.System.import(v);
+            }));
+
+          case 19:
+            res = _context2.sent;
+            appInstance = res[index]; // 处理样式 link
+
+            links = Array.from(doc.querySelectorAll('link')).filter(function (v) {
+              return v.getAttribute('rel') === 'stylesheet';
+            });
+            cssHref = links.map(function (v) {
+              return v.getAttribute('href');
+            });
+            _context2.next = 25;
+            return Promise.all(cssHref.map(function (v) {
+              return fetchStyle(v);
+            }));
+
+          case 25:
+            cssTexts = _context2.sent;
+            // 处理样式style
+            styles = Array.from(doc.querySelectorAll('style'));
+            styles.forEach(function (style) {
+              return cssTexts.push(style.textContent || '');
+            });
+            return _context2.abrupt("return", {
+              cssTexts: cssTexts,
+              appInstance: appInstance
+            });
+
+          case 29:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  }));
 }