dothtml 6.0.0-beta.13 → 6.0.0-beta.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dothtml",
-  "version": "6.0.0-beta.13",
+  "version": "6.0.0-beta.16",
   "description": "DOThtml is a client-side web building framework written in TypeScript.",
   "main": "./build_module/index.js",
   "exports": "./build_module/index.js",
@@ -52,6 +52,6 @@
     "webpack-cli": "^5.1.4"
   },
   "dependencies": {
-    "dothtml-interfaces": "^0.1.36"
+    "dothtml-interfaces": "^0.2.7"
   }
 }

package/readme.md

@@ -23,4 +23,4 @@ The Style builder is powerful and useful, but still not fully developed. Conside
 - A lot of CSS properties don't enforce proper typing and will allow any string. This is a WIP and will naturally get better over time.
 - CSS @ rules like @keyframes, @media, @font-face, etc are currently not supported because they are currently not configurable in JavaScript. A workaround that generates dynamic CSS is planned.
 
-- Support for header elements (including stylesheets) is planned.
+- Support for header elements (including stylesheets) is planned.

package/build_module/constants.d.ts

@@ -1 +0,0 @@
-export declare const DOT_VDOM_PROP_NAME = "_dotVDom";

package/build_module/constants.js

@@ -1,2 +0,0 @@
-export const DOT_VDOM_PROP_NAME = "_dotVDom";
-//# sourceMappingURL=constants.js.map

package/build_module/constants.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAAC"}

package/build_module/css/css.js

@@ -1 +0,0 @@
-//# sourceMappingURL=css.js.map

package/build_module/css/css.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"css.js","sourceRoot":"","sources":["../../src/css/css.ts"],"names":[],"mappings":""}

package/build_module/decoration/component.d.ts

@@ -1,14 +0,0 @@
-import { IComponent } from "dothtml-interfaces";
-export declare function component(Base: new (...args: Array<any>) => IComponent, styles: []): {
-    new (...args: any[]): {
-        events?: string[];
-        readonly _?: import("dothtml-interfaces").FrameworkItems;
-        build(...args: any[]): import("dothtml-interfaces").IDotGenericElement;
-        style?(css: import("dothtml-interfaces").IDotCss): void;
-        creating?(...args: any[]): void;
-        ready?(): void;
-        deleting?(): void;
-        deleted?(): void;
-        built?(): void;
-    };
-};

package/build_module/decoration/component.js

@@ -1,43 +0,0 @@
-import renderCss from "../helpers/render-css";
-let tagId = 0x10000;
-function restyle(c) {
-    if (c._._meta.shadowRoot && c._?._meta?.sharedStyles) {
-        c._._meta.shadowRoot.adoptedStyleSheets = c._._meta.sharedStyles;
-    }
-}
-export function component(Base, styles) {
-    let ts = (Math.floor(performance.now() * 10000000000000)).toString(16);
-    let tId = (tagId++).toString(16);
-    let tagName = `dothtml-${tId}${component["_addTimestamp"] ? `-${ts}` : ""}`;
-    let sharedStyles = null;
-    if (styles) {
-        sharedStyles = [];
-        for (let i = 0; i < styles.length; i++) {
-            sharedStyles.push(renderCss(styles[i]));
-        }
-    }
-    return class extends Base {
-        constructor(...args) {
-            super(...args);
-            if (!this._) {
-                this._ = {};
-            }
-            this._.refs = {};
-            this._.restyle = () => { restyle(this); };
-            this._._meta = this._._meta || {};
-            this._._meta.args = args;
-            this._._meta.isRendered = false;
-            this._._meta.tagName = tagName;
-            if (sharedStyles) {
-                if (this._._meta.sharedStyles) {
-                    this._._meta.sharedStyles = [...this._._meta.sharedStyles, ...sharedStyles];
-                }
-                else {
-                    this._._meta.sharedStyles = sharedStyles;
-                }
-            }
-        }
-    };
-}
-component["_addTimestamp"] = true;
-//# sourceMappingURL=component.js.map

