HTML bundle loader (#1732)

packages/core/parcel/src/Bundler.js

@@ -51,6 +51,10 @@ class Bundler extends EventEmitter {
  browser: require.resolve('./builtins/loaders/browser/js-loader'),
  node: require.resolve('./builtins/loaders/node/js-loader')
  });
+ this.addBundleLoader('html', {
+ browser: require.resolve('./builtins/loaders/browser/html-loader'),
+ node: require.resolve('./builtins/loaders/node/html-loader')
+ });
 
  this.pending = false;
  this.loadedAssets = new Map();
@@ -620,6 +624,12 @@ class Bundler extends EventEmitter {
  let isEntryAsset =
  asset.parentBundle && asset.parentBundle.entryAsset === asset;
 
+ // If the asset generated a representation for the parent bundle type, and this
+ // is not an async import, add it to the current bundle
+ if (bundle.type && asset.generated[bundle.type] != null && !dep.dynamic) {
+ bundle.addAsset(asset);
+ }
+
  if ((dep && dep.dynamic) || !bundle.type) {
  // If the asset is already the entry asset of a bundle, don't create a duplicate.
  if (isEntryAsset) {
@@ -628,24 +638,23 @@ class Bundler extends EventEmitter {
 
  // Create a new bundle for dynamic imports
  bundle = bundle.createChildBundle(asset, dep);
- } else if (asset.type && !this.packagers.has(asset.type)) {
+ } else if (
+ asset.type &&
+ !this.packagers.get(asset.type).shouldAddAsset(bundle, asset)
+ ) {
  // If the asset is already the entry asset of a bundle, don't create a duplicate.
  if (isEntryAsset) {
  return;
  }
 
- // No packager is available for this asset type. Create a new bundle with only this asset.
- bundle.createSiblingBundle(asset);
+ // No packager is available for this asset type, or the packager doesn't support
+ // combining this asset into the bundle. Create a new bundle with only this asset.
+ bundle = bundle.createSiblingBundle(asset, dep);
  } else {
  // Add the asset to the common bundle of the asset's type
  bundle.getSiblingBundle(asset.type).addAsset(asset);
  }
 
- // If the asset generated a representation for the parent bundle type, also add it there
- if (asset.generated[bundle.type] != null) {
- bundle.addAsset(asset);
- }
-
  // Add the asset to sibling bundles for each generated type
  if (asset.type && asset.generated[asset.type]) {
  for (let t in asset.generated) {

packages/core/parcel/src/builtins/loaders/browser/html-loader.js

@@ -0,0 +1,5 @@
+module.exports = function loadHTMLBundle(bundle) {
+ return fetch(bundle).then(function (res) {
+ return res.text();
+ });
+};

packages/core/parcel/src/builtins/loaders/node/html-loader.js

@@ -0,0 +1,17 @@
+var fs = require('fs');
+
+module.exports = function loadHTMLBundle(bundle) {
+ return new Promise(function(resolve, reject) {
+ fs.readFile(__dirname + bundle, 'utf8', function(err, data) {
+ if (err) {
+ reject(err);
+ } else {
+ // wait for the next event loop iteration, so we are sure
+ // the current module is fully loaded
+ setImmediate(function() {
+ resolve(data);
+ });
+ }
+ });
+ });
+};

packages/core/parcel/src/packagers/HTMLPackager.js

@@ -16,6 +16,11 @@ const metadataContent = new Set([
 ]);
 
 class HTMLPackager extends Packager {
+ static shouldAddAsset() {
+ // We cannot combine multiple HTML files together - they should be written as separate bundles.
+ return false;
+ }
+
  async addAsset(asset) {
  let html = asset.generated.html || '';
 

packages/core/parcel/src/packagers/Packager.js

@@ -10,6 +10,10 @@ class Packager {
  this.options = bundler.options;
  }
 
+ static shouldAddAsset() {
+ return true;
+ }
+
  async setup() {
  // Create sub-directories if needed
  if (this.bundle.name.includes(path.sep)) {

packages/core/parcel/src/packagers/RawPackager.js

@@ -3,6 +3,11 @@ const path = require('path');
 const fs = require('../utils/fs');
 
 class RawPackager extends Packager {
+ static shouldAddAsset() {
+ // We cannot combine multiple raw assets together - they should be written as separate bundles.
+ return false;
+ }
+
  // Override so we don't create a file for this bundle.
  // Each asset will be emitted as a separate file instead.
  setup() {}

packages/core/parcel/test/integration/import-html-async/index.css

@@ -0,0 +1,3 @@
+body {
+ background: red;
+}

packages/core/parcel/test/integration/import-html-async/index.js

@@ -0,0 +1 @@
+module.exports = import('./other.html');

packages/core/parcel/test/integration/import-html-async/other.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+ <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+ <h1>Other page</h1>
+ <img src="100x100.png" />
+</body>
+</html>

packages/core/parcel/test/integration/import-html-sync/index.css

@@ -0,0 +1,3 @@
+body {
+ background: red;
+}

packages/core/parcel/test/integration/import-html-sync/index.js

@@ -0,0 +1 @@
+output(require('./other.html'));

packages/core/parcel/test/integration/import-html-sync/other.html

@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+ <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+ <h1>Other page</h1>
+ <img src="100x100.png" />
+</body>
+</html>

packages/core/parcel/test/javascript.js

@@ -1,7 +1,7 @@
 const assert = require('assert');
 const fs = require('../src/utils/fs');
 const path = require('path');
-const {bundle, run, assertBundleTree} = require('./utils');
+const {bundle, run, assertBundleTree, deferred} = require('./utils');
 const {mkdirp} = require('../src/utils/fs');
 
 describe('javascript', function() {
@@ -1222,4 +1222,128 @@ describe('javascript', function() {
  let module = await run(b);
  assert.equal(module.default, 'Hello Hello!');
  });
+
+ it('should support importing HTML from JS async', async function() {
+ let b = await bundle(
+ __dirname + '/integration/import-html-async/index.js',
+ {sourceMaps: false}
+ );
+
+ await assertBundleTree(b, {
+ name: 'index.js',
+ assets: [
+ 'index.js',
+ 'bundle-loader.js',
+ 'bundle-url.js',
+ 'html-loader.js'
+ ],
+ childBundles: [
+ {
+ type: 'html',
+ assets: ['other.html'],
+ childBundles: [
+ {
+ type: 'png',
+ assets: ['100x100.png'],
+ childBundles: []
+ },
+ {
+ type: 'css',
+ assets: ['index.css'],
+ childBundles: []
+ }
+ ]
+ }
+ ]
+ });
+
+ let output = await run(b);
+ assert.equal(typeof output, 'string');
+ assert(output.includes('<html>'));
+ assert(output.includes('Other page'));
+ });
+
+ it('should support importing HTML from JS async with --target=node', async function() {
+ let b = await bundle(
+ __dirname + '/integration/import-html-async/index.js',
+ {
+ target: 'node',
+ sourceMaps: false
+ }
+ );
+
+ await assertBundleTree(b, {
+ name: 'index.js',
+ assets: [
+ 'index.js',
+ 'bundle-loader.js',
+ 'bundle-url.js',
+ 'html-loader.js'
+ ],
+ childBundles: [
+ {
+ type: 'html',
+ assets: ['other.html'],
+ childBundles: [
+ {
+ type: 'png',
+ assets: ['100x100.png'],
+ childBundles: []
+ },
+ {
+ type: 'css',
+ assets: ['index.css'],
+ childBundles: []
+ }
+ ]
+ }
+ ]
+ });
+
+ let output = await run(b);
+ assert.equal(typeof output, 'string');
+ assert(output.includes('<html>'));
+ assert(output.includes('Other page'));
+ });
+
+ it('should support importing HTML from JS sync', async function() {
+ let b = await bundle(__dirname + '/integration/import-html-sync/index.js', {
+ sourceMaps: false
+ });
+
+ await assertBundleTree(b, {
+ name: 'index.js',
+ assets: [
+ 'index.js',
+ 'bundle-loader.js',
+ 'bundle-url.js',
+ 'html-loader.js'
+ ],
+ childBundles: [
+ {
+ type: 'html',
+ assets: ['other.html'],
+ childBundles: [
+ {
+ type: 'png',
+ assets: ['100x100.png'],
+ childBundles: []
+ },
+ {
+ type: 'css',
+ assets: ['index.css'],
+ childBundles: []
+ }
+ ]
+ }
+ ]
+ });
+
+ let promise = deferred();
+ await run(b, {output: promise.resolve}, {require: false});
+ let output = await promise;
+ assert.equal(typeof output, 'string');
+ assert(output.includes('<html>'));
+ assert(output.includes('Other page'));
+ });
 });

packages/core/parcel/test/utils.js

@@ -106,6 +106,11 @@ function prepareBrowserContext(bundle, globals) {
  nodeFS.readFileSync(path.join(__dirname, 'dist', url))
  ).buffer
  );
+ },
+ text() {
+ return Promise.resolve(
+ nodeFS.readFileSync(path.join(__dirname, 'dist', url), 'utf8')
+ );
  }
  });
  }