Merge pull request #2 from dpikt/no-head

Refactor + update injection logic
dpikt · Dec 23, 2023 · d6966a0 · d6966a0
2 parents 2723736 + 7a1cf8c
commit d6966a0
Show file tree

Hide file tree

Showing 12 changed files with 87 additions and 13 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+21
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "modulepreload",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "",
   "main": "cli.js",
   "bin": {

diff --git a/src/inject.js b/src/inject.js
@@ -29,19 +29,23 @@ class ImportCollector {
       resolvedImport = new URL(specifier, parent.origin)
     }
     if (!resolvedImport) {
-      throw 'could not resolve import: ' + specifier
+      console.warn(`WARNING: could not resolve import specifier: ${specifier} from parent: ${parent} - skipping`)
+      return
     };
     if (this.dependencies.has(resolvedImport.href)) return;
     this.dependencies.add(resolvedImport.href);
     if (resolvedImport.protocol === "file:") {
+      let contents = null
       try {
-        const contents = await fs.promises.readFile(resolvedImport, "utf8");
+        contents = await fs.promises.readFile(resolvedImport, "utf8");
+      } catch (e) {
+        console.warn('WARNING: could not read file: ' + resolvedImport.href + ' - skipping')
+      }
+      if (contents) {
         const deps = await getImports(contents);
         await Promise.all(
           deps.map((dep) => this.visit(dep, resolvedImport))
         );
-      } catch (e) {
-        console.warn('WARNING: could not read file: ' + resolvedImport.href + ' - skipping')
       }
     } else if (resolvedImport.protocol.startsWith("http")) {
       if (!this.noFetch) {
@@ -118,7 +122,14 @@ export function injectPreloads(contents, dependencies) {
   for (const dep of dependencies) {
     preloads += `<link rel="modulepreload" href="${dep}" />\n`;
   }
-  return contents.replace("</head>", `${preloads}</head>`);
+  if (contents.includes("</head>")) {
+    return contents.replace("</head>", `${preloads}</head>`);
+  } else if (contents.includes("</html>")) {
+    return contents.replace("<html>", `<html>\n${preloads}`);
+  } else {
+    console.warn('WARNING: could not find <head> or <html> in HTML - skipping.')
+    return contents;
+  }
 }
 
 export async function link(htmlContentsOrUrl, { baseUrl: providedBaseUrl, noFetch } = {}) {

diff --git a/tests/fixtures/absolute-dep.js → tests/fixtures/link/absolute-dep.js b/tests/fixtures/absolute-dep.js → tests/fixtures/link/absolute-dep.js
diff --git a/tests/fixtures/index.html → tests/fixtures/link/index.html b/tests/fixtures/index.html → tests/fixtures/link/index.html
diff --git a/tests/fixtures/js/dep.js → tests/fixtures/link/js/dep.js b/tests/fixtures/js/dep.js → tests/fixtures/link/js/dep.js
diff --git a/tests/fixtures/js/secondary-dep.js → tests/fixtures/link/js/secondary-dep.js b/tests/fixtures/js/secondary-dep.js → tests/fixtures/link/js/secondary-dep.js
diff --git a/tests/fixtures/link/no-head.html b/tests/fixtures/link/no-head.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+
+<body>
+    <h1>Hello, world!</h1>
+</body>
+<script type="module">
+    import { hello } from './absolute-dep.js';
+</script>
+
+</html>
diff --git a/tests/inject.test.js b/tests/inject.test.js
diff --git a/tests/link.test.js b/tests/link.test.js
@@ -0,0 +1,19 @@
+import { link } from '../src/inject.js';
+import { describe, it } from 'node:test';
+import fs from 'node:fs';
+import assert from 'node:assert';
+
+describe('link', () => {
+    it('injects dependencies into HTML', async () => {
+        const htmlUrl = new URL('./fixtures/link/index.html', import.meta.url)
+        const result = await link(htmlUrl, { noFetch: true })
+        const expected = await fs.promises.readFile(new URL('./snapshots/link/index.snapshot.html', import.meta.url), 'utf8')
+        assert.strictEqual(result, expected)
+    })
+    it('injects dependencies to top of <html> if there is no <head> tag', async () => {
+        const htmlUrl = new URL('./fixtures/link/no-head.html', import.meta.url)
+        const result = await link(htmlUrl, { noFetch: true })
+        const expected = await fs.promises.readFile(new URL('./snapshots/link/no-head.snapshot.html', import.meta.url), 'utf8')
+        assert.strictEqual(result, expected)
+    });
+})
diff --git a/tests/snapshots/link/index.snapshot.html b/tests/snapshots/link/index.snapshot.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>My HTML File</title>
+    <script type="importmap">
+        {
+            "imports": {
+                "jquery": "https://cdn.skypack.dev/jquery"
+            }
+        }
+    </script>
+<link rel="modulepreload" href="/js/dep.js" />
+<link rel="modulepreload" href="/js/secondary-dep.js" />
+<link rel="modulepreload" href="/absolute-dep.js" />
+<link rel="modulepreload" href="https://cdn.skypack.dev/jquery" />
+</head>
+
+<body>
+    <h1>Hello, world!</h1>
+</body>
+<script type="module">
+    import { hello } from './js/dep.js';
+</script>
+
+</html>
diff --git a/tests/snapshots/link/no-head.snapshot.html b/tests/snapshots/link/no-head.snapshot.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<link rel="modulepreload" href="/absolute-dep.js" />
+
+
+<body>
+    <h1>Hello, world!</h1>
+</body>
+<script type="module">
+    import { hello } from './absolute-dep.js';
+</script>
+
+</html>