mancha 0.9.0 → 0.9.4

package/README.md

@@ -1,8 +1,7 @@
 # mancha
 
 `mancha` is a simple HTML templating and reactivity 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).
+browser or the server. It can be used as a command-line tool, or imported as a Javascript module.
 
 Here's a small sample of the things that you can do with `mancha`:
 
@@ -16,7 +15,7 @@ Here's a small sample of the things that you can do with `mancha`:
   <template is="counter">
     <div>
       <slot></slot>
-      <button @click="count++">Counter: {{ count }}</button>
+      <button :on:click="count = count + 1">Counter: {{ count }}</button>
     </div>
   </template>
 
@@ -48,7 +47,7 @@ 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       | ✔️     | ❌     | ❌       | ❌     | ✔️         | ✔️        |
-| < 12kb compressed     | ✔️     | ❌     | ❌       | ❌     | ✔️         | ❌        |
+| < 15kb compressed     | ✔️     | ❌     | ❌       | ❌     | ✔️         | ❌        |
 | Custom web components | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
 | Client-side rendering | ✔️     | ❌     | ❌       | ✔️     | ✔️         | ✔️        |
 | Server-side rendering | ✔️     | ✔️     | ✔️       | ✔️     | ❌         | ❌        |
@@ -99,7 +98,7 @@ preprocessing consist of:
   </template>
 
   <!-- Any node traversed after registration can use the component. -->
-  <my-red-button @click="console.log('clicked')">
+  <my-red-button :on:click="console.log('clicked')">
     <!-- The contents within will replace the `<slot></slot>` tag. -->
     Click Me
   </my-red-button>
@@ -119,43 +118,31 @@ element tag or attributes match a specific criteria. Here's the list of attribut
   ```html
   <div :for="item in ['a', 'b', 'c']">{{ item }}</div>
   ```
-- `$text` sets the `textContent` value of a node
+- `:text` sets the `textContent` value of a node
   ```html
-  <div :data="{foo: 'bar'}" $text="foo"></div>
+  <div :data="{foo: 'bar'}" :text="foo"></div>
   ```
-- `$html` sets the `innerHTML` value of a node
+- `:html` sets the `innerHTML` value of a node
   ```html
-  <div $html="<span>Hello World</span>"></div>
+  <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
+- `:on:{event}` adds an event listener for `event` to the node
   ```html
-  <div :data="{foo: 'bar'}">
-    <input type="text" :placeholder="foo" />
-  </div>
+  <button :on:click="console.log('clicked')"></button>
   ```
-- `@{event}` adds an event listener for `event` to the node
+- `:{attribute}` sets the corresponding property for `attribute` in the node
   ```html
-  <button @click="console.log('clicked')"></button>
+  <a :href="buildUrl()"></a>
   ```
 - `{{ value }}` replaces `value` in text nodes
   ```html
