Fix includes

anthonyec · anthonyec · commit b64b115f159c · 2026-03-22T21:12:57.000Z
diff --git a/src/cli.ts b/src/cli.ts
@@ -76,6 +76,7 @@ async function main() {
     },
     { ...DEFAULT_ARGS },
   )
+  
   // Check that the first argument is a path and not a command.
   if (!inputDirectory) {
     stdout.write(`Error: Missing input directory.\n`)
diff --git a/src/partials/_badge.html b/src/partials/_badge.html
diff --git a/src/partials/_reloader.html b/src/partials/_reloader.html
diff --git a/src/staticbuild.ts b/src/staticbuild.ts
@@ -47,7 +47,7 @@ const TEMPLATE_FUNCTIONS: Context["fn"] = {
   },
 }
 
-interface StaticBuildOptions {
+export interface StaticBuildOptions {
   /** Specify an input folder containing website source files */
   inputDirectory: string
   /** Specify an output folder for the website to be built to */
@@ -326,9 +326,19 @@ function collectAssetsFromDocument(
   // if this is done! ~600ms to ~130ms!
   for (const element of document.querySelectorAll("*")) {
     for (const [name, value] of Object.entries(element.attributes)) {
-      if (!value) continue
-      if (!value.includes("/")) continue
-      if (!value.startsWith(inputDirectory)) continue
+      if (!value) {
+        logger?.info(`Skipping "${name}" attribute on <${element.tagName.toLowerCase()}>, value is empty or non-existent`)
+        continue
+      }
+
+      if (!value.includes("/")) {
+        logger?.info(`Skipping "${name}" attribute on <${element.tagName.toLowerCase()}>, value does not contain \"/\"`)
+        continue
+      }
+
+      if (!value.startsWith(inputDirectory)) {
+        logger?.info(`Skipping "${name}" attribute on <${element.tagName.toLowerCase()}>, value does not start with input directory path`)
+      }
 
       const absoluteInputPath = value
 
@@ -338,7 +348,7 @@ function collectAssetsFromDocument(
       }
 
       if (fs.statSync(absoluteInputPath).isDirectory()) {
-        logger?.error(`Skipping asset, it's a directory: ${absoluteInputPath}`)
+        logger?.error(`Skipping asset, path is a directory: ${absoluteInputPath}`)
         continue
       }
 
@@ -474,7 +484,7 @@ function renderHTMLPage(
 
   if (options.watch) {
     preTemplateDocument.append(
-      `<sb:include src="./node_modules/@anthonyec/staticbuild/dist/partials/reloader.html" port="${reloader.getPort()}" />`,
+      `<sb:include src="./node_modules/@anthonyec/staticbuild/dist/partials/_reloader.html" port="${reloader.getPort()}" />`,
     )
   }
 
@@ -525,48 +535,48 @@ function renderHTMLPage(
   let document = parseHTML(html)
   resolveAttributesToAbsoluteInputPaths(currentDirectory, document)
 
-  // Import all the include tags recursively.
-  const includeStack = Array.from(document.querySelectorAll("sb\\:include"))
+  // Resolve and inline all `<sb:include>` tags.
+  //
+  // This iteratively finds the first include element and replaces it with it's 
+  // rendered contents. This continues until no include elements are found. Nested
+  // includes are handled naturally as newly inserted content is re-scanned.
+  let currentIncludeElement = document.querySelector("sb\\:include")
+
+  while (currentIncludeElement) {
+    const src = currentIncludeElement.getAttribute("src")
 
-  while (includeStack.length) {
-    const element = includeStack.pop()
-    if (!element) break
-    
-    const src = element.getAttribute("src")
-    
     if (!src) {
-      element.remove()
-      continue
+      currentIncludeElement.remove()
+      break
     }
-    
+
     if (!path.basename(src).startsWith("_")) {
       options.logger?.error(`Included filenames must start with an underscore: ${path.basename(src)}`)
-      element.remove()
-      continue
+      currentIncludeElement.remove()
+      break
     }
-    
+
     if (!fs.existsSync(src)) {
       options.logger?.error(`Could not find include: ${src}`)
-      element.remove()
-      continue
+      currentIncludeElement.remove()
+      break
     }
-    
+
     const includeContents = fs.readFileSync(src, "utf8")
     const includeDocument = parseHTML(includeContents)
     resolveAttributesToAbsoluteInputPaths(path.dirname(src), includeDocument)
-    
+
     const includeHtml = Mustache.render(includeDocument.toString(), {
       ...context,
       attributes: {
-        ...element.attributes,
-        uid: hash(src + includeStack.length),
-        children: element.innerHTML,
+        ...currentIncludeElement.attributes,
+        children: currentIncludeElement.innerHTML,
       },
     })
-    
-    element.replaceWith(includeHtml)
-    includeStack.push(...Array.from(document.querySelectorAll("sb\\:include")))
-    
+
+    currentIncludeElement.replaceWith(includeHtml)
+    currentIncludeElement = document.querySelector("sb\\:include")
+
     dependencies.add(src)
   }
 
diff --git a/test/basic_assets/expected/image.gif b/test/basic_assets/expected/image.gif
diff --git a/test/basic_assets/expected/index.html b/test/basic_assets/expected/index.html
@@ -0,0 +1,2 @@
+index.html
+<img src="/image.gif" alt>
diff --git a/test/basic_assets/input/image.gif b/test/basic_assets/input/image.gif
diff --git a/test/basic_assets/input/index.html b/test/basic_assets/input/index.html
@@ -0,0 +1,2 @@
+index.html
+<img src="./image.gif" alt="">
diff --git a/test/basic_includes/expected/index.html b/test/basic_includes/expected/index.html
@@ -1,3 +1,6 @@
 index.html
-other.html
+a.html
+
+
+b.html
 
diff --git a/test/basic_includes/input/_a.html b/test/basic_includes/input/_a.html
@@ -0,0 +1 @@
+a.html
diff --git a/test/basic_includes/input/_b.html b/test/basic_includes/input/_b.html
@@ -0,0 +1 @@
+b.html
diff --git a/test/basic_includes/input/_other.html b/test/basic_includes/input/_other.html
diff --git a/test/basic_includes/input/index.html b/test/basic_includes/input/index.html
@@ -1,2 +1,4 @@
 index.html
-<sb:include src="./_other.html" />
+<sb:include src="./_a.html" />
+<!-- Test multiple in a row because there was a bug with more than one include breaking. -->
+<sb:include src="./_b.html" />
diff --git a/test/collection_with_includes/expected/blog/post-1/index.html b/test/collection_with_includes/expected/blog/post-1/index.html
@@ -0,0 +1,9 @@
+<div name="_page.html">
+  
+  <div name="blog.html">
+    <h1><a id="blog-post-1" class="anchor" aria-hidden="true" href="#blog-post-1"></a>Blog Post 1</h1>
+
+  </div>
+
+</div>
+
diff --git a/test/collection_with_includes/expected/blog/post-2/index.html b/test/collection_with_includes/expected/blog/post-2/index.html
@@ -0,0 +1,9 @@
+<div name="_page.html">
+  
+  <div name="blog.html">
+    <h1><a id="blog-post-2" class="anchor" aria-hidden="true" href="#blog-post-2"></a>Blog Post 2</h1>
+
+  </div>
+
+</div>
+
diff --git a/test/collection_with_includes/expected/index.html b/test/collection_with_includes/expected/index.html
@@ -0,0 +1,3 @@
+Index
+  blog&#x2F;post-2
+  blog&#x2F;post-1
diff --git a/test/collection_with_includes/input/_blog/2026-01-01-post-1/index.md b/test/collection_with_includes/input/_blog/2026-01-01-post-1/index.md
@@ -0,0 +1 @@
+# Blog Post 1
diff --git a/test/collection_with_includes/input/_blog/2026-01-01-post-2/index.md b/test/collection_with_includes/input/_blog/2026-01-01-post-2/index.md
@@ -0,0 +1 @@
+# Blog Post 2
diff --git a/test/collection_with_includes/input/_layouts/blog.html b/test/collection_with_includes/input/_layouts/blog.html
@@ -0,0 +1,5 @@
+<sb:include src="../_partials/_page.html">
+  <div name="blog.html">
+    {{{page.content}}}
+  </div>
+</sb:include>
diff --git a/test/collection_with_includes/input/_partials/_page.html b/test/collection_with_includes/input/_partials/_page.html
@@ -0,0 +1,3 @@
+<div name="_page.html">
+  {{{attributes.children}}}
+</div>
diff --git a/test/collection_with_includes/input/index.html b/test/collection_with_includes/input/index.html
@@ -0,0 +1,4 @@
+Index
+{{#collection.blog}}
+  {{path}}
+{{/collection.blog}}
diff --git a/test/includes_with_assets/expected/index.html b/test/includes_with_assets/expected/index.html
@@ -0,0 +1,5 @@
+index.html
+<div name="a.html">
+  <img src="/subfolder/image.gif" alt>
+</div>
+
diff --git a/test/includes_with_assets/expected/subfolder/image.gif b/test/includes_with_assets/expected/subfolder/image.gif
diff --git a/test/includes_with_assets/input/index.html b/test/includes_with_assets/input/index.html
@@ -0,0 +1,2 @@
+index.html
+<sb:include src="./subfolder/_a.html" />
diff --git a/test/includes_with_assets/input/subfolder/_a.html b/test/includes_with_assets/input/subfolder/_a.html
@@ -0,0 +1,3 @@
+<div name="a.html">
+  <img src="./image.gif" alt="">
+</div>
diff --git a/test/includes_with_assets/input/subfolder/image.gif b/test/includes_with_assets/input/subfolder/image.gif
diff --git a/test/index.ts b/test/index.ts
@@ -1,7 +1,7 @@
 import fs from "node:fs"
 import path from "node:path"
 
-import staticbuild from "../src/staticbuild"
+import staticbuild, { StaticBuildOptions } from "../src/staticbuild"
 import { scan } from "../src/fs"
 
 function clamp(value: number, min: number, max: number) {
@@ -51,6 +51,7 @@ function expectFilesEqual(actualFilePath: string, expectedFilePath: string) {
   if (isDifferent) {
     console.log(`\x1b[38;2;0;255;0mExpected:\n${expectedContents}\x1b[0m`)
     console.log(`\x1b[38;2;255;0;0mActual:\n${actualContents}\x1b[0m`)
+    throw Error("Files are different")
   }
 }
 
@@ -79,20 +80,33 @@ function expectDirectoriesEqual(actualDirectoryPath: string, expectedDirectoryPa
 }
 
 async function test() {
+  // Remove the first 2 arguments that nodejs provides.
+  const args = process.argv.splice(2, process.argv.length)
+
+  const logger: StaticBuildOptions["logger"] = {
+    info: (...messages: unknown[]) => {},
+    warn: console.log,
+    error: console.log,
+    time: (name: string) => {},
+    timeEnd: (name: string) => {},
+  }
+
   for (const directory of scan("./test", [], { recursive: false })) {
+    if (args[0] && args[0] !== directory.name) continue
+
     if (!directory.isDirectory) continue
     if (directory.name.startsWith("x_")) continue
 
     console.log(`Test: ${directory.name}`)
 
-    const inputDirectory = path.join(directory.path, "input")
-    const outputDirectory = path.join(directory.path, "output")
+    const inputDirectory = path.join(process.cwd(), directory.path, "input")
+    const outputDirectory = path.join(process.cwd(), directory.path, "output")
 
     if (fs.existsSync(outputDirectory)) {
       fs.rmSync(outputDirectory, { recursive: true })
     }
-    
-    await staticbuild({ inputDirectory, outputDirectory })
+
+    await staticbuild({ inputDirectory, outputDirectory, logger })
 
     const expectedDirectory = path.join(directory.path, "expected")
     expectDirectoriesEqual(outputDirectory, expectedDirectory)
diff --git a/test/nested_includes/expected/index.html b/test/nested_includes/expected/index.html
@@ -2,6 +2,8 @@
 a.html
 b.html
 c.html
+d.html
+
 
 
 
diff --git a/test/nested_includes/input/_c.html b/test/nested_includes/input/_c.html
@@ -1 +1,2 @@
 c.html
+<sb:include src="./subfolder/_d.html" />
diff --git a/test/nested_includes/input/subfolder/_d.html b/test/nested_includes/input/subfolder/_d.html
@@ -0,0 +1 @@
+d.html
diff --git a/test/nested_includes_with_children/expected/index.html b/test/nested_includes_with_children/expected/index.html
@@ -14,6 +14,8 @@
   
     children for c.html
   
+  <div name="d.html"></div>
+
 </div>
 
 </div>
diff --git a/test/nested_includes_with_children/input/_c.html b/test/nested_includes_with_children/input/_c.html
@@ -1,3 +1,4 @@
 <div name="c.html">
   {{{attributes.children}}}
+  <sb:include src="./subfolder/_d.html" />
 </div>
diff --git a/test/nested_includes_with_children/input/subfolder/_d.html b/test/nested_includes_with_children/input/subfolder/_d.html
@@ -0,0 +1 @@
+<div name="d.html">{{{attributes.children}}}</div>
diff --git a/test/x_broken_includes/expected/index.html b/test/x_broken_includes/expected/index.html
@@ -0,0 +1 @@
+index.html
diff --git a/test/x_broken_includes/input/index.html b/test/x_broken_includes/input/index.html
@@ -0,0 +1,4 @@
+index.html
+<sb:include /> <!-- No `src` attribute. -->
+<sb:include src="./_does_not_exist.html" />
+<sb:include src="./has_no_underscore_prefix.html" />

Original file line number	Diff line number	Diff line change
`@@ -76,6 +76,7 @@ async function main() {`
`76`	`76`	`},`
`77`	`77`	`{ ...DEFAULT_ARGS },`
`78`	`78`	`)`
	`79`	`+`
`79`	`80`	`// Check that the first argument is a path and not a command.`
`80`	`81`	`if (!inputDirectory) {`
`81`	`82`	stdout.write(`Error: Missing input directory.\n`)
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+index.html`
	`2`	`+<img src="/image.gif" alt>`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+index.html`
	`2`	`+<img src="./image.gif" alt="">`
-Original file line number
+Diff line change
@@ @@ -1,3 +1,6 @@ @@
 index.html
 -other.html
 +a.html
++
++
 +b.html