npm - @quenk/wml - Versions diffs - 2.13.10 → 2.14.0 - Mend

@quenk/wml 2.13.10 → 2.14.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 (60) hide show

package/lib/cli.d.ts +8 -8
package/lib/cli.js +1 -3
package/lib/cli.js.map +1 -1
package/lib/cli.ts +48 -60
package/lib/compile/codegen.d.ts +4 -9
package/lib/compile/codegen.js +164 -369
package/lib/compile/codegen.js.map +1 -1
package/lib/compile/codegen.ts +644 -952
package/lib/compile/index.d.ts +2 -2
package/lib/compile/index.js +4 -4
package/lib/compile/index.js.map +1 -1
package/lib/compile/index.ts +14 -17
package/lib/compile/transform.d.ts +8 -6
package/lib/compile/transform.js +46 -18
package/lib/compile/transform.js.map +1 -1
package/lib/compile/transform.ts +139 -116
package/lib/{dom.d.ts → dom/index.d.ts} +8 -2
package/lib/{dom.js → dom/index.js} +84 -66
package/lib/dom/index.js.map +1 -0
package/lib/dom/index.ts +425 -0
package/lib/dom/monitor.d.ts +33 -0
package/lib/dom/monitor.js +60 -0
package/lib/dom/monitor.js.map +1 -0
package/lib/dom/monitor.ts +75 -0
package/lib/index.d.ts +10 -95
package/lib/index.js +10 -10
package/lib/index.js.map +1 -1
package/lib/index.ts +57 -182
package/lib/main.js +17 -17
package/lib/main.js.map +1 -1
package/lib/main.ts +38 -44
package/lib/parse/ast.d.ts +12 -6
package/lib/parse/ast.js +68 -58
package/lib/parse/ast.js.map +1 -1
package/lib/parse/ast.ts +400 -482
package/lib/parse/generated.d.ts +3 -5
package/lib/parse/generated.js +9504 -9264
package/lib/parse/index.d.ts +2 -3
package/lib/parse/index.js.map +1 -1
package/lib/parse/index.ts +7 -9
package/lib/parse/test.js +194 -192
package/lib/parse/test.js.map +1 -1
package/lib/parse/test.ts +294 -404
package/lib/parse/wml.y +4 -0
package/lib/tsconfig.json +19 -20
package/lib/util.d.ts +10 -0
package/lib/util.js +21 -0
package/lib/util.js.map +1 -0
package/lib/util.ts +39 -0
package/lib/view/frame.d.ts +103 -0
package/lib/view/frame.js +206 -0
package/lib/view/frame.js.map +1 -0
package/lib/view/frame.ts +249 -0
package/lib/view/index.d.ts +58 -0
package/lib/view/index.js +48 -0
package/lib/view/index.js.map +1 -0
package/lib/view/index.ts +97 -0
package/package.json +4 -3
package/lib/dom.js.map +0 -1
package/lib/dom.ts +0 -475

package/lib/dom/index.ts ADDED Viewed

