emitHTML fixed, need to fix asset importing

KonnorRogers · Oct 8, 2020 · 4ede449 · 4ede449
1 parent 84d7905
commit 4ede449
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 10 deletions.
diff --git a/__tests__/build.test.js b/__tests__/build.test.js
@@ -72,7 +72,6 @@ Build("Should appropriately format a manifest.json", () => {
 
 // DOM Assertions
 import { JSDOM } from "jsdom";
-import { baseFileName } from "../src/manifestUtils";
 
 const jsdom = new JSDOM(fs.readFileSync(path.join(buildDir, "index.html")));
 const jsdocument = jsdom.window.document;
@@ -83,7 +82,10 @@ const manifest = JSON.parse(
 
 Build("Should rewrite to a hashed script for index.html", () => {
   scripts.forEach((script) => {
-    const baseName = baseFileName(script.src);
+    const baseName = path
+      .parse(parseHashFileName(script.src))
+      .name.split(".")[0];
+
     assert.is(manifest.entrypoints[baseName]["js"], script.src);
   });
 });

diff --git a/__tests__/examples/example_dir/build/index.html b/__tests__/examples/example_dir/build/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html><html lang="en"><head>
   <meta charset="UTF-8">
   <title>Testing 1 2</title>
-  <link href="/css/application-f5ebf47f.css" rel="stylesheet"><script src="build" type="module"></script>
+  <link rel="stylesheet" href="/css/application-f5ebf47f.css"><script src="/entrypoints/application-ba13ddb2.js" type="module"></script>
 </head>
 <body>
   <div data-controller="hello-world"></div>

diff --git a/....spec.js/Find all elements on the page -- Finds all elements by test id (1).png b/....spec.js/Find all elements on the page -- Finds all elements by test id (1).png
diff --git a/....js/Find all elements on the page -- Finds all elements by test id (failed).png b/....js/Find all elements on the page -- Finds all elements by test id (failed).png
diff --git a/...find.spec.js/Find all elements on the page -- Finds all elements by test id.png b/...find.spec.js/Find all elements on the page -- Finds all elements by test id.png
diff --git a/src/emitHtmlFiles.js b/src/emitHtmlFiles.js
@@ -2,6 +2,7 @@ import fs from "fs";
 import path from "path";
 import { parseHashFileName } from "./utils";
 import { JSDOM } from "jsdom";
+import url from "url";
 
 /**
  * An instance of JSDOM
@@ -23,14 +24,14 @@ import { JSDOM } from "jsdom";
  * @param {string} params.destFile - Path to the new file
  * @returns {undefined}
  */
-export function emitHtmlFiles({ file, manifest, destFile, buildDirectory }) {
+export function emitHtmlFiles({ file, manifest, destFile, baseUrl }) {
   const fileContents = fs.readFileSync(file, { encoding: "utf8" });
 
   const dom = new JSDOM(fileContents, {
     includeNodeLocations: true,
   });
 
-  const newDom = rewriteScripts({ dom, manifest, buildDirectory });
+  const newDom = rewriteScripts({ dom, manifest, baseUrl });
 
   fs.writeFileSync(destFile, newDom.serialize(), "utf8");
 }
@@ -42,7 +43,7 @@ export function emitHtmlFiles({ file, manifest, destFile, buildDirectory }) {
  * @param {ManifestObject} params.manifest - Manifest file parsed to Object
  * @returns {string} Returns a string from serializing JSDOM
  */
-export function rewriteScripts({ dom, manifest, buildDirectory }) {
+export function rewriteScripts({ dom, manifest, baseUrl }) {
   const domDocument = dom.window.document;
   const scripts = domDocument.querySelectorAll("script");
   const unhashedEntrypoints = Object.keys(manifest.entrypoints).map(
@@ -55,18 +56,29 @@ export function rewriteScripts({ dom, manifest, buildDirectory }) {
     if (!isEntrypoint({ entrypoints: unhashedEntrypoints, script })) {
       return;
     }
+
     const baseFile = path.parse(script.src).name;
-    script.src = manifest.entrypoints[baseFile].js
+    const jsFile = manifest.entrypoints[baseFile].js;
+    console.log(fixUrl({ baseUrl, file: jsFile }));
+    script.src = fixUrl({ baseUrl, file: jsFile });
 
+    const cssFile = manifest.entrypoints[baseFile].css;
     const stylesheet = domDocument.createElement("link");
-    stylesheet.href = manifest.entrypoints[baseFile].css;
     stylesheet.rel = "stylesheet";
+    stylesheet.href = fixUrl({ baseUrl, file: cssFile });
     insertBefore(script, stylesheet);
   });
 
   return dom;
 }
 
+function fixUrl({ baseUrl, file }) {
+  baseUrl = baseUrl || "/";
+  return url.parse(baseUrl).protocol
+    ? url.resolve(baseUrl, file)
+    : path.posix.join(baseUrl, file);
+}
+
 function insertBefore(existingNode, newNode) {
   existingNode.parentNode.insertBefore(newNode, existingNode);
 }

diff --git a/src/index.js b/src/index.js
@@ -20,7 +20,13 @@ function getEntrypoints(entrypoints) {
   return entrypoints;
 }
 
-async function rollupBuild({ pluginOptions, inputOptions, outputOptions }) {
+async function rollupBuild({
+  snowpackConfig,
+  pluginOptions,
+  inputOptions,
+  outputOptions,
+}) {
+  const baseUrl = snowpackConfig.baseUrl || "/";
   const TMP_DEBUG_DIRECTORY = path.join(os.tmpdir(), "_source_");
 
   const entrypoints = getEntrypoints(pluginOptions.entrypoints);
@@ -68,7 +74,7 @@ async function rollupBuild({ pluginOptions, inputOptions, outputOptions }) {
     glob.sync(buildDirectory + "**/*.html").forEach((file) => {
       let destFile = path.relative(buildDirectory, file);
       destFile = path.join(TMP_BUILD_DIRECTORY, destFile);
-      emitHtmlFiles({ file, manifest, destFile, buildDirectory });
+      emitHtmlFiles({ file, manifest, destFile, baseUrl });
     });
   }
 
@@ -103,6 +109,9 @@ const plugin = (snowpackConfig, pluginOptions = {}) => {
       }
 
       const extendedConfig = await extendConfig({
+        snowpackConfig: {
+          ...snowpackConfig,
+        },
         pluginOptions: {
           ...pluginOptions,
         },