package/build_module/decoration/component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/decoration/component.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,IAAI,KAAK,GAAG,OAAO,CAAC;AAEpB,SAAS,OAAO,CAAC,CAAa;IAC7B,IAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,YAAY,EAAC;QACnD,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,kBAAkB,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC;KAGjE;AACF,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,IAAyC,EAAE,MAAU;IAE9E,IAAI,EAAE,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE,GAAC,cAAc,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrE,IAAI,GAAG,GAAG,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACjC,IAAI,OAAO,GAAG,WAAW,GAAG,GAAG,SAAS,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC;IAE5E,IAAI,YAAY,GAAG,IAAI,CAAC;IAExB,IAAG,MAAM,EAAC;QACT,YAAY,GAAG,EAAE,CAAC;QAClB,KAAI,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAC;YACrC,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SACxC;KACD;IAoBD,OAAO,KAAM,SAAQ,IAAI;QAExB,YAAY,GAAG,IAAW;YACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;YAEf,IAAG,CAAC,IAAI,CAAC,CAAC,EAAC;gBACT,IAAI,CAAC,CAAS,GAAG,EAAE,CAAC;aACrB;YACA,IAAI,CAAC,CAAC,CAAC,IAAY,GAAG,EAAE,CAAC;YACzB,IAAI,CAAC,CAAC,CAAC,OAAe,GAAG,GAAE,EAAE,GAAC,OAAO,CAAC,IAAI,CAAC,CAAA,CAAA,CAAC,CAAC;YAC7C,IAAI,CAAC,CAAC,CAAC,KAAa,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,EAAE,CAAC;YAC1C,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAY,GAAG,IAAI,CAAC;YACjC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,UAAkB,GAAG,KAAK,CAAC;YACxC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,OAAe,GAAG,OAAO,CAAC;YACxC,IAAG,YAAY,EAAC;gBACf,IAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAC;oBAC3B,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAoB,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,GAAG,YAAY,CAAC,CAAC;iBACrF;qBACG;oBACF,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAoB,GAAG,YAAY,CAAC;iBAClD;aACD;QAEF,CAAC;KACD,CAAA;AACF,CAAC;AAED,SAAS,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC"}

package/build_module/decoration/style.js

@@ -1 +0,0 @@
-//# sourceMappingURL=style.js.map

package/build_module/decoration/style.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style.js","sourceRoot":"","sources":["../../src/decoration/style.ts"],"names":[],"mappings":""}

package/build_module/decoration/use-styles.d.ts

@@ -1,14 +0,0 @@
-import { IComponent } from "dothtml-interfaces";
-export declare function useStyles(styleCallback: any): (Base: new (...args: Array<any>) => IComponent) => {
-    new (...args: any[]): {
-        events?: string[];
-        readonly _?: import("dothtml-interfaces").FrameworkItems;
-        build(...args: any[]): import("dothtml-interfaces").IDotGenericElement;
-        style?(css: import("dothtml-interfaces").IDotCss): void;
-        creating?(...args: any[]): void;
-        ready?(): void;
-        deleting?(): void;
-        deleted?(): void;
-        built?(): void;
-    };
-};

package/build_module/decoration/use-styles.js

@@ -1,19 +0,0 @@
-import renderCss from "../helpers/render-css";
-export function useStyles(styleCallback) {
-    let sharedStyles = renderCss(styleCallback);
-    return function (Base) {
-        return class extends Base {
-            constructor(...args) {
-                super(...args);
-                if (!this._) {
-                    this._ = { _meta: {} };
-                }
-                if (!this._._meta.sharedStyles) {
-                    this._._meta.sharedStyles = [];
-                }
-                this._._meta.sharedStyles.push(sharedStyles);
-            }
-        };
-    };
-}
-//# sourceMappingURL=use-styles.js.map

package/build_module/decoration/use-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-styles.js","sourceRoot":"","sources":["../../src/decoration/use-styles.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,uBAAuB,CAAC;AAE9C,MAAM,UAAU,SAAS,CAAC,aAAa;IAEtC,IAAI,YAAY,GAAG,SAAS,CAAC,aAAa,CAAC,CAAC;IAE5C,OAAO,UAAS,IAAyC;QACxD,OAAO,KAAM,SAAQ,IAAI;YAExB,YAAY,GAAG,IAAW;gBACzB,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;gBACf,IAAG,CAAC,IAAI,CAAC,CAAC,EAAC;oBACT,IAAI,CAAC,CAAS,GAAG,EAAC,KAAK,EAAE,EAAE,EAAC,CAAC;iBAC9B;gBACD,IAAG,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAC;oBAC5B,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAoB,GAAG,EAAE,CAAC;iBACxC;gBACD,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAC9C,CAAC;SACD,CAAA;IACF,CAAC,CAAA;AACF,CAAC"}

package/build_module/dot.d.ts