@@ -0,0 +1,425 @@
+/**
+ * This module provides functions used in templates to generate supported DOM
+ * nodes.
+ *
+ * The idea here is to provide an abstraction over DOM construction so
+ * we can detect whether we are in a browser or elsewhere and adjust to
+ * suite.
+ */
+import { Record, mapTo, forEach } from "@quenk/noni/lib/data/record";
+import { Type, isFunction, isObject } from "@quenk/noni/lib/data/type";
+const DOCTYPE = "<!DOCTYPE html>";
+const ATTR_ESC_MAP: { [key: string]: string } = {
+  "&": "\\u0026",
+  ">": "\\u003e",
+  "<": "\\u003c",
+  '"': "\\u0022",
+  "=": "\\u003d",
+  "\u005c": "\\u005c",
+  "\u2028": "\\u2028",
+  "\u2029": "\\u2029",
+};
+const attrsEscRegex = new RegExp(`[${mapTo(ATTR_ESC_MAP, (_, k) => k)}]`, "g");
+const HTML_ENT_MAP: { [key: string]: string } = {
+  '"': "&quot;",
+  "&": "&amp;",
+  "'": "&apos;",
+  "<": "&lt;",
+  ">": "&gt;",
+};
+const htmlEscRegex = new RegExp(
+  `[${mapTo(HTML_ENT_MAP, (_, k) => k).join("")}]`,
+  "g",
+);
+const voidElements = [
+  "area",
+  "base",
+  "br",
+  "col",
+  "command",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "keygen",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+];
+/**
+ * WMLDOMAttrs is a record of attributes bound for a WMLDOMElement.
+ */
+export interface WMLDOMAttrs extends Record<string | number | Function> {}
+/**
+ * WMLNodeList implementation.
+ * @private
+ */
+export class WMLNodeList implements NodeListOf<WMLDOMNode> {
+  entries(): ArrayIterator<[number, WMLDOMNode]> {
+    throw new Error("Method not implemented.");
+  }
+  keys(): ArrayIterator<number> {
+    throw new Error("Method not implemented.");
+  }
+  values(): ArrayIterator<WMLDOMNode> {
+    throw new Error("Method not implemented.");
+  }
+  [Symbol.iterator](): ArrayIterator<WMLDOMNode> {
+    throw new Error("Method not implemented.");
+  }
+  [Symbol.dispose]() {
+    throw new Error("Method not implemented.");
+  }
+  [index: number]: WMLDOMNode;
+  length = 0;
+  item() {
+    return <WMLDOMNode>(<Type>null);
+  }
+  forEach() {}
+}
+/**
+ * WMLDOMNode implements the properties and methods of the DOM Node interface to
+ * allow a fake DOM to be built in server side code.
+ *
+ * Most of the methods and properties cannot be relied on and should not be
+ * used.
+ */
+export class WMLDOMNode implements Node {
+  constructor(
+    public nodeName: string,
+    public nodeType: number,
+  ) {}
+  readonly ATTRIBUTE_NODE = 2;
+  readonly CDATA_SECTION_NODE = 4;
+  readonly COMMENT_NODE = 8;
+  readonly DOCUMENT_FRAGMENT_NODE = 11;
+  readonly DOCUMENT_NODE = 9;
+  readonly DOCUMENT_POSITION_CONTAINED_BY = 16;
+  readonly DOCUMENT_POSITION_CONTAINS = 8;
+  readonly DOCUMENT_POSITION_DISCONNECTED = 1;
+  readonly DOCUMENT_POSITION_FOLLOWING = 4;
+  readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC = 32;
+  readonly DOCUMENT_POSITION_PRECEDING = 2;
+  readonly DOCUMENT_TYPE_NODE = 10;
+  readonly ELEMENT_NODE = 1;
+  readonly ENTITY_NODE = 6;
+  readonly ENTITY_REFERENCE_NODE = 5;
+  readonly NOTATION_NODE = 12;
+  readonly PROCESSING_INSTRUCTION_NODE = 7;
+  readonly TEXT_NODE = 3;
+  baseURI = "";
+  childNodes = new WMLNodeList();
+  firstChild = null;
+  isConnected = false;
+  lastChild = null;
+  namespaceURI = null;
+  nextSibling = null;
+  nodeValue = null;
+  ownerDocument = null;
+  parentElement = null;
+  parentNode = null;
+  previousSibling = null;
+  get textContent() {
+    return "";
+  }
+  [Symbol.dispose]() {}
+  addEventListener() {}
+  dispatchEvent() {
+    return false;
+  }
+  removeEventListener() {}
+  appendChild<T extends Node>(newChild: T): T {
+    return newChild;
+  }
+  cloneNode() {
+    return this;
+  }
+  compareDocumentPosition() {
+    return 0;
+  }
+  contains() {
+    return false;
+  }
+  getRootNode(): Node {
+    return this;
+  }
+  hasChildNodes() {
+    return false;
+  }
+  insertBefore<T extends Node>(newChild: T): T {
+    return newChild;
+  }
+  isDefaultNamespace() {
+    return false;
+  }
+  isEqualNode() {
+    return false;
+  }
+  isSameNode() {
+    return false;
+  }
+  lookupNamespaceURI() {
+    return null;
+  }
+  lookupPrefix() {
+    return null;
+  }
+  normalize() {}
+  remove() {}
+  before() {}
+  after() {}
+  replaceWith() {}
+  removeChild<T extends Node>(oldChild: T): T {
+    return oldChild;
+  }
+  replaceChild<T extends Node>(_: Node, oldChild: T): T {
+    return oldChild;
+  }
+}
+/**
+ * WMLDOMText is used to represent Text nodes on the server side.
+ * @private
+ */
+export class WMLDOMText extends WMLDOMNode {
+  constructor(
+    public value: string,
+    public escape = true,
+  ) {
+    super("#text", -1);
+  }
+  get textContent() {
+    return this.escape ? escapeHTML(this.value) : this.value;
+  }
+}
+/**
+ * WMLDOMElement is used to represent Element nodes on the server side.
+ * @private
+ */
+export class WMLDOMElement extends WMLDOMNode {
+  constructor(
+    public tag: string,
+    public attrs: WMLDOMAttrs,
+    public children: Node[] = [],
+  ) {
+    super(tag, -1);
+  }
+  get innerHTML(): string {
+    return this.children
+      .map((c) =>
+        c.nodeName === "#text"
+          ? (<Text>c).textContent
+          : (<HTMLElement>c).outerHTML,
+      )
+      .join("");
+  }
+  get outerHTML() {
+    let { tag } = this;
+    let content = this.innerHTML;
+    let attrs = mapTo(this.attrs, (value, name) => {
+      if (isObject(value) && value instanceof WMLDOMText)
+        return `${name}="${value.textContent}"`;
+      else if (isFunction(value) || isObject(value) || value == null) return "";
+      else return `${name}="${escapeAttrValue(String(value))}"`;
+    }).join(" ");
+    attrs = attrs.trim() != "" ? ` ${attrs}` : "";
+    let open = `<${tag}${attrs}>`;
+    if (tag === "html") open = `${DOCTYPE}${open}`;
+    return voidElements.indexOf(tag) > -1 ? open : `${open}${content}</${tag}>`;
+  }
+  setAttribute(key: string, value: Type) {
+    this.attrs[key] = value;
+  }
+  appendChild<T extends Node>(newChild: T): T {
+    this.children.push(newChild);
+    return newChild;
+  }
+}
+/**
+ * isBrowser is set to true if we detect a window and document global variable.
+ */
+export const isBrowser =
+  typeof window !== "undefined" && typeof window.document !== "undefined";
+/**
+ * escapeAttrValue for safe browser display.
+ */
+export const escapeAttrValue = (value: string) =>
+  value.replace(attrsEscRegex, (hit) => ATTR_ESC_MAP[hit]);
+/**
+ * escapeHTML for safe browser display.
+ */
+export const escapeHTML = (value: string) =>
+  value.replace(htmlEscRegex, (hit) => HTML_ENT_MAP[hit]);
+/**
+ * createTextNode wrapper.
+ */
+export const createTextNode = (txt: Type): Node => {
+  let str = String(txt == null ? "" : txt);
+  return isBrowser ? document.createTextNode(str) : new WMLDOMText(str);
+};
+/**
+ * createUnsafeNode allows raw strings to be output without escaping.
+ *
+ * THIS MUST ONLY BE USED IF YOU ARE 100% SURE THE STRING IS SAFE TO OUTPUT!
+ */
+export const createUnsafeNode = (txt: Type): Node => {
+  let str = String(txt == null ? "" : txt);
+  return isBrowser ? createBrowserUnsafeNode(str) : new WMLDOMText(str, false);
+};
+const createBrowserUnsafeNode = (html: string) => {
+  let tmpl = document.createElement("template");
+  tmpl.innerHTML = html;
+  return tmpl.content;
+};
+export { createTextNode as text, createUnsafeNode as unsafe };
+const namespaces = new Map([["svg", "http://www.w3.org/2000/svg"]]);
+/**
+ * createElement wrapper.
+ */
+export const createElement = (
+  tag: string,
+  attrs: WMLDOMAttrs = {},
+  children: Node[] = [],
+  ns = "",
+): Element => {
+  if (!isBrowser) {
+    // XXX: The whole Element interface is not implemented but on server
+    // side we are only interested in setAttribute.
+    return <Element>(<Type>new WMLDOMElement(tag, attrs, children));
+  } else {
+    let e = ns
+      ? document.createElementNS(namespaces.get(ns) ?? "", tag)
+      : document.createElement(tag);
+    forEach(attrs, (value: Type, key) => {
+      if (typeof value === "function") {
+        (<Type>e)[key] = value;
+      } else if (typeof value === "string") {
+        // prevent setting things like disabled=""
+        if (value !== "") e.setAttribute(key, value);
+      } else if (typeof value === "boolean") {
+        e.setAttribute(key, "");
+      } else if (!isBrowser && value instanceof WMLDOMText) {
+        e.setAttribute(key, <Type>value);
+      }
+    });
+    children.forEach((c) => {
+      switch (typeof c) {
+        case "string":
+        case "number":
+        case "boolean":
+          e.appendChild(<Node>document.createTextNode("" + c));
+        case "object":
+          e.appendChild(<Node>c);
+          break;
+        default:
+          throw new TypeError(`Can not adopt child ${c} of type ${typeof c}`);
+      }
+    });
+    return e;
+  }
+};