@@ -278,28 +265,13 @@ self.addEventListener("fetch", async (event) => {
 
 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.
+footprint of `mancha` and its dependencies under 100kb.
 
 For a more complete example, see [examples/wrangler](./examples/wrangler).
 
-## Compile Time `Gulp` Plugin
+## Dependencies
 
-To use `mancha` as a `Gulp` plugin in `gulpfile.js`, you can do the following:
+The browser bundle contains a single external dependency, [`jexpr`][jexpr]. The unbundled version
+can use `htmlparser2`, which is compatible with web workers, or `jsdom`.
 
-```js
-import GulpClient from "gulp";
-import { mancha } from "mancha/dist/gulp";
-import vars from "./vars.json";
-
-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"))
-  );
-});
-```
+[jexpr]: https://github.com/justinfagnani/jexpr

package/dist/browser.d.ts

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

package/dist/browser.js

@@ -1,7 +1,6 @@
-import { dirname, IRenderer } from "./core.js";
-import basicCssRules from "./css_gen_basic.js";
-import utilsCssRules from "./css_gen_utils.js";
-class Renderer extends IRenderer {
+import { IRenderer } from "./core.js";
+import { dirname } from "./dome.js";
+export class Renderer extends IRenderer {
     dirpath = dirname(self.location.href);
     parseHTML(content, params = { rootDocument: false }) {
         if (params.rootDocument) {
@@ -20,39 +19,11 @@ class Renderer extends IRenderer {
         // In the browser, "local" paths (i.e., relative paths) can still be fetched.
         return this.preprocessRemote(fpath, params);
     }
-}
-const Mancha = new Renderer();
-self["Mancha"] = Mancha;
-const currentScript = self.document?.currentScript;
-// If the init attribute is present, mount the content to the target element(s).
-if (self.document?.currentScript?.hasAttribute("init")) {
-    const debug = currentScript?.hasAttribute("debug");
-    const cachePolicy = currentScript?.getAttribute("cache");
-    const targets = currentScript?.getAttribute("target")?.split("+") || ["body"];
-    window.addEventListener("load", () => {
-        targets.map(async (target) => {
-            const fragment = self.document.querySelector(target);
-            await Mancha.debug(debug).mount(fragment, { cache: cachePolicy });
-        });
-    });
-}
-// If the css attribute is present, inject the specified CSS rules.
-if (self.document?.currentScript?.hasAttribute("css")) {
-    const styleNames = currentScript?.getAttribute("css")?.split("+");
-    for (const styleName of styleNames) {
-        const style = document.createElement("style");
-        switch (styleName) {
-            case "basic":
-                style.textContent = basicCssRules();
-                break;
-            case "utils":
-                style.textContent = utilsCssRules();
-                break;
-            default:
-                console.error(`Unknown style name: "${styleName}"`);
-                break;
-        }
-        self.document.head.appendChild(style);
+    createElement(tag, owner) {
+        return (owner || document).createElement(tag);
+    }
+    textContent(node, content) {
+        node.textContent = content;
     }
 }
-export default Mancha;
+export const Mancha = new Renderer();

package/dist/cli.d.ts

@@ -1,2 +1 @@
-#!/usr/bin/env node
 export {};

package/dist/cli.js

@@ -1,4 +1,3 @@
-#!/usr/bin/env node
 import * as fs from "fs/promises";
 import yargs from "yargs";
 import { hideBin } from "yargs/helpers";

package/dist/core.d.ts

@@ -1,26 +1,6 @@
 import { ParserParams, RenderParams } from "./interfaces.js";
 import { SignalStore } from "./store.js";
 export type EvalListener = (result: any, dependencies: string[]) => any;
-/**
- * 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.
@@ -30,8 +10,10 @@ export declare abstract class IRenderer extends SignalStore {
     protected readonly dirpath: string;
     readonly _skipNodes: Set<Node>;
     readonly _customElements: Map<string, Node>;
-    abstract parseHTML(content: string, params?: ParserParams): DocumentFragment;
+    abstract parseHTML(content: string, params?: ParserParams): Document | DocumentFragment;
     abstract serializeHTML(root: DocumentFragment | Node): string;
+    abstract createElement(tag: string, owner?: Document | null): Element;
+    abstract textContent(node: Node, tag: string): void;
     /**
      * Sets the debugging flag for the current instance.
      *
@@ -61,21 +43,21 @@ export declare abstract class IRenderer extends SignalStore {
      * @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>;
+    preprocessString(content: string, params?: RenderParams & ParserParams): Promise<Document | 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>;
+    preprocessRemote(fpath: string, params?: RenderParams & ParserParams): Promise<Document | 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>;
+    preprocessLocal(fpath: string, params?: RenderParams & ParserParams): Promise<Document | DocumentFragment>;
     /**
      * Creates a deep copy of the current renderer instance.
      * @returns A new instance of the renderer with the same state as the original.

package/dist/core.js

@@ -1,41 +1,7 @@
 import { Iterator } from "./iterator.js";
 import { RendererPlugins } from "./plugins.js";
-import { nodeToString, traverse } from "./dome.js";
+import { dirname, nodeToString, traverse } from "./dome.js";
 import { SignalStore } from "./store.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 "";
-    }
-    else {
-        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.
@@ -183,24 +149,22 @@ export class IRenderer extends SignalStore {
             await RendererPlugins.resolveDataAttribute.call(this, node, params);
             // Resolve the :for attribute in the node.
             await RendererPlugins.resolveForAttribute.call(this, node, params);
-            // Resolve the $text attribute in the node.
+            // Resolve the :text attribute in the node.
             await RendererPlugins.resolveTextAttributes.call(this, node, params);
-            // Resolve the $html attribute in the node.
+            // Resolve the :html attribute in the node.
             await RendererPlugins.resolveHtmlAttribute.call(this, node, params);
             // Resolve the :show attribute in the node.
             await RendererPlugins.resolveShowAttribute.call(this, node, params);
-            // Resolve the @watch attribute in the node.
-            await RendererPlugins.resolveWatchAttribute.call(this, node, params);
+            // Resolve the :class attribute in the node.
+            await RendererPlugins.resolveClassAttribute.call(this, node, params);
             // Resolve the :bind attribute in the node.
             await RendererPlugins.resolveBindAttribute.call(this, node, params);
-            // Resolve all $attributes in the node.
-            await RendererPlugins.resolvePropAttributes.call(this, node, params);
-            // Resolve all :attributes in the node.
-            await RendererPlugins.resolveAttrAttributes.call(this, node, params);
-            // Resolve all @attributes in the node.
+            // Resolve all :on:event attributes in the node.
             await RendererPlugins.resolveEventAttributes.call(this, node, params);
             // Replace all the {{ variables }} in the text.
             await RendererPlugins.resolveTextNodeExpressions.call(this, node, params);
+            // Resolve the :{attr} attribute in the node.
+            await RendererPlugins.resolveCustomAttribute.call(this, node, params);
         }
         // Return the input node, which should now be fully rendered.
         return root;

package/dist/css_gen_basic.d.ts

@@ -1 +1,2 @@
-export default function rules(): string;
+import { SafeStyleSheet } from "safevalues";
+export default function rules(): SafeStyleSheet;

package/dist/css_gen_basic.js

@@ -1,4 +1,22 @@
-import basic from "./css_raw_basic.css";
+import { safeStyleSheet } from "safevalues";
 export default function rules() {
-    return basic;
+    // Based on https://www.swyx.io/css-100-bytes.
+    return safeStyleSheet `
+    html {
+        max-width: 70ch;
+        padding: 2em 1em;
+        margin: auto;
+        line-height: 1.75;
+        font-size: 1.25em;
+        font-family: sans-serif;
+    }
+
+    h1,h2,h3,h4,h5,h6 {
+        margin: 1em 0 0.5em;
+    }
+
+    p,ul,ol {
+        margin-bottom: 1em;
+        color: #1d1d1d;
+    }`;
 }

package/dist/dome.d.ts

@@ -1,8 +1,3 @@
-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;
 /**
  * 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.
@@ -12,29 +7,36 @@ type __ChildNode = ChildNode | _ChildNode;
  * @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>;
+export declare function hasProperty(obj: any, prop: string): boolean;
+export declare function hasFunction(obj: any, func: string): boolean;
 /**
  * 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 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;
-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 declare function getAttribute(elem: Element | any, name: string): string | null;
+export declare function setAttribute(elem: Element | any, name: string, value: string): void;
+export declare function removeAttribute(elem: Element | any, name: string): void;
+export declare function cloneAttribute(elemFrom: Element | any, elemDest: Element | any, name: string): void;
+export declare function firstElementChild(elem: Element): Element | null;
+export declare function replaceWith(original: ChildNode, ...replacement: Node[]): void;
+export declare function replaceChildren(parent: ParentNode, ...nodes: Node[]): void;
+export declare function appendChild(parent: Node, node: Node): Node;
+export declare function removeChild(parent: ParentNode, node: Node): Node;
+export declare function insertBefore(parent: Node, node: Node, reference: ChildNode | null): Node;
 export declare function ellipsize(str: string | null, maxLength?: number): string;
-export declare function nodeToString(node: Node | _Node, maxLength?: number): string;
-export {};
+export declare function nodeToString(node: Node, maxLength?: number): string;
+/**
+ * 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;

package/dist/dome.js

@@ -1,5 +1,10 @@
-import { Element as _Element, Node as _Node, Text as _Text, } from "domhandler";
-import { DomUtils } from "htmlparser2";
+import { safeAttrPrefix } from "safevalues";
+import { safeElement } from "safevalues/dom";
+const SAFE_ATTRS = [
+    safeAttrPrefix `:`,
+    safeAttrPrefix `style`,
+    safeAttrPrefix `class`,
+];
 /**
  * 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.
@@ -26,7 +31,10 @@ export function* traverse(root, skip = new Set()) {
         }
     }
 }
-function hasFunction(obj, func) {
+export function hasProperty(obj, prop) {
+    return typeof obj?.[prop] !== "undefined";
+}
+export function hasFunction(obj, func) {
     return typeof obj?.[func] === "function";
 }
 /**
@@ -38,38 +46,39 @@ 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];
+    if (hasProperty(elem, "attribs"))
+        return elem.attribs?.[name] ?? null;
     else
         return elem.getAttribute?.(name);
 }
 export function setAttribute(elem, name, value) {
-    if (elem instanceof _Element)
+    if (hasProperty(elem, "attribs"))
         elem.attribs[name] = value;
     else
-        elem.setAttribute?.(name, value);
+        safeElement.setPrefixedAttribute(SAFE_ATTRS, elem, name, value);
 }
 export function removeAttribute(elem, name) {
-    if (elem instanceof _Element)
+    if (hasProperty(elem, "attribs"))
         delete elem.attribs[name];
     else
         elem.removeAttribute?.(name);
 }
 export function cloneAttribute(elemFrom, elemDest, name) {
-    if (elemFrom instanceof _Element && elemDest instanceof _Element) {
+    if (hasProperty(elemFrom, "attribs") && hasProperty(elemDest, "attribs")) {
         elemDest.attribs[name] = elemFrom.attribs[name];
     }
     else {
-        const attr = elemFrom?.getAttributeNode?.(name);
-        elemDest?.setAttributeNode?.(attr?.cloneNode(true));
+        const attr = elemFrom?.getAttribute?.(name);
+        setAttribute(elemDest, name, attr || "");
     }
 }
 export function firstElementChild(elem) {
-    if (elem instanceof _Element) {
-        return elem.children.find((child) => child instanceof _Element);
+    if (hasProperty(elem, "firstElementChild")) {
+        return elem.firstElementChild;
     }
     else {
-        return elem.firstElementChild;
+        const children = Array.from(elem.children);
+        return children.find((child) => child.nodeType === 1);
     }
 }
 export function replaceWith(original, ...replacement) {
@@ -87,6 +96,15 @@ export function replaceWith(original, ...replacement) {
             .concat(Array.from(parent.childNodes).slice(index + 1));
     }
 }
+export function replaceChildren(parent, ...nodes) {
+    if (hasFunction(parent, "replaceChildren")) {
+        parent.replaceChildren(...nodes);
+    }
+    else {
+        parent.childNodes = nodes;
+        nodes.forEach((node) => (node.parentNode = parent));
+    }
+}
 export function appendChild(parent, node) {
     if (hasFunction(node, "appendChild")) {
         return parent.appendChild(node);
@@ -102,18 +120,8 @@ export function removeChild(parent, node) {
         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));
+        replaceChildren(parent, ...Array.from(parent.childNodes).filter((child) => child !== node));
+        return node;
     }
 }
 export function insertBefore(parent, node, reference) {
@@ -128,48 +136,6 @@ export function insertBefore(parent, 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, {});
-}
 export function ellipsize(str, maxLength = 0) {
     if (!str)
         return "";
@@ -179,5 +145,30 @@ export function ellipsize(str, maxLength = 0) {
         return str.slice(0, maxLength - 1) + "…";
 }
 export function nodeToString(node, maxLength = 0) {
-    return ellipsize(node.outerHTML || getNodeValue(node) || String(node), maxLength);
+    return ellipsize(node.outerHTML || node.nodeValue || String(node), maxLength);
+}
+/**
+ * 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 "";
+    }
+    else {
+        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:"));
 }

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import { ParserParams, RenderParams } from "./interfaces.js";
 import { IRenderer } from "./core.js";
 export declare class Renderer extends IRenderer {
-    parseHTML(content: string, params?: ParserParams): DocumentFragment;
+    parseHTML(content: string, params?: ParserParams): Document | DocumentFragment;
     serializeHTML(root: Node | DocumentFragment | Document): string;
+    createElement(tag: string, owner?: Document | null): Element;
+    textContent(node: Node, content: string): void;
     fetchLocal(fpath: string, params?: RenderParams & ParserParams): Promise<string>;
 }
 export declare const Mancha: Renderer;