@@ -1,3 +0,0 @@
-import { IDotCore } from "dothtml-interfaces";
-declare const dot: IDotCore;
-export default dot;

package/build_module/dot.js

@@ -1,534 +0,0 @@
-import { ContainerVdom } from "./vdom-nodes/container-vdom";
-import { TextVdom } from "./vdom-nodes/text-vdom";
-import ElementVdom from "./vdom-nodes/element-vdom";
-import { Vdom } from "./vdom-nodes/vdom";
-import { DOT_VDOM_PROP_NAME } from "./constants";
-import Reactive from "./reactive";
-import { component } from "./decoration/component";
-import { ComponentVdom } from "./vdom-nodes/component-vdom";
-import { useStyles } from "./decoration/use-styles";
-const allTags = [
-    "a",
-    "aside",
-    "abbr",
-    "address",
-    "area",
-    "article",
-    "audio",
-    "b",
-    "bdi",
-    "bdo",
-    "blockQuote",
-    "body",
-    "br",
-    "button",
-    "canvas",
-    "caption",
-    "cite",
-    "code",
-    "col",
-    "colGroup",
-    "content",
-    "data",
-    "dataList",
-    "dd",
-    "del",
-    "details",
-    "dfn",
-    "dialog",
-    "div",
-    "dl",
-    "dt",
-    "em",
-    "embed",
-    "fieldSet",
-    "figCaption",
-    "figure",
-    "footer",
-    "form",
-    "h1",
-    "h2",
-    "h3",
-    "h4",
-    "h5",
-    "h6",
-    "header",
-    "hr",
-    "i",
-    "iFrame",
-    "img",
-    "input",
-    "ins",
-    "kbd",
-    "keyGen",
-    "label",
-    "legend",
-    "li",
-    "main",
-    "map",
-    "mark",
-    "menu",
-    "menuItem",
-    "meter",
-    "nav",
-    "object",
-    "ol",
-    "optGroup",
-    "option",
-    "output",
-    "p",
-    "param",
-    "pre",
-    "progress",
-    "q",
-    "rp",
-    "rt",
-    "ruby",
-    "s",
-    "samp",
-    "section",
-    "select",
-    "small",
-    "source",
-    "span",
-    "strong",
-    "svg",
-    "sub",
-    "summary",
-    "sup",
-    "table",
-    "tBody",
-    "td",
-    "textArea",
-    "tFoot",
-    "th",
-    "tHead",
-    "time",
-    "tr",
-    "track",
-    "u",
-    "ul",
-    "var",
-    "video",
-    "wbr"
-];
-const allAttributes = [
-    "accept",
-    "accessKey",
-    "action",
-    "align",
-    "allow",
-    "allowFullScreen",
-    "aLink",
-    "alt",
-    "archive",
-    "autoCapitalize",
-    "autoComplete",
-    "autoFocus",
-    "autoPlay",
-    "autoSave",
-    "axis",
-    "background",
-    "bgColor",
-    "border",
-    "buffered",
-    "cellPadding",
-    "cellSpacing",
-    "challenge",
-    "char",
-    "charset",
-    "charOff",
-    "checked",
-    "class",
-    "classId",
-    "clear",
-    "codeBase",
-    "codeType",
-    "color",
-    "cols",
-    "colSpan",
-    "compact",
-    "contentEditable",
-    "contextMenu",
-    "controls",
-    "coords",
-    "crossOrigin",
-    "dateTime",
-    "declare",
-    "decoding",
-    "default",
-    "dir",
-    "dirName",
-    "disabled",
-    "download",
-    "draggable",
-    "dropZone",
-    "encType",
-    "enterKeyHint",
-    "exportParts",
-    "face",
-    "font",
-    "fontFace",
-    "fontFaceFormat",
-    "fontFaceName",
-    "fontFaceSrc",
-    "fontFaceUri",
-    "fontSpecification",
-    "for",
-    "foreignObject",
-    "formAction",
-    "frame",
-    "frameBorder",
-    "headers",
-    "height",
-    "hidden",
-    "high",
-    "hRef",
-    "hRefLang",
-    "hSpace",
-    "icon",
-    "id",
-    "inert",
-    "inputMode",
-    "images",
-    "is",
-    "isMap",
-    "itemId",
-    "itemProp",
-    "itemRef",
-    "itemScope",
-    "itemType",
-    "keyType",
-    "kind",
-    "lang",
-    "list",
-    "loading",
-    "longDesc",
-    "loop",
-    "low",
-    "manifest",
-    "marginHeight",
-    "marginWidth",
-    "max",
-    "maxLength",
-    "media",
-    "metadata",
-    "method",
-    "min",
-    "missingGlyph",
-    "multiple",
-    "muted",
-    "name",
-    "noHRef",
-    "nOnce",
-    "noResize",
-    "noShade",
-    "noValidate",
-    "noWrap",
-    "open",
-    "optimum",
-    "part",
-    "pattern",
-    "ping",
-    "placeholder",
-    "playsInline",
-    "poster",
-    "preload",
-    "prompt",
-    "radioGroup",
-    "readOnly",
-    "referrerPolicy",
-    "rel",
-    "required",
-    "rev",
-    "reversed",
-    "role",
-    "rows",
-    "rowSpan",
-    "rules",
-    "sandbox",
-    "scope",
-    "scrolling",
-    "seamless",
-    "selected",
-    "shape",
-    "size",
-    "sizes",
-    "spellCheck",
-    "src",
-    "srcDoc",
-    "srcLang",
-    "srcSet",
-    "standby",
-    "start",
-    "step",
-    "style",
-    "tabIndex",
-    "target",
-    "title",
-    "translate",
-    "type",
-    "useMap",
-    "vAlign",
-    "valueType",
-    "virtualKeyboardPolicy",
-    "width",
-    "wrap"
-];
-const specialAttributes = [
-    ["quoteCite", "cite"],
-    ["objectData", "data"],
-    ["whichForm", "form"],
-    ["trackLabel", "label"],
-    ["colSpan", "span"],
-    ["tableSummary", "summary"],
-    ["optionLabel", "label"],
-    ["acceptCharset", "accept-charset"],
-    ["areaHidden", "area-hidden"],
-    ["areaLabel", "area-label"],
-    ["areaDescribedBy", "area-describedby"],
-    ["areaControls", "area-controls"],
-    ["areaExpanded", "area-expanded"],
-    ["areaChecked", "area-checked"],
-    ["areaSelected", "area-selected"],
-];
-const allCoreWrappers = ["each", "html", "mount", "text", "when"];
-const allEventAttr = [
-    "onAbort",
-    "onBlur",
-    "onChange",
-    "onInput",
-    "onCanPlay",
-    "onCantPlayThrough",
-    "onClick",
-    "onCopy",
-    "onContextMenu",
-    "onCueChange",
-    "onCut",
-    "onDblClick",
-    "onDrag",
-    "onDragEnd",
-    "onDragEnter",
-    "onDragLeave",
-    "onDragOver",
-    "onDragStart",
-    "onDrop",
-    "onDurationChange",
-    "onEmptied",
-    "onEnded",
-    "onError",
-    "onFocus",
-    "onHashChange",
-    "onInvalid",
-    "onKeyDown",
-    "onKeyPress",
-    "onKeyUp",
-    "onLoad",
-    "onLoadedData",
-    "onLoadedMetadata",
-    "onLoadStart",
-    "onMouseDown",
-    "onMouseEnter",
-    "onMouseLeave",
-    "onMouseMove",
-    "onMouseOut",
-    "onMouseOver",
-    "onMouseUp",
-    "onPointerCancel",
-    "onPointerDown",
-    "onPointerEnter",
-    "onPointerLeave",
-    "onPointerMove",
-    "onPointerOut",
-    "onPointerOver",
-    "onPointerUp",
-    "onTouchStart",
-    "onTouchEnd",
-    "onTouchCancel",
-    "onTouchMove",
-    "onMouseWheel",
-    "onOffline",
-    "onOnline",
-    "onPageHide",
-    "onPagePaste",
-    "onPageShow",
-    "onPause",
-    "onPlay",
-    "onPlaying",
-    "onPopState",
-    "onProgress",
-    "onRateChange",
-    "onReset",
-    "onResize",
-    "onScroll",
-    "onSearch",
-    "onSeeked",
-    "onSeeking",
-    "onSelect",
-    "onStalled",
-    "onStorage",
-    "onSubmit",
-    "onSuspend",
-    "onTimeUpdate",
-    "onToggle",
-    "onUnload",
-    "onVolumeChange",
-    "onWaiting",
-    "onWheel",
-];
-const makeCoreWrapper = (d, fn) => {
-    d[fn] = function () {
-        let n = new ContainerVdom();
-        n[fn](...arguments);
-        return n;
-    };
-};
-const makeDot = () => {
-    const _dot = function (targetSelector, targetWindow = window) {
-        if (targetSelector?.ownerDocument?.defaultView) {
-            let el = targetSelector;
-            let node = el[DOT_VDOM_PROP_NAME];
-            if (node) {
-                return node.children;
-            }
-            else {
-                node = new ElementVdom(el.tagName.toLocaleLowerCase());
-                node.element = el;
-                node.children._parent = node;
-                el[DOT_VDOM_PROP_NAME] = node;
-                return node.children;
-            }
-        }
-        else if (typeof targetSelector == "string") {
-            return _dot(targetWindow.document.querySelectorAll(targetSelector)[0]);
-        }
-        else {
-            throw new Error("Invalid render target.");
-        }
-    };
-    _dot.watch = function (props) {
-        let o = new Reactive();
-        o.key = props?.key;
-        o.transformer = props?.transformer;
-        o.setValue(props?.value);
-        return o;
-    };
-    _dot.css = () => {
-    };
-    _dot.component = component;
-    _dot.component["useStyles"] = useStyles;
-    _dot.useStyles = (document, styles) => {
-        let cssStringContent = "";
-        if (typeof styles == "string") {
-            cssStringContent = styles;
-        }
-        else {
-            let content = styles(dot.css);
-            if (typeof content == "string") {
-                cssStringContent = content;
-            }
-            else {
-            }
-        }
-        const styleSheet = document.createElement("style");
-        styleSheet.type = "text/css";
-        styleSheet.textContent = cssStringContent;
-        document.head.appendChild(styleSheet);
-    };
-    {
-        for (let i = 0; i < allTags.length; i++) {
-            let E = allTags[i];
-            ContainerVdom.prototype[E] = function (c) {
-                let n = new ElementVdom(E);
-                if (c instanceof ContainerVdom) {
-                    n.children = c;
-                }
-                else if (c instanceof Vdom) {
-                    n.children._addChild(c);
-                }
-                else if (c?._?._meta && c?.build) {
-                    n.children._addChild(new ComponentVdom(c));
-                }
-                else {
-                    if (c !== null && c !== undefined) {
-                        n.children._addChild(new TextVdom(c));
-                    }
-                }
-                return this._addChild(n);
-            };
-            makeCoreWrapper(_dot, E);
-        }
-    }
-    {
-        for (let i = 0; i < allAttributes.length; i++) {
-            let A = allAttributes[i];
-            ContainerVdom.prototype[A] = function (c) {
-                let C = this._children[this._children.length - 1];
-                if (C && C instanceof ElementVdom) {
-                    C.setAttr(A, c);
-                }
-                else {
-                    throw new Error(`Invalid node to set ${A} attribute.`);
-                }
-                return this;
-            };
-        }
-    }
-    {
-        for (let i = 0; i < specialAttributes.length; i++) {
-            let A = specialAttributes[i];
-            ContainerVdom.prototype[A[0]] = function (c) {
-                let C = this._children[this._children.length - 1];
-                if (C && C instanceof ElementVdom) {
-                    C.setAttr(A[1], c);
-                }
-                else {
-                    throw new Error(`Invalid node to set ${A[0]} attribute.`);
-                }
-                return this;
-            };
-        }
-        ContainerVdom.prototype["value"] = function (c) {
-            let C = this._children[this._children.length - 1];
-            if (C && C instanceof ElementVdom) {
-                switch (C.tag) {
-                    case "input": {
-                        C.setAttr("value", c);
-                        break;
-                    }
-                    default: {
-                    }
-                }
-            }
-            else {
-                throw new Error(`Invalid node to set value attribute.`);
-            }
-            return this;
-        };
-    }
-    {
-        for (let i = 0; i < allEventAttr.length; i++) {
-            let E = allEventAttr[i];
-            ContainerVdom.prototype[E] = function (c) {
-                let C = this._children[this._children.length - 1];
-                if (C && C instanceof ElementVdom) {
-                    C.addEventListener(E.substring(2), c);
-                }
-                else {
-                    throw new Error(`Invalid node to set ${E} attribute.`);
-                }
-                return this;
-            };
-        }
-    }
-    {
-        for (let i = 0; i < allCoreWrappers.length; i++) {
-            let W = allCoreWrappers[i];
-            makeCoreWrapper(_dot, W);
-        }
-    }
-    return _dot;
-};
-const dot = makeDot();
-export default dot;
-//# sourceMappingURL=dot.js.map