Fix #2786 (links in HTML files in sub directories)

packages/core/integration-tests/test/html.js

@@ -836,4 +836,130 @@ describe('html', function() {
       'Imports and requires are not supported inside inline <script> tags yet.'
     );
   });
+
+  it('should write correct relative urls in html file in sub directory when relative public url is specified', async function() {
+    const b = await bundle(
+      path.join(__dirname, '/integration/html-js-in-subdir/index.html'),
+      {
+        publicURL: './'
+      }
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'html',
+          assets: ['page1-in-subdir.html'],
+          childBundles: [
+            {
+              type: 'html',
+              assets: ['page2-in-subdir.html']
+            }
+          ]
+        }
+      ]
+    });
+
+    let html = await fs.readFile(
+      path.join(__dirname, '/dist/index.html'),
+      'utf8'
+    );
+
+    // link to html page in sub dir
+    const href = html.match(/href="(.*)"/);
+    assert(href, 'href contained in index.html');
+    assert.equal(href[1], 'subdir/page1-in-subdir.html');
+
+    let htmlInSubDir1 = await fs.readFile(
+      path.join(__dirname, '/dist/subdir/page1-in-subdir.html'),
+      'utf8'
+    );
+
+    const hrefInSubDir1 = htmlInSubDir1.match(/href="(.*)"/);
+    assert(hrefInSubDir1, 'href contained in page1-in-subdir.html');
+    assert.equal(hrefInSubDir1[1], 'page2-in-subdir.html');
+
+    const src = htmlInSubDir1.match(/<script src="(.+)"/);
+    assert(src, '<script src="..."> contained in page1-in-subdir.html');
+    const jsLink = src[1];
+    const jsFileLinkStart = '../in-subdir';
+    assert(
+      jsLink.startsWith(jsFileLinkStart),
+      `JavaScript file link should start with '${jsFileLinkStart}' but is '${jsLink}'`
+    );
+
+    let htmlInSubDir2 = await fs.readFile(
+      path.join(__dirname, '/dist/subdir/page2-in-subdir.html'),
+      'utf8'
+    );
+
+    const hrefInSubDir2 = htmlInSubDir2.match(/href="(.*)"/);
+    assert(hrefInSubDir2, 'href contained in page1-in-subdir.html');
+    assert.equal(hrefInSubDir2[1], 'page1-in-subdir.html');
+  });
+
+  it('should write correct absolute urls in html file in sub directory when absolute public url is specified', async function() {
+    const b = await bundle(
+      path.join(__dirname, '/integration/html-js-in-subdir/index.html'),
+      {
+        publicURL: '/'
+      }
+    );
+
+    await assertBundleTree(b, {
+      name: 'index.html',
+      assets: ['index.html'],
+      childBundles: [
+        {
+          type: 'html',
+          assets: ['page1-in-subdir.html'],
+          childBundles: [
+            {
+              type: 'html',
+              assets: ['page2-in-subdir.html']
+            }
+          ]
+        }
+      ]
+    });
+
+    let html = await fs.readFile(
+      path.join(__dirname, '/dist/index.html'),
+      'utf8'
+    );
+
+    // link to html page in sub dir
+    const href = html.match(/href="(.*)"/);
+    assert(href, 'href contained in index.html');
+    assert.equal(href[1], '/subdir/page1-in-subdir.html');
+
+    let htmlInSubDir1 = await fs.readFile(
+      path.join(__dirname, '/dist/subdir/page1-in-subdir.html'),
+      'utf8'
+    );
+
+    const hrefInSubDir1 = htmlInSubDir1.match(/href="(.*)"/);
+    assert(hrefInSubDir1, 'href contained in page1-in-subdir.html');
+    assert.equal(hrefInSubDir1[1], '/subdir/page2-in-subdir.html');
+
+    const src = htmlInSubDir1.match(/<script src="(.+)"/);
+    assert(src, '<script src="..."> contained in page1-in-subdir.html');
+    const jsLink = src[1];
+    const jsFileLinkStart = '/in-subdir';
+    assert(
+      jsLink.startsWith(jsFileLinkStart),
+      `JavaScript file link should start with '${jsFileLinkStart}' but is '${jsLink}'`
+    );
+
+    let htmlInSubDir2 = await fs.readFile(
+      path.join(__dirname, '/dist/subdir/page2-in-subdir.html'),
+      'utf8'
+    );
+
+    const hrefInSubDir2 = htmlInSubDir2.match(/href="(.*)"/);
+    assert(hrefInSubDir2, 'href contained in page1-in-subdir.html');
+    assert.equal(hrefInSubDir2[1], '/subdir/page1-in-subdir.html');
+  });
 });

packages/core/integration-tests/test/integration/html-js-in-subdir/index.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<body>
+    <h1>Root</h1>
+    <a href="./subdir/page1-in-subdir.html">./subdir/page1-in-subdir.html</a>
+</body>
+</html>

packages/core/integration-tests/test/integration/html-js-in-subdir/subdir/in-subdir.js

@@ -0,0 +1,3 @@
+var elem = document.createElement("div");
+elem.innerText = "Hello World!";
+document.body.appendChild(elem);

packages/core/integration-tests/test/integration/html-js-in-subdir/subdir/page1-in-subdir.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+    <h1>page 1 in sub directory</h1>
+    <a href="./page2-in-subdir.html">./page2-in-subdir.html</a>
+    <script src="./in-subdir.js"></script>
+</body>
+</html>

packages/core/integration-tests/test/integration/html-js-in-subdir/subdir/page2-in-subdir.html

@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<body>
+    <h1>page 1 in sub directory</h1>
+    <a href="./page1-in-subdir.html">./page1-in-subdir.html</a>
+    <script src="./in-subdir.js"></script>
+</body>
+</html>

packages/core/parcel-bundler/src/Asset.js

@@ -258,7 +258,10 @@ class Asset {
         // Replace temporary bundle names in the output with the final content-hashed names.
         let newValue = value;
         for (let [name, map] of bundleNameMap) {
-          newValue = newValue.split(name).join(map);
+          const newBundlePath = this.convertToUnixStyleDirectorySeparators(
+            this.makeBundlePathRelativeToParentBundle(map)
+          );
+          newValue = newValue.split(name).join(newBundlePath);
         }
 
         // Copy `this.generated` on write so we don't end up writing the final names to the cache.
@@ -272,6 +275,34 @@ class Asset {
     }
   }
 
+  makeBundlePathRelativeToParentBundle(bundlePath) {
+    if (path.isAbsolute(bundlePath)) {
+      return bundlePath;
+    }
+    if (!this.options || !this.options.publicURL) {
+      return bundlePath;
+    }
+    const urlPath = URL.parse(this.options.publicURL).path;
+    if (path.isAbsolute(urlPath)) {
+      return bundlePath;
+    }
+
+    // contentHash true or false does not matter because
+    // we only use the directory part of the path.
+    const parentBundleRelativePath = this.parentBundle.getHashedBundleName();
+    const parentBundleRelativeDir =
+      path.dirname(parentBundleRelativePath) || '.';
+    const relativeBundlePath = path.relative(
+      parentBundleRelativeDir,
+      bundlePath
+    );
+    return relativeBundlePath;
+  }
+
+  convertToUnixStyleDirectorySeparators(bundlePath) {
+    return bundlePath.replace(/\\/g, '/');
+  }
+
   generateErrorMessage(err) {
     return err;
   }