npm - mancha - Versions diffs - 0.4.0 → 0.5.0 - Mend

mancha 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (23) hide show

package/.vscode/extensions.json ADDED Viewed

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["github.copilot"]
+}

package/README.md CHANGED Viewed

@@ -7,12 +7,12 @@ function, or as a `Gulp` plugin.
 Here are some of the things you can use `mancha` for.
-### Replace simple variables using `{{value}}` format
+### Replace simple variables using `{{ value }}` format
 index.html:
 ```html
-<span>Hello {{name}}</span>
+<span>Hello {{ name }}</span>
 ```
 Command:
@@ -29,17 +29,17 @@ Result:
 ### Include files from a relative path using the `<include>` tag
-hello-world.html:
+hello-name.html:
 ```html
-<span>Hello World</span>
+<span>Hello {{ name }}</span>
 ```
 index.html:
 ```html
 <div>
-  <include src="./hello-world.html"></include>
+  <include src="./hello-name.html" data-name="World"></include>
 </div>
 ```
@@ -65,16 +65,16 @@ To use `mancha` on the client (browser), use the `mancha.js` bundled file availa
 ```html
 <body>
-  <span>Hello, {{name}}!</span>
+  <span>Hello, {{ name }}!</span>
 </body>
-<script src="//unpkg.com/mancha" data-vars='{"name": "John"}' target="body" init></script>
+<script src="//unpkg.com/mancha" data-name="John" target="body" init></script>
 ```
 Script tag attributes:
 - `init`: whether to automatically render upon script load
-- `data-vars`: JSON string with key-value pairs, where `{{key}}` will be replaced with `{{value}}`
+- `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).
@@ -133,7 +133,7 @@ will need to be separately hosted by a static server, although you can also gene
 containing HTML on demand.
 ```js
-import { renderRemotePath } from "mancha/dist/web"
+import { renderRemotePath } from "mancha/dist/core"
 const VARS = {...};
 const HTML_ROOT = "https://example.com/html";
@@ -156,13 +156,13 @@ 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,
+`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>
+<div>Hello {{ name }}</div>
 ```
 Result:

package/dist/attributes.d.ts ADDED Viewed