package/lib/dom/monitor.d.ts ADDED Viewed

@@ -0,0 +1,33 @@
+import { Content } from "..";
+export type Handler = () => void;
+/**
+ * DOMEventCallbacks is an object interested in receiving the lifecycle
+ * events of a DOM tree.
+ */
+export interface DOMEventCallbacks {
+    onDOMConnected?: () => void;
+    onDOMDisconnected?: () => void;
+}
+/**
+ * DOMMonitor is used to allow WML components to execute code when added or
+ * removed from DOM.
+ *
+ * This constructor is not used directly, instead components must use the
+ * getInstance() static method.
+ */
+export declare class DOMMonitor {
+    connectHandlers: WeakMap<Content, Handler>;
+    disconnectHandlers: WeakMap<Content, Handler>;
+    constructor(connectHandlers?: WeakMap<Content, Handler>, disconnectHandlers?: WeakMap<Content, Handler>);
+    _observer: MutationObserver;
+    static getInstance(): DOMMonitor;
+    _checkAndDispatch(handlers: WeakMap<Content, Handler>, dom: NodeList): void;
+    init(): void;
+    /**
+     * monitor a DOM tree for lifecylce changes.
+     *
+     * If the specified handler does not declare any of the required methods
+     * no monitoring will be configured for the DOM node.
+     */
+    monitor(dom: Content, handler: DOMEventCallbacks): void;
+}

