├── .eslintrc.js ├── .gitignore ├── README.md ├── dist └── vue-remote-import.js ├── package-lock.json ├── package.json ├── src └── index.js └── webpack.config.js /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | "env": { 3 | "browser": true, 4 | "es6": true 5 | }, 6 | "extends": "eslint:recommended", 7 | "globals": { 8 | "Atomics": "readonly", 9 | "SharedArrayBuffer": "readonly" 10 | }, 11 | "parserOptions": { 12 | "ecmaVersion": 2018, 13 | "sourceType": "module" 14 | }, 15 | "rules": { 16 | } 17 | }; -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Introduction 2 | ------------- 3 | 4 | This module is used for load remote VUE component via url. So you can use it in router, global or local component reference. 5 | 6 | How it works 7 | ------------- 8 | 9 | It'll use import-html-entry package to load html file, so html file just like a minifect descript of your component. And then it'll parse it in order to get html template, styles, and scripts. But for now only scripts is useful. Then it'll execute all scripts and get the result of execution. So you should return components object in remote component project. You can also return multiple components. 10 | 11 | For example: 12 | 13 | In vue router: 14 | 15 | ``` 16 | import remoteImport from 'vue-remote-import' 17 | 18 | ... 19 | let router = new Router([ 20 | { 21 | path: '/login', 22 | name: 'login', 23 | component: () => remoteImport('http://domain/components/login/index.html') 24 | } 25 | ]) 26 | ``` 27 | 28 | `index.html` can be ommited, and you can also use other name for entry html filename. 29 | 30 | If you return multiple components, so you can use `remoteLoad('http://domain/components', 'login')` to get the component you want. 31 | 32 | Remote Component Development Notation 33 | -------------------------------------- 34 | 35 | You should output index.html not only js. So that you can use webpack to split code into chunks, and also js filename can have hash support when component changed. 36 | 37 | You should process `__webpack_public_path__` so that the webpack public path can be applied on the fly. In order to do that, you can create a file maybe named public_path.js. 38 | And the content of it should be: 39 | 40 | if (window.__REMOTE_WEBPACK_PUBLIC_PATH__) { 41 | // eslint-disable-next-line 42 | __webpack_public_path__ = window.__REMOTE_WEBPACK_PUBLIC_PATH__ 43 | } 44 | 45 | The `__REMOTE_WEBPACK_PUBLIC_PATH__` will be injected by vue-remote-import package when invoke `remoteImport` function. And you need to import it in your component entry file(e.g. main.js). Just like `import './public-path'` 46 | 47 | A whole component entry file content could be: 48 | 49 | ``` 50 | import './public-path' 51 | import HelloWorld from './components/HelloWorld.vue' 52 | 53 | export { 54 | HelloWorld 55 | } 56 | ``` 57 | 58 | Other examples for usage: 59 | 60 | In global component definition: `Vue.component(name, () => remoteImport('url'))` or in local component definition: 61 | 62 | ``` 63 | components: { 64 | page: () => remoteImport('url') 65 | } 66 | ``` 67 | 68 | How to use 69 | ----------- 70 | 71 | Install vue-remote-import package: 72 | 73 | ``` 74 | npm install vue-remote-import 75 | ``` 76 | 77 | Import it: 78 | 79 | ``` 80 | import remoteImport from 'vue-remote-import'; 81 | ``` 82 | 83 | Use it: 84 | 85 | ``` 86 | () => remoteImport('url') // for default export 87 | () => remoteImport('url', componentName) // for common export 88 | ``` -------------------------------------------------------------------------------- /dist/vue-remote-import.js: -------------------------------------------------------------------------------- 1 | !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports["vue-remote-import"]=e():t["vue-remote-import"]=e()}(window,(function(){return function(t){var e={};function r(n){if(e[n])return e[n].exports;var o=e[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=t,r.c=e,r.d=function(t,e,n){r.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},r.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return r.d(e,"a",e),e},r.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r.p="",r(r.s=113)}([function(t,e,r){var n=r(22)("wks"),o=r(16),i=r(1).Symbol,u="function"==typeof i;(t.exports=function(t){return n[t]||(n[t]=u&&i[t]||(u?i:o)("Symbol."+t))}).store=n},function(t,e){var r=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=r)},function(t,e,r){var n=r(6);t.exports=function(t){if(!n(t))throw TypeError(t+" is not an object!");return t}},function(t,e,r){var n=r(2),o=r(35),i=r(30),u=Object.defineProperty;e.f=r(7)?Object.defineProperty:function(t,e,r){if(n(t),e=i(e,!0),n(r),o)try{return u(t,e,r)}catch(t){}if("get"in r||"set"in r)throw TypeError("Accessors not supported!");return"value"in r&&(t[e]=r.value),t}},function(t,e,r){var n=r(1),o=r(12),i=r(5),u=r(8),a=r(18),s=function(t,e,r){var c,f,h,l,p=t&s.F,d=t&s.G,y=t&s.S,v=t&s.P,m=t&s.B,g=d?n:y?n[e]||(n[e]={}):(n[e]||{}).prototype,b=d?o:o[e]||(o[e]={}),x=b.prototype||(b.prototype={});for(c in d&&(r=e),r)h=((f=!p&&g&&void 0!==g[c])?g:r)[c],l=m&&f?a(h,n):v&&"function"==typeof h?a(Function.call,h):h,g&&u(g,c,h,t&s.U),b[c]!=h&&i(b,c,l),v&&x[c]!=h&&(x[c]=h)};n.core=o,s.F=1,s.G=2,s.S=4,s.P=8,s.B=16,s.W=32,s.U=64,s.R=128,t.exports=s},function(t,e,r){var n=r(3),o=r(15);t.exports=r(7)?function(t,e,r){return n.f(t,e,o(1,r))}:function(t,e,r){return t[e]=r,t}},function(t,e){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,e,r){t.exports=!r(13)((function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a}))},function(t,e,r){var n=r(1),o=r(5),i=r(9),u=r(16)("src"),a=r(58),s=(""+a).split("toString");r(12).inspectSource=function(t){return a.call(t)},(t.exports=function(t,e,r,a){var c="function"==typeof r;c&&(i(r,"name")||o(r,"name",e)),t[e]!==r&&(c&&(i(r,u)||o(r,u,t[e]?""+t[e]:s.join(String(e)))),t===n?t[e]=r:a?t[e]?t[e]=r:o(t,e,r):(delete t[e],o(t,e,r)))})(Function.prototype,"toString",(function(){return"function"==typeof this&&this[u]||a.call(this)}))},function(t,e){var r={}.hasOwnProperty;t.exports=function(t,e){return r.call(t,e)}},function(t,e,r){var n=r(24),o=Math.min;t.exports=function(t){return t>0?o(n(t),9007199254740991):0}},function(t,e){var r={}.toString;t.exports=function(t){return r.call(t).slice(8,-1)}},function(t,e){var r=t.exports={version:"2.6.12"};"number"==typeof __e&&(__e=r)},function(t,e){t.exports=function(t){try{return!!t()}catch(t){return!0}}},function(t,e,r){var n=r(85),o=r(19);t.exports=function(t){return n(o(t))}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){var r=0,n=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++r+n).toString(36))}},function(t,e){t.exports=!1},function(t,e,r){var n=r(23);t.exports=function(t,e,r){if(n(t),void 0===e)return t;switch(r){case 1:return function(r){return t.call(e,r)};case 2:return function(r,n){return t.call(e,r,n)};case 3:return function(r,n,o){return t.call(e,r,n,o)}}return function(){return t.apply(e,arguments)}}},function(t,e){t.exports=function(t){if(null==t)throw TypeError("Can't call method on "+t);return t}},function(t,e){t.exports={}},function(t,e,r){"use strict";var n=r(101),o=r(104);function i(){this.protocol=null,this.slashes=null,this.auth=null,this.host=null,this.port=null,this.hostname=null,this.hash=null,this.search=null,this.query=null,this.pathname=null,this.path=null,this.href=null}e.parse=b,e.resolve=function(t,e){return b(t,!1,!0).resolve(e)},e.resolveObject=function(t,e){return t?b(t,!1,!0).resolveObject(e):e},e.format=function(t){o.isString(t)&&(t=b(t));return t instanceof i?t.format():i.prototype.format.call(t)},e.Url=i;var u=/^([a-z0-9.+-]+:)/i,a=/:[0-9]*$/,s=/^(\/\/?(?!\/)[^\?\s]*)(\?[^\s]*)?$/,c=["{","}","|","\\","^","`"].concat(["<",">",'"',"`"," ","\r","\n","\t"]),f=["'"].concat(c),h=["%","/","?",";","#"].concat(f),l=["/","?","#"],p=/^[+a-z0-9A-Z_-]{0,63}$/,d=/^([+a-z0-9A-Z_-]{0,63})(.*)$/,y={javascript:!0,"javascript:":!0},v={javascript:!0,"javascript:":!0},m={http:!0,https:!0,ftp:!0,gopher:!0,file:!0,"http:":!0,"https:":!0,"ftp:":!0,"gopher:":!0,"file:":!0},g=r(105);function b(t,e,r){if(t&&o.isObject(t)&&t instanceof i)return t;var n=new i;return n.parse(t,e,r),n}i.prototype.parse=function(t,e,r){if(!o.isString(t))throw new TypeError("Parameter 'url' must be a string, not "+typeof t);var i=t.indexOf("?"),a=-1!==i&&i127?R+="x":R+=I[k];if(!R.match(p)){var C=T.slice(0,E),U=T.slice(E+1),B=I.match(d);B&&(C.push(B[1]),U.unshift(B[2])),U.length&&(b="/"+U.join(".")+b),this.hostname=C.join(".");break}}}this.hostname.length>255?this.hostname="":this.hostname=this.hostname.toLowerCase(),P||(this.hostname=n.toASCII(this.hostname));var N=this.port?":"+this.port:"",D=this.hostname||"";this.host=D+N,this.href+=this.host,P&&(this.hostname=this.hostname.substr(1,this.hostname.length-2),"/"!==b[0]&&(b="/"+b))}if(!y[S])for(E=0,L=f.length;E0)&&r.host.split("@"))&&(r.auth=P.shift(),r.host=r.hostname=P.shift());return r.search=t.search,r.query=t.query,o.isNull(r.pathname)&&o.isNull(r.search)||(r.path=(r.pathname?r.pathname:"")+(r.search?r.search:"")),r.href=r.format(),r}if(!_.length)return r.pathname=null,r.search?r.path="/"+r.search:r.path=null,r.href=r.format(),r;for(var A=_.slice(-1)[0],j=(r.host||t.host||_.length>1)&&("."===A||".."===A)||""===A,E=0,F=_.length;F>=0;F--)"."===(A=_[F])?_.splice(F,1):".."===A?(_.splice(F,1),E++):E&&(_.splice(F,1),E--);if(!w&&!S)for(;E--;E)_.unshift("..");!w||""===_[0]||_[0]&&"/"===_[0].charAt(0)||_.unshift(""),j&&"/"!==_.join("/").substr(-1)&&_.push("");var P,T=""===_[0]||_[0]&&"/"===_[0].charAt(0);O&&(r.hostname=r.host=T?"":_.length?_.shift():"",(P=!!(r.host&&r.host.indexOf("@")>0)&&r.host.split("@"))&&(r.auth=P.shift(),r.host=r.hostname=P.shift()));return(w=w||r.host&&_.length)&&!T&&_.unshift(""),_.length?r.pathname=_.join("/"):(r.pathname=null,r.path=null),o.isNull(r.pathname)&&o.isNull(r.search)||(r.path=(r.pathname?r.pathname:"")+(r.search?r.search:"")),r.auth=t.auth||r.auth,r.slashes=r.slashes||t.slashes,r.href=r.format(),r},i.prototype.parseHost=function(){var t=this.host,e=a.exec(t);e&&(":"!==(e=e[0])&&(this.port=e.substr(1)),t=t.substr(0,t.length-e.length)),t&&(this.hostname=t)}},function(t,e,r){var n=r(12),o=r(1),i=o["__core-js_shared__"]||(o["__core-js_shared__"]={});(t.exports=function(t,e){return i[t]||(i[t]=void 0!==e?e:{})})("versions",[]).push({version:n.version,mode:r(17)?"pure":"global",copyright:"© 2020 Denis Pushkarev (zloirock.ru)"})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var r=Math.ceil,n=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?n:r)(t)}},function(t,e,r){var n=r(19);t.exports=function(t){return Object(n(t))}},function(t,e,r){var n=r(11),o=r(0)("toStringTag"),i="Arguments"==n(function(){return arguments}());t.exports=function(t){var e,r,u;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(r=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?r:i?n(e):"Object"==(u=n(e))&&"function"==typeof e.callee?"Arguments":u}},function(t,e,r){var n=r(3).f,o=r(9),i=r(0)("toStringTag");t.exports=function(t,e,r){t&&!o(t=r?t:t.prototype,i)&&n(t,i,{configurable:!0,value:e})}},function(t,e,r){var n=r(48),o=r(33);t.exports=Object.keys||function(t){return n(t,o)}},function(t,e,r){var n=r(6),o=r(1).document,i=n(o)&&n(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e,r){var n=r(6);t.exports=function(t,e){if(!n(t))return t;var r,o;if(e&&"function"==typeof(r=t.toString)&&!n(o=r.call(t)))return o;if("function"==typeof(r=t.valueOf)&&!n(o=r.call(t)))return o;if(!e&&"function"==typeof(r=t.toString)&&!n(o=r.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,r){var n=r(1).document;t.exports=n&&n.documentElement},function(t,e,r){var n=r(22)("keys"),o=r(16);t.exports=function(t){return n[t]||(n[t]=o(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,r){t.exports=!r(7)&&!r(13)((function(){return 7!=Object.defineProperty(r(29)("div"),"a",{get:function(){return 7}}).a}))},function(t,e,r){var n=r(59),o=r(19);t.exports=function(t,e,r){if(n(e))throw TypeError("String#"+r+" doesn't accept regex!");return String(o(t))}},function(t,e,r){var n=r(0)("match");t.exports=function(t){var e=/./;try{"/./"[t](e)}catch(r){try{return e[n]=!1,!"/./"[t](e)}catch(t){}}return!0}},function(t,e,r){var n=r(24),o=r(19);t.exports=function(t){return function(e,r){var i,u,a=String(o(e)),s=n(r),c=a.length;return s<0||s>=c?t?"":void 0:(i=a.charCodeAt(s))<55296||i>56319||s+1===c||(u=a.charCodeAt(s+1))<56320||u>57343?t?a.charAt(s):i:t?a.slice(s,s+2):u-56320+(i-55296<<10)+65536}}},function(t,e,r){"use strict";var n,o,i=r(66),u=RegExp.prototype.exec,a=String.prototype.replace,s=u,c=(n=/a/,o=/b*/g,u.call(n,"a"),u.call(o,"a"),0!==n.lastIndex||0!==o.lastIndex),f=void 0!==/()??/.exec("")[1];(c||f)&&(s=function(t){var e,r,n,o,s=this;return f&&(r=new RegExp("^"+s.source+"$(?!\\s)",i.call(s))),c&&(e=s.lastIndex),n=u.call(s,t),c&&n&&(s.lastIndex=s.global?n.index+n[0].length:e),f&&n&&n.length>1&&a.call(n[0],r,(function(){for(o=1;or;)e.push(arguments[r++]);return m[++v]=function(){a("function"==typeof t?t:Function(t),e)},n(v),v},p=function(t){delete m[t]},"process"==r(11)(h)?n=function(t){h.nextTick(u(g,t,1))}:y&&y.now?n=function(t){y.now(u(g,t,1))}:d?(i=(o=new d).port2,o.port1.onmessage=b,n=u(i.postMessage,i,1)):f.addEventListener&&"function"==typeof postMessage&&!f.importScripts?(n=function(t){f.postMessage(t+"","*")},f.addEventListener("message",b,!1)):n="onreadystatechange"in c("script")?function(t){s.appendChild(c("script")).onreadystatechange=function(){s.removeChild(this),g.call(t)}}:function(t){setTimeout(u(g,t,1),0)}),t.exports={set:l,clear:p}},function(t,e,r){"use strict";var n=r(23);function o(t){var e,r;this.promise=new t((function(t,n){if(void 0!==e||void 0!==r)throw TypeError("Bad Promise constructor");e=t,r=n})),this.resolve=n(e),this.reject=n(r)}t.exports.f=function(t){return new o(t)}},function(t,e,r){var n=r(0)("iterator"),o=!1;try{var i=[7][n]();i.return=function(){o=!0},Array.from(i,(function(){throw 2}))}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var r=!1;try{var i=[7],u=i[n]();u.next=function(){return{done:r=!0}},i[n]=function(){return u},t(i)}catch(t){}return r}},function(t,e,r){var n=r(24),o=Math.max,i=Math.min;t.exports=function(t,e){return(t=n(t))<0?o(t+e,0):i(t,e)}},function(t,e,r){e.f=r(0)},function(t,e,r){var n=r(9),o=r(14),i=r(86)(!1),u=r(32)("IE_PROTO");t.exports=function(t,e){var r,a=o(t),s=0,c=[];for(r in a)r!=u&&n(a,r)&&c.push(r);for(;e.length>s;)n(a,r=e[s++])&&(~i(c,r)||c.push(r));return c}},function(t,e){e.f=Object.getOwnPropertySymbols},function(t,e,r){var n=r(2),o=r(88),i=r(33),u=r(32)("IE_PROTO"),a=function(){},s=function(){var t,e=r(29)("iframe"),n=i.length;for(e.style.display="none",r(31).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write("