@@ -0,0 +1,13 @@
+/**
+ * Helper function used to escape HTML attribute values.
+ * See: https://stackoverflow.com/a/9756789
+ */
+export declare function encodeHtmlAttrib(value?: string): string;
+/** Inverse the operation of [encodeHtmlAttrib] */
+export declare function decodeHtmlAttrib(value?: string): string;
+/**
+ * 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;

package/dist/attributes.js ADDED Viewed

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.attributeNameToCamelCase = exports.decodeHtmlAttrib = exports.encodeHtmlAttrib = void 0;
+/**
+ * Helper function used to escape HTML attribute values.
+ * See: https://stackoverflow.com/a/9756789
+ */
+function encodeHtmlAttrib(value) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    return ((_g = (_f = (_e = (_d = (_c = (_b = (_a = value === null || value === void 0 ? void 0 : value.replace(/&/g, "&amp;")) === null || _a === void 0 ? void 0 : _a.replace(/'/g, "&apos;")) === null || _b === void 0 ? void 0 : _b.replace(/"/g, "&quot;")) === null || _c === void 0 ? void 0 : _c.replace(/</g, "&lt;")) === null || _d === void 0 ? void 0 : _d.replace(/>/g, "&gt;")) === null || _e === void 0 ? void 0 : _e.replace(/\r\n/g, "&#13;")) === null || _f === void 0 ? void 0 : _f.replace(/[\r\n]/g, "&#13;")) !== null && _g !== void 0 ? _g : "");
+}
+exports.encodeHtmlAttrib = encodeHtmlAttrib;
+/** Inverse the operation of [encodeHtmlAttrib] */
+function decodeHtmlAttrib(value) {
+    var _a, _b, _c, _d, _e, _f;
+    return ((_f = (_e = (_d = (_c = (_b = (_a = value === null || value === void 0 ? void 0 : value.replace(/&amp;/g, "&")) === null || _a === void 0 ? void 0 : _a.replace(/&apos;/g, "'")) === null || _b === void 0 ? void 0 : _b.replace(/&quot;/g, '"')) === null || _c === void 0 ? void 0 : _c.replace(/&lt;/g, "<")) === null || _d === void 0 ? void 0 : _d.replace(/&gt;/g, ">")) === null || _e === void 0 ? void 0 : _e.replace(/&#13;/g, "\n")) !== null && _f !== void 0 ? _f : "");
+}
+exports.decodeHtmlAttrib = decodeHtmlAttrib;
+/**
+ * Converts from an attribute name to camelCase, e.g. `foo-bar` becomes `fooBar`.
+ * @param name attribute name
+ * @returns camel-cased attribute name
+ */
+function attributeNameToCamelCase(name) {
+    return name.replace(/-./g, (c) => c[1].toUpperCase());
+}
+exports.attributeNameToCamelCase = attributeNameToCamelCase;

package/dist/browser.d.ts CHANGED Viewed

@@ -1,2 +1,9 @@
-import * as Mancha from "./web.js";
+import { IRenderer, ParserParams, RendererParams } from "./core";
+declare class RendererImpl extends IRenderer {
+    protected readonly fsroot: string;
+    parseHTML(content: string, params?: ParserParams): DocumentFragment;
+    serializeHTML(root: Node | DocumentFragment): string;
+    renderLocalPath(fpath: string, params?: RendererParams & ParserParams): Promise<DocumentFragment>;
+}
+declare const Mancha: RendererImpl;
 export default Mancha;

package/dist/browser.js CHANGED Viewed

@@ -10,20 +10,42 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 var _a, _b, _c, _d;
 Object.defineProperty(exports, "__esModule", { value: true });
-const Mancha = require("./web.js");
+const core_1 = require("./core");
+class RendererImpl extends core_1.IRenderer {
+    constructor() {
+        super(...arguments);
+        this.fsroot = (0, core_1.folderPath)(self.location.href);
+    }
+    parseHTML(content, params = { isRoot: false }) {
+        if (params.isRoot) {
+            return new DOMParser().parseFromString(content, "text/html");
+        }
+        else {
+            const range = document.createRange();
+            range.selectNodeContents(document.body);
+            return range.createContextualFragment(content);
+        }
+    }
+    serializeHTML(root) {
+        return new XMLSerializer().serializeToString(root).replace(/\s?xmlns="[^"]+"/gm, "");
+    }
+    renderLocalPath(fpath, params) {
+        throw new Error("Not implemented.");
+    }
+}
+const Mancha = new RendererImpl();
 self["Mancha"] = Mancha;
-if ((_b = (_a = self.document) === null || _a === void 0 ? void 0 : _a.currentScript) === null || _b === void 0 ? void 0 : _b.hasAttribute("init")) {
-    const vars = JSON.parse(self.document.currentScript.dataset["vars"] || "{}");
-    const attributes = Array.from(((_c = self.document.currentScript) === null || _c === void 0 ? void 0 : _c.attributes) || []).reduce((dict, attr) => Object.assign(dict, { [attr.name]: attr.value }), {});
-    const targets = ((_d = attributes["target"]) === null || _d === void 0 ? void 0 : _d.split(",")) || ["body"];
+const currentScript = (_a = self.document) === null || _a === void 0 ? void 0 : _a.currentScript;
+if ((_c = (_b = self.document) === null || _b === void 0 ? void 0 : _b.currentScript) === null || _c === void 0 ? void 0 : _c.hasAttribute("init")) {
+    Mancha.update(Object.assign({}, currentScript === null || currentScript === void 0 ? void 0 : currentScript.dataset));
+    const debug = currentScript === null || currentScript === void 0 ? void 0 : currentScript.hasAttribute("debug");
+    const cachePolicy = currentScript === null || currentScript === void 0 ? void 0 : currentScript.getAttribute("cache");
+    const targets = ((_d = currentScript === null || currentScript === void 0 ? void 0 : currentScript.getAttribute("target")) === null || _d === void 0 ? void 0 : _d.split(",")) || ["body"];
     const renderings = targets.map((target) => __awaiter(void 0, void 0, void 0, function* () {
-        const node = self.document[target];
-        node.innerHTML = yield Mancha.renderContent(node.innerHTML, vars);
+        const fragment = self.document.querySelector(target);
+        yield Mancha.mount(fragment, { cache: cachePolicy, debug });
     }));
     Promise.all(renderings).then(() => {
-        if (attributes["onrender"]) {
-            eval(attributes["onrender"]);
-        }
         dispatchEvent(new Event("mancha-render", { bubbles: true }));
     });
 }

package/dist/cli.js CHANGED Viewed

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const yargs_1 = require("yargs");
 const helpers_1 = require("yargs/helpers");
-const Mancha = require("./index.js");
+const index_1 = require("./index");
 const fs = require("fs/promises");
 const args = (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
     .describe("input", "Input HMTL file to render")
@@ -11,11 +11,11 @@ const args = (0, yargs_1.default)((0, helpers_1.hideBin)(process.argv))
     .describe("vars", "JSON-formatted variables")
     .demand(["input"])
     .parse();
-Mancha.renderLocalPath(args["input"], JSON.parse(args.vars || "{}")).then((result) => {
+index_1.Mancha.renderLocalPath(args["input"], JSON.parse(args.vars || "{}")).then((result) => {
     if (!args.output || args.output === "-") {
         console.log(result + "\n");
     }
     else {
-        return fs.writeFile(args.output, result);
+        return fs.writeFile(args.output, index_1.Mancha.serializeHTML(result));
     }
 });

package/dist/core.d.ts ADDED Viewed

@@ -0,0 +1,44 @@
+/// <reference types="node" />
+import { ReactiveProxy, ReactiveProxyStore } from "./reactive";
+export declare function traverse(root: Node | DocumentFragment | Document, skip?: Set<Node>): Generator<ChildNode>;
+export declare function folderPath(fpath: string): string;
+export declare function resolvePath(fpath: string): string;
+export declare function extractTextNodeKeys(content: string): [string, string, string[]][];
+export declare function safeEval(code: string, context: any, args?: {
+    [key: string]: any;
+}): Promise<any>;
+export interface ParserParams {
+    isRoot?: boolean;
+    encoding?: BufferEncoding;
+}
+export interface RendererParams {
+    fsroot?: string;
+    maxdepth?: number;
+    cache?: RequestCache | null;
+    debug?: boolean;
+}
+export declare abstract class IRenderer extends ReactiveProxyStore {
+    protected readonly fsroot: string;
+    protected readonly skipNodes: Set<Node>;
+    abstract parseHTML(content: string, params?: ParserParams): DocumentFragment;
+    abstract serializeHTML(root: DocumentFragment | Node): string;
+    abstract renderLocalPath(fpath: string, params?: RendererParams & ParserParams): Promise<DocumentFragment>;
+    clone(): IRenderer;
+    log(params?: RendererParams, ...args: any[]): void;
+    eval(expr: string, args?: {
+        [key: string]: any;
+    }, params?: RendererParams): Promise<any>;
+    resolveIncludes(root: Document | DocumentFragment | Node, params?: RendererParams): Promise<IRenderer>;
+    resolveTextNode(node: ChildNode, params?: RendererParams): ReactiveProxy<any>[];
+    resolveDataAttribute(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveWatchAttribute(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolvePropAttributes(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveAttrAttributes(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveEventAttributes(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveForAttribute(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveBindAttribute(node: ChildNode, params?: RendererParams): Promise<void>;
+    resolveShowAttribute(node: ChildNode, params?: RendererParams): Promise<void>;
+    mount(root: Document | DocumentFragment | Node, params?: RendererParams): Promise<IRenderer>;
+    renderString(content: string, params?: RendererParams & ParserParams): Promise<DocumentFragment>;
+    renderRemotePath(fpath: string, params?: RendererParams & ParserParams): Promise<DocumentFragment>;
+}