Parcel: Add a html bundleloader

[devlux]

🙋 feature request

Add a html bundleloader to allow html fragments to be loaded dynamically, like already possible with js or css content.

🤔 Expected Behavior

Add a html bundleloader to allow html fragments to be loaded dynamically, like already possible with js or css content.

import('view.html')

😯 Current Behavior

Currently the following exception is thrown as no html bundleloader is implemented yet:

bundleLoaders[type] is not a function

💁 Possible Solution

Add a new html bundleloader to the existing bundleloaders:

https://github.com/parcel-bundler/parcel/blob/c8295de9b7a1955c70f3619ccdced93284e6f601/src/builtins/bundle-loader.js#L24

🔦 Context

I'm migrating a small spa from requirejs to parcel-bundler.

[abiduzz420]

This issue looks interesting to me, although I don't know much about it. I shall read about it.
I would like to take it up @davidnagli

[davidnagli]

@abiduzz420 Sounds good!

[abiduzz420]

@davidnagli @devlux I am going to add support for "div", "button". Please suggest me other html fragments which should be included?

[abiduzz420]

@davidnagli @devongovett I have done some reading and got a bit of understanding. Want to share the code on the lines I'm thinking. Would like to know if I'm doing it properly:

function loadHTMLBundle(bundle) {
    return new Promise(function (resolve,reject) {
        var nodeElement = document.createElement('nodeName'); // nodeName could be 'div','button'
        /* add html element properties : Refer https://www.w3schools.com/jsref/dom_obj_all.asp
        /*
        /*
        /*
        /*
        */
        nodeElement.onerror = function (e) {
            nodeElement.onerror = nodeElement.onload = null;
            reject(e);
        };

        nodeElement.onload = function () {
            nodeElement.onerror = nodeElement.onload = null;
            resolve();
        }

        document.getElementsByTagName('head')[0].appendChild(nodeElement);
    });
}

Also mention if there is any certain detail I've not taken care of.
Thanks!

[devlux]

@abiduzz420 thanks for taking over this story! :-) I've read into the code myself today and I think the loadHTMLBundle method receives an URL to load the HTML fragment from. The purpose of this method is to load the content from that URL, e.g. by using HTML import as follows:

function loadHTMLBundle(bundle) {
  return new Promise(function (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);
  });
}

The content may then be accessed by calling:

var content = document.querySelector('link[rel="import"]').import;

Unfortunately HTML import it is not yet supported by all browsers, but there is a polyfill:

https://caniuse.com/#search=html%20import

I'm still trying to understand how the bundle model is created initially. And in the end the content needs to be resolved by the require promise. Therefore the above snippet seems to be only one part of the solution... ;-)

[abiduzz420]

@devlux Thanks for sharing the update.

[abiduzz420]

@devlux Have you looked at Webpack, browserify source code on how they solve this problem ? Perhaps we can take inspiration from there. I will look into how this problem is solved by webpack. Do let me know if you've found something exciting 😄

https://github.com/webpack-contrib/html-loader

[abiduzz420]

I'm reading about Polyfills-Web components, looking into Polymer as well. Will update my progress soon @davidnagli
I request to let me work on this issue, even if it takes few more extra days :)

[davidnagli]

Sounds good to me

[abiduzz420]

I wrote the test for the below, not able to figure why it throws TypeError: name undefined.

1) html should support dynamic imports for HTML:
     TypeError: Cannot read property 'name' of undefined
      at assertBundleTree (test\utils.js:93:39)
      at Context.<anonymous> (test\html.js:141:5)
      at <anonymous>

[DeMoorJasper]

@abiduzz420 hmu on slack would love to help you out with implementing this

[logicalphase]

Just wanted to make sure everyone knows Polymer 3 abandons HTML Imports in favor of ES modules NPM. You can glean an example of Polymer 3 pre.12, PSK (Polymer Starter Kit) with Webpack at: https://goo.gl/9KSRr7 Would love to see Parcel for Polymer 3. 🤗