package/lib/dom/monitor.js ADDED Viewed

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DOMMonitor = void 0;
+let monitor;
+/**
+ * DOMMonitor is used to allow WML components to execute code when added or
+ * removed from DOM.
+ *
+ * This constructor is not used directly, instead components must use the
+ * getInstance() static method.
+ */
+class DOMMonitor {
+    constructor(connectHandlers = new WeakMap(), disconnectHandlers = new WeakMap()) {
+        this.connectHandlers = connectHandlers;
+        this.disconnectHandlers = disconnectHandlers;
+        this._observer = new MutationObserver((list) => {
+            for (let mutation of list) {
+                (this._checkAndDispatch(this.connectHandlers, mutation.addedNodes),
+                    this._checkAndDispatch(this.disconnectHandlers, mutation.removedNodes));
+            }
+        });
+    }
+    static getInstance() {
+        if (!monitor) {
+            monitor = new DOMMonitor();
+            monitor.init();
+        }
+        return monitor;
+    }
+    _checkAndDispatch(handlers, dom) {
+        let stack = [...dom];
+        while (stack.length) {
+            let next = stack.pop();
+            if (!next.children)
+                continue;
+            stack.push(...next.children);
+            handlers.get(next)?.();
+        }
+    }
+    init() {
+        this._observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    }
+    /**
+     * monitor a DOM tree for lifecylce changes.
+     *
+     * If the specified handler does not declare any of the required methods
+     * no monitoring will be configured for the DOM node.
+     */
+    monitor(dom, handler) {
+        if (handler.onDOMConnected)
+            this.connectHandlers.set(dom, () => handler.onDOMConnected?.());
+        if (handler.onDOMDisconnected)
+            this.disconnectHandlers.set(dom, () => handler.onDOMDisconnected?.());
+    }
+}
+exports.DOMMonitor = DOMMonitor;
+//# sourceMappingURL=monitor.js.map

