CSS Hotreload if put in html (#128)

* css refresh on html * clean and clear up code a lil * remove console log * improve code structure * Ensure that CSS HMR JS is actually included in the bundle * Refactor sibling bundle insertion in HTMLPackager and add test * Use urlJoin
parcel-bundler · Jan 6, 2018 · fb3f9d7 · fb3f9d7
1 parent 9770acf
commit fb3f9d7
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 19 deletions.
diff --git a/src/Bundler.js b/src/Bundler.js
@@ -410,6 +410,15 @@ class Bundler extends EventEmitter {
       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) {
+        if (asset.generated[t]) {
+          bundle.getSiblingBundle(t).addAsset(asset);
+        }
+      }
+    }
+
     asset.parentBundle = bundle;
 
     for (let dep of asset.dependencies.values()) {

diff --git a/src/packagers/HTMLPackager.js b/src/packagers/HTMLPackager.js
@@ -7,23 +7,22 @@ class HTMLPackager extends Packager {
   async addAsset(asset) {
     let html = asset.generated.html || '';
 
-    // Find child bundles (e.g. JS) that have a sibling CSS bundle,
+    // Find child bundles that have JS or CSS sibling bundles,
     // add them to the head so they are loaded immediately.
-    let cssBundles = Array.from(this.bundle.childBundles)
-      .map(b => b.siblingBundles.get('css'))
-      .filter(Boolean);
-
-    if (cssBundles.length > 0) {
-      html = posthtml(this.insertCSSBundles.bind(this, cssBundles)).process(
-        html,
-        {sync: true}
-      ).html;
+    let siblingBundles = Array.from(this.bundle.childBundles)
+      .reduce((p, b) => p.concat([...b.siblingBundles.values()]), [])
+      .filter(b => b.type === 'css' || b.type === 'js');
+
+    if (siblingBundles.length > 0) {
+      html = posthtml(
+        this.insertSiblingBundles.bind(this, siblingBundles)
+      ).process(html, {sync: true}).html;
     }
 
     await this.dest.write(html);
   }
 
-  insertCSSBundles(cssBundles, tree) {
+  getHeadContent(tree) {
     let head = find(tree, 'head');
     if (!head) {
       let html = find(tree, 'html');
@@ -35,14 +34,29 @@ class HTMLPackager extends Packager {
       head.content = [];
     }
 
-    for (let bundle of cssBundles) {
-      head.content.push({
-        tag: 'link',
-        attrs: {
-          rel: 'stylesheet',
-          href: urlJoin(this.options.publicURL, path.basename(bundle.name))
-        }
-      });
+    return head;
+  }
+
+  insertSiblingBundles(siblingBundles, tree) {
+    let head = this.getHeadContent(tree);
+
+    for (let bundle of siblingBundles) {
+      if (bundle.type === 'css') {
+        head.content.push({
+          tag: 'link',
+          attrs: {
+            rel: 'stylesheet',
+            href: urlJoin(this.options.publicURL, path.basename(bundle.name))
+          }
+        });
+      } else if (bundle.type === 'js') {
+        head.content.push({
+          tag: 'script',
+          attrs: {
+            src: urlJoin(this.options.publicURL, path.basename(bundle.name))
+          }
+        });
+      }
     }
   }
 }

diff --git a/test/html.js b/test/html.js
@@ -151,6 +151,33 @@ describe('html', function() {
     );
   });
 
+  it('should insert sibling JS bundles for CSS files in the HEAD', async function() {
+    let b = await bundle(__dirname + '/integration/html-css-js/index.html', {
+      hmr: true
+    });
+
+    assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'css',
+          assets: ['index.css'],
+          childBundles: [
+            {
+              type: 'js',
+              assets: ['index.css', 'bundle-url.js', 'css-loader.js'],
+              childBundles: []
+            }
+          ]
+        }
+      ]
+    });
+
+    let html = fs.readFileSync(__dirname + '/dist/index.html');
+    assert(/<script src="[/\\]{1}dist[/\\]{1}[a-f0-9]+\.js">/.test(html));
+  });
+
   it('should minify HTML in production mode', async function() {
     await bundle(__dirname + '/integration/htmlnano/index.html', {
       production: true

diff --git a/test/integration/html-css-js/index.css b/test/integration/html-css-js/index.css
@@ -0,0 +1,3 @@
+body {
+  background: red;
+}
diff --git a/test/integration/html-css-js/index.html b/test/integration/html-css-js/index.html
@@ -0,0 +1,10 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <link rel="stylesheet" href="index.css">
+</head>
+<body>
+  <h1>Hello world</h1>
+</body>
+</html>