mancha 0.6.3 → 0.6.5

package/README.md

@@ -1,80 +1,182 @@
 # mancha
 
-`mancha` is an HTML rendering library. It can work as a command-line tool, imported as a Javascript
-function, or as a `Gulp` plugin.
+`mancha` is a simple HTML templating and rendering library for simple people. It works on the
+browser or the server. It can be used as a command-line tool, imported as a Javascript module, or as
+a plugin for [`Gulp`](https://gulpjs.com).
 
-## Examples
-
-Here are some of the things you can use `mancha` for.
-
-### Replace simple variables using `{{ value }}` format
-
-index.html:
-
-```html
-<span>Hello {{ name }}</span>
-```
-
-Command:
-
-```bash
-npx mancha --input="./index.html" --vars='{"name": "World"}'
-```
-
-Result:
-
-```html
-<div>Hello World</div>
-```
-
-### Include files from a relative path using the `<include>` tag
-
-hello-name.html:
-
-```html
-<span>Hello {{ name }}</span>
-```
-
-index.html:
+Here's a small sample of the things that you can do with `mancha`:
 
 ```html
-<div>
-  <include src="./hello-name.html" data-name="World"></include>
-</div>
+<!-- Use the bundled file from `unkpg`. -->
+<script src="//unpkg.com/mancha" target="main" init></script>
+
+<!-- Scoped variables using the `:data` attribute. -->
+<main :data="{count: 0, name: 'Stranger'}">
+  <!-- Custom HTML tag element registration. -->
+  <template is="counter">
+    <div>
+      <slot></slot>
+      <button @click="count++">Counter: {{ count }}</button>
+    </div>
+  </template>
+
+  <!-- Custom HTML tag element usage. -->
+  <counter>Click me:</counter>
+
+  <!-- Reactive data binding. -->
+  <p>Enter your name: <input type="text" :bind="name" /></p>
+  <p>Hello, {{ name }}!</p>
+
+  <!-- Include HTML partials. -->
+  <include src="html/partial/footer.tpl.html"></include>
+</main>
 ```
 
-Command:
-
-```bash
-npx mancha --input="./index.html"
-```
-
-Result:
-
-```html
-<div>
-  <span>Hello World</span>
-</div>
-```
+## Why another front-end Javascript library?
+
+There are plenty of other front-end Javascript libraries, many of them of great quality, including:
+
+- [Google's Svelte](https://svelte.dev)
+- [Meta's React](https://react.dev)
+- [Vue.js](https://vuejs.org) and [petite-vue](https://github.com/vuejs/petite-vue)
+- [Alpine.js](https://alpinejs.dev)
+
+None of them have all the key features that make `mancha` unique:
+
+| Feature               | mancha | Svelte | React.js | Vue.js | petite-vue | Alpine.js |
+| --------------------- | ------ | ------ | -------- | ------ | ---------- | --------- |
+| Simple to learn       | ✔️     | ❌     | ❌       | ❌     | ✔️         | ✔️        |
+| < 10kb compressed     | ✔️     | ❌     | ❌       | ❌     | ✔️         | ❌        |
+| Custom web components | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
+| Client-side rendering | ✔️     | ❌     | ❌       | ✔️     | ✔️         | ✔️        |
+| Server-side rendering | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
+
+`mancha` is great for:
+
+- **prototyping**, just plop a script tag in your HTML and off you go
+- **testing**, individual components can be rendered and tested outside the browser
+- **progressive enhancement**, from simple templating and basic reactivity to a full-blown app
+
+A core benefit of using `mancha` is that it allows you to compartmentalize the complexity of
+front-end development. Whether you decide to break up your app into reusable partial sections via
+`<include>` or create custom web components, you can write HTML as if your mother was watching.
+
+`mancha` implements its own reactivity engine, so the bundled browser module contains no external
+dependencies.
+
+## Preprocessing
+
+As part of the rendering lifecycle, `mancha` first preprocesses the HTML. The two main stages of
+preprocessing consist of:
+
+- Resolution of `<include>` tags
+
+  ```html
+  <!-- ./button.tpl.html -->
+  <button>Click Me</button>
+
+  <!-- ./index.html -->
+  <div>
+    <include src="button.tpl.html"></include>
+  </div>
+
+  <!-- Result after rendering `index.html`. -->
+  <div>
+    <button>Click Me</button>
+  </div>
+  ```
+
+- Registration and resolution of all custom web components
+
+  ```html
+  <!-- Use <template is="my-component-name"> to register a component. -->
+  <template is="my-red-button">
+    <button style="background-color: red;">
+      <slot></slot>
+    </button>
+  </template>
+
+  <!-- Any node traversed after registration can use the component. -->
+  <my-red-button @click="console.log('clicked')">
+    <!-- The contents within will replace the `<slot></slot>` tag. -->
+    Click Me
+  </my-red-button>
+  ```
+
+## Rendering
+
+Once the HTML has been preprocessed, it is rendered by traversing every node in the DOM and applying
+a series of plugins. Each plugin is only applied if specific conditions are met such as the HTML
+element tag or attributes match a specific criteria. Here's the list of attributes handled:
+
+- `:data` provides scoped variables to all subnodes
+  ```html
+  <div :data="{name: 'Stranger'}"></div>
+  ```
+- `:for` clones the node and repeats it
+  ```html
+  <div :for="item in ['a', 'b', 'c']">{{ item }}</div>
+  ```
+- `$text` sets the `textContent` value of a node
+  ```html
+  <div :data="{foo: 'bar'}" $text="foo"></div>
+  ```
+- `$html` sets the `innerHTML` value of a node
+  ```html
+  <div $html="<span>Hello World</span>"></div>
+  ```
+- `:show` toggles `$elem.style.display` to `none`
+  ```html
+  <div :data="{foo: false}" :show="foo"></div>
+  ```
+- `@watch` executes an expression anytime its dependencies change
+  ```html
+  <div :data="{foo: 'bar'}" @watch="console.log('foo changed:', foo)"></div>
+  ```
+- `:bind` binds (two-way) a variable to the `value` or `checked` property of the element.
+  ```html
+  <div :data="{name: 'Stranger'}">
+    <input type="text" :bind="name" />
+  </div>
+  ```
+- `${prop}` binds (one-way) the node property `prop` with the given expression
+  ```html
+  <div :data="{foo: false}">
+    <input type="submit" $disabled="foo" />
+  </div>
+  ```
+- `:{attr}` binds (one-way) the node attribute `attr` with the given expression
+  ```html
+  <div :data="{foo: 'bar'}">
+    <input type="text" :placeholder="foo" />
+  </div>
+  ```
+- `@{event}` adds an event listener for `event` to the node
+  ```html
+  <button @click="console.log('clicked')"></button>
+  ```
+- `{{ value }}` replaces `value` in text nodes
+  ```html
+  <button :data="{label: 'Click Me'}">{{ label }}</button>
+  ```
 
 ## Usage
 
 ### Client Side Rendering (CSR)
 
-To use `mancha` on the client (browser), use the `mancha.js` bundled file available via `unpkg`.
+To use `mancha` on the client (browser), use the `mancha` bundled file available via `unpkg`.
 
 ```html
-<body>
+<body :data="{ name: 'John' }">
   <span>Hello, {{ name }}!</span>
 </body>
 
-<script src="//unpkg.com/mancha" data-name="John" target="body" init></script>
+<script src="//unpkg.com/mancha" target="body" defer init></script>
 ```
 
 Script tag attributes:
 
 - `init`: whether to automatically render upon script load
-- `data-name`: dataset atribute, where `data-{{key}}` will be replaced with the attribute's value
 - `target`: comma-separated document elements to render e.g. "body" or "head,body" (defaults to "body")
 
 For a more complete example, see [examples/browser](./examples/browser).
@@ -109,13 +211,20 @@ the HTML code on demand for each incoming request:
 
 ```js
 import express from "express";
-import { renderLocalPath } from "mancha";
+import { Renderer } from "mancha";
 import vars from "./vars.json";
 
 const app = express();
 
 app.get("/", async (req, res) => {
-  const html = await renderLocalPath("src/index.html", vars);
+  const name = req.query.name || "Stranger";
+  // Instantiate a new renderer.
+  const renderer = new Renderer({ name, ...vars });
+  // Preprocess input HTML from a local file path.
+  const fragment = await renderer.preprocessLocal("src/index.html");
+  // Render and serialize output HTML.
+  const html = renderer.serializeHTML(await renderer.renderNode(fragment));
+  // Send it to the client.
   res.set("Content-Type", "text/html");
   res.send(html);
 });
@@ -123,50 +232,56 @@ app.get("/", async (req, res) => {
 app.listen(process.env.PORT || 8080);
 ```
 
-For a more complete example, see [examples/rendered](./examples/rendered).
+For a more complete example, see [examples/express](./examples/express).
 
 ### Web Worker Runtime Server Side Rendering (SSR)
 
 For servers hosted as worker runtimes, such as `Cloudflare Workers`, you will need to import a
-stripped down version of `mancha` that does not have the ability to read local files. Any HTML files
-will need to be separately hosted by a static server, although you can also generate strings
-containing HTML on demand.
+stripped down version of `mancha` that does not have the ability to read local files or evaluate
+expressions. The contents of any `{{ value }}` must be an existing variable in the renderer
+instance, since string evaluation is not permitted in some runtimes.
 
 ```js
-import { renderRemotePath } from "mancha/dist/core"
-
-const VARS = {...};
-const HTML_ROOT = "https://example.com/html";
+import { Renderer } from "mancha/dist/worker";
+import htmlIndex from "./index.html";
+import vars from "./vars.json";
 
-self.addEventListener('fetch', async event => {
-  const content = await renderRemotePath(`${HTML_ROOT}/index.html`, VARS);
-  event.respondWith(new Response(content, { headers: {"Content-Type": "text/html"} }))
+self.addEventListener("fetch", async (event) => {
+  // Instantiate a new renderer.
+  const renderer = new Renderer({ ...vars });
+  // Preprocess input HTML from a string.
+  const fragment = await renderer.preprocessString(htmlIndex);
+  // Render and serialize output HTML.
+  const html = renderer.serializeHTML(await renderer.renderNode(fragment));
+  // Send it to the client.
+  event.respondWith(new Response(content, { headers: { "Content-Type": "text/html" } }));
 });
 ```
 
+To meet the size requirements of popular worker runtimes, the worker version of `mancha` uses
+`htmlparser2` instead of `jsdom` for the underlying HTML and DOM manipulation. This keeps the
+footprint of `mancha` under 100kb.
+
 For a more complete example, see [examples/wrangler](./examples/wrangler).
 
-## Compile Time `gulpfile` Scripts
+## Compile Time `Gulp` Plugin
 
-To use `mancha` in your `gulpfile`, you can do the following:
+To use `mancha` as a `Gulp` plugin in `gulpfile.js`, you can do the following:
 
 ```js
+import GulpClient from "gulp";
 import { mancha } from "mancha/dist/gulp";
-gulp.src(...).pipe(mancha({"myvar": "myval"})).pipe(...)
-```
-
-The first argument consists of a dictionary of `<key, value>` pairs of literal string replacements.
-`key` will become `{{ key }}` before replacing it with `value` in the processed files. For example,
-if we passed `{"name": "World"}` as the argument:
-
-Source:
-
-```html
-<div>Hello {{ name }}</div>
-```
-
-Result:
+import vars from "./vars.json";
 
-```html
-<div>Hello World</div>
+GulpClient.task("build", function () {
+  return (
+    GulpClient
+      // Inlcude all HTML files, but exclude all partials (ending in .tpl.html).
+      .src(["src/**/*.html", "!src/**/*.tpl/html"])
+      // Render the HTML content using `mancha`.
+      .pipe(mancha(vars))
+      // Pipe the output to the destination folder.
+      .pipe(GulpClient.dest("public"))
+  );
+});
 ```

package/dist/browser.js

@@ -1,8 +1,8 @@
 import { dirname, IRenderer } from "./core.js";
 class Renderer extends IRenderer {
     dirpath = dirname(self.location.href);
-    parseHTML(content, params = { root: false }) {
-        if (params.root) {
+    parseHTML(content, params = { rootDocument: false }) {
+        if (params.rootDocument) {
             return new DOMParser().parseFromString(content, "text/html");
         }
         else {
@@ -15,7 +15,7 @@ class Renderer extends IRenderer {
         return new XMLSerializer().serializeToString(root).replace(/\s?xmlns="[^"]+"/gm, "");
     }
     preprocessLocal(fpath, params) {
-        // In the browser, "local" paths (i.e., relative) can still be fetched.
+        // In the browser, "local" paths (i.e., relative paths) can still be fetched.
         return this.preprocessRemote(fpath, params);
     }
 }

package/dist/core.d.ts

@@ -1,10 +1,30 @@
 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>;
+/**
+ * Returns the directory name from a given file path.
+ * @param fpath - The file path.
+ * @returns The directory name.
+ */
 export declare function dirname(fpath: string): string;
+/**
+ * Checks if a given file path is a relative path.
+ *
+ * @param fpath - The file path to check.
+ * @returns A boolean indicating whether the file path is relative or not.
+ */
 export declare function isRelativePath(fpath: string): boolean;
+/**
+ * Creates an evaluation function based on the provided code and arguments.
+ * @param code The code to be evaluated.
+ * @param args The arguments to be passed to the evaluation function. Default is an empty array.
+ * @returns The evaluation function.
+ */
 export declare function makeEvalFunction(code: string, args?: string[]): Function;
+/**
+ * Represents an abstract class for rendering and manipulating HTML content.
+ * Extends the `ReactiveProxyStore` class.
+ */
 export declare abstract class IRenderer extends ReactiveProxyStore {
     protected debugging: boolean;
     protected readonly dirpath: string;
@@ -15,22 +35,115 @@ export declare abstract class IRenderer extends ReactiveProxyStore {
     readonly _customElements: Map<string, Node>;
     abstract parseHTML(content: string, params?: ParserParams): DocumentFragment;
     abstract serializeHTML(root: DocumentFragment | Node): string;
+    /**
+     * Sets the debugging flag for the current instance.
+     *
+     * @param flag - The flag indicating whether debugging is enabled or disabled.
+     * @returns The current instance of the class.
+     */
     debug(flag: boolean): this;
+    /**
+     * Fetches the remote file at the specified path and returns its content as a string.
+     * @param fpath - The path of the remote file to fetch.
+     * @param params - Optional parameters for the fetch operation.
+     * @returns A promise that resolves to the content of the remote file as a string.
+     */
     fetchRemote(fpath: string, params?: RenderParams): Promise<string>;
+    /**
+     * Fetches a local path and returns its content as a string.
+     *
+     * @param fpath - The file path of the resource.
+     * @param params - Optional render parameters.
+     * @returns A promise that resolves to the fetched resource as a string.
+     */
     fetchLocal(fpath: string, params?: RenderParams): Promise<string>;
+    /**
+     * Preprocesses a string content with optional rendering and parsing parameters.
+     *
+     * @param content - The string content to preprocess.
+     * @param params - Optional rendering and parsing parameters.
+     * @returns A promise that resolves to a DocumentFragment representing the preprocessed content.
+     */
     preprocessString(content: string, params?: RenderParams & ParserParams): Promise<DocumentFragment>;
-    preprocessLocal(fpath: string, params?: RenderParams & ParserParams): Promise<DocumentFragment>;
+    /**
+     * Preprocesses a remote file by fetching its content and applying preprocessing steps.
+     * @param fpath - The path to the remote file.
+     * @param params - Optional parameters for rendering and parsing.
+     * @returns A Promise that resolves to a DocumentFragment representing the preprocessed content.
+     */
     preprocessRemote(fpath: string, params?: RenderParams & ParserParams): Promise<DocumentFragment>;
+    /**
+     * Preprocesses a local file by fetching its content and applying preprocessing steps.
+     * @param fpath - The path to the local file.
+     * @param params - Optional parameters for rendering and parsing.
+     * @returns A promise that resolves to the preprocessed document fragment.
+     */
+    preprocessLocal(fpath: string, params?: RenderParams & ParserParams): Promise<DocumentFragment>;
+    /**
+     * Creates a deep copy of the current renderer instance.
+     * @returns A new instance of the renderer with the same state as the original.
+     */
     clone(): IRenderer;
+    /**
+     * Logs the provided arguments if debugging is enabled.
+     * @param args - The arguments to be logged.
+     */
     log(...args: any[]): void;
+    /**
+     * Retrieves or creates a cached expression function based on the provided expression.
+     * @param expr - The expression to retrieve or create a cached function for.
+     * @returns The cached expression function.
+     */
     private cachedExpressionFunction;
+    /**
+     * Evaluates an expression and returns the result along with its dependencies.
+     * If the expression is already stored, it returns the stored value directly.
+     * Otherwise, it performs the expression evaluation using the cached expression function.
+     * @param expr - The expression to evaluate.
+     * @param args - Optional arguments to be passed to the expression function.
+     * @returns A promise that resolves to the result and the dependencies of the expression.
+     */
     eval(expr: string, args?: {
         [key: string]: any;
     }): Promise<[any, string[]]>;
+    /**
+     * This function is intended for internal use only.
+     *
+     * Executes the given expression and invokes the provided callback whenever the any of the
+     * dependencies change.
+     *
+     * @param expr - The expression to watch for changes.
+     * @param args - The arguments to be passed to the expression during evaluation.
+     * @param callback - The callback function to be invoked when the dependencies change.
+     * @returns A promise that resolves when the initial evaluation is complete.
+     */
     watchExpr(expr: string, args: {
         [key: string]: any;
     }, callback: EvalListener): Promise<void>;
-    preprocessNode(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<void>;
-    renderNode(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<Document | DocumentFragment | Node>;
+    /**
+     * Preprocesses a node by applying all the registered preprocessing plugins.
+     *
+     * @template T - The type of the input node.
+     * @param {T} root - The root node to preprocess.
+     * @param {RenderParams} [params] - Optional parameters for preprocessing.
+     * @returns {Promise<T>} - A promise that resolves to the preprocessed node.
+     */
+    preprocessNode<T extends Document | DocumentFragment | Node>(root: T, params?: RenderParams): Promise<T>;
+    /**
+     * Renders the node by applies all the registered rendering plugins.
+     *
+     * @template T - The type of the root node (Document, DocumentFragment, or Node).
+     * @param {T} root - The root node to render.
+     * @param {RenderParams} [params] - Optional parameters for rendering.
+     * @returns {Promise<T>} - A promise that resolves to the fully rendered root node.
+     */
+    renderNode<T extends Document | DocumentFragment | Node>(root: T, params?: RenderParams): Promise<T>;
+    /**
+     * Mounts the Mancha application to a root element in the DOM.
+     *
+     * @param root - The root element to mount the application to.
+     * @param params - Optional parameters for rendering the application.
+     * @returns A promise that resolves when the mounting process is complete.
+     */
     mount(root: Document | DocumentFragment | Node, params?: RenderParams): Promise<void>;
 }

package/dist/core.js

@@ -1,24 +1,12 @@
 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.
-    yield root;
-    while (frontier.length) {
-        const node = frontier.pop();
-        if (!explored.has(node)) {
-            explored.add(node);
-            yield node;
-        }
-        if (node.childNodes) {
-            Array.from(node.childNodes)
-                .filter((node) => !skip.has(node))
-                .forEach((node) => frontier.push(node));
-        }
-    }
-}
+import { traverse } from "./dome.js";
+/**
+ * Returns the directory name from a given file path.
+ * @param fpath - The file path.
+ * @returns The directory name.
+ */
 export function dirname(fpath) {
     if (!fpath.includes("/")) {
         return "";
@@ -27,15 +15,31 @@ export function dirname(fpath) {
         return fpath.split("/").slice(0, -1).join("/");
     }
 }
+/**
+ * Checks if a given file path is a relative path.
+ *
+ * @param fpath - The file path to check.
+ * @returns A boolean indicating whether the file path is relative or not.
+ */
 export function isRelativePath(fpath) {
     return (!fpath.includes("://") &&
         !fpath.startsWith("/") &&
         !fpath.startsWith("#") &&
         !fpath.startsWith("data:"));
 }
+/**
+ * Creates an evaluation function based on the provided code and arguments.
+ * @param code The code to be evaluated.
+ * @param args The arguments to be passed to the evaluation function. Default is an empty array.
+ * @returns The evaluation function.
+ */
 export function makeEvalFunction(code, args = []) {
     return new Function(...args, `with (this) { return (async () => (${code}))(); }`);
 }
+/**
+ * Represents an abstract class for rendering and manipulating HTML content.
+ * Extends the `ReactiveProxyStore` class.
+ */
 export class IRenderer extends ReactiveProxyStore {
     debugging = false;
     dirpath = "";
@@ -44,30 +48,54 @@ export class IRenderer extends ReactiveProxyStore {
     evalCallbacks = new Map();
     _skipNodes = new Set();
     _customElements = new Map();
+    /**
+     * Sets the debugging flag for the current instance.
+     *
+     * @param flag - The flag indicating whether debugging is enabled or disabled.
+     * @returns The current instance of the class.
+     */
     debug(flag) {
         this.debugging = flag;
         return this;
     }
+    /**
+     * Fetches the remote file at the specified path and returns its content as a string.
+     * @param fpath - The path of the remote file to fetch.
+     * @param params - Optional parameters for the fetch operation.
+     * @returns A promise that resolves to the content of the remote file as a string.
+     */
     async fetchRemote(fpath, params) {
         return fetch(fpath, { cache: params?.cache ?? "default" }).then((res) => res.text());
     }
+    /**
+     * Fetches a local path and returns its content as a string.
+     *
+     * @param fpath - The file path of the resource.
+     * @param params - Optional render parameters.
+     * @returns A promise that resolves to the fetched resource as a string.
+     */
     async fetchLocal(fpath, params) {
         return this.fetchRemote(fpath, params);
     }
+    /**
+     * Preprocesses a string content with optional rendering and parsing parameters.
+     *
+     * @param content - The string content to preprocess.
+     * @param params - Optional rendering and parsing parameters.
+     * @returns A promise that resolves to a DocumentFragment representing the preprocessed content.
+     */
     async preprocessString(content, params) {
         this.log("Preprocessing string content with params:\n", params);
         const fragment = this.parseHTML(content, params);
         await this.preprocessNode(fragment, params);
         return fragment;
     }
-    async preprocessLocal(fpath, params) {
-        const content = await this.fetchLocal(fpath, params);
-        return this.preprocessString(content, {
-            ...params,
-            dirpath: dirname(fpath),
-            root: params?.root ?? !fpath.endsWith(".tpl.html"),
-        });
-    }
+    /**
+     * Preprocesses a remote file by fetching its content and applying preprocessing steps.
+     * @param fpath - The path to the remote file.
+     * @param params - Optional parameters for rendering and parsing.
+     * @returns A Promise that resolves to a DocumentFragment representing the preprocessed content.
+     */
     async preprocessRemote(fpath, params) {
         const fetchOptions = {};
         if (params?.cache)
@@ -76,23 +104,60 @@ export class IRenderer extends ReactiveProxyStore {
         return this.preprocessString(content, {
             ...params,
             dirpath: dirname(fpath),
-            root: params?.root ?? !fpath.endsWith(".tpl.html"),
+            rootDocument: params?.rootDocument ?? !fpath.endsWith(".tpl.html"),
         });
     }
+    /**
+     * Preprocesses a local file by fetching its content and applying preprocessing steps.
+     * @param fpath - The path to the local file.
+     * @param params - Optional parameters for rendering and parsing.
+     * @returns A promise that resolves to the preprocessed document fragment.
+     */
+    async preprocessLocal(fpath, params) {
+        const content = await this.fetchLocal(fpath, params);
+        return this.preprocessString(content, {
+            ...params,
+            dirpath: dirname(fpath),
+            rootDocument: params?.rootDocument ?? !fpath.endsWith(".tpl.html"),
+        });
+    }
+    /**
+     * Creates a deep copy of the current renderer instance.
+     * @returns A new instance of the renderer with the same state as the original.
+     */
     clone() {
         const instance = new this.constructor(Object.fromEntries(this.store.entries()));
+        // Custom elements are shared across all instances.
+        instance._customElements = this._customElements;
         return instance.debug(this.debugging);
     }
+    /**
+     * Logs the provided arguments if debugging is enabled.
+     * @param args - The arguments to be logged.
+     */
     log(...args) {
         if (this.debugging)
             console.debug(...args);
     }
+    /**
+     * Retrieves or creates a cached expression function based on the provided expression.
+     * @param expr - The expression to retrieve or create a cached function for.
+     * @returns The cached expression function.
+     */
     cachedExpressionFunction(expr) {
         if (!this.expressionCache.has(expr)) {
             this.expressionCache.set(expr, makeEvalFunction(expr, this.evalkeys));
         }
         return this.expressionCache.get(expr);
     }
+    /**
+     * Evaluates an expression and returns the result along with its dependencies.
+     * If the expression is already stored, it returns the stored value directly.
+     * Otherwise, it performs the expression evaluation using the cached expression function.
+     * @param expr - The expression to evaluate.
+     * @param args - Optional arguments to be passed to the expression function.
+     * @returns A promise that resolves to the result and the dependencies of the expression.
+     */
     async eval(expr, args = {}) {
         if (this.store.has(expr)) {
             // Shortcut: if the expression is just an item from the value store, use that directly.
@@ -113,6 +178,17 @@ export class IRenderer extends ReactiveProxyStore {
             return [result, dependencies];
         }
     }
+    /**
+     * This function is intended for internal use only.
+     *
+     * Executes the given expression and invokes the provided callback whenever the any of the
+     * dependencies change.
+     *
+     * @param expr - The expression to watch for changes.
+     * @param args - The arguments to be passed to the expression during evaluation.
+     * @param callback - The callback function to be invoked when the dependencies change.
+     * @returns A promise that resolves when the initial evaluation is complete.
+     */
     watchExpr(expr, args, callback) {
         // Early exit: this eval has already been registered, we just need to add our callback.
         if (this.evalCallbacks.has(expr)) {
@@ -138,8 +214,16 @@ export class IRenderer extends ReactiveProxyStore {
         };
         return inner();
     }
+    /**
+     * Preprocesses a node by applying all the registered preprocessing plugins.
+     *
+     * @template T - The type of the input node.
+     * @param {T} root - The root node to preprocess.
+     * @param {RenderParams} [params] - Optional parameters for preprocessing.
+     * @returns {Promise<T>} - A promise that resolves to the preprocessed node.
+     */
     async preprocessNode(root, params) {
-        params = Object.assign({ dirpath: this.dirpath, maxdepth: 10 }, params);
+        params = { dirpath: this.dirpath, maxdepth: 10, ...params };
         const promises = new Iterator(traverse(root, this._skipNodes)).map(async (node) => {
             this.log("Preprocessing node:\n", node);
             // Resolve all the includes in the node.
@@ -153,7 +237,17 @@ export class IRenderer extends ReactiveProxyStore {
         });
         // Wait for all the rendering operations to complete.
         await Promise.all(promises.generator());
+        // Return the input node, which should now be fully preprocessed.
+        return root;
     }
+    /**
+     * Renders the node by applies all the registered rendering plugins.
+     *
+     * @template T - The type of the root node (Document, DocumentFragment, or Node).
+     * @param {T} root - The root node to render.
+     * @param {RenderParams} [params] - Optional parameters for rendering.
+     * @returns {Promise<T>} - A promise that resolves to the fully rendered root node.
+     */
     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.
@@ -185,10 +279,20 @@ export class IRenderer extends ReactiveProxyStore {
         // Return the input node, which should now be fully rendered.
         return root;
     }
+    /**
+     * Mounts the Mancha application to a root element in the DOM.
+     *
+     * @param root - The root element to mount the application to.
+     * @param params - Optional parameters for rendering the application.
+     * @returns A promise that resolves when the mounting process is complete.
+     */
     async mount(root, params) {
+        params = { ...params, rootNode: root };
         // Preprocess all the elements recursively first.
         await this.preprocessNode(root, params);
         // Now that the DOM is complete, render all the nodes.
         await this.renderNode(root, params);
+        // Attach ourselves to the HTML node.
+        root.renderer = this;
     }
 }

package/dist/dome.d.ts

@@ -3,6 +3,15 @@ type __Node = Node | _Node;
 type __ParentNode = ParentNode | _ParentNode;
 type __Element = Element | _Element;
 type __ChildNode = ChildNode | _ChildNode;
+/**
+ * Traverses the DOM tree starting from the given root node and yields each child node.
+ * Nodes in the `skip` set will be skipped during traversal.
+ *
+ * @param root - The root node to start the traversal from.
+ * @param skip - A set of nodes to skip during traversal.
+ * @returns A generator that yields each child node in the DOM tree.
+ */
+export declare function traverse(root: Node | DocumentFragment | Document, skip?: Set<Node>): Generator<ChildNode>;
 /**
  * Converts from an attribute name to camelCase, e.g. `foo-bar` becomes `fooBar`.
  * @param name attribute name
@@ -13,6 +22,7 @@ export declare function getAttribute(elem: __Element, name: string): string | nu
 export declare function setAttribute(elem: __Element, name: string, value: string): void;
 export declare function removeAttribute(elem: __Element, name: string): void;
 export declare function cloneAttribute(elemFrom: __Element, elemDest: __Element, name: string): void;
+export declare function firstElementChild(elem: __Element): __Element | null;
 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;

package/dist/dome.js

@@ -1,5 +1,31 @@
 import { Element as _Element, Node as _Node, Text as _Text, } from "domhandler";
 import { DomUtils } from "htmlparser2";
+/**
+ * Traverses the DOM tree starting from the given root node and yields each child node.
+ * Nodes in the `skip` set will be skipped during traversal.
+ *
+ * @param root - The root node to start the traversal from.
+ * @param skip - A set of nodes to skip during traversal.
+ * @returns A generator that yields each child node in the DOM tree.
+ */
+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.
+    yield root;
+    while (frontier.length) {
+        const node = frontier.shift();
+        if (!explored.has(node)) {
+            explored.add(node);
+            yield node;
+        }
+        if (node.childNodes) {
+            Array.from(node.childNodes)
+                .filter((node) => !skip.has(node))
+                .forEach((node) => frontier.push(node));
+        }
+    }
+}
 function hasFunction(obj, func) {
     return typeof obj?.[func] === "function";
 }
@@ -34,8 +60,16 @@ export function cloneAttribute(elemFrom, elemDest, name) {
         elemDest.attribs[name] = elemFrom.attribs[name];
     }
     else {
-        const attr = elemFrom.getAttributeNode(name);
-        elemDest.setAttributeNode(attr?.cloneNode(true));
+        const attr = elemFrom?.getAttributeNode?.(name);
+        elemDest?.setAttributeNode?.(attr?.cloneNode(true));
+    }
+}
+export function firstElementChild(elem) {
+    if (elem instanceof _Element) {
+        return elem.children.find((child) => child instanceof _Element);
+    }
+    else {
+        return elem.firstElementChild;
     }
 }
 export function replaceWith(original, ...replacement) {

package/dist/gulp_plugin.js

@@ -26,7 +26,7 @@ function mancha(context = {}) {
             if (file.isBuffer()) {
                 const chunk = file.contents.toString(encoding);
                 renderer
-                    .preprocessString(chunk, { dirpath, root: !file.path.endsWith(".tpl.html") })
+                    .preprocessString(chunk, { dirpath, rootDocument: !file.path.endsWith(".tpl.html") })
                     .then(async (fragment) => {
                     await renderer.renderNode(fragment);
                     const content = renderer.serializeHTML(fragment);
@@ -48,7 +48,7 @@ function mancha(context = {}) {
                 })
                     .on("end", () => {
                     renderer
-                        .preprocessString(docstr, { dirpath, root: !file.path.endsWith(".tpl.html") })
+                        .preprocessString(docstr, { dirpath, rootDocument: !file.path.endsWith(".tpl.html") })
                         .then(async (document) => {
                         await renderer.renderNode(document);
                         const content = renderer.serializeHTML(document);

package/dist/index.d.ts

@@ -1,6 +1,5 @@
 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 Renderer extends IRenderer {
     parseHTML(content: string, params?: ParserParams): DocumentFragment;
     serializeHTML(root: Node | DocumentFragment | Document): string;

package/dist/index.js

@@ -1,11 +1,10 @@
 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. */
 export class Renderer extends IRenderer {
-    parseHTML(content, params = { root: false }) {
+    parseHTML(content, params = { rootDocument: false }) {
         const dom = new JSDOM();
-        if (params.root) {
+        if (params.rootDocument) {
             const DOMParser = dom.window.DOMParser;
             return new DOMParser().parseFromString(content, "text/html");
         }
@@ -24,5 +23,5 @@ export class Renderer extends IRenderer {
         return fs.readFile(fpath, { encoding: params?.encoding || "utf8" });
     }
 }
-// Export the renderer instance directly.
+// Export a global renderer instance directly.
 export const Mancha = new Renderer();

package/dist/interfaces.d.ts

@@ -2,7 +2,7 @@
 import { IRenderer } from "./core.js";
 export interface ParserParams {
     /** Whether the file parsed is a root document, or a document fragment. */
-    root?: boolean;
+    rootDocument?: boolean;
     /** Encoding to use when processing local files. */
     encoding?: BufferEncoding;
 }
@@ -14,5 +14,7 @@ export interface RenderParams {
     maxdepth?: number;
     /** Cache policy used when resolving remote paths. */
     cache?: RequestCache | null;
+    /** Whether the current node is the root used in Mancha.moun(...). */
+    rootNode?: Node;
 }
 export type RendererPlugin = (this: IRenderer, node: ChildNode, params?: RenderParams) => Promise<void>;

package/dist/iterator.d.ts

@@ -3,6 +3,7 @@ export declare class Iterator<T> {
     constructor(iter: Iterable<T>);
     filter(fn: (val: T) => boolean): Iterator<T>;
     map<S>(fn: (val: T) => S): Iterator<S>;
+    find(fn: (val: T) => boolean): T | undefined;
     array(): T[];
     generator(): Iterable<T>;
     static filterGenerator<T>(fn: (val: T) => boolean, iter: Iterable<T>): Iterable<T>;

package/dist/iterator.js

@@ -9,6 +9,13 @@ export class Iterator {
     map(fn) {
         return new Iterator(Iterator.mapGenerator(fn, this.iterable));
     }
+    find(fn) {
+        for (const val of this.iterable) {
+            if (fn(val))
+                return val;
+        }
+        return undefined;
+    }
     array() {
         return Array.from(this.iterable);
     }

package/dist/mancha.js

@@ -1 +1 @@
-(()=>{"use strict";class t{timeouts=new Map;debounce(t,e){return new Promise(((s,r)=>{const n=this.timeouts.get(e);n&&clearTimeout(n),this.timeouts.set(e,setTimeout((()=>{try{s(e()),this.timeouts.delete(e)}catch(t){r(t)}}),t))}))}}function e(t,r,n=!0){if(null==t||function(t){return t instanceof s||t.__is_proxy__}(t))return t;if(n)for(const s in t)t.hasOwnProperty(s)&&"object"==typeof t[s]&&null!=t[s]&&(t[s]=e(t[s],r));return new Proxy(t,{deleteProperty:(t,e)=>e in t&&(delete t[e],r(),!0),set:(t,s,i,a)=>{n&&"object"==typeof i&&(i=e(i,r));const o=Reflect.set(t,s,i,a);return r(),o},get:(t,e,s)=>"__is_proxy__"===e||Reflect.get(t,e,s)})}class s extends t{value=null;listeners=[];constructor(t=null,...e){super(),this.value=this.wrapObjValue(t),e.forEach((t=>this.watch(t)))}static from(t,...e){return t instanceof s?(e.forEach(t.watch),t):new s(t,...e)}wrapObjValue(t){return null===t||"object"!=typeof t?t:e(t,(()=>this.trigger()))}get(){return this.value}async set(t){if(this.value!==t){const e=this.value;this.value=this.wrapObjValue(t),await this.trigger(e)}}watch(t){this.listeners.push(t)}unwatch(t){this.listeners=this.listeners.filter((e=>e!==t))}trigger(t=null){const e=this.listeners.slice();return this.debounce(10,(()=>Promise.all(e.map((e=>e(this.value,t)))).then((()=>{}))))}}class r extends t{store=new Map;debouncedListeners=new Map;lock=Promise.resolve();constructor(t){super();for(const[e,r]of Object.entries(t||{}))this.store.set(e,s.from(this.wrapFnValue(r)))}wrapFnValue(t){return t&&"function"==typeof t?(...e)=>t.call(n(this),...e):t}get $(){return n(this)}entries(){return this.store.entries()}get(t){return this.store.get(t)?.get()}async set(t,e){this.store.has(t)?await this.store.get(t).set(this.wrapFnValue(e)):this.store.set(t,s.from(this.wrapFnValue(e)))}del(t){return this.store.delete(t)}has(t){return this.store.has(t)}async update(t){await Promise.all(Object.entries(t).map((([t,e])=>this.set(t,e))))}watch(t,e){t=Array.isArray(t)?t:[t];const s=()=>e(...t.map((t=>this.store.get(t).get()))),r=()=>this.debounce(10,s);t.forEach((t=>this.store.get(t).watch(r))),this.debouncedListeners.set(e,r)}unwatch(t,e){(t=Array.isArray(t)?t:[t]).forEach((t=>this.store.get(t).unwatch(this.debouncedListeners.get(e)))),this.debouncedListeners.delete(e)}async trigger(t){t=Array.isArray(t)?t:[t],await Promise.all(t.map((t=>this.store.get(t).trigger())))}async trace(t){const e=new Set,s=n(this,((t,s)=>{"get"===t&&e.add(s)}));return[await t.call(s),Array.from(e)]}async computed(t,e){const[s,r]=await this.trace(e);this.watch(r,(async()=>this.set(t,await e.call(n(this))))),this.set(t,s)}}function n(t,e=(()=>{})){const s=Array.from(t.entries()).map((([t])=>t)),r=Object.fromEntries(s.map((t=>[t,void 0])));return new Proxy(Object.assign({},t,r),{get:(s,r,n)=>"string"==typeof r&&t.has(r)?(e("get",r),t.get(r)):"get"===r?s=>(e("get",s),t.get(s)):Reflect.get(t,r,n),set:(s,r,n,i)=>("string"!=typeof r||r in t?Reflect.set(t,r,n,i):(e("set",r,n),t.set(r,n)),!0)})}class i{iterable;constructor(t){this.iterable=t}filter(t){return new i(i.filterGenerator(t,this.iterable))}map(t){return new i(i.mapGenerator(t,this.iterable))}array(){return Array.from(this.iterable)}*generator(){for(const t of this.iterable)yield t}static*filterGenerator(t,e){for(const s of e)t(s)&&(yield s)}static*mapGenerator(t,e){for(const s of e)yield t(s)}static equals(t,e){const s=t[Symbol.iterator](),r=e[Symbol.iterator]();let n=s.next(),i=r.next();for(;!n.done&&!i.done;){if(n.value!==i.value)return!1;n=s.next(),i=r.next()}return n.done===i.done}}var a,o;(o=a||(a={})).Root="root",o.Text="text",o.Directive="directive",o.Comment="comment",o.Script="script",o.Style="style",o.Tag="tag",o.CDATA="cdata",o.Doctype="doctype",a.Root,a.Text,a.Directive,a.Comment,a.Script,a.Style,a.Tag,a.CDATA,a.Doctype;class c{constructor(){this.parent=null,this.prev=null,this.next=null,this.startIndex=null,this.endIndex=null}get parentNode(){return this.parent}set parentNode(t){this.parent=t}get previousSibling(){return this.prev}set previousSibling(t){this.prev=t}get nextSibling(){return this.next}set nextSibling(t){this.next=t}cloneNode(t=!1){return w(this,t)}}class l extends c{constructor(t){super(),this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t}}class h extends l{constructor(){super(...arguments),this.type=a.Text}get nodeType(){return 3}}class u extends l{constructor(){super(...arguments),this.type=a.Comment}get nodeType(){return 8}}class d extends l{constructor(t,e){super(e),this.name=t,this.type=a.Directive}get nodeType(){return 1}}class p extends c{constructor(t){super(),this.children=t}get firstChild(){var t;return null!==(t=this.children[0])&&void 0!==t?t:null}get lastChild(){return this.children.length>0?this.children[this.children.length-1]:null}get childNodes(){return this.children}set childNodes(t){this.children=t}}class f extends p{constructor(){super(...arguments),this.type=a.CDATA}get nodeType(){return 4}}class m extends p{constructor(){super(...arguments),this.type=a.Root}get nodeType(){return 9}}class g extends p{constructor(t,e,s=[],r=("script"===t?a.Script:"style"===t?a.Style:a.Tag)){super(s),this.name=t,this.attribs=e,this.type=r}get nodeType(){return 1}get tagName(){return this.name}set tagName(t){this.name=t}get attributes(){return Object.keys(this.attribs).map((t=>{var e,s;return{name:t,value:this.attribs[t],namespace:null===(e=this["x-attribsNamespace"])||void 0===e?void 0:e[t],prefix:null===(s=this["x-attribsPrefix"])||void 0===s?void 0:s[t]}}))}}function w(t,e=!1){let s;if(function(t){return t.type===a.Text}(t))s=new h(t.data);else if(function(t){return t.type===a.Comment}(t))s=new u(t.data);else if(function(t){return(e=t).type===a.Tag||e.type===a.Script||e.type===a.Style;var e}(t)){const r=e?y(t.children):[],n=new g(t.name,{...t.attribs},r);r.forEach((t=>t.parent=n)),null!=t.namespace&&(n.namespace=t.namespace),t["x-attribsNamespace"]&&(n["x-attribsNamespace"]={...t["x-attribsNamespace"]}),t["x-attribsPrefix"]&&(n["x-attribsPrefix"]={...t["x-attribsPrefix"]}),s=n}else if(function(t){return t.type===a.CDATA}(t)){const r=e?y(t.children):[],n=new f(r);r.forEach((t=>t.parent=n)),s=n}else if(function(t){return t.type===a.Root}(t)){const r=e?y(t.children):[],n=new m(r);r.forEach((t=>t.parent=n)),t["x-mode"]&&(n["x-mode"]=t["x-mode"]),s=n}else{if(!function(t){return t.type===a.Directive}(t))throw new Error(`Not implemented yet: ${t.type}`);{const e=new d(t.name,t.data);null!=t["x-name"]&&(e["x-name"]=t["x-name"],e["x-publicId"]=t["x-publicId"],e["x-systemId"]=t["x-systemId"]),s=e}}return s.startIndex=t.startIndex,s.endIndex=t.endIndex,null!=t.sourceCodeLocation&&(s.sourceCodeLocation=t.sourceCodeLocation),s}function y(t){const e=t.map((t=>w(t,!0)));for(let t=1;t<e.length;t++)e[t].prev=e[t-1],e[t-1].next=e[t];return e}function b(t,e){return"function"==typeof t?.[e]}function v(t,e){return t instanceof g?t.attribs?.[e]:t.getAttribute?.(e)}function x(t,e,s){t instanceof g?t.attribs[e]=s:t.setAttribute?.(e,s)}function N(t,e){t instanceof g?delete t.attribs[e]:t.removeAttribute?.(e)}function A(t,e,s){if(t instanceof g&&e instanceof g)e.attribs[s]=t.attribs[s];else{const r=t.getAttributeNode(s);e.setAttributeNode(r?.cloneNode(!0))}}function $(t,...e){if(b(t,"replaceWith"))return t.replaceWith(...e);{const s=t,r=s.parentNode,n=Array.from(r.childNodes).indexOf(s);e.forEach((t=>t.parentNode=r)),r.childNodes=[].concat(Array.from(r.childNodes).slice(0,n)).concat(e).concat(Array.from(r.childNodes).slice(n+1))}}function E(t,e){return b(e,"appendChild")?t.appendChild(e):(t.childNodes.push(e),e.parentNode=t,e)}function C(t,e){if(b(e,"removeChild"))return t.removeChild(e);{const s=e;return t.childNodes=t.children.filter((t=>t!==s)),s}}function k(t,e,s){return s?b(t,"insertBefore")?t.insertBefore(e,s):($(s,e,s),e):E(t,e)}window.htmlparser2;const _=new Set([":bind",":bind-events",":data",":for",":show","@watch","$html"]);var S;function*T(t,e=new Set){const s=new Set,r=Array.from(t.childNodes).filter((t=>!e.has(t)));for(yield t;r.length;){const t=r.pop();s.has(t)||(s.add(t),yield t),t.childNodes&&Array.from(t.childNodes).filter((t=>!e.has(t))).forEach((t=>r.push(t)))}}function L(t){return t.includes("/")?t.split("/").slice(0,-1).join("/"):""}function P(t){return!(t.includes("://")||t.startsWith("/")||t.startsWith("#")||t.startsWith("data:"))}!function(t){t.resolveIncludes=async function(t,e){const s=t;if("include"!==s.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",t),this.log("<include> params:",e);const r=v(s,"src");if(!r)throw new Error(`"src" attribute missing from ${t}.`);const n=e=>{const r=e.firstChild;for(const t of Array.from(s.attributes))r&&"src"!==t.name&&A(s,r,t.name);$(t,...e.childNodes)},i={...e,root:!1,maxdepth:e?.maxdepth-1};if(0===i.maxdepth)throw new Error("Maximum recursion depth reached.");if(r.includes("://")||r.startsWith("//"))this.log("Including remote file from absolute path:",r),await this.preprocessRemote(r,i).then(n);else if(e?.dirpath?.includes("://")||e?.dirpath?.startsWith("//")){const t=e.dirpath&&"."!==e.dirpath?`${e.dirpath}/${r}`:r;this.log("Including remote file from relative path:",t),await this.preprocessRemote(t,i).then(n)}else if("/"===r.charAt(0))this.log("Including local file from absolute path:",r),await this.preprocessLocal(r,i).then(n);else{const t=e?.dirpath&&"."!==e?.dirpath?`${e?.dirpath}/${r}`:r;this.log("Including local file from relative path:",t),await this.preprocessLocal(t,i).then(n)}},t.rebaseRelativePaths=async function(t,e){const s=t,r=s.tagName?.toLowerCase();if(!e?.dirpath)return;const n=v(s,"src"),i=v(s,"href"),a=v(s,"data"),o=n||i||a;o&&(o&&P(o)&&this.log("Rebasing relative path as:",e.dirpath,"/",o),"img"===r&&n&&P(n)?x(s,"src",`${e.dirpath}/${n}`):"a"===r&&i&&P(i)||"link"===r&&i&&P(i)?x(s,"href",`${e.dirpath}/${i}`):"script"===r&&n&&P(n)||"source"===r&&n&&P(n)||"audio"===r&&n&&P(n)||"video"===r&&n&&P(n)||"track"===r&&n&&P(n)||"iframe"===r&&n&&P(n)?x(s,"src",`${e.dirpath}/${n}`):"object"===r&&a&&P(a)?x(s,"data",`${e.dirpath}/${a}`):"input"===r&&n&&P(n)?x(s,"src",`${e.dirpath}/${n}`):("area"===r&&i&&P(i)||"base"===r&&i&&P(i))&&x(s,"href",`${e.dirpath}/${i}`))},t.registerCustomElements=async function(t,e){const s=t;if("template"===s.tagName?.toLowerCase()&&v(s,"is")){this.log("Registering custom element:\n",s);const t=v(s,"is");this._customElements.has(t)||this._customElements.set(t,s),C(s.parentNode,s)}},t.resolveCustomElements=async function(t,e){const s=t,r=s.tagName?.toLowerCase();if(this._customElements.has(r)){this.log("Processing custom element:\n",s);const e=this._customElements.get(r),n=(e.content||e).cloneNode(!0),i=n.firstChild;for(const t of Array.from(s.attributes))i&&A(s,i,t.name);$(t,...n.childNodes)}},t.resolveTextNodeExpressions=async function(t,e){if(3!==t.nodeType)return;const s=function(t){return t instanceof c?t.data:t.nodeValue}(t)||"";this.log("Processing node content value:\n",s);const r=new RegExp(/{{ ([^}]+) }}/gm),n=Array.from(s.matchAll(r)).map((t=>t[1])),i=async()=>{let e=s;for(const s of n){const[r]=await this.eval(s,{$elem:t});e=e.replace(`{{ ${s} }}`,String(r))}!function(t,e){t instanceof c?t.data=e:t.nodeValue=e}(t,e)};await Promise.all(n.map((e=>this.watchExpr(e,{$elem:t},i))))},t.resolveDataAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,":data");if(r){this.log(":data attribute found in:\n",t),N(s,":data");const n=this.clone();t.renderer=n;const[i]=await n.eval(r,{$elem:t});await n.update(i);for(const e of T(t,this._skipNodes))this._skipNodes.add(e);await n.mount(t,e)}},t.resolveWatchAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,"@watch");r&&(this.log("@watch attribute found in:\n",t),N(s,"@watch"),await this.watchExpr(r,{$elem:t},(()=>{})))},t.resolveTextAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,"$text");r&&(this.log("$text attribute found in:\n",t),N(s,"$text"),await this.watchExpr(r,{$elem:t},(e=>function(t,e){t instanceof g?t.children=[new h(e)]:t.textContent=e}(t,e))))},t.resolveHtmlAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,"$html");if(r){this.log("$html attribute found in:\n",t),N(s,"$html");const n=this.clone();await this.watchExpr(r,{$elem:t},(async t=>{const r=await n.preprocessString(t,e);await n.renderNode(r,e),function(t,...e){b(t,"replaceChildren")?t.replaceChildren(...e):(t.childNodes=e,e.forEach((e=>e.parentNode=t)))}(s,r)}))}},t.resolvePropAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))if(e.name.startsWith("$")&&!_.has(e.name)){this.log(e.name,"attribute found in:\n",t),N(s,e.name);const r=e.name.slice(1).replace(/-./g,(t=>t[1].toUpperCase()));await this.watchExpr(e.value,{$elem:t},(e=>t[r]=e))}},t.resolveAttrAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))if(e.name.startsWith(":")&&!_.has(e.name)){this.log(e.name,"attribute found in:\n",t),N(s,e.name);const r=e.name.slice(1);await this.watchExpr(e.value,{$elem:t},(t=>x(s,r,t)))}},t.resolveEventAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))e.name.startsWith("@")&&!_.has(e.name)&&(this.log(e.name,"attribute found in:\n",t),N(s,e.name),t.addEventListener?.(e.name.substring(1),(s=>{this.eval(e.value,{$elem:t,$event:s})})))},t.resolveForAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,":for")?.trim();if(r){this.log(":for attribute found in:\n",t),N(s,":for");for(const e of T(t,this._skipNodes))this._skipNodes.add(e);const n=t.parentNode,i=function(t,e){return e?e.createElement(t):new g(t,{})}("template",t.ownerDocument);k(n,i,t),C(n,t),E(i,t),this.log(":for template:\n",i);const a=r.split(" in ",2);if(2!==a.length)throw new Error(`Invalid :for format: \`${r}\`. Expected "{key} in {expression}".`);const o=[],[c,l]=a;await this.watchExpr(l,{$elem:t},(s=>(this.log(":for list items:",s),this.lock=this.lock.then((()=>new Promise((async r=>{if(o.splice(0,o.length).forEach((t=>{C(n,t),this._skipNodes.delete(t)})),!Array.isArray(s))return console.error(`Expression did not yield a list: \`${l}\` => \`${s}\``),r();for(const r of s){const s=this.clone();await s.set(c,r);const n=t.cloneNode(!0);o.push(n),this._skipNodes.add(n),await s.mount(n,e),this.log("Rendered list child:\n",n,n.outerHTML)}const a=i.nextSibling;for(const t of o)k(n,t,a);r()})))).catch((t=>{throw console.error(t),new Error(t)})).then(),this.lock)))}},t.resolveBindAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,":bind");if(r){this.log(":bind attribute found in:\n",t);const e=["change","input"],n=v(s,":bind-events")?.split(",")||e;N(s,":bind"),N(s,":bind-events");const i="checkbox"===v(s,"type")?"checked":"value",a=`$elem.${i} = ${r}`;await this.watchExpr(a,{$elem:t},(t=>s[i]=t));const o=`${r} = $elem.${i}`;for(const e of n)t.addEventListener(e,(()=>this.eval(o,{$elem:t})))}},t.resolveShowAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,r=v(s,":show");if(r){this.log(":show attribute found in:\n",t),N(s,":show");const e="none"===s.style?.display?"":s.style?.display??v(s,"style")?.split(";")?.find((t=>"display"===t.split(":")[0]))?.split(":")?.at(1)?.trim();await this.watchExpr(r,{$elem:t},(t=>{s.style?s.style.display=t?e:"none":x(s,"style",`display: ${t?e:"none"};`)}))}}}(S||(S={}));class R extends r{debugging=!1;dirpath="";evalkeys=["$elem","$event"];expressionCache=new Map;evalCallbacks=new Map;_skipNodes=new Set;_customElements=new Map;debug(t){return this.debugging=t,this}async fetchRemote(t,e){return fetch(t,{cache:e?.cache??"default"}).then((t=>t.text()))}async fetchLocal(t,e){return this.fetchRemote(t,e)}async preprocessString(t,e){this.log("Preprocessing string content with params:\n",e);const s=this.parseHTML(t,e);return await this.preprocessNode(s,e),s}async preprocessLocal(t,e){const s=await this.fetchLocal(t,e);return this.preprocessString(s,{...e,dirpath:L(t),root:e?.root??!t.endsWith(".tpl.html")})}async preprocessRemote(t,e){const s={};e?.cache&&(s.cache=e.cache);const r=await fetch(t,s).then((t=>t.text()));return this.preprocessString(r,{...e,dirpath:L(t),root:e?.root??!t.endsWith(".tpl.html")})}clone(){return new this.constructor(Object.fromEntries(this.store.entries())).debug(this.debugging)}log(...t){this.debugging&&console.debug(...t)}cachedExpressionFunction(t){return this.expressionCache.has(t)||this.expressionCache.set(t,function(t,e=[]){return new Function(...e,`with (this) { return (async () => (${t}))(); }`)}(t,this.evalkeys)),this.expressionCache.get(t)}async eval(t,e={}){if(this.store.has(t))return[this.get(t),[t]];{const s=this.cachedExpressionFunction(t),r=this.evalkeys.map((t=>e[t]));if(Object.keys(e).some((t=>!this.evalkeys.includes(t))))throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);const[n,i]=await this.trace((async function(){return s.call(this,...r)}));return this.log(`eval \`${t}\` => `,n,`[ ${i.join(", ")} ]`),[n,i]}}watchExpr(t,e,s){if(this.evalCallbacks.has(t))return this.evalCallbacks.get(t)?.push(s),this.eval(t,e).then((([t,e])=>s(t,e)));this.evalCallbacks.set(t,[s]);const r=[],n=async()=>{const[s,i]=await this.eval(t,e),a=this.evalCallbacks.get(t)||[];await Promise.all(a.map((t=>t(s,i)))),r.length>0&&this.unwatch(r,n),r.splice(0,r.length,...i),this.watch(i,n)};return n()}async preprocessNode(t,e){e=Object.assign({dirpath:this.dirpath,maxdepth:10},e);const s=new i(T(t,this._skipNodes)).map((async t=>{this.log("Preprocessing node:\n",t),await S.resolveIncludes.call(this,t,e),await S.rebaseRelativePaths.call(this,t,e),await S.registerCustomElements.call(this,t,e),await S.resolveCustomElements.call(this,t,e)}));await Promise.all(s.generator())}async renderNode(t,e){for(const s of T(t,this._skipNodes))this.log("Rendering node:\n",s),await S.resolveDataAttribute.call(this,s,e),await S.resolveForAttribute.call(this,s,e),await S.resolveTextAttributes.call(this,s,e),await S.resolveHtmlAttribute.call(this,s,e),await S.resolveShowAttribute.call(this,s,e),await S.resolveWatchAttribute.call(this,s,e),await S.resolveBindAttribute.call(this,s,e),await S.resolvePropAttributes.call(this,s,e),await S.resolveAttrAttributes.call(this,s,e),await S.resolveEventAttributes.call(this,s,e),await S.resolveTextNodeExpressions.call(this,s,e);return t}async mount(t,e){await this.preprocessNode(t,e),await this.renderNode(t,e)}}const j=new class extends R{dirpath=L(self.location.href);parseHTML(t,e={root:!1}){if(e.root)return(new DOMParser).parseFromString(t,"text/html");{const e=document.createRange();return e.selectNodeContents(document.body),e.createContextualFragment(t)}}serializeHTML(t){return(new XMLSerializer).serializeToString(t).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(t,e){return this.preprocessRemote(t,e)}};self.Mancha=j;const I=self.document?.currentScript;if(self.document?.currentScript?.hasAttribute("init")){const t=I?.hasAttribute("debug"),e=I?.getAttribute("cache"),s=I?.getAttribute("target")?.split(",")||["body"];window.addEventListener("load",(()=>{s.map((async s=>{const r=self.document.querySelector(s);await j.debug(t).mount(r,{cache:e})}))}))}})();
+(()=>{"use strict";class t{timeouts=new Map;debounce(t,e){return new Promise(((s,n)=>{const r=this.timeouts.get(e);r&&clearTimeout(r),this.timeouts.set(e,setTimeout((()=>{try{s(e()),this.timeouts.delete(e)}catch(t){n(t)}}),t))}))}}function e(t,n,r=!0){if(null==t||function(t){return t instanceof s||t.__is_proxy__}(t)||t instanceof Promise)return t;if(r)for(const s in t)t.hasOwnProperty(s)&&"object"==typeof t[s]&&null!=t[s]&&(t[s]=e(t[s],n));return new Proxy(t,{deleteProperty:(t,e)=>e in t&&(delete t[e],n(),!0),set:(t,s,i,a)=>{r&&"object"==typeof i&&(i=e(i,n));const o=Reflect.set(t,s,i,a);return n(),o},get:(t,e,s)=>"__is_proxy__"===e||Reflect.get(t,e,s)})}class s extends t{value=null;listeners=[];constructor(t=null,...e){super(),this.value=this.wrapObjValue(t),e.forEach((t=>this.watch(t)))}static from(t,...e){return t instanceof s?(e.forEach(t.watch),t):new s(t,...e)}wrapObjValue(t){return null===t||"object"!=typeof t?t:e(t,(()=>this.trigger()))}get(){return this.value}async set(t){if(this.value!==t){const e=this.value;this.value=this.wrapObjValue(t),await this.trigger(e)}}watch(t){this.listeners.push(t)}unwatch(t){this.listeners=this.listeners.filter((e=>e!==t))}trigger(t=null){const e=this.listeners.slice();return this.debounce(10,(()=>Promise.all(e.map((e=>e(this.value,t)))).then((()=>{}))))}}class n extends t{store=new Map;debouncedListeners=new Map;lock=Promise.resolve();constructor(t){super();for(const[e,n]of Object.entries(t||{}))this.store.set(e,s.from(this.wrapFnValue(n)))}wrapFnValue(t){return t&&"function"==typeof t?(...e)=>t.call(r(this),...e):t}get $(){return r(this)}entries(){return this.store.entries()}get(t){return this.store.get(t)?.get()}async set(t,e){this.store.has(t)?await this.store.get(t).set(this.wrapFnValue(e)):this.store.set(t,s.from(this.wrapFnValue(e)))}del(t){return this.store.delete(t)}has(t){return this.store.has(t)}async update(t){await Promise.all(Object.entries(t).map((([t,e])=>this.set(t,e))))}watch(t,e){t=Array.isArray(t)?t:[t];const s=()=>e(...t.map((t=>this.store.get(t).get()))),n=()=>this.debounce(10,s);t.forEach((t=>this.store.get(t).watch(n))),this.debouncedListeners.set(e,n)}unwatch(t,e){(t=Array.isArray(t)?t:[t]).forEach((t=>this.store.get(t).unwatch(this.debouncedListeners.get(e)))),this.debouncedListeners.delete(e)}async trigger(t){t=Array.isArray(t)?t:[t],await Promise.all(t.map((t=>this.store.get(t).trigger())))}async trace(t){const e=new Set,s=r(this,((t,s)=>{"get"===t&&e.add(s)}));return[await t.call(s),Array.from(e)]}async computed(t,e){const[s,n]=await this.trace(e);this.watch(n,(async()=>this.set(t,await e.call(r(this))))),this.set(t,s)}}function r(t,e=(()=>{})){const s=Array.from(t.entries()).map((([t])=>t)),n=Object.fromEntries(s.map((t=>[t,void 0])));return new Proxy(Object.assign({},t,n),{get:(s,n,r)=>"string"==typeof n&&t.has(n)?(e("get",n),t.get(n)):"get"===n?s=>(e("get",s),t.get(s)):Reflect.get(t,n,r),set:(s,n,r,i)=>("string"!=typeof n||n in t?Reflect.set(t,n,r,i):(e("set",n,r),t.set(n,r)),!0)})}class i{iterable;constructor(t){this.iterable=t}filter(t){return new i(i.filterGenerator(t,this.iterable))}map(t){return new i(i.mapGenerator(t,this.iterable))}find(t){for(const e of this.iterable)if(t(e))return e}array(){return Array.from(this.iterable)}*generator(){for(const t of this.iterable)yield t}static*filterGenerator(t,e){for(const s of e)t(s)&&(yield s)}static*mapGenerator(t,e){for(const s of e)yield t(s)}static equals(t,e){const s=t[Symbol.iterator](),n=e[Symbol.iterator]();let r=s.next(),i=n.next();for(;!r.done&&!i.done;){if(r.value!==i.value)return!1;r=s.next(),i=n.next()}return r.done===i.done}}var a,o;(o=a||(a={})).Root="root",o.Text="text",o.Directive="directive",o.Comment="comment",o.Script="script",o.Style="style",o.Tag="tag",o.CDATA="cdata",o.Doctype="doctype",a.Root,a.Text,a.Directive,a.Comment,a.Script,a.Style,a.Tag,a.CDATA,a.Doctype;class c{constructor(){this.parent=null,this.prev=null,this.next=null,this.startIndex=null,this.endIndex=null}get parentNode(){return this.parent}set parentNode(t){this.parent=t}get previousSibling(){return this.prev}set previousSibling(t){this.prev=t}get nextSibling(){return this.next}set nextSibling(t){this.next=t}cloneNode(t=!1){return w(this,t)}}class l extends c{constructor(t){super(),this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t}}class h extends l{constructor(){super(...arguments),this.type=a.Text}get nodeType(){return 3}}class u extends l{constructor(){super(...arguments),this.type=a.Comment}get nodeType(){return 8}}class d extends l{constructor(t,e){super(e),this.name=t,this.type=a.Directive}get nodeType(){return 1}}class p extends c{constructor(t){super(),this.children=t}get firstChild(){var t;return null!==(t=this.children[0])&&void 0!==t?t:null}get lastChild(){return this.children.length>0?this.children[this.children.length-1]:null}get childNodes(){return this.children}set childNodes(t){this.children=t}}class f extends p{constructor(){super(...arguments),this.type=a.CDATA}get nodeType(){return 4}}class m extends p{constructor(){super(...arguments),this.type=a.Root}get nodeType(){return 9}}class g extends p{constructor(t,e,s=[],n=("script"===t?a.Script:"style"===t?a.Style:a.Tag)){super(s),this.name=t,this.attribs=e,this.type=n}get nodeType(){return 1}get tagName(){return this.name}set tagName(t){this.name=t}get attributes(){return Object.keys(this.attribs).map((t=>{var e,s;return{name:t,value:this.attribs[t],namespace:null===(e=this["x-attribsNamespace"])||void 0===e?void 0:e[t],prefix:null===(s=this["x-attribsPrefix"])||void 0===s?void 0:s[t]}}))}}function w(t,e=!1){let s;if(function(t){return t.type===a.Text}(t))s=new h(t.data);else if(function(t){return t.type===a.Comment}(t))s=new u(t.data);else if(function(t){return(e=t).type===a.Tag||e.type===a.Script||e.type===a.Style;var e}(t)){const n=e?y(t.children):[],r=new g(t.name,{...t.attribs},n);n.forEach((t=>t.parent=r)),null!=t.namespace&&(r.namespace=t.namespace),t["x-attribsNamespace"]&&(r["x-attribsNamespace"]={...t["x-attribsNamespace"]}),t["x-attribsPrefix"]&&(r["x-attribsPrefix"]={...t["x-attribsPrefix"]}),s=r}else if(function(t){return t.type===a.CDATA}(t)){const n=e?y(t.children):[],r=new f(n);n.forEach((t=>t.parent=r)),s=r}else if(function(t){return t.type===a.Root}(t)){const n=e?y(t.children):[],r=new m(n);n.forEach((t=>t.parent=r)),t["x-mode"]&&(r["x-mode"]=t["x-mode"]),s=r}else{if(!function(t){return t.type===a.Directive}(t))throw new Error(`Not implemented yet: ${t.type}`);{const e=new d(t.name,t.data);null!=t["x-name"]&&(e["x-name"]=t["x-name"],e["x-publicId"]=t["x-publicId"],e["x-systemId"]=t["x-systemId"]),s=e}}return s.startIndex=t.startIndex,s.endIndex=t.endIndex,null!=t.sourceCodeLocation&&(s.sourceCodeLocation=t.sourceCodeLocation),s}function y(t){const e=t.map((t=>w(t,!0)));for(let t=1;t<e.length;t++)e[t].prev=e[t-1],e[t-1].next=e[t];return e}function*b(t,e=new Set){const s=new Set,n=Array.from(t.childNodes).filter((t=>!e.has(t)));for(yield t;n.length;){const t=n.shift();s.has(t)||(s.add(t),yield t),t.childNodes&&Array.from(t.childNodes).filter((t=>!e.has(t))).forEach((t=>n.push(t)))}}function v(t,e){return"function"==typeof t?.[e]}function x(t,e){return t instanceof g?t.attribs?.[e]:t.getAttribute?.(e)}function N(t,e,s){t instanceof g?t.attribs[e]=s:t.setAttribute?.(e,s)}function A(t,e){t instanceof g?delete t.attribs[e]:t.removeAttribute?.(e)}function $(t,e,s){if(t instanceof g&&e instanceof g)e.attribs[s]=t.attribs[s];else{const n=t?.getAttributeNode?.(s);e?.setAttributeNode?.(n?.cloneNode(!0))}}function E(t,...e){if(v(t,"replaceWith"))return t.replaceWith(...e);{const s=t,n=s.parentNode,r=Array.from(n.childNodes).indexOf(s);e.forEach((t=>t.parentNode=n)),n.childNodes=[].concat(Array.from(n.childNodes).slice(0,r)).concat(e).concat(Array.from(n.childNodes).slice(r+1))}}function C(t,e){return v(e,"appendChild")?t.appendChild(e):(t.childNodes.push(e),e.parentNode=t,e)}function k(t,e){if(v(e,"removeChild"))return t.removeChild(e);{const s=e;return t.childNodes=t.children.filter((t=>t!==s)),s}}function _(t,e,s){return s?v(t,"insertBefore")?t.insertBefore(e,s):(E(s,e,s),e):C(t,e)}window.htmlparser2;const S=new Set([":bind",":bind-events",":data",":for",":show","@watch","$html"]);var T;function L(t){return t.includes("/")?t.split("/").slice(0,-1).join("/"):""}function P(t){return!(t.includes("://")||t.startsWith("/")||t.startsWith("#")||t.startsWith("data:"))}!function(t){t.resolveIncludes=async function(t,e){const s=t;if("include"!==s.tagName?.toLocaleLowerCase())return;this.log("<include> tag found in:\n",t),this.log("<include> params:",e);const n=x(s,"src");if(!n)throw new Error(`"src" attribute missing from ${t}.`);const r=e=>{const n=e.firstChild;for(const t of Array.from(s.attributes))n&&"src"!==t.name&&$(s,n,t.name);E(t,...e.childNodes)},i={...e,rootDocument:!1,maxdepth:e?.maxdepth-1};if(0===i.maxdepth)throw new Error("Maximum recursion depth reached.");if(n.includes("://")||n.startsWith("//"))this.log("Including remote file from absolute path:",n),await this.preprocessRemote(n,i).then(r);else if(e?.dirpath?.includes("://")||e?.dirpath?.startsWith("//")){const t=n.startsWith("/")?n:`${e.dirpath}/${n}`;this.log("Including remote file from relative path:",t),await this.preprocessRemote(t,i).then(r)}else if("/"===n.charAt(0))this.log("Including local file from absolute path:",n),await this.preprocessLocal(n,i).then(r);else{const t=e?.dirpath&&"."!==e?.dirpath?`${e?.dirpath}/${n}`:n;this.log("Including local file from relative path:",t),await this.preprocessLocal(t,i).then(r)}},t.rebaseRelativePaths=async function(t,e){const s=t,n=s.tagName?.toLowerCase();if(!e?.dirpath)return;const r=x(s,"src"),i=x(s,"href"),a=x(s,"data"),o=r||i||a;o&&(o&&P(o)&&this.log("Rebasing relative path as:",e.dirpath,"/",o),"img"===n&&r&&P(r)?N(s,"src",`${e.dirpath}/${r}`):"a"===n&&i&&P(i)||"link"===n&&i&&P(i)?N(s,"href",`${e.dirpath}/${i}`):"script"===n&&r&&P(r)||"source"===n&&r&&P(r)||"audio"===n&&r&&P(r)||"video"===n&&r&&P(r)||"track"===n&&r&&P(r)||"iframe"===n&&r&&P(r)?N(s,"src",`${e.dirpath}/${r}`):"object"===n&&a&&P(a)?N(s,"data",`${e.dirpath}/${a}`):"input"===n&&r&&P(r)?N(s,"src",`${e.dirpath}/${r}`):("area"===n&&i&&P(i)||"base"===n&&i&&P(i))&&N(s,"href",`${e.dirpath}/${i}`))},t.registerCustomElements=async function(t,e){const s=t;if("template"===s.tagName?.toLowerCase()&&x(s,"is")){const t=x(s,"is")?.toLowerCase();this._customElements.has(t)||(this.log(`Registering custom element: ${t}\n`,s),this._customElements.set(t,s.cloneNode(!0)),k(s.parentNode,s))}},t.resolveCustomElements=async function(t,e){const s=t,n=s.tagName?.toLowerCase();if(this._customElements.has(n)){this.log(`Processing custom element: ${n}\n`,s);const e=this._customElements.get(n),r=(e.content||e).cloneNode(!0),a=function(t){return t instanceof g?t.children.find((t=>t instanceof g)):t.firstElementChild}(r);for(const t of Array.from(s.attributes))a&&$(s,a,t.name);const o=new i(b(r)).find((t=>"slot"===t.tagName?.toLowerCase()));o&&E(o,...s.childNodes),E(t,...r.childNodes)}},t.resolveTextNodeExpressions=async function(t,e){if(3!==t.nodeType)return;const s=function(t){return t instanceof c?t.data:t.nodeValue}(t)||"";this.log("Processing node content value:\n",s);const n=new RegExp(/{{ ([^}]+) }}/gm),r=Array.from(s.matchAll(n)).map((t=>t[1])),i=async()=>{let e=s;for(const s of r){const[n]=await this.eval(s,{$elem:t});e=e.replace(`{{ ${s} }}`,String(n))}!function(t,e){t instanceof c?t.data=e:t.nodeValue=e}(t,e)};await Promise.all(r.map((e=>this.watchExpr(e,{$elem:t},i))))},t.resolveDataAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,":data");if(n)if(this.log(":data attribute found in:\n",t),A(s,":data"),e?.rootNode===t){const[e]=await this.eval(n,{$elem:t});await this.update(e)}else{const s=this.clone();t.renderer=s;const[r]=await s.eval(n,{$elem:t});await s.update(r);for(const e of b(t,this._skipNodes))this._skipNodes.add(e);await s.mount(t,e)}},t.resolveWatchAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,"@watch");n&&(this.log("@watch attribute found in:\n",t),A(s,"@watch"),await this.watchExpr(n,{$elem:t},(()=>{})))},t.resolveTextAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,"$text");n&&(this.log("$text attribute found in:\n",t),A(s,"$text"),await this.watchExpr(n,{$elem:t},(e=>function(t,e){t instanceof g?t.children=[new h(e)]:t.textContent=e}(t,e))))},t.resolveHtmlAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,"$html");if(n){this.log("$html attribute found in:\n",t),A(s,"$html");const r=this.clone();await this.watchExpr(n,{$elem:t},(async t=>{const n=await r.preprocessString(t,e);await r.renderNode(n,e),function(t,...e){v(t,"replaceChildren")?t.replaceChildren(...e):(t.childNodes=e,e.forEach((e=>e.parentNode=t)))}(s,n)}))}},t.resolvePropAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))if(e.name.startsWith("$")&&!S.has(e.name)){this.log(e.name,"attribute found in:\n",t),A(s,e.name);const n=e.name.slice(1).replace(/-./g,(t=>t[1].toUpperCase()));await this.watchExpr(e.value,{$elem:t},(e=>t[n]=e))}},t.resolveAttrAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))if(e.name.startsWith(":")&&!S.has(e.name)){this.log(e.name,"attribute found in:\n",t),A(s,e.name);const n=e.name.slice(1);await this.watchExpr(e.value,{$elem:t},(t=>N(s,n,t)))}},t.resolveEventAttributes=async function(t,e){if(this._skipNodes.has(t))return;const s=t;for(const e of Array.from(s.attributes||[]))e.name.startsWith("@")&&!S.has(e.name)&&(this.log(e.name,"attribute found in:\n",t),A(s,e.name),t.addEventListener?.(e.name.substring(1),(s=>{this.eval(e.value,{$elem:t,$event:s})})))},t.resolveForAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,":for")?.trim();if(n){this.log(":for attribute found in:\n",t),A(s,":for");for(const e of b(t,this._skipNodes))this._skipNodes.add(e);const r=t.parentNode,i=function(t,e){return e?e.createElement(t):new g(t,{})}("template",t.ownerDocument);_(r,i,t),k(r,t),C(i,t),this.log(":for template:\n",i);const a=n.split(" in ",2);if(2!==a.length)throw new Error(`Invalid :for format: \`${n}\`. Expected "{key} in {expression}".`);const o=[],[c,l]=a;await this.watchExpr(l,{$elem:t},(s=>(this.log(":for list items:",s),this.lock=this.lock.then((()=>new Promise((async n=>{if(o.splice(0,o.length).forEach((t=>{k(r,t),this._skipNodes.delete(t)})),!Array.isArray(s))return console.error(`Expression did not yield a list: \`${l}\` => \`${s}\``),n();for(const n of s){const s=this.clone();await s.set(c,n);const r=t.cloneNode(!0);o.push(r),this._skipNodes.add(r),await s.mount(r,e),this.log("Rendered list child:\n",r,r.outerHTML)}const a=i.nextSibling;for(const t of o)_(r,t,a);n()})))).catch((t=>{throw console.error(t),new Error(t)})).then(),this.lock)))}},t.resolveBindAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,":bind");if(n){this.log(":bind attribute found in:\n",t);const e=["change","input"],r=x(s,":bind-events")?.split(",")||e;A(s,":bind"),A(s,":bind-events");const i="checkbox"===x(s,"type")?"checked":"value",a=`$elem.${i} = ${n}`;await this.watchExpr(a,{$elem:t},(t=>s[i]=t));const o=`${n} = $elem.${i}`;for(const e of r)t.addEventListener(e,(()=>this.eval(o,{$elem:t})))}},t.resolveShowAttribute=async function(t,e){if(this._skipNodes.has(t))return;const s=t,n=x(s,":show");if(n){this.log(":show attribute found in:\n",t),A(s,":show");const e="none"===s.style?.display?"":s.style?.display??x(s,"style")?.split(";")?.find((t=>"display"===t.split(":")[0]))?.split(":")?.at(1)?.trim();await this.watchExpr(n,{$elem:t},(t=>{s.style?s.style.display=t?e:"none":N(s,"style",`display: ${t?e:"none"};`)}))}}}(T||(T={}));class R extends n{debugging=!1;dirpath="";evalkeys=["$elem","$event"];expressionCache=new Map;evalCallbacks=new Map;_skipNodes=new Set;_customElements=new Map;debug(t){return this.debugging=t,this}async fetchRemote(t,e){return fetch(t,{cache:e?.cache??"default"}).then((t=>t.text()))}async fetchLocal(t,e){return this.fetchRemote(t,e)}async preprocessString(t,e){this.log("Preprocessing string content with params:\n",e);const s=this.parseHTML(t,e);return await this.preprocessNode(s,e),s}async preprocessRemote(t,e){const s={};e?.cache&&(s.cache=e.cache);const n=await fetch(t,s).then((t=>t.text()));return this.preprocessString(n,{...e,dirpath:L(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}async preprocessLocal(t,e){const s=await this.fetchLocal(t,e);return this.preprocessString(s,{...e,dirpath:L(t),rootDocument:e?.rootDocument??!t.endsWith(".tpl.html")})}clone(){const t=new this.constructor(Object.fromEntries(this.store.entries()));return t._customElements=this._customElements,t.debug(this.debugging)}log(...t){this.debugging&&console.debug(...t)}cachedExpressionFunction(t){return this.expressionCache.has(t)||this.expressionCache.set(t,function(t,e=[]){return new Function(...e,`with (this) { return (async () => (${t}))(); }`)}(t,this.evalkeys)),this.expressionCache.get(t)}async eval(t,e={}){if(this.store.has(t))return[this.get(t),[t]];{const s=this.cachedExpressionFunction(t),n=this.evalkeys.map((t=>e[t]));if(Object.keys(e).some((t=>!this.evalkeys.includes(t))))throw new Error(`Invalid argument key, must be one of: ${this.evalkeys.join(", ")}`);const[r,i]=await this.trace((async function(){return s.call(this,...n)}));return this.log(`eval \`${t}\` => `,r,`[ ${i.join(", ")} ]`),[r,i]}}watchExpr(t,e,s){if(this.evalCallbacks.has(t))return this.evalCallbacks.get(t)?.push(s),this.eval(t,e).then((([t,e])=>s(t,e)));this.evalCallbacks.set(t,[s]);const n=[],r=async()=>{const[s,i]=await this.eval(t,e),a=this.evalCallbacks.get(t)||[];await Promise.all(a.map((t=>t(s,i)))),n.length>0&&this.unwatch(n,r),n.splice(0,n.length,...i),this.watch(i,r)};return r()}async preprocessNode(t,e){e={dirpath:this.dirpath,maxdepth:10,...e};const s=new i(b(t,this._skipNodes)).map((async t=>{this.log("Preprocessing node:\n",t),await T.resolveIncludes.call(this,t,e),await T.rebaseRelativePaths.call(this,t,e),await T.registerCustomElements.call(this,t,e),await T.resolveCustomElements.call(this,t,e)}));return await Promise.all(s.generator()),t}async renderNode(t,e){for(const s of b(t,this._skipNodes))this.log("Rendering node:\n",s),await T.resolveDataAttribute.call(this,s,e),await T.resolveForAttribute.call(this,s,e),await T.resolveTextAttributes.call(this,s,e),await T.resolveHtmlAttribute.call(this,s,e),await T.resolveShowAttribute.call(this,s,e),await T.resolveWatchAttribute.call(this,s,e),await T.resolveBindAttribute.call(this,s,e),await T.resolvePropAttributes.call(this,s,e),await T.resolveAttrAttributes.call(this,s,e),await T.resolveEventAttributes.call(this,s,e),await T.resolveTextNodeExpressions.call(this,s,e);return t}async mount(t,e){e={...e,rootNode:t},await this.preprocessNode(t,e),await this.renderNode(t,e),t.renderer=this}}const D=new class extends R{dirpath=L(self.location.href);parseHTML(t,e={rootDocument:!1}){if(e.rootDocument)return(new DOMParser).parseFromString(t,"text/html");{const e=document.createRange();return e.selectNodeContents(document.body),e.createContextualFragment(t)}}serializeHTML(t){return(new XMLSerializer).serializeToString(t).replace(/\s?xmlns="[^"]+"/gm,"")}preprocessLocal(t,e){return this.preprocessRemote(t,e)}};self.Mancha=D;const I=self.document?.currentScript;if(self.document?.currentScript?.hasAttribute("init")){const t=I?.hasAttribute("debug"),e=I?.getAttribute("cache"),s=I?.getAttribute("target")?.split(",")||["body"];window.addEventListener("load",(()=>{s.map((async s=>{const n=self.document.querySelector(s);await D.debug(t).mount(n,{cache:e})}))}))}})();

package/dist/plugins.js

@@ -1,5 +1,6 @@
-import { appendChild, attributeNameToCamelCase, cloneAttribute, createElement, getAttribute, getNodeValue, insertBefore, removeAttribute, removeChild, replaceChildren, replaceWith, setAttribute, setNodeValue, setTextContent, } from "./dome.js";
-import { isRelativePath, traverse } from "./core.js";
+import { appendChild, attributeNameToCamelCase, cloneAttribute, createElement, firstElementChild, getAttribute, getNodeValue, insertBefore, removeAttribute, removeChild, replaceChildren, replaceWith, setAttribute, setNodeValue, setTextContent, traverse, } from "./dome.js";
+import { isRelativePath } from "./core.js";
+import { Iterator } from "./iterator.js";
 const KW_ATTRIBUTES = new Set([
     ":bind",
     ":bind-events",
@@ -36,7 +37,11 @@ export var RendererPlugins;
             replaceWith(node, ...fragment.childNodes);
         };
         // Compute the subparameters being passed down to the included file.
-        const subparameters = { ...params, root: false, maxdepth: params?.maxdepth - 1 };
+        const subparameters = {
+            ...params,
+            rootDocument: false,
+            maxdepth: params?.maxdepth - 1,
+        };
         if (subparameters.maxdepth === 0)
             throw new Error("Maximum recursion depth reached.");
         // Case 1: Absolute remote path.
@@ -46,7 +51,7 @@ export var RendererPlugins;
             // Case 2: Relative remote path.
         }
         else if (params?.dirpath?.includes("://") || params?.dirpath?.startsWith("//")) {
-            const relpath = params.dirpath && params.dirpath !== "." ? `${params.dirpath}/${src}` : src;
+            const relpath = src.startsWith("/") ? src : `${params.dirpath}/${src}`;
             this.log("Including remote file from relative path:", relpath);
             await this.preprocessRemote(relpath, subparameters).then(handler);
             // Case 3: Local absolute path.
@@ -122,27 +127,33 @@ export var RendererPlugins;
     RendererPlugins.registerCustomElements = async function (node, params) {
         const elem = node;
         if (elem.tagName?.toLowerCase() === "template" && getAttribute(elem, "is")) {
-            this.log("Registering custom element:\n", elem);
-            const tagName = getAttribute(elem, "is");
-            if (!this._customElements.has(tagName))
-                this._customElements.set(tagName, elem);
-            // Remove the node from the DOM.
-            removeChild(elem.parentNode, elem);
+            const tagName = getAttribute(elem, "is")?.toLowerCase();
+            if (!this._customElements.has(tagName)) {
+                this.log(`Registering custom element: ${tagName}\n`, elem);
+                this._customElements.set(tagName, elem.cloneNode(true));
+                // Remove the node from the DOM.
+                removeChild(elem.parentNode, elem);
+            }
         }
     };
     RendererPlugins.resolveCustomElements = async function (node, params) {
         const elem = node;
         const tagName = elem.tagName?.toLowerCase();
         if (this._customElements.has(tagName)) {
-            this.log("Processing custom element:\n", elem);
+            this.log(`Processing custom element: ${tagName}\n`, elem);
             const template = this._customElements.get(tagName);
             const clone = (template.content || template).cloneNode(true);
             // Add whatever attributes the custom element tag had to the first child.
-            const child = clone.firstChild;
+            const child = firstElementChild(clone);
             for (const attr of Array.from(elem.attributes)) {
                 if (child)
                     cloneAttribute(elem, child, attr.name);
             }
+            // If there's a <slot> element, replace it with the contents of the custom element.
+            const iter = new Iterator(traverse(clone));
+            const slot = iter.find((x) => x.tagName?.toLowerCase() === "slot");
+            if (slot)
+                replaceWith(slot, ...elem.childNodes);
             // Replace the custom element tag with the contents of the template.
             replaceWith(node, ...clone.childNodes);
         }
@@ -177,17 +188,23 @@ export var RendererPlugins;
             this.log(":data attribute found in:\n", node);
             // Remove the attribute from the node.
             removeAttribute(elem, ":data");
-            // Create a subrenderer and process the tag.
-            const subrenderer = this.clone();
-            node.renderer = subrenderer;
-            const [result] = await subrenderer.eval(dataAttr, { $elem: node });
-            await subrenderer.update(result);
-            // Skip all the children of the current node.
-            for (const child of traverse(node, this._skipNodes)) {
-                this._skipNodes.add(child);
+            // Create a subrenderer and process the tag, unless it's the root node.
+            if (params?.rootNode === node) {
+                const [result] = await this.eval(dataAttr, { $elem: node });
+                await this.update(result);
+            }
+            else {
+                const subrenderer = this.clone();
+                node.renderer = subrenderer;
+                const [result] = await subrenderer.eval(dataAttr, { $elem: node });
+                await subrenderer.update(result);
+                // Skip all the children of the current node.
+                for (const child of traverse(node, this._skipNodes)) {
+                    this._skipNodes.add(child);
+                }
+                // Mount the current node with the subrenderer.
+                await subrenderer.mount(node, params);
             }
-            // Mount the current node with the subrenderer.
-            await subrenderer.mount(node, params);
         }
     };
     RendererPlugins.resolveWatchAttribute = async function (node, params) {

package/dist/reactive.js

@@ -23,8 +23,8 @@ function isProxified(object) {
 /** Default debouncer time in millis. */
 export const REACTIVE_DEBOUNCE_MILLIS = 10;
 export function proxifyObject(object, callback, deep = true) {
-    // If this object is already a proxy, return it as-is.
-    if (object == null || isProxified(object))
+    // If this object is already a proxy or a Promise, return it as-is.
+    if (object == null || isProxified(object) || object instanceof Promise)
         return object;
     // First, proxify any existing properties if deep = true.
     if (deep) {

package/dist/worker.js

@@ -2,7 +2,7 @@ import * as htmlparser2 from "htmlparser2";
 import { render as renderDOM } from "dom-serializer";
 import { IRenderer } from "./core.js";
 export class Renderer extends IRenderer {
-    parseHTML(content, params = { root: false }) {
+    parseHTML(content, params = { rootDocument: false }) {
         return htmlparser2.parseDocument(content);
     }
     serializeHTML(root) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mancha",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Javscript HTML rendering engine",
   "main": "dist/index.js",
   "type": "module",
@@ -21,18 +21,13 @@
     "url": "git+https://github.com/fresho-dev/mancha.git"
   },
   "keywords": [
-    "gulp",
-    "render",
-    "html",
-    "include",
-    "preprocessor"
+    "templating",
+    "rendering",
+    "reactive",
+    "html"
   ],
-  "author": "omtinez@gmail.com",
+  "author": "oscar@wahltinez.org",
   "license": "MIT",
-  "bugs": {
-    "url": "https://gitlab.com/omtinez/mancha/issues"
-  },
-  "homepage": "https://gitlab.com/omtinez/mancha#README",
   "dependencies": {
     "dom-serializer": "^2.0.0",
     "htmlparser2": "^9.1.0",

package/yarn-error.log

@@ -1,5 +1,5 @@
 Arguments: 
-  /opt/homebrew/Cellar/node/21.5.0/bin/node /usr/local/bin/yarn add --dev @types/dom-handler
+  /opt/homebrew/Cellar/node/21.5.0/bin/node /usr/local/bin/yarn add --dev @types/ulive
 
 PATH: 
   /Users/owahltinez/Downloads/google-cloud-sdk/bin:/opt/homebrew/bin:/opt/homebrew/sbin:/usr/local/git/git-google/bin:/usr/local/git/current/bin:/usr/local/bin:/usr/bin:/bin:/usr/local/sbin:/usr/sbin:/sbin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/local/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/bin:/var/run/com.apple.security.cryptexd/codex.system/bootstrap/usr/appleinternal/bin:/opt/X11/bin:/Library/Apple/usr/bin:/Users/owahltinez/.local/bin
@@ -14,7 +14,7 @@ Platform:
   darwin arm64
 
 Trace: 
-  Error: https://registry.yarnpkg.com/@types%2fdom-handler: Not found
+  Error: https://registry.yarnpkg.com/@types%2fulive: Not found
       at params.callback [as _callback] (/usr/local/lib/node_modules/yarn/lib/cli.js:66145:18)
       at self.callback (/usr/local/lib/node_modules/yarn/lib/cli.js:140890:22)
       at Request.emit (node:events:519:28)
@@ -29,7 +29,7 @@ Trace:
 npm manifest: 
   {
     "name": "mancha",
-    "version": "0.5.5",
+    "version": "0.6.4",
     "description": "Javscript HTML rendering engine",
     "main": "dist/index.js",
     "type": "module",
@@ -50,18 +50,13 @@ npm manifest:
       "url": "git+https://github.com/fresho-dev/mancha.git"
     },
     "keywords": [
-      "gulp",
-      "render",
-      "html",
-      "include",
-      "preprocessor"
+      "templating",
+      "rendering",
+      "reactive",
+      "html"
     ],
-    "author": "omtinez@gmail.com",
+    "author": "oscar@wahltinez.org",
     "license": "MIT",
-    "bugs": {
-      "url": "https://gitlab.com/omtinez/mancha/issues"
-    },
-    "homepage": "https://gitlab.com/omtinez/mancha#README",
     "dependencies": {
       "dom-serializer": "^2.0.0",
       "htmlparser2": "^9.1.0",