package/lib/dom/monitor.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"monitor.js","sourceRoot":"","sources":["monitor.ts"],"names":[],"mappings":";;;AAcA,IAAI,OAAmB,CAAC;AAExB;;;;;;GAMG;AACH,MAAa,UAAU;IACrB,YACS,kBAAkB,IAAI,OAAO,EAAoB,EACjD,qBAAqB,IAAI,OAAO,EAAoB;QADpD,oBAAe,GAAf,eAAe,CAAkC;QACjD,uBAAkB,GAAlB,kBAAkB,CAAkC;QAG7D,cAAS,GAAqB,IAAI,gBAAgB,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1D,KAAK,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;gBAC1B,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,eAAe,EAAE,QAAQ,CAAC,UAAU,CAAC;oBAChE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;YAC5E,CAAC;QACH,CAAC,CAAC,CAAC;IAPA,CAAC;IASJ,MAAM,CAAC,WAAW;QAChB,IAAI,CAAC,OAAO,EAAE,CAAC;YACb,OAAO,GAAG,IAAI,UAAU,EAAE,CAAC;YAC3B,OAAO,CAAC,IAAI,EAAE,CAAC;QACjB,CAAC;QACD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,iBAAiB,CAAC,QAAmC,EAAE,GAAa;QAClE,IAAI,KAAK,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;QACrB,OAAO,KAAK,CAAC,MAAM,EAAE,CAAC;YACpB,IAAI,IAAI,GAAY,KAAK,CAAC,GAAG,EAAE,CAAC;YAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,SAAS;YAC7B,KAAK,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;YAC7B,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;QACzB,CAAC;IACH,CAAC;IAED,IAAI;QACF,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACpC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,OAAO,CAAC,GAAY,EAAE,OAA0B;QAC9C,IAAI,OAAO,CAAC,cAAc;YACxB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,EAAE,CAAC,CAAC;QAElE,IAAI,OAAO,CAAC,iBAAiB;YAC3B,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;IAC1E,CAAC;CACF;AAnDD,gCAmDC"}

package/lib/dom/monitor.ts ADDED Viewed

@@ -0,0 +1,75 @@
+import { Content } from "..";
+export type Handler = () => void;
+/**
+ * DOMEventCallbacks is an object interested in receiving the lifecycle
+ * events of a DOM tree.
+ */
+export interface DOMEventCallbacks {
+  onDOMConnected?: () => void;
+  onDOMDisconnected?: () => void;
+}
+let monitor: DOMMonitor;
+/**
+ * DOMMonitor is used to allow WML components to execute code when added or
+ * removed from DOM.
+ *
+ * This constructor is not used directly, instead components must use the
+ * getInstance() static method.
+ */
+export class DOMMonitor {
+  constructor(
+    public connectHandlers = new WeakMap<Content, Handler>(),
+    public disconnectHandlers = new WeakMap<Content, Handler>(),
+  ) {}
+  _observer: MutationObserver = new MutationObserver((list) => {
+    for (let mutation of list) {
+      (this._checkAndDispatch(this.connectHandlers, mutation.addedNodes),
+        this._checkAndDispatch(this.disconnectHandlers, mutation.removedNodes));
+    }
+  });
+  static getInstance() {
+    if (!monitor) {
+      monitor = new DOMMonitor();
+      monitor.init();
+    }
+    return monitor;
+  }
+  _checkAndDispatch(handlers: WeakMap<Content, Handler>, dom: NodeList) {
+    let stack = [...dom];
+    while (stack.length) {
+      let next = <Element>stack.pop();
+      if (!next.children) continue;
+      stack.push(...next.children);
+      handlers.get(next)?.();
+    }
+  }
+  init() {
+    this._observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+    });
+  }
+  /**
+   * monitor a DOM tree for lifecylce changes.
+   *
+   * If the specified handler does not declare any of the required methods
+   * no monitoring will be configured for the DOM node.
+   */
+  monitor(dom: Content, handler: DOMEventCallbacks) {
+    if (handler.onDOMConnected)
+      this.connectHandlers.set(dom, () => handler.onDOMConnected?.());
+    if (handler.onDOMDisconnected)
+      this.disconnectHandlers.set(dom, () => handler.onDOMDisconnected?.());
+  }
+}