@eighty4/dank 0.0.4-1 → 0.0.4-3

package/lib_js/html.js

@@ -1,253 +1,302 @@
-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');
-    }
-    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) {
-            // todo error handling
-            errorExit(this.#fsPath + ' does not exist');
-        }
+import EventEmitter from "node:events";
+import { readFile } from "node:fs/promises";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
+import { extname } from "node:path/posix";
+import { defaultTreeAdapter, parse, parseFragment, serialize } from "parse5";
+import { DankError } from "./errors.js";
+class HtmlEntrypoint extends EventEmitter {
+  #c;
+  #clientJS;
+  #document = defaultTreeAdapter.createDocument();
+  #entrypoints = /* @__PURE__ */ new Set();
+  // path within pages dir omitting pages/ segment
+  #fsPath;
+  #partials = [];
+  #resolver;
+  #scripts = [];
+  #update = Object();
+  #url;
+  constructor(c, resolver, url, fsPath) {
+    super({ captureRejections: true });
+    this.#c = c;
+    this.#clientJS = ClientJS.initialize(c);
+    this.#resolver = resolver;
+    this.#url = url;
+    this.#fsPath = fsPath;
+    this.on("change", this.#onChange);
+  }
+  get fsPath() {
+    return this.#fsPath;
+  }
+  get url() {
+    return this.#url;
+  }
+  async process() {
+    await this.#onChange();
+  }
+  output(hrefs) {
+    this.#injectPartials();
+    this.#rewriteHrefs(hrefs);
+    return serialize(this.#document);
+  }
+  usesPartial(fsPath) {
+    return this.#partials.some((partial) => partial.fsPath === fsPath);
+  }
+  #onChange = async () => {
+    const update = this.#update = Object();
+    let html;
+    try {
+      html = await this.#readFromPages(this.#fsPath);
+    } catch (e) {
+      this.#error(`url \`${this.#url}\` html file \`${join(this.#c.dirs.pages, this.#fsPath)}\` does not exist`);
+      return;
     }
-    // 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());
-        }
+    const document = parse(html);
+    const imports = {
+      partials: [],
+      scripts: []
     };
-    // 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;
-        }));
-    }
-    // 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);
-            }
-        }
+    let partials;
+    this.#collectImports(document, imports);
+    const partialResults = await this.#resolvePartialContent(imports.partials);
+    partials = partialResults.filter((p) => p !== false);
+    if (partials.length !== partialResults.length) {
+      this.#error(`update to \`${join(this.#c.dirs.pages, this.#fsPath)}\` did not update to \`${this.#url}\` because of unresolved partials`);
+      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;
-            }
-        }
+    if (this.#clientJS !== null) {
+      const decoration = await this.#clientJS.retrieve(this.#c.esbuildPort);
+      this.#addScriptDecoration(document, decoration.js);
     }
-    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);
-        }
+    if (update !== this.#update) {
+      return;
     }
-    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);
-            }
-        }
+    this.#document = document;
+    this.#partials = partials;
+    this.#scripts = imports.scripts;
+    const entrypoints = mergeEntrypoints(imports, ...partials.map((p) => p.imports));
+    if (this.#haveEntrypointsChanged(entrypoints)) {
+      this.emit("entrypoints", entrypoints);
     }
-    #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);
-            }
-        }
+    if (this.listenerCount("output")) {
+      this.emit("output", this.output());
+    }
+  };
+  #error(e) {
+    let message;
+    let error;
+    if (typeof e === "string") {
+      message = e;
+      error = new DankError(e);
+    } else {
+      message = e.message;
+      error = e;
+    }
+    if (this.listenerCount("error")) {
+      this.emit("error", error);
+    } else {
+      throw error;
     }
