@eighty4/dank 0.0.4-1 → 0.0.4-2

package/lib_js/html.js

@@ -1,253 +1,239 @@
-import EventEmitter from 'node:events';
-import { readFile } from 'node:fs/promises';
-import { dirname, join, relative } from 'node:path';
-import { extname } from 'node:path/posix';
-import { defaultTreeAdapter, parse, parseFragment, serialize, } from 'parse5';
-export class HtmlEntrypoint extends EventEmitter {
-    #build;
-    #decorations;
-    #document = defaultTreeAdapter.createDocument();
-    // todo cache entrypoints set for quicker diffing
-    // #entrypoints: Set<string> = new Set()
-    // path within pages dir omitting pages/ segment
-    #fsPath;
-    #partials = [];
-    #resolver;
-    #scripts = [];
-    #update = Object();
-    #url;
-    constructor(build, resolver, url, fsPath, decorations) {
-        super({ captureRejections: true });
-        this.#build = build;
-        this.#resolver = resolver;
-        this.#decorations = decorations;
-        this.#url = url;
-        this.#fsPath = fsPath;
-        this.on('change', this.#onChange);
-        this.emit('change');
+import EventEmitter from "node:events";
+import { readFile } from "node:fs/promises";
+import { dirname, join, relative } from "node:path";
+import { extname } from "node:path/posix";
+import { defaultTreeAdapter, parse, parseFragment, serialize } from "parse5";
+class HtmlEntrypoint extends EventEmitter {
+  #build;
+  #decorations;
+  #document = defaultTreeAdapter.createDocument();
+  // todo cache entrypoints set for quicker diffing
+  // #entrypoints: Set<string> = new Set()
+  // path within pages dir omitting pages/ segment
+  #fsPath;
+  #partials = [];
+  #resolver;
+  #scripts = [];
+  #update = Object();
+  #url;
+  constructor(build, resolver, url, fsPath, decorations) {
+    super({ captureRejections: true });
+    this.#build = build;
+    this.#resolver = resolver;
+    this.#decorations = decorations;
+    this.#url = url;
+    this.#fsPath = fsPath;
+    this.on("change", this.#onChange);
+    this.emit("change");
+  }
+  get fsPath() {
+    return this.#fsPath;
+  }
+  get url() {
+    return this.#url;
+  }
+  async #html() {
+    try {
+      return await readFile(join(this.#build.dirs.pages, this.#fsPath), "utf8");
+    } catch (e) {
+      errorExit(this.#fsPath + " does not exist");
     }
-    get fsPath() {
-        return this.#fsPath;
+  }
+  // todo if partial changes, hot swap content in page
+  #onChange = async (_partial) => {
+    const update = this.#update = Object();
+    const html = await this.#html();
+    const document = parse(html);
+    const imports = {
+      partials: [],
+      scripts: []
+    };
+    this.#collectImports(document, imports);
+    const partials = await this.#resolvePartialContent(imports.partials);
+    if (update !== this.#update) {
+      return;
     }
-    get url() {
-        return this.#url;
+    this.#addDecorations(document);
+    this.#update = update;
+    this.#document = document;
+    this.#partials = partials;
+    this.#scripts = imports.scripts;
+    const entrypoints = mergeEntrypoints(imports, ...partials.map((p) => p.imports));
+    this.emit("entrypoints", entrypoints);
+    this.emit("partials", this.#partials.map((p) => p.fsPath));
+    if (this.listenerCount("output")) {
+      this.emit("output", this.output());
     }
-    async #html() {
-        try {
-            return await readFile(join(this.#build.dirs.pages, this.#fsPath), 'utf8');
-        }
-        catch (e) {
-            // todo error handling
-            errorExit(this.#fsPath + ' does not exist');
-        }
+  };
+  // Emits `partial` on detecting a partial reference for `dank serve` file watches
+  // to respond to dependent changes
+  // todo safeguard recursive partials that cause circular imports
+  async #resolvePartialContent(partials) {
+    return await Promise.all(partials.map(async (p) => {
+      this.emit("partial", p.fsPath);
+      const html = await readFile(join(this.#build.dirs.pages, p.fsPath), "utf8");
+      const fragment = parseFragment(html);
+      const imports = {
+        partials: [],
+        scripts: []
+      };
+      this.#collectImports(fragment, imports, (node) => {
+        this.#rewritePartialRelativePaths(node, p.fsPath);
+      });
+      if (imports.partials.length) {
+        errorExit(`partial ${p.fsPath} cannot recursively import partials`);
+      }
+      const content = {
+        ...p,
+        fragment,
+        imports
+      };
+      return content;
+    }));
+  }
+  // rewrite hrefs in a partial to be relative to the html entrypoint instead of the partial
+  #rewritePartialRelativePaths(elem, partialPath) {
+    let rewritePath = null;
+    if (elem.nodeName === "script") {
+      rewritePath = "src";
+    } else if (elem.nodeName === "link" && hasAttr(elem, "rel", "stylesheet")) {
+      rewritePath = "href";
     }
-    // todo if partial changes, hot swap content in page
-    #onChange = async (_partial) => {
-        const update = (this.#update = Object());
-        const html = await this.#html();
-        const document = parse(html);
-        const imports = {
-            partials: [],
-            scripts: [],
-        };
-        this.#collectImports(document, imports);
-        const partials = await this.#resolvePartialContent(imports.partials);
-        if (update !== this.#update) {
-            // another update has started so aborting this one
-            return;
-        }
-        this.#addDecorations(document);
-        this.#update = update;
-        this.#document = document;
-        this.#partials = partials;
-        this.#scripts = imports.scripts;
-        const entrypoints = mergeEntrypoints(imports, ...partials.map(p => p.imports));
-        // this.#entrypoints = new Set(entrypoints.map(entrypoint => entrypoint.in))
-        this.emit('entrypoints', entrypoints);
-        this.emit('partials', this.#partials.map(p => p.fsPath));
-        if (this.listenerCount('output')) {
-            this.emit('output', this.output());
-        }
-    };
-    // Emits `partial` on detecting a partial reference for `dank serve` file watches
-    // to respond to dependent changes
-    // todo safeguard recursive partials that cause circular imports
-    async #resolvePartialContent(partials) {
-        return await Promise.all(partials.map(async (p) => {
-            this.emit('partial', p.fsPath);
-            const html = await readFile(join(this.#build.dirs.pages, p.fsPath), 'utf8');
-            const fragment = parseFragment(html);
-            const imports = {
-                partials: [],
-                scripts: [],
-            };
-            this.#collectImports(fragment, imports, node => {
-                this.#rewritePartialRelativePaths(node, p.fsPath);
-            });
-            if (imports.partials.length) {
-                // todo recursive partials?
-                // await this.#resolvePartialContent(imports.partials)
-                errorExit(`partial ${p.fsPath} cannot recursively import partials`);
-            }
-            const content = {
-                ...p,
-                fragment,
-                imports,
-            };
-            return content;
-        }));
+    if (rewritePath !== null) {
+      const attr = getAttr(elem, rewritePath);
+      if (attr) {
+        attr.value = join(relative(dirname(this.#fsPath), dirname(partialPath)), attr.value);
+      }
     }
-    // rewrite hrefs in a partial to be relative to the html entrypoint instead of the partial
-    #rewritePartialRelativePaths(elem, partialPath) {
-        let rewritePath = null;
-        if (elem.nodeName === 'script') {
-            rewritePath = 'src';
-        }
-        else if (elem.nodeName === 'link' &&
-            hasAttr(elem, 'rel', 'stylesheet')) {
-            rewritePath = 'href';
-        }
-        if (rewritePath !== null) {
-            const attr = getAttr(elem, rewritePath);
-            if (attr) {
-                attr.value = join(relative(dirname(this.#fsPath), dirname(partialPath)), attr.value);
-            }
-        }
+  }
+  #addDecorations(document) {
+    if (!this.#decorations?.length) {
+      return;
     }
-    #addDecorations(document) {
-        if (!this.#decorations?.length) {
-            return;
-        }
-        for (const decoration of this.#decorations) {
-            switch (decoration.type) {
-                case 'script':
-                    const scriptNode = parseFragment(`<script type="module">${decoration.js}</script>`).childNodes[0];
-                    const htmlNode = document.childNodes.find(node => node.nodeName === 'html');
-                    const headNode = htmlNode.childNodes.find(node => node.nodeName === 'head');
-                    defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode);
-                    break;
-            }
-        }
+    for (const decoration of this.#decorations) {
+      switch (decoration.type) {
+        case "script":
+          const scriptNode = parseFragment(`<script type="module">${decoration.js}</script>`).childNodes[0];
+          const htmlNode = document.childNodes.find((node) => node.nodeName === "html");
+          const headNode = htmlNode.childNodes.find((node) => node.nodeName === "head");
+          defaultTreeAdapter.appendChild(headNode || htmlNode, scriptNode);
+          break;
+      }
     }
-    output(hrefs) {
-        this.#injectPartials();
-        this.#rewriteHrefs(hrefs);
-        return serialize(this.#document);
+  }
+  output(hrefs) {
+    this.#injectPartials();
+    this.#rewriteHrefs(hrefs);
+    return serialize(this.#document);
+  }
+  // rewrites hrefs to content hashed urls
+  // call without hrefs to rewrite tsx? ext to js
+  #rewriteHrefs(hrefs) {
+    rewriteHrefs(this.#scripts, hrefs);
+    for (const partial of this.#partials) {
+      rewriteHrefs(partial.imports.scripts, hrefs);
     }
-    // rewrites hrefs to content hashed urls
-    // call without hrefs to rewrite tsx? ext to js
-    #rewriteHrefs(hrefs) {
-        rewriteHrefs(this.#scripts, hrefs);
-        for (const partial of this.#partials) {
-            rewriteHrefs(partial.imports.scripts, hrefs);
-        }
+  }
+  async #injectPartials() {
+    for (const { commentNode, fragment } of this.#partials) {
+      if (!this.#build.production) {
+        defaultTreeAdapter.insertBefore(commentNode.parentNode, defaultTreeAdapter.createCommentNode(commentNode.data), commentNode);
+      }
+      for (const node of fragment.childNodes) {
+        defaultTreeAdapter.insertBefore(commentNode.parentNode, node, commentNode);
+      }
+      if (this.#build.production) {
+        defaultTreeAdapter.detachNode(commentNode);
+      }
     }
-    async #injectPartials() {
-        for (const { commentNode, fragment } of this.#partials) {
-            if (!this.#build.production) {
-                defaultTreeAdapter.insertBefore(commentNode.parentNode, defaultTreeAdapter.createCommentNode(commentNode.data), commentNode);
-            }
-            for (const node of fragment.childNodes) {
-                defaultTreeAdapter.insertBefore(commentNode.parentNode, node, commentNode);
-            }
-            if (this.#build.production) {
-                defaultTreeAdapter.detachNode(commentNode);
-            }
-        }
+  }
+  #collectImports(node, collection, forEach) {
+    for (const childNode of node.childNodes) {
+      if (forEach && "tagName" in childNode) {
+        forEach(childNode);
+      }
+      if (childNode.nodeName === "#comment" && "data" in childNode) {
+        const partialMatch = childNode.data.match(/\{\{(?<pp>.+)\}\}/);
+        if (partialMatch) {
+          const partialSpecifier = partialMatch.groups.pp.trim();
+          if (partialSpecifier.startsWith("/")) {
+            errorExit(`partial ${partialSpecifier} in webpage ${this.#fsPath} cannot be an absolute path`);
+          }
+          const partialPath = join(dirname(this.#fsPath), partialSpecifier);
+          if (!this.#resolver.isPagesSubpathInPagesDir(partialPath)) {
+            errorExit(`partial ${partialSpecifier} in webpage ${this.#fsPath} cannot be outside of the pages directory`);
+          }
+          collection.partials.push({
+            fsPath: partialPath,
+            commentNode: childNode
+          });
+        }
+      } else if (childNode.nodeName === "script") {
+        const srcAttr = childNode.attrs.find((attr) => attr.name === "src");
+        if (srcAttr) {
+          collection.scripts.push(this.#parseImport("script", srcAttr.value, childNode));
+        }
+      } else if (childNode.nodeName === "link" && hasAttr(childNode, "rel", "stylesheet")) {
+        const hrefAttr = getAttr(childNode, "href");
+        if (hrefAttr) {
+          collection.scripts.push(this.#parseImport("style", hrefAttr.value, childNode));
+        }
+      } else if ("childNodes" in childNode) {
+        this.#collectImports(childNode, collection);
+      }
     }
-    #collectImports(node, collection, forEach) {
-        for (const childNode of node.childNodes) {
-            if (forEach && 'tagName' in childNode) {
-                forEach(childNode);
-            }
-            if (childNode.nodeName === '#comment' && 'data' in childNode) {
-                const partialMatch = childNode.data.match(/\{\{(?<pp>.+)\}\}/);
-                if (partialMatch) {
-                    const partialSpecifier = partialMatch.groups.pp.trim();
-                    if (partialSpecifier.startsWith('/')) {
-                        errorExit(`partial ${partialSpecifier} in webpage ${this.#fsPath} cannot be an absolute path`);
-                    }
-                    const partialPath = join(dirname(this.#fsPath), partialSpecifier);
-                    if (!this.#resolver.isPagesSubpathInPagesDir(partialPath)) {
-                        errorExit(`partial ${partialSpecifier} in webpage ${this.#fsPath} cannot be outside of the pages directory`);
-                    }
-                    collection.partials.push({
-                        fsPath: partialPath,
-                        commentNode: childNode,
-                    });
-                }
-            }
-            else if (childNode.nodeName === 'script') {
-                const srcAttr = childNode.attrs.find(attr => attr.name === 'src');
-                if (srcAttr) {
-                    collection.scripts.push(this.#parseImport('script', srcAttr.value, childNode));
-                }
-            }
-            else if (childNode.nodeName === 'link' &&
-                hasAttr(childNode, 'rel', 'stylesheet')) {
-                const hrefAttr = getAttr(childNode, 'href');
-                if (hrefAttr) {
-                    collection.scripts.push(this.#parseImport('style', hrefAttr.value, childNode));
-                }
-            }
-            else if ('childNodes' in childNode) {
-                this.#collectImports(childNode, collection);
-            }
-        }
+  }
+  #parseImport(type, href, elem) {
+    const inPath = join(this.#build.dirs.pages, dirname(this.#fsPath), href);
+    if (!this.#resolver.isProjectSubpathInPagesDir(inPath)) {
+      errorExit(`href ${href} in webpage ${this.#fsPath} cannot reference sources outside of the pages directory`);
     }
-    #parseImport(type, href, elem) {
-        const inPath = join(this.#build.dirs.pages, dirname(this.#fsPath), href);
-        if (!this.#resolver.isProjectSubpathInPagesDir(inPath)) {
-            errorExit(`href ${href} in webpage ${this.#fsPath} cannot reference sources outside of the pages directory`);
-        }
-        let outPath = join(dirname(this.#fsPath), href);
-        if (type === 'script' && !outPath.endsWith('.js')) {
-            outPath = outPath.replace(new RegExp(extname(outPath).substring(1) + '$'), 'js');
-        }
-        return {
-            type,
-            href,
-            elem,
-            entrypoint: {
-                in: inPath,
-                out: outPath,
-            },
-        };
+    let outPath = join(dirname(this.#fsPath), href);
+    if (type === "script" && !outPath.endsWith(".js")) {
+      outPath = outPath.replace(new RegExp(extname(outPath).substring(1) + "$"), "js");
     }
+    return {
+      type,
+      href,
+      elem,
+      entrypoint: {
+        in: inPath,
+        out: outPath
+      }
+    };
+  }
 }
 function getAttr(elem, name) {
-    return elem.attrs.find(attr => attr.name === name);
+  return elem.attrs.find((attr) => attr.name === name);
 }
 function hasAttr(elem, name, value) {
-    return elem.attrs.some(attr => attr.name === name && attr.value === value);
+  return elem.attrs.some((attr) => attr.name === name && attr.value === value);
 }
 function mergeEntrypoints(...imports) {
-    const entrypoints = [];
-    for (const { scripts } of imports) {
-        for (const script of scripts) {
-            entrypoints.push(script.entrypoint);
-        }
+  const entrypoints = [];
+  for (const { scripts } of imports) {
+    for (const script of scripts) {
+      entrypoints.push(script.entrypoint);
     }
-    return entrypoints;
+  }
+  return entrypoints;
 }
 function rewriteHrefs(scripts, hrefs) {
-    for (const { elem, entrypoint, type } of scripts) {
-        const rewriteTo = hrefs ? hrefs.mappedHref(entrypoint.in) : null;
-        if (type === 'script') {
-            if (entrypoint.in.endsWith('.tsx') ||
-                entrypoint.in.endsWith('.ts')) {
-                elem.attrs.find(attr => attr.name === 'src').value =
-                    rewriteTo || `/${entrypoint.out}`;
-            }
-        }
-        else if (type === 'style') {
-            elem.attrs.find(attr => attr.name === 'href').value =
-                rewriteTo || `/${entrypoint.out}`;
-        }
+  for (const { elem, entrypoint, type } of scripts) {
+    const rewriteTo = hrefs ? hrefs.mappedHref(entrypoint.in) : null;
+    if (type === "script") {
+      if (entrypoint.in.endsWith(".tsx") || entrypoint.in.endsWith(".ts")) {
+        elem.attrs.find((attr) => attr.name === "src").value = rewriteTo || `/${entrypoint.out}`;
+      }
+    } else if (type === "style") {
+      elem.attrs.find((attr) => attr.name === "href").value = rewriteTo || `/${entrypoint.out}`;
     }
+  }
 }
-// todo evented error handling so HtmlEntrypoint can be unit tested
 function errorExit(msg) {
-    console.log(`\u001b[31merror:\u001b[0m`, msg);
-    process.exit(1);
+  console.log(`\x1B[31merror:\x1B[0m`, msg);
+  process.exit(1);
 }
+export {
+  HtmlEntrypoint
+};