diff --git a/package.json b/package.json index 78fd7dbb5be..de99abc09b8 100644 --- a/package.json +++ b/package.json @@ -8,6 +8,7 @@ "url": "https://github.com/parcel-bundler/parcel.git" }, "dependencies": { + "@webcomponents/webcomponentsjs": "^1.0.20", "babel-core": "^6.25.0", "babel-generator": "^6.25.0", "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0", diff --git a/src/builtins/bundle-loader.js b/src/builtins/bundle-loader.js index 16323dff036..780854cce61 100644 --- a/src/builtins/bundle-loader.js +++ b/src/builtins/bundle-loader.js @@ -23,7 +23,8 @@ module.exports = exports = loadBundles; var bundles = {}; var bundleLoaders = { js: loadJSBundle, - css: loadCSSBundle + css: loadCSSBundle, + html: loadHTMLBundle }; function loadBundle(bundle) { @@ -78,6 +79,25 @@ function loadCSSBundle(bundle) { }); } +function loadHTMLBundle(bundle) { + return new Promise((resolve, reject) => { + var link = document.createElement('link'); + link.rel = 'import'; + link.href = bundle; + link.onerror = function (e) { + link.onerror = link.onload = null; + reject(e); + }; + + link.onload = function () { + link.onerror = link.onload = null; + resolve(); + }; + + document.getElementsByTagName('head')[0].appendChild(link); + }); +} + function LazyPromise(executor) { this.executor = executor; this.promise = null; diff --git a/test/html.js b/test/html.js index e7e7430000a..8b6e4990435 100644 --- a/test/html.js +++ b/test/html.js @@ -134,4 +134,25 @@ describe('html', function() { let html = fs.readFileSync(__dirname + '/dist/index.html', 'utf8'); assert(html.includes('')); }); + + it('should support dynamic imports for HTML', async function() { + let b = await bundle(__dirname + '/integration/html-import/index.html'); + + assertBundleTree(b, { + name: 'index.html', + assets: ['index.html'], + childBundles: [ + { + type: 'html', + assets: ['other.html'], + childBundles: [] + }, + { + type: 'js', + assets: ['webcomponents-loader.js'], + childBundles: [] + } + ] + }); + }); }); diff --git a/test/integration/html-import/index.html b/test/integration/html-import/index.html new file mode 100644 index 00000000000..f8a2e9bce06 --- /dev/null +++ b/test/integration/html-import/index.html @@ -0,0 +1,20 @@ + + + + + HTML Imports + + + + +

Testing HTML Imports

+ + + + \ No newline at end of file diff --git a/test/integration/html-import/other.html b/test/integration/html-import/other.html new file mode 100644 index 00000000000..39b61f8bc47 --- /dev/null +++ b/test/integration/html-import/other.html @@ -0,0 +1,8 @@ + + + +
+

Import HTML imported other.html

+
+ + \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index 75625233d5a..efe8bcb6215 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,6 +2,10 @@ # yarn lockfile v1 +"@webcomponents/webcomponentsjs@^1.0.20": + version "1.0.20" + resolved "https://registry.yarnpkg.com/@webcomponents/webcomponentsjs/-/webcomponentsjs-1.0.20.tgz#bac97c9709a3130241da4c2c85710e1dc8775b1c" + abbrev@1: version "1.1.1" resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"