-    #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`);
+  }
+  #haveEntrypointsChanged(entrypoints) {
+    const set = new Set(entrypoints.map((entrypoint) => entrypoint.in));
+    const changed = set.symmetricDifference(this.#entrypoints).size > 0;
+    this.#entrypoints = set;
+    return changed;
+  }
+  async #readFromPages(p) {
+    return await readFile(this.#resolver.absPagesPath(p), "utf8");
+  }
+  async #resolvePartialContent(partials) {
+    return await Promise.all(partials.map(async (p) => {
+      let html;
+      if (isAbsolute(p.specifier)) {
+        this.#error(`partials cannot be referenced with an absolute path like \`${p.specifier}\` in webpage \`${join(this.#c.dirs.pages, this.#fsPath)}\``);
+        return false;
+      }
+      if (!this.#resolver.isPagesSubpathInPagesDir(p.fsPath)) {
+        this.#error(`partials cannot be referenced from outside the pages dir like \`${p.specifier}\` in webpage \`${join(this.#c.dirs.pages, this.#fsPath)}\``);
+        return false;
+      }
+      if (extname(p.fsPath) !== ".html") {
+        this.#error(`partial path \`${p.fsPath}\` referenced by \`${this.#fsPath}\` is not a valid partial path`);
+        return false;
+      }
+      try {
+        html = await this.#readFromPages(p.fsPath);
+      } catch (e) {
+        this.#error(`partial \`${join("pages", p.fsPath)}\` imported by \`${join("pages", this.#fsPath)}\` does not exist`);
+        return false;
+      }
+      const fragment = parseFragment(html);
+      const imports = {
+        partials: [],
+        scripts: []
+      };
+      this.#collectImports(fragment, imports, (node) => {
+        this.#rewritePartialRelativePaths(node, p.fsPath);
+      });
+      if (imports.partials.length) {
+        this.#error(`partials cannot import another partial like \`${join(this.#c.dirs.pages, p.fsPath)}\``);
+      }
+      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";
+    }
+    if (rewritePath !== null) {
+      const attr = getAttr(elem, rewritePath);
+      if (attr) {
+        attr.value = join(relative(dirname(this.#fsPath), dirname(partialPath)), attr.value);
+      }
+    }
+  }
+  #addScriptDecoration(document, js) {
+    const scriptNode = parseFragment(`<script type="module">${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);
+  }
+  // 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.#c.flags.production) {
+        defaultTreeAdapter.insertBefore(commentNode.parentNode, defaultTreeAdapter.createCommentNode(commentNode.data), commentNode);
+      }
+      for (const node of fragment.childNodes) {
+        defaultTreeAdapter.insertBefore(commentNode.parentNode, node, commentNode);
+      }
+      if (this.#c.flags.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 specifier = partialMatch.groups.pp.trim();
+          collection.partials.push({
+            commentNode: childNode,
+            fsPath: join(dirname(this.#fsPath), specifier),
+            specifier
+          });
         }
-        let outPath = join(dirname(this.#fsPath), href);
-        if (type === 'script' && !outPath.endsWith('.js')) {
-            outPath = outPath.replace(new RegExp(extname(outPath).substring(1) + '$'), 'js');
+      } 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));
         }
-        return {
-            type,
-            href,
-            elem,
-            entrypoint: {
-                in: inPath,
-                out: outPath,
-            },
-        };
+      } 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.#c.dirs.pages, dirname(this.#fsPath), href);
+    if (!this.#resolver.isProjectSubpathInPagesDir(inPath)) {
+      throw new DankError(`href \`${href}\` in webpage \`${join(this.#c.dirs.pages, 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
+      }
+    };
+  }
 }
 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);
+class ClientJS {
+  static #instance = null;
+  static initialize(c) {
+    if (c.mode === "build" || c.flags.preview) {
+      return null;
+    } else if (!ClientJS.#instance) {
+      ClientJS.#instance = new ClientJS(c.esbuildPort);
+    }
+    return ClientJS.#instance;
+  }
+  #esbuildPort;
+  #read;
+  #result;
+  constructor(esbuildPort) {
+    this.#esbuildPort = esbuildPort;
+    this.#read = readFile(resolve(import.meta.dirname, join("..", "client", "client.js")), "utf-8");
+    this.#result = this.#read.then(this.#transform);
+  }
+  async retrieve(esbuildPort) {
+    if (esbuildPort !== this.#esbuildPort) {
+      this.#result = this.#read.then(this.#transform);
+    }
+    return await this.#result;
+  }
+  #transform = (js) => {
+    return {
+      type: "script",
+      js: js.replace("3995", "" + this.#esbuildPort)
+    };
+  };
 }
+export {
+  HtmlEntrypoint
+};