mancha 0.5.4 → 0.6.0

package/dist/browser.d.ts

@@ -1,10 +1,10 @@
-import { IRenderer } from "./core";
-import { ParserParams, RenderParams } from "./interfaces";
-declare class RendererImpl extends IRenderer {
+import { IRenderer } from "./core.js";
+import { ParserParams, RenderParams } from "./interfaces.js";
+declare class Renderer extends IRenderer {
     protected readonly dirpath: string;
     parseHTML(content: string, params?: ParserParams): DocumentFragment;
     serializeHTML(root: Node | DocumentFragment): string;
     preprocessLocal(fpath: string, params?: RenderParams & ParserParams): Promise<DocumentFragment>;
 }
-declare const Mancha: RendererImpl;
+declare const Mancha: Renderer;
 export default Mancha;

package/dist/browser.js

@@ -1,8 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const core_1 = require("./core");
-class RendererImpl extends core_1.IRenderer {
-    dirpath = (0, core_1.dirname)(self.location.href);
+import { dirname, IRenderer } from "./core.js";
+class Renderer extends IRenderer {
+    dirpath = dirname(self.location.href);
     parseHTML(content, params = { root: false }) {
         if (params.root) {
             return new DOMParser().parseFromString(content, "text/html");
@@ -21,17 +19,18 @@ class RendererImpl extends core_1.IRenderer {
         return this.preprocessRemote(fpath, params);
     }
 }
-const Mancha = new RendererImpl();
+const Mancha = new Renderer();
 self["Mancha"] = Mancha;
 const currentScript = self.document?.currentScript;
 if (self.document?.currentScript?.hasAttribute("init")) {
-    Mancha.update({ ...currentScript?.dataset });
     const debug = currentScript?.hasAttribute("debug");
     const cachePolicy = currentScript?.getAttribute("cache");
     const targets = currentScript?.getAttribute("target")?.split(",") || ["body"];
-    targets.map(async (target) => {
-        const fragment = self.document.querySelector(target);
-        await Mancha.debug(debug).mount(fragment, { cache: cachePolicy });
+    window.addEventListener("load", () => {
+        targets.map(async (target) => {
+            const fragment = self.document.querySelector(target);
+            await Mancha.debug(debug).mount(fragment, { cache: cachePolicy });
+        });
     });
 }
-exports.default = Mancha;
+export default Mancha;

package/dist/cli.js

@@ -1,21 +1,24 @@
 #!/usr/bin/env node
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const yargs_1 = require("yargs");
-const helpers_1 = require("yargs/helpers");
-const index_1 = require("./index");
-const fs = require("fs/promises");
-const args = (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
+import * as fs from "fs/promises";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { Mancha } from "./index.js";
+const args = yargs(hideBin(process.argv))
     .describe("input", "Input HMTL file to render")
     .describe("output", "Output file, defaults to stdout")
     .describe("vars", "JSON-formatted variables")
+    .describe("debug", "Print Mancha.js debugging information")
     .demand(["input"])
     .parse();
-index_1.Mancha.preprocessLocal(args["input"], JSON.parse(args.vars || "{}")).then((result) => {
+Mancha.debug(args.debug);
+new Promise(async (resolve, reject) => {
+    await Mancha.update(JSON.parse(args.vars || "{}"));
+    const fragment = await Mancha.preprocessLocal(args["input"]);
+    await Mancha.renderNode(fragment);
     if (!args.output || args.output === "-") {
-        console.log(result + "\n");
+        console.log(Mancha.serializeHTML(fragment) + "\n");
     }
     else {
-        return fs.writeFile(args.output, index_1.Mancha.serializeHTML(result));
+        await fs.writeFile(args.output, Mancha.serializeHTML(fragment));
     }
 });

package/dist/core.d.ts

@@ -1,20 +1,17 @@
-import { ReactiveProxyStore } from "./reactive";
-import { ParserParams, RenderParams } from "./interfaces";
+import { ReactiveProxyStore } from "./reactive.js";
+import { ParserParams, RenderParams } from "./interfaces.js";
 export type EvalListener = (result: any, dependencies: string[]) => any;
 export declare function traverse(root: Node | DocumentFragment | Document, skip?: Set<Node>): Generator<ChildNode>;
 export declare function dirname(fpath: string): string;
 export declare function isRelativePath(fpath: string): boolean;
 export declare function makeEvalFunction(code: string, args?: string[]): Function;
-export declare function safeEval(context: any, code: string, args?: {
-    [key: string]: any;
-}): Promise<any>;
 export declare abstract class IRenderer extends ReactiveProxyStore {
     protected debugging: boolean;
     protected readonly dirpath: string;
     protected readonly evalkeys: string[];
     protected readonly expressionCache: Map<string, Function>;
     protected readonly evalCallbacks: Map<string, EvalListener[]>;
-    readonly skipNodes: Set<Node>;
+    readonly _skipNodes: Set<Node>;
     abstract parseHTML(content: string, params?: ParserParams): DocumentFragment;
     abstract serializeHTML(root: DocumentFragment | Node): string;
     debug(flag: boolean): this;
@@ -33,6 +30,6 @@ export declare abstract class IRenderer extends ReactiveProxyStore {
         [key: string]: any;
     }, callback: EvalListener): Promise<void>;
     preprocessNode(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<void>;
-    renderNode(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<void>;
+    renderNode(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<Document | DocumentFragment | Node>;
     mount(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<void>;
 }

package/dist/core.js

@@ -1,10 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IRenderer = exports.safeEval = exports.makeEvalFunction = exports.isRelativePath = exports.dirname = exports.traverse = void 0;
-const reactive_1 = require("./reactive");
-const iterator_1 = require("./iterator");
-const plugins_1 = require("./plugins");
-function* traverse(root, skip = new Set()) {
+import { ReactiveProxyStore } from "./reactive.js";
+import { Iterator } from "./iterator.js";
+import { RendererPlugins } from "./plugins.js";
+export function* traverse(root, skip = new Set()) {
     const explored = new Set();
     const frontier = Array.from(root.childNodes).filter((node) => !skip.has(node));
     // Also yield the root node.
@@ -22,8 +19,7 @@ function* traverse(root, skip = new Set()) {
         }
     }
 }
-exports.traverse = traverse;
-function dirname(fpath) {
+export function dirname(fpath) {
     if (!fpath.includes("/")) {
         return "";
     }
@@ -31,30 +27,22 @@ function dirname(fpath) {
         return fpath.split("/").slice(0, -1).join("/");
     }
 }
-exports.dirname = dirname;
-function isRelativePath(fpath) {
+export function isRelativePath(fpath) {
     return (!fpath.includes("://") &&
         !fpath.startsWith("/") &&
         !fpath.startsWith("#") &&
         !fpath.startsWith("data:"));
 }
-exports.isRelativePath = isRelativePath;
-function makeEvalFunction(code, args = []) {
+export function makeEvalFunction(code, args = []) {
     return new Function(...args, `with (this) { return (async () => (${code}))(); }`);
 }
-exports.makeEvalFunction = makeEvalFunction;
-function safeEval(context, code, args = {}) {
-    const inner = `with (this) { return (async () => (${code}))(); }`;
-    return new Function(...Object.keys(args), inner).call(context, ...Object.values(args));
-}
-exports.safeEval = safeEval;
-class IRenderer extends reactive_1.ReactiveProxyStore {
+export class IRenderer extends ReactiveProxyStore {
     debugging = false;
     dirpath = "";
     evalkeys = ["$elem", "$event"];
     expressionCache = new Map();
     evalCallbacks = new Map();
-    skipNodes = new Set();
+    _skipNodes = new Set();
     debug(flag) {
         this.debugging = flag;
         return this;
@@ -80,8 +68,10 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
         });
     }
     async preprocessRemote(fpath, params) {
-        const cache = params?.cache || "default";
-        const content = await fetch(fpath, { cache }).then((res) => res.text());
+        const fetchOptions = {};
+        if (params?.cache)
+            fetchOptions.cache = params.cache;
+        const content = await fetch(fpath, fetchOptions).then((res) => res.text());
         return this.preprocessString(content, {
             ...params,
             dirpath: dirname(fpath),
@@ -89,7 +79,8 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
         });
     }
     clone() {
-        return new this.constructor(Object.fromEntries(this.store.entries()));
+        const instance = new this.constructor(Object.fromEntries(this.store.entries()));
+        return instance.debug(this.debugging);
     }
     log(...args) {
         if (this.debugging)
@@ -102,16 +93,24 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
         return this.expressionCache.get(expr);
     }
     async eval(expr, args = {}) {
-        const fn = this.cachedExpressionFunction(expr);
-        const vals = this.evalkeys.map((key) => args[key]);
-        if (Object.keys(args).some((key) => !this.evalkeys.includes(key))) {
-            throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);
+        if (this.store.has(expr)) {
+            // Shortcut: if the expression is just an item from the value store, use that directly.
+            const result = this.get(expr);
+            return [result, [expr]];
+        }
+        else {
+            // Otherwise, perform the expression evaluation.
+            const fn = this.cachedExpressionFunction(expr);
+            const vals = this.evalkeys.map((key) => args[key]);
+            if (Object.keys(args).some((key) => !this.evalkeys.includes(key))) {
+                throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);
+            }
+            const [result, dependencies] = await this.trace(async function () {
+                return fn.call(this, ...vals);
+            });
+            this.log(`eval \`${expr}\` => `, result, `[ ${dependencies.join(", ")} ]`);
+            return [result, dependencies];
         }
-        const [result, dependencies] = await this.trace(async function () {
-            return fn.call(this, ...vals);
-        });
-        this.log(`eval \`${expr}\` => `, result, `[ ${dependencies.join(", ")} ]`);
-        return [result, dependencies];
     }
     watchExpr(expr, args, callback) {
         // Early exit: this eval has already been registered, we just need to add our callback.
@@ -140,12 +139,12 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
     }
     async preprocessNode(root, params) {
         params = Object.assign({ dirpath: this.dirpath, maxdepth: 10 }, params);
-        const promises = new iterator_1.Iterator(traverse(root, this.skipNodes)).map(async (node) => {
+        const promises = new Iterator(traverse(root, this._skipNodes)).map(async (node) => {
             this.log("Preprocessing node:\n", node);
             // Resolve all the includes in the node.
-            await plugins_1.RendererPlugins.resolveIncludes.call(this, node, params);
+            await RendererPlugins.resolveIncludes.call(this, node, params);
             // Resolve all the relative paths in the node.
-            await plugins_1.RendererPlugins.rebaseRelativePaths.call(this, node, params);
+            await RendererPlugins.rebaseRelativePaths.call(this, node, params);
         });
         // Wait for all the rendering operations to complete.
         await Promise.all(promises.generator());
@@ -153,29 +152,33 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
     async renderNode(root, params) {
         // Iterate over all the nodes and apply appropriate handlers.
         // Do these steps one at a time to avoid any potential race conditions.
-        for (const node of traverse(root, this.skipNodes)) {
+        for (const node of traverse(root, this._skipNodes)) {
             this.log("Rendering node:\n", node);
             // Resolve the :data attribute in the node.
-            await plugins_1.RendererPlugins.resolveDataAttribute.call(this, node, params);
+            await RendererPlugins.resolveDataAttribute.call(this, node, params);
             // Resolve the :for attribute in the node.
-            await plugins_1.RendererPlugins.resolveForAttribute.call(this, node, params);
+            await RendererPlugins.resolveForAttribute.call(this, node, params);
+            // Resolve the $text attribute in the node.
+            await RendererPlugins.resolveTextAttributes.call(this, node, params);
             // Resolve the $html attribute in the node.
-            await plugins_1.RendererPlugins.resolveHtmlAttribute.call(this, node, params);
+            await RendererPlugins.resolveHtmlAttribute.call(this, node, params);
             // Resolve the :show attribute in the node.
-            await plugins_1.RendererPlugins.resolveShowAttribute.call(this, node, params);
+            await RendererPlugins.resolveShowAttribute.call(this, node, params);
             // Resolve the @watch attribute in the node.
-            await plugins_1.RendererPlugins.resolveWatchAttribute.call(this, node, params);
+            await RendererPlugins.resolveWatchAttribute.call(this, node, params);
             // Resolve the :bind attribute in the node.
-            await plugins_1.RendererPlugins.resolveBindAttribute.call(this, node, params);
+            await RendererPlugins.resolveBindAttribute.call(this, node, params);
             // Resolve all $attributes in the node.
-            await plugins_1.RendererPlugins.resolvePropAttributes.call(this, node, params);
+            await RendererPlugins.resolvePropAttributes.call(this, node, params);
             // Resolve all :attributes in the node.
-            await plugins_1.RendererPlugins.resolveAttrAttributes.call(this, node, params);
+            await RendererPlugins.resolveAttrAttributes.call(this, node, params);
             // Resolve all @attributes in the node.
-            await plugins_1.RendererPlugins.resolveEventAttributes.call(this, node, params);
+            await RendererPlugins.resolveEventAttributes.call(this, node, params);
             // Replace all the {{ variables }} in the text.
-            await plugins_1.RendererPlugins.resolveTextNodeExpressions.call(this, node, params);
+            await RendererPlugins.resolveTextNodeExpressions.call(this, node, params);
         }
+        // Return the input node, which should now be fully rendered.
+        return root;
     }
     async mount(root, params) {
         // Preprocess all the elements recursively first.
@@ -184,4 +187,3 @@ class IRenderer extends reactive_1.ReactiveProxyStore {
         await this.renderNode(root, params);
     }
 }
-exports.IRenderer = IRenderer;

package/dist/dome.d.ts

@@ -0,0 +1,27 @@
+import { ChildNode as _ChildNode, Element as _Element, Node as _Node, ParentNode as _ParentNode } from "domhandler";
+type __Node = Node | _Node;
+type __ParentNode = ParentNode | _ParentNode;
+type __Element = Element | _Element;
+type __ChildNode = ChildNode | _ChildNode;
+/**
+ * Converts from an attribute name to camelCase, e.g. `foo-bar` becomes `fooBar`.
+ * @param name attribute name
+ * @returns camel-cased attribute name
+ */
+export declare function attributeNameToCamelCase(name: string): string;
+export declare function getAttribute(elem: __Element, name: string): string | null;
+export declare function setAttribute(elem: __Element, name: string, value: string): void;
+export declare function removeAttribute(elem: __Element, name: string): void;
+export declare function replaceWith(original: __ChildNode, ...replacement: __Node[]): void;
+export declare function appendChild(parent: __Node, node: __Node): __Node;
+export declare function removeChild(parent: __Node, node: __Node): __Node;
+export declare function replaceChildren(parent: __ParentNode, ...nodes: __Node[]): void;
+export declare function insertBefore(parent: __Node, node: __Node, reference: __ChildNode | null): __Node;
+export declare function innerHTML(elem: Element | _Element): string;
+export declare function innerText(elem: Element | _Element): string | null;
+export declare function getTextContent(elem: Element | _Element): string | null;
+export declare function setTextContent(elem: Element | _Element, value: string): void;
+export declare function getNodeValue(node: Node | _Node): string | null;
+export declare function setNodeValue(node: Node | _Node, value: string | null): void;
+export declare function createElement(tagName: string, document: Document | null): Element | _Element;
+export {};

package/dist/dome.js

@@ -0,0 +1,129 @@
+import { Element as _Element, Node as _Node, Text as _Text, } from "domhandler";
+import { DomUtils } from "htmlparser2";
+function hasFunction(obj, func) {
+    return typeof obj?.[func] === "function";
+}
+/**
+ * Converts from an attribute name to camelCase, e.g. `foo-bar` becomes `fooBar`.
+ * @param name attribute name
+ * @returns camel-cased attribute name
+ */
+export function attributeNameToCamelCase(name) {
+    return name.replace(/-./g, (c) => c[1].toUpperCase());
+}
+export function getAttribute(elem, name) {
+    if (elem instanceof _Element)
+        return elem.attribs?.[name];
+    else
+        return elem.getAttribute?.(name);
+}
+export function setAttribute(elem, name, value) {
+    if (elem instanceof _Element)
+        elem.attribs[name] = value;
+    else
+        elem.setAttribute?.(name, value);
+}
+export function removeAttribute(elem, name) {
+    if (elem instanceof _Element)
+        delete elem.attribs[name];
+    else
+        elem.removeAttribute?.(name);
+}
+export function replaceWith(original, ...replacement) {
+    if (hasFunction(original, "replaceWith")) {
+        return original.replaceWith(...replacement);
+    }
+    else {
+        const elem = original;
+        const parent = elem.parentNode;
+        const index = Array.from(parent.childNodes).indexOf(elem);
+        replacement.forEach((elem) => (elem.parentNode = parent));
+        parent.childNodes = []
+            .concat(Array.from(parent.childNodes).slice(0, index))
+            .concat(replacement)
+            .concat(Array.from(parent.childNodes).slice(index + 1));
+    }
+}
+export function appendChild(parent, node) {
+    if (hasFunction(node, "appendChild")) {
+        return parent.appendChild(node);
+    }
+    else {
+        parent.childNodes.push(node);
+        node.parentNode = parent;
+        return node;
+    }
+}
+export function removeChild(parent, node) {
+    if (hasFunction(node, "removeChild")) {
+        return parent.removeChild(node);
+    }
+    else {
+        const elem = node;
+        parent.childNodes = parent.children.filter((child) => child !== elem);
+        return elem;
+    }
+}
+export function replaceChildren(parent, ...nodes) {
+    if (hasFunction(parent, "replaceChildren")) {
+        parent.replaceChildren(...nodes);
+    }
+    else {
+        parent.childNodes = nodes;
+        nodes.forEach((node) => (node.parentNode = parent));
+    }
+}
+export function insertBefore(parent, node, reference) {
+    if (!reference) {
+        return appendChild(parent, node);
+    }
+    else if (hasFunction(parent, "insertBefore")) {
+        return parent.insertBefore(node, reference);
+    }
+    else {
+        replaceWith(reference, node, reference);
+        return node;
+    }
+}
+export function innerHTML(elem) {
+    if (elem instanceof _Element)
+        return DomUtils.getInnerHTML(elem);
+    else
+        return elem.innerHTML;
+}
+export function innerText(elem) {
+    if (elem instanceof _Element)
+        return DomUtils.innerText(elem);
+    else
+        return elem.innerText;
+}
+export function getTextContent(elem) {
+    if (elem instanceof _Element)
+        return DomUtils.textContent(elem);
+    else
+        return elem.textContent;
+}
+export function setTextContent(elem, value) {
+    if (elem instanceof _Element)
+        elem.children = [new _Text(value)];
+    else
+        elem.textContent = value;
+}
+export function getNodeValue(node) {
+    if (node instanceof _Node)
+        return node.data;
+    else
+        return node.nodeValue;
+}
+export function setNodeValue(node, value) {
+    if (node instanceof _Node)
+        node.data = value;
+    else
+        node.nodeValue = value;
+}
+export function createElement(tagName, document) {
+    if (document)
+        return document.createElement(tagName);
+    else
+        return new _Element(tagName, {});
+}

package/dist/{gulp.d.ts → gulp_plugin.d.ts}

@@ -11,5 +11,5 @@ import * as stream from "stream";
  */
 declare function mancha(context?: {
     [key: string]: string;
-}, wwwroot?: string): stream.Transform;
+}): stream.Transform;
 export default mancha;

package/dist/{gulp.js → gulp_plugin.js}

@@ -1,9 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const path = require("path");
-const stream = require("stream");
-const through = require("through2");
-const index_1 = require("./index");
+import * as path from "path";
+import * as stream from "stream";
+import * as through from "through2";
+import { Renderer } from "./index.js";
 /**
  * Main entrypoint to be used in Gulp. Usage:
  *
@@ -13,8 +11,8 @@ const index_1 = require("./index");
  * @param context <key, value> pairs of literal string replacements. `key` will become `{{ key }}`
  * before replacing it with `value` in the processed files.
  */
-function mancha(context = {}, wwwroot = process.cwd()) {
-    const renderer = new index_1.RendererImpl(context);
+function mancha(context = {}) {
+    const renderer = new Renderer(context);
     return through.obj(function (file, encoding, callback) {
         const catcher = (err) => {
             console.log(err);
@@ -67,4 +65,4 @@ function mancha(context = {}, wwwroot = process.cwd()) {
         }
     });
 }
-exports.default = mancha;
+export default mancha;

package/dist/index.d.ts

@@ -1,7 +1,9 @@
-import { RendererImpl as WorkerRendererImpl } from "./worker";
-import { ParserParams, RenderParams } from "./interfaces";
+import { ParserParams, RenderParams } from "./interfaces.js";
+import { IRenderer } from "./core.js";
 /** The Node Mancha renderer is just like the worker renderer, but it also uses the filesystem. */
-export declare class RendererImpl extends WorkerRendererImpl {
+export declare class Renderer extends IRenderer {
+    parseHTML(content: string, params?: ParserParams): DocumentFragment;
+    serializeHTML(root: Node | DocumentFragment | Document): string;
     fetchLocal(fpath: string, params?: RenderParams & ParserParams): Promise<string>;
 }
-export declare const Mancha: RendererImpl;
+export declare const Mancha: Renderer;

package/dist/index.js

@@ -1,14 +1,28 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Mancha = exports.RendererImpl = void 0;
-const fs = require("fs/promises");
-const worker_1 = require("./worker");
+import * as fs from "fs/promises";
+import { JSDOM } from "jsdom";
+import { IRenderer } from "./core.js";
 /** The Node Mancha renderer is just like the worker renderer, but it also uses the filesystem. */
-class RendererImpl extends worker_1.RendererImpl {
+export class Renderer extends IRenderer {
+    parseHTML(content, params = { root: false }) {
+        const dom = new JSDOM();
+        if (params.root) {
+            const DOMParser = dom.window.DOMParser;
+            return new DOMParser().parseFromString(content, "text/html");
+        }
+        else {
+            const range = dom.window.document.createRange();
+            range.selectNodeContents(dom.window.document.body);
+            return range.createContextualFragment(content);
+        }
+    }
+    serializeHTML(root) {
+        const dom = new JSDOM();
+        const XMLSerializer = dom.window.XMLSerializer;
+        return new XMLSerializer().serializeToString(root).replace(/\s?xmlns="[^"]+"/gm, "");
+    }
     async fetchLocal(fpath, params) {
         return fs.readFile(fpath, { encoding: params?.encoding || "utf8" });
     }
 }
-exports.RendererImpl = RendererImpl;
 // Export the renderer instance directly.
-exports.Mancha = new RendererImpl();
+export const Mancha = new Renderer();

package/dist/interfaces.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="node" />
-import { IRenderer } from "./core";
+import { IRenderer } from "./core.js";
 export interface ParserParams {
     /** Whether the file parsed is a root document, or a document fragment. */
     root?: boolean;

package/dist/interfaces.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/dist/iterator.js

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Iterator = void 0;
-class Iterator {
+export class Iterator {
     iterable;
     constructor(iter) {
         this.iterable = iter;
@@ -45,4 +42,3 @@ class Iterator {
         return aVal.done === bVal.done;
     }
 }
-exports.Iterator = Iterator;