@opendaw/lib-jsx 0.0.6

package/README.md

@@ -0,0 +1 @@
+This package is part of the openDAW SDK

package/dist/create-element.d.ts

@@ -0,0 +1,14 @@
+import { DomElement, JsxValue } from "./types";
+type Factory = (attributes: Readonly<Record<string, any>>, children?: ReadonlyArray<JsxValue>) => JsxValue;
+type TagOrFactoryOrElement = string | Factory | DomElement;
+/**
+ * This method must be exposed as the "createElement" method
+ * to be passively called on each element defined in jsx files.
+ * This is secured by injection defined in vite.config
+ * Most magic happens here, but we try to keep it civil.
+ */
+export declare function createElement(tagOrFactoryOrElement: TagOrFactoryOrElement, attributes: Readonly<Record<string, any>> | null, ...children: ReadonlyArray<JsxValue>): JsxValue;
+export declare const replaceChildren: (element: DomElement, ...children: ReadonlyArray<JsxValue>) => void;
+export declare const appendChildren: (element: DomElement, ...children: ReadonlyArray<JsxValue>) => void;
+export {};
+//# sourceMappingURL=create-element.d.ts.map

package/dist/create-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-element.d.ts","sourceRoot":"","sources":["../src/create-element.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,SAAS,CAAA;AAE5C,KAAK,OAAO,GAAG,CAAC,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,KAAK,QAAQ,CAAA;AAC1G,KAAK,qBAAqB,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,CAAA;AAK1D;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,qBAAqB,EAAE,qBAAqB,EAC5C,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,IAAI,EAChD,GAAG,QAAQ,EAAE,aAAa,CAAC,QAAQ,CAAC,GAAG,QAAQ,CAsC5E;AAED,eAAO,MAAM,eAAe,GAAI,SAAS,UAAU,EAAE,GAAG,UAAU,aAAa,CAAC,QAAQ,CAAC,SAGxF,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,SAAS,UAAU,EAAE,GAAG,UAAU,aAAa,CAAC,QAAQ,CAAC,SAiBvF,CAAA"}

package/dist/create-element.js

@@ -0,0 +1,130 @@
+import { canWrite, panic } from "@opendaw/lib-std";
+import { Html } from "@opendaw/lib-dom";
+import { SupportedSvgTags } from "./supported-svg-tags";
+import { Inject } from "./inject";
+const EmptyAttributes = Object.freeze({});
+const EmptyChildren = Object.freeze([]);
+/**
+ * This method must be exposed as the "createElement" method
+ * to be passively called on each element defined in jsx files.
+ * This is secured by injection defined in vite.config
+ * Most magic happens here, but we try to keep it civil.
+ */
+export function createElement(tagOrFactoryOrElement, attributes, ...children) {
+    if (tagOrFactoryOrElement instanceof HTMLElement || tagOrFactoryOrElement instanceof SVGElement) {
+        // already an element > early out
+        return tagOrFactoryOrElement;
+    }
+    let element;
+    if (typeof tagOrFactoryOrElement === "function") {
+        // this is the usual component factory case
+        element = tagOrFactoryOrElement(attributes ?? EmptyAttributes, children);
+        if (tagOrFactoryOrElement.length === 2) {
+            // we expect the children to be consumed by the function, since it accepted a second parameter
+            children = EmptyChildren;
+        }
+        if (element === false
+            || element === true
+            || element === null
+            || element === undefined
+            || typeof element === "string"
+            || typeof element === "number"
+            || Array.isArray(element)) {
+            // primitives and arrays are ready to be returned immediately and handled as children for the parent
+            return element;
+        }
+        // we expect the attributes to be consumed by the factory
+        attributes = null;
+    }
+    else {
+        // strings are supposed to be valid html or svg elements
+        element = SupportedSvgTags.has(tagOrFactoryOrElement)
+            ? document.createElementNS("http://www.w3.org/2000/svg", tagOrFactoryOrElement)
+            : document.createElement(tagOrFactoryOrElement);
+    }
+    if (children.length > 0) {
+        appendChildren(element, ...children);
+    }
+    if (attributes !== null) {
+        transferAttributes(element, attributes);
+    }
+    return element;
+}
+export const replaceChildren = (element, ...children) => {
+    Html.empty(element);
+    appendChildren(element, ...children);
+};
+export const appendChildren = (element, ...children) => {
+    children.forEach((value) => {
+        if (value === null || value === undefined || value === false) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            appendChildren(element, ...value);
+        }
+        else if (value instanceof Inject.Value) {
+            const text = document.createTextNode(String(value.value));
+            value.addTarget(text);
+            element.append(text);
+        }
+        else if (typeof value === "string") {
+            element.append(document.createTextNode(value));
+        }
+        else if (typeof value === "number") {
+            element.append(document.createTextNode(String(value)));
+        }
+        else if (value instanceof Node) {
+            element.append(value);
+        }
+    });
+};
+const transferAttributes = (element, attributes) => {
+    Object.entries(attributes).forEach(([key, value]) => {
+        if (value === undefined) {
+            return;
+        }
+        if (key === "class" || key === "className") {
+            if (value instanceof Inject.ClassList) {
+                value.addTarget(element);
+            }
+            else {
+                element.classList.add(...value.split(" "));
+            }
+        }
+        else if (key === "style") {
+            if (typeof value === "string") {
+                element.setAttribute(key, value);
+            }
+            else {
+                Object.assign(element.style, value);
+            }
+        }
+        else if (key === "ref") {
+            if (value instanceof Inject.Ref) {
+                value.addTarget(element);
+            }
+            else {
+                return panic("value of 'ref' must be of type '_Ref'");
+            }
+        }
+        else if (key === "onLoad") {
+            if (value instanceof Function && value.length === 1) {
+                value(element);
+            }
+            else {
+                return panic("value of 'onLoad' must be a Function with a single argument");
+            }
+        }
+        else if (value instanceof Inject.Attribute) {
+            value.addTarget(element, key);
+        }
+        else {
+            if (canWrite(element, key)) {
+                element[key] = value;
+            }
+            else {
+                element.setAttribute(key, String(value));
+            }
+        }
+    });
+};

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export * from "./types";
+export * from "./create-element";
+export * from "./inject";
+export * from "./routes";
+export * from "./std/Await";
+export * from "./std/Frag";
+export * from "./std/Group";
+export * from "./std/Hotspot";
+export * from "./std/LocalLink";
+export * from "./std/Router";
+export * from "./std/Preloader";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AASA,cAAc,SAAS,CAAA;AACvB,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,aAAa,CAAA;AAC3B,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,iBAAiB,CAAA"}

package/dist/index.js

@@ -0,0 +1,19 @@
+const key = Symbol.for("@openDAW/lib-jsx");
+if (globalThis[key]) {
+    console.debug(`%c${key.description}%c is already available in ${globalThis.constructor.name}.`, "color: hsl(10, 83%, 60%)", "color: inherit");
+}
+else {
+    globalThis[key] = true;
+    console.debug(`%c${key.description}%c is now available in ${globalThis.constructor.name}.`, "color: hsl(200, 83%, 60%)", "color: inherit");
+}
+export * from "./types";
+export * from "./create-element";
+export * from "./inject";
+export * from "./routes";
+export * from "./std/Await";
+export * from "./std/Frag";
+export * from "./std/Group";
+export * from "./std/Hotspot";
+export * from "./std/LocalLink";
+export * from "./std/Router";
+export * from "./std/Preloader";

package/dist/inject.d.ts

@@ -0,0 +1,45 @@
+import { Stringifiable, Terminable } from "@opendaw/lib-std";
+export declare namespace Inject {
+    export const ref: <T>() => Ref<T>;
+    export const value: <T extends Stringifiable>(initialValue: T) => Value<T>;
+    export const classList: (...initialClassNames: Array<string>) => ClassList;
+    export const attribute: (initialAttributeValue: string) => Attribute;
+    interface Injector<T> extends Terminable {
+        addTarget(target: T, ...args: Array<unknown>): void;
+    }
+    export class Ref<T> implements Injector<T> {
+        #private;
+        get(): T;
+        addTarget(target: T): void;
+        hasTarget(): boolean;
+        terminate(): void;
+    }
+    export class Value<T extends Stringifiable = Stringifiable> implements Injector<Text> {
+        #private;
+        constructor(value: T);
+        get value(): T;
+        set value(value: T);
+        addTarget(text: Text): void;
+        terminate(): void;
+    }
+    export class ClassList implements Injector<Element> {
+        #private;
+        constructor(classes: Array<string>);
+        add(className: string): void;
+        remove(className: string): void;
+        toggle(className: string, force?: boolean): void;
+        addTarget(target: Element): void;
+        terminate(): void;
+    }
+    export class Attribute implements Injector<Element> {
+        #private;
+        constructor(value: string);
+        get value(): string;
+        set value(value: string);
+        toggle(expected: string, alternative: string): void;
+        addTarget(target: Element, key: string): void;
+        terminate(): void;
+    }
+    export {};
+}
+//# sourceMappingURL=inject.d.ts.map

package/dist/inject.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inject.d.ts","sourceRoot":"","sources":["../src/inject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,aAAa,EAAE,UAAU,EAAC,MAAM,kBAAkB,CAAA;AAG7E,yBAAiB,MAAM,CAAC;IACpB,MAAM,CAAC,MAAM,GAAG,GAAI,CAAC,aAAmB,CAAA;IACxC,MAAM,CAAC,MAAM,KAAK,GAAI,CAAC,SAAS,aAAa,EAAE,cAAc,CAAC,aAA+B,CAAA;IAC7F,MAAM,CAAC,MAAM,SAAS,GAAI,GAAG,mBAAmB,KAAK,CAAC,MAAM,CAAC,cAAqC,CAAA;IAClG,MAAM,CAAC,MAAM,SAAS,GAAI,uBAAuB,MAAM,cAAyC,CAAA;IAEhG,UAAU,QAAQ,CAAC,CAAC,CAAE,SAAQ,UAAU;QAAE,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,CAAA;KAAC;IAE9F,MAAM,OAAO,GAAG,CAAC,CAAC,CAAE,YAAW,QAAQ,CAAC,CAAC,CAAC;;QAEtC,GAAG,IAAI,CAAC;QACR,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,IAAI;QAC1B,SAAS,IAAI,OAAO;QACpB,SAAS,IAAI,IAAI;KACpB;IAED,MAAM,OAAO,KAAK,CAAC,CAAC,SAAS,aAAa,GAAG,aAAa,CAAE,YAAW,QAAQ,CAAC,IAAI,CAAC;;oBAKrE,KAAK,EAAE,CAAC;QAEpB,IAAI,KAAK,IAAI,CAAC,CAAqB;QACnC,IAAI,KAAK,CAAC,KAAK,EAAE,CAAC,EAIjB;QACD,SAAS,CAAC,IAAI,EAAE,IAAI,GAAG,IAAI;QAC3B,SAAS,IAAI,IAAI;KACpB;IAED,MAAM,OAAO,SAAU,YAAW,QAAQ,CAAC,OAAO,CAAC;;oBAInC,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC;QAKlC,GAAG,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;QAK5B,MAAM,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI;QAK/B,MAAM,CAAC,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,GAAG,IAAI;QAiBhD,SAAS,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;QAKhC,SAAS,IAAI,IAAI;KAMpB;IAED,MAAM,OAAO,SAAU,YAAW,QAAQ,CAAC,OAAO,CAAC;;oBAMnC,KAAK,EAAE,MAAM;QAMzB,IAAI,KAAK,IAAI,MAAM,CAAqB;QACxC,IAAI,KAAK,CAAC,KAAK,EAAE,MAAM,EAItB;QAED,MAAM,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,IAAI;QAInD,SAAS,CAAC,MAAM,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;QAM7C,SAAS,IAAI,IAAI;KAUpB;;CACJ"}

package/dist/inject.js

@@ -0,0 +1,111 @@
+import { isDefined, Option } from "@opendaw/lib-std";
+import { WeakRefSet } from "./weak";
+export var Inject;
+(function (Inject) {
+    Inject.ref = () => new Ref();
+    Inject.value = (initialValue) => new Value(initialValue);
+    Inject.classList = (...initialClassNames) => new ClassList(initialClassNames);
+    Inject.attribute = (initialAttributeValue) => new Attribute(initialAttributeValue);
+    class Ref {
+        #target = Option.None;
+        get() { return this.#target.unwrap("No target provided"); }
+        addTarget(target) { this.#target = Option.wrap(target); }
+        hasTarget() { return this.#target.nonEmpty(); }
+        terminate() { this.#target = Option.None; }
+    }
+    Inject.Ref = Ref;
+    class Value {
+        #targets = new WeakRefSet();
+        #value;
+        constructor(value) { this.#value = value; }
+        get value() { return this.#value; }
+        set value(value) {
+            if (this.#value === value) {
+                return;
+            }
+            this.#value = value;
+            this.#targets.forEach(text => { text.nodeValue = String(value); });
+        }
+        addTarget(text) { this.#targets.add(text); }
+        terminate() { this.#targets.clear(); }
+    }
+    Inject.Value = Value;
+    class ClassList {
+        #targets;
+        #classes;
+        constructor(classes) {
+            this.#targets = new WeakRefSet();
+            this.#classes = new Set(classes);
+        }
+        add(className) {
+            this.#classes.add(className);
+            this.#updateElements();
+        }
+        remove(className) {
+            this.#classes.delete(className);
+            this.#updateElements();
+        }
+        toggle(className, force) {
+            if (isDefined(force)) {
+                if (force) {
+                    this.#classes.add(className);
+                }
+                else {
+                    this.#classes.delete(className);
+                }
+            }
+            else {
+                if (this.#classes.has(className)) {
+                    this.#classes.delete(className);
+                }
+                else {
+                    this.#classes.add(className);
+                }
+            }
+            this.#updateElements();
+        }
+        addTarget(target) {
+            this.#targets.add(target);
+            this.#updateElement(target);
+        }
+        terminate() { this.#targets.clear(); }
+        #updateElements() { this.#targets.forEach(this.#updateElement); }
+        #updateElement = (element) => { element.className = Array.from(this.#classes).join(" "); };
+    }
+    Inject.ClassList = ClassList;
+    class Attribute {
+        #targets;
+        #keys;
+        #value;
+        constructor(value) {
+            this.#targets = new WeakRefSet();
+            this.#keys = new WeakMap();
+            this.#value = value;
+        }
+        get value() { return this.#value; }
+        set value(value) {
+            if (this.#value === value) {
+                return;
+            }
+            this.#value = value;
+            this.#updateElements();
+        }
+        toggle(expected, alternative) {
+            this.value = this.value === expected ? alternative : expected;
+        }
+        addTarget(target, key) {
+            this.#targets.add(target);
+            this.#keys.set(target, key);
+            this.#updateElement(target);
+        }
+        terminate() { this.#targets.clear(); }
+        #updateElements() { this.#targets.forEach(this.#updateElement); }
+        #updateElement = (element) => {
+            const key = this.#keys.get(element);
+            if (key !== undefined) {
+                element.setAttribute(key, this.#value);
+            }
+        };
+    }
+    Inject.Attribute = Attribute;
+})(Inject || (Inject = {}));

package/dist/routes.d.ts

@@ -0,0 +1,20 @@
+import { Observer, Option, Subscription } from "@opendaw/lib-std";
+export declare class RouteLocation {
+    #private;
+    static get(): RouteLocation;
+    private constructor();
+    navigateTo(path: string): boolean;
+    catchupAndSubscribe(observer: Observer<RouteLocation>): Subscription;
+    get path(): string;
+}
+export type Route = {
+    path: string;
+};
+export declare class RouteMatcher<R extends Route> {
+    #private;
+    static create<R extends Route>(routes: ReadonlyArray<R>): RouteMatcher<R>;
+    static match(route: string, path: string): boolean;
+    private constructor();
+    resolve(path: string): Option<R>;
+}
+//# sourceMappingURL=routes.d.ts.map

package/dist/routes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAE1F,qBAAa,aAAa;;IAEtB,MAAM,CAAC,GAAG,IAAI,aAAa;IAI3B,OAAO;IAKP,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAUjC,mBAAmB,CAAC,QAAQ,EAAE,QAAQ,CAAC,aAAa,CAAC,GAAG,YAAY;IAKpE,IAAI,IAAI,IAAI,MAAM,CAA2B;CAchD;AAED,MAAM,MAAM,KAAK,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAEpC,qBAAa,YAAY,CAAC,CAAC,SAAS,KAAK;;IACrC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,KAAK,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC;IAIzE,MAAM,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO;IAmBlD,OAAO;IAYP,OAAO,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,CAAC;CAGnC"}

package/dist/routes.js

@@ -0,0 +1,87 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+import { isDefined, Lazy, Notifier, Option } from "@opendaw/lib-std";
+export class RouteLocation {
+    static get() { return new RouteLocation(); }
+    #notifier = new Notifier();
+    constructor() {
+        window.addEventListener("popstate", () => this.#notifier.notify(this));
+        this.#setCanonical();
+    }
+    navigateTo(path) {
+        if (this.path === path) {
+            return false;
+        }
+        history.pushState(null, "", path);
+        this.#setCanonical();
+        this.#notifier.notify(this);
+        return true;
+    }
+    catchupAndSubscribe(observer) {
+        observer(this);
+        return this.#notifier.subscribe(observer);
+    }
+    get path() { return location.pathname; }
+    #setCanonical() {
+        const url = location.href;
+        let link = document.querySelector("link[rel=\"canonical\"]");
+        if (isDefined(link)) {
+            link.setAttribute("href", url);
+        }
+        else {
+            link = document.createElement("link");
+            link.setAttribute("rel", "canonical");
+            link.setAttribute("href", url);
+            document.head.appendChild(link);
+        }
+    }
+}
+__decorate([
+    Lazy,
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", RouteLocation)
+], RouteLocation, "get", null);
+export class RouteMatcher {
+    static create(routes) {
+        return new RouteMatcher(routes);
+    }
+    static match(route, path) {
+        if (!path.startsWith("/") || !route.startsWith("/")) {
+            return false;
+        }
+        const routeSegments = route.split("/");
+        const pathSegments = path.split("/");
+        for (let i = 1; i < pathSegments.length; i++) {
+            if (routeSegments[i] === "*") {
+                return true;
+            }
+            if (pathSegments[i] !== routeSegments[i]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    #routes;
+    constructor(routes) {
+        this.#routes = routes.toSorted((a, b) => {
+            if (a.path < b.path) {
+                return -1;
+            }
+            if (a.path > b.path) {
+                return 1;
+            }
+            return 0;
+        });
+    }
+    resolve(path) {
+        return Option.wrap(this.#routes.find(route => RouteMatcher.match(route.path, path)));
+    }
+}

package/dist/std/Await.d.ts

@@ -0,0 +1,13 @@
+import { Exec, Func, Provider } from "@opendaw/lib-std";
+import { DomElement, JsxValue } from "../types";
+export type AwaitProps<T> = {
+    factory: Provider<Promise<T>>;
+    loading: Provider<JsxValue>;
+    success: Func<T, JsxValue>;
+    failure: Func<{
+        reason: any;
+        retry: Exec;
+    }, JsxValue>;
+};
+export declare const Await: <T>({ factory, loading, success, failure }: AwaitProps<T>) => DomElement;
+//# sourceMappingURL=Await.d.ts.map

package/dist/std/Await.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Await.d.ts","sourceRoot":"","sources":["../../src/std/Await.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAErD,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAA;AAE7C,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;IACxB,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,OAAO,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAC5B,OAAO,EAAE,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC3B,OAAO,EAAE,IAAI,CAAC;QAAE,MAAM,EAAE,GAAG,CAAC;QAAC,KAAK,EAAE,IAAI,CAAA;KAAE,EAAE,QAAQ,CAAC,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,CAAC,EAAI,wCAAsC,UAAU,CAAC,CAAC,CAAC,eAU7E,CAAA"}

package/dist/std/Await.js

@@ -0,0 +1,10 @@
+import { createElement, replaceChildren } from "../create-element";
+export const Await = ({ factory, loading, success, failure }) => {
+    const contents = createElement("div", { style: { display: "contents" } });
+    const start = () => {
+        replaceChildren(contents, loading());
+        factory().then(result => replaceChildren(contents, success(result)), reason => replaceChildren(contents, failure({ reason, retry: () => start() })));
+    };
+    start();
+    return contents;
+};

package/dist/std/Frag.d.ts

@@ -0,0 +1,3 @@
+import { JsxValue } from "../types";
+export declare const Frag: (_: unknown, children: ReadonlyArray<JsxValue>) => readonly JsxValue[];
+//# sourceMappingURL=Frag.d.ts.map

package/dist/std/Frag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frag.d.ts","sourceRoot":"","sources":["../../src/std/Frag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAA;AAGjC,eAAO,MAAM,IAAI,GAAI,GAAG,OAAO,EAAE,UAAU,aAAa,CAAC,QAAQ,CAAC,wBAAa,CAAA"}

package/dist/std/Frag.js

@@ -0,0 +1,2 @@
+// will not generate its own element, similar to React's empty tags </>
+export const Frag = (_, children) => children;

package/dist/std/Group.d.ts

@@ -0,0 +1,3 @@
+import { JsxValue } from "../types";
+export declare const Group: (_: unknown, children: ReadonlyArray<JsxValue>) => any;
+//# sourceMappingURL=Group.d.ts.map

package/dist/std/Group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../src/std/Group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAA;AAGjC,eAAO,MAAM,KAAK,GAAI,GAAG,OAAO,EAAE,UAAU,aAAa,CAAC,QAAQ,CAAC,QAElE,CAAA"}

package/dist/std/Group.js

@@ -0,0 +1,2 @@
+import { createElement } from "../create-element";
+export const Group = (_, children) => (createElement("div", { style: { display: "contents" } }, children));

package/dist/std/Hotspot.d.ts

@@ -0,0 +1,12 @@
+import { Exec, Provider } from "@opendaw/lib-std";
+import { DomElement, JsxValue } from "../types";
+import { Inject } from "../inject";
+export type HotspotUpdater = {
+    update: Exec;
+};
+export type HotSpotProps = {
+    render: Provider<JsxValue>;
+    ref: Inject.Ref<HotspotUpdater>;
+};
+export declare const Hotspot: ({ render, ref }: HotSpotProps) => DomElement;
+//# sourceMappingURL=Hotspot.d.ts.map

package/dist/std/Hotspot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hotspot.d.ts","sourceRoot":"","sources":["../../src/std/Hotspot.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAC,MAAM,kBAAkB,CAAA;AAE/C,OAAO,EAAC,UAAU,EAAE,QAAQ,EAAC,MAAM,UAAU,CAAA;AAC7C,OAAO,EAAC,MAAM,EAAC,MAAM,WAAW,CAAA;AAEhC,MAAM,MAAM,cAAc,GAAG;IAAE,MAAM,EAAE,IAAI,CAAA;CAAE,CAAA;AAC7C,MAAM,MAAM,YAAY,GAAG;IAAE,MAAM,EAAE,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;CAAE,CAAA;AAE1F,eAAO,MAAM,OAAO,GAAI,iBAAe,YAAY,eAKlD,CAAA"}

package/dist/std/Hotspot.js

@@ -0,0 +1,7 @@
+import { createElement, replaceChildren } from "../create-element";
+export const Hotspot = ({ render, ref }) => {
+    const contents = createElement("div", { style: { display: "contents" } });
+    replaceChildren(contents, render());
+    ref.addTarget({ update: () => replaceChildren(contents, render()) });
+    return contents;
+};

package/dist/std/LocalLink.d.ts

@@ -0,0 +1,4 @@
+export declare const LocalLink: ({ href }: {
+    href: string;
+}) => HTMLAnchorElement;
+//# sourceMappingURL=LocalLink.d.ts.map

package/dist/std/LocalLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LocalLink.d.ts","sourceRoot":"","sources":["../../src/std/LocalLink.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,GAAI,UAAQ;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,sBAQgD,CAAA"}

package/dist/std/LocalLink.js

@@ -0,0 +1,8 @@
+import { TerminatorUtils } from "@opendaw/lib-dom";
+import { createElement } from "../create-element";
+import { RouteLocation, RouteMatcher } from "../routes";
+export const LocalLink = ({ href }) => TerminatorUtils
+    .watchWeak(createElement("a", { href: href, onclick: (event) => {
+        event.preventDefault();
+        RouteLocation.get().navigateTo(href);
+    }, link: true }), weakRef => RouteLocation.get().catchupAndSubscribe(location => weakRef.deref()?.classList.toggle("active", RouteMatcher.match(location.path, href))));

package/dist/std/Preloader.d.ts

@@ -0,0 +1,5 @@
+import { Terminable } from "@opendaw/lib-std";
+export declare const Preloader: ({ color }: {
+    color?: string;
+}) => Terminable;
+//# sourceMappingURL=Preloader.d.ts.map

package/dist/std/Preloader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Preloader.d.ts","sourceRoot":"","sources":["../../src/std/Preloader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAC,MAAM,kBAAkB,CAAA;AAqB3C,eAAO,MAAM,SAAS,GAAI,WAAS;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,KAAG,UAIvD,CAAA"}

package/dist/std/Preloader.js

@@ -0,0 +1,23 @@
+import { Html } from "@opendaw/lib-dom";
+import { createElement } from "../create-element";
+const className = Html.adoptStyleSheet(`
+@keyframes fill {
+  from {width: 5%;}
+  to {width: 95%;}
+}
+
+component {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 5%;
+    height: 2px;
+    animation: fill 3s ease-in-out forwards;
+    z-index: 999999;
+}
+`, "__preloader__");
+export const Preloader = ({ color }) => {
+    const element = createElement("div", { className: className, style: { backgroundColor: color ?? "orange" } });
+    document.body.appendChild(element);
+    return { terminate: () => element.remove() };
+};

package/dist/std/Router.d.ts

@@ -0,0 +1,23 @@
+import { Exec, Provider, Terminable, TerminableOwner } from "@opendaw/lib-std";
+import { JsxValue } from "../types";
+export type PageContext<SERVICE = never> = {
+    service: SERVICE;
+    lifecycle: TerminableOwner;
+    path: string;
+    error: string;
+};
+export type PageFactory<SERVICE = never> = (context: PageContext<SERVICE>) => JsxValue | Promise<JsxValue>;
+export type RouterConstruct<SERVICE = never> = {
+    runtime: TerminableOwner;
+    service: SERVICE;
+    routes: Array<{
+        path: string;
+        factory: PageFactory<SERVICE>;
+    }>;
+    fallback: PageFactory<SERVICE>;
+    error?: PageFactory<SERVICE>;
+    preloader?: Provider<Terminable>;
+    onshow?: Exec;
+};
+export declare const Router: <SERVICE = never>({ runtime, service, routes, fallback, preloader, error, onshow }: RouterConstruct<SERVICE>) => HTMLDivElement;
+//# sourceMappingURL=Router.d.ts.map

package/dist/std/Router.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Router.d.ts","sourceRoot":"","sources":["../../src/std/Router.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAqB,QAAQ,EAAe,UAAU,EAAE,eAAe,EAAa,MAAM,kBAAkB,CAAA;AACxH,OAAO,EAAC,QAAQ,EAAC,MAAM,UAAU,CAAA;AAGjC,MAAM,MAAM,WAAW,CAAC,OAAO,GAAG,KAAK,IAAI;IACvC,OAAO,EAAE,OAAO,CAAA;IAChB,SAAS,EAAE,eAAe,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,MAAM,MAAM,WAAW,CAAC,OAAO,GAAG,KAAK,IAAI,CAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,KAAK,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAA;AAE1G,MAAM,MAAM,eAAe,CAAC,OAAO,GAAG,KAAK,IAAI;IAC3C,OAAO,EAAE,eAAe,CAAA;IACxB,OAAO,EAAE,OAAO,CAAA;IAChB,MAAM,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;KAAE,CAAC,CAAA;IAC9D,QAAQ,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;IAC5B,SAAS,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC,CAAA;IAChC,MAAM,CAAC,EAAE,IAAI,CAAA;CAChB,CAAA;AAUD,eAAO,MAAM,MAAM,GAAI,OAAO,GAAG,KAAK,EAAE,kEAQG,eAAe,CAAC,OAAO,CAAC,mBAqElE,CAAA"}

package/dist/std/Router.js

@@ -0,0 +1,73 @@
+import { createElement, replaceChildren } from "../create-element";
+import { isDefined, Option, safeExecute, Terminator } from "@opendaw/lib-std";
+import { RouteLocation, RouteMatcher } from "../routes";
+export const Router = ({ runtime, service, routes, fallback, preloader, error, onshow }) => {
+    const routing = RouteMatcher.create(routes);
+    const resolvePageFactory = (path) => routing
+        .resolve(path)
+        .mapOr(route => route.factory, () => fallback);
+    const container = createElement("div", { style: { display: "contents" } });
+    let loading = Option.None;
+    let showing = Option.None;
+    const fetchPage = async (pageFactory, path) => {
+        if (loading.nonEmpty()) {
+            const request = loading.unwrap();
+            request.preloader.ifSome(lifecycle => lifecycle.terminate());
+            request.state = "cancelled";
+            loading = Option.None;
+        }
+        const lifecycle = new Terminator();
+        const pageResult = pageFactory({
+            service,
+            lifecycle,
+            path,
+            error: ""
+        });
+        const content = pageResult instanceof Promise ? pageResult : Promise.resolve(pageResult);
+        const request = {
+            path,
+            content,
+            lifecycle,
+            preloader: Option.wrap(safeExecute(preloader)),
+            state: "loading"
+        };
+        loading = Option.wrap(request);
+        let element;
+        try {
+            element = await content;
+        }
+        catch (reason) {
+            console.warn(reason);
+            if (isDefined(error)) {
+                return fetchPage(error, path);
+            }
+            else {
+                alert(`Could not load page (${reason})`);
+            }
+        }
+        if (request.state === "cancelled") {
+            request.lifecycle.terminate();
+        }
+        else if (request.path === path) {
+            if (showing.nonEmpty()) {
+                showing.unwrap().lifecycle.terminate();
+                showing = Option.None;
+            }
+            if (loading.nonEmpty()) {
+                loading.unwrap().preloader.ifSome(lifecycle => lifecycle.terminate());
+                loading = Option.None;
+            }
+            replaceChildren(container, element);
+            showing = Option.wrap(request);
+            safeExecute(onshow);
+        }
+    };
+    runtime.own(RouteLocation.get()
+        .catchupAndSubscribe((location) => {
+        if (showing.unwrapOrNull()?.path === location.path) {
+            return;
+        }
+        return fetchPage(resolvePageFactory(location.path), location.path);
+    }));
+    return container;
+};

package/dist/supported-svg-tags.d.ts

@@ -0,0 +1,2 @@
+export declare const SupportedSvgTags: Set<string>;
+//# sourceMappingURL=supported-svg-tags.d.ts.map

package/dist/supported-svg-tags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"supported-svg-tags.d.ts","sourceRoot":"","sources":["../src/supported-svg-tags.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,aA+F3B,CAAA"}

package/dist/supported-svg-tags.js

@@ -0,0 +1,98 @@
+// We cannot support tags that are used in html as well.
+// TSX builds its DOM from the bottom up, meaning you have no information about the scope (html or svg).
+export const SupportedSvgTags = new Set([
+    // "a",
+    "altGlyph",
+    "altGlyphDef",
+    "altGlyphItem",
+    "animate",
+    "animateColor",
+    "animateMotion",
+    "animateTransform",
+    "animation",
+    // "audio",
+    // "canvas",
+    "circle",
+    "clipPath",
+    "color-profile",
+    "cursor",
+    "defs",
+    "desc",
+    "discard",
+    "ellipse",
+    "feBlend",
+    "feColorMatrix",
+    "feComponentTransfer",
+    "feComposite",
+    "feConvolveMatrix",
+    "feDiffuseLighting",
+    "feDisplacementMap",
+    "feDistantLight",
+    "feDropShadow",
+    "feFlood",
+    "feFuncA",
+    "feFuncB",
+    "feFuncG",
+    "feFuncR",
+    "feGaussianBlur",
+    "feImage",
+    "feMerge",
+    "feMergeNode",
+    "feMorphology",
+    "feOffset",
+    "fePointLight",
+    "feSpecularLighting",
+    "feSpotLight",
+    "feTile",
+    "feTurbulence",
+    "filter",
+    "font",
+    "font-face",
+    "font-face-format",
+    "font-face-name",
+    "font-face-src",
+    "font-face-uri",
+    "foreignObject",
+    "g",
+    "glyph",
+    "glyphRef",
+    "handler",
+    "hkern",
+    // "iframe",
+    "image",
+    "line",
+    "linearGradient",
+    "listener",
+    "marker",
+    "mask",
+    "metadata",
+    "missing-glyph",
+    "mpath",
+    "path",
+    "pattern",
+    "polygon",
+    "polyline",
+    "prefetch",
+    "radialGradient",
+    "rect",
+    "script",
+    "set",
+    "solidColor",
+    "stop",
+    // "style",
+    "svg",
+    "switch",
+    "symbol",
+    "tbreak",
+    "text",
+    // "textArea",
+    "textPath",
+    "title",
+    "tref",
+    "tspan",
+    "unknown",
+    "use",
+    // "video",
+    "view",
+    "vkern"
+]);

package/dist/types.d.ts

@@ -0,0 +1,27 @@
+import { Procedure } from "@opendaw/lib-std";
+import { Inject } from "./inject";
+export type DomElement = HTMLElement | SVGElement;
+export type JsxValue = null | undefined | boolean | string | number | DomElement | Array<JsxValue>;
+type AttributeMap = {
+    className?: string | Inject.ClassList;
+    style?: Partial<CSSStyleDeclaration>;
+};
+type ExtractProperties<T extends Element> = Partial<{
+    [K in keyof T]: K extends keyof AttributeMap ? AttributeMap[K] : K extends keyof GlobalEventHandlers ? GlobalEventHandlers[K] : T[K] extends Function ? never : (T[K] extends SVGAnimatedBoolean ? boolean | string : T[K] extends SVGAnimatedAngle ? number | string : T[K] extends SVGAnimatedLength ? number | string : T[K] extends number ? number | string : T[K] extends boolean ? boolean | string : string) | Inject.Attribute;
+}> & {
+    ref?: Inject.Ref<T>;
+    onLoad?: Procedure<T>;
+} & Record<string, unknown>;
+declare global {
+    namespace JSX {
+        type IntrinsicElements = {
+            [K in keyof Omit<SVGElementTagNameMap, "a">]: ExtractProperties<Omit<SVGElementTagNameMap, "a">[K]>;
+        } & {
+            [K in keyof Omit<HTMLElementTagNameMap, "a">]: ExtractProperties<Omit<HTMLElementTagNameMap, "a">[K]>;
+        } & {
+            a: any;
+        };
+    }
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,kBAAkB,CAAA;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAA;AAE/B,MAAM,MAAM,UAAU,GAAG,WAAW,GAAG,UAAU,CAAA;AACjD,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAA;AAIlG,KAAK,YAAY,GAAG;IAChB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,SAAS,CAAA;IACrC,KAAK,CAAC,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAA;CACvC,CAAA;AAED,KAAK,iBAAiB,CAAC,CAAC,SAAS,OAAO,IAAI,OAAO,CAAC;KAC/C,CAAC,IAAI,MAAM,CAAC,GACb,CAAC,SAAS,MAAM,YAAY,GAAG,YAAY,CAAC,CAAC,CAAC,GAC1C,CAAC,SAAS,MAAM,mBAAmB,GAAG,mBAAmB,CAAC,CAAC,CAAC,GACxD,CAAC,CAAC,CAAC,CAAC,SAAS,QAAQ,GAAG,KAAK,GACzB,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAC/C,CAAC,CAAC,CAAC,CAAC,SAAS,gBAAgB,GAAG,MAAM,GAAG,MAAM,GAC3C,CAAC,CAAC,CAAC,CAAC,SAAS,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAC5C,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,GACjC,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,OAAO,GAAG,MAAM,GACnC,MAAM,CAAC,GAAG,MAAM,CAAC,SAAS;CAC7D,CAAC,GAAG;IACD,GAAG,CAAC,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAA;CACxB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3B,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,GAAG,CAAC;QAEV,KAAK,iBAAiB,GAChB;aAAG,CAAC,IAAI,MAAM,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,oBAAoB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAAE,GACvG;aAAG,CAAC,IAAI,MAAM,IAAI,CAAC,qBAAqB,EAAE,GAAG,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,qBAAqB,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;SAAE,GAEzG;YAAE,CAAC,EAAE,GAAG,CAAA;SAAE,CAAA;KACnB;CACJ"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/weak.d.ts

@@ -0,0 +1,7 @@
+export declare class WeakRefSet<T extends WeakKey> {
+    #private;
+    add(value: T): void;
+    forEach(callback: (value: T) => void): void;
+    clear(): void;
+}
+//# sourceMappingURL=weak.d.ts.map

package/dist/weak.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"weak.d.ts","sourceRoot":"","sources":["../src/weak.ts"],"names":[],"mappings":"AAAA,qBAAa,UAAU,CAAC,CAAC,SAAS,OAAO;;IAGrC,GAAG,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI;IAEnB,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,IAAI;IAW3C,KAAK,IAAI,IAAI;CAChB"}

package/dist/weak.js

@@ -0,0 +1,16 @@
+export class WeakRefSet {
+    #set = new Set();
+    add(value) { this.#set.add(new WeakRef(value)); }
+    forEach(callback) {
+        for (const weakRef of this.#set) {
+            const value = weakRef.deref();
+            if (value === undefined) {
+                this.#set.delete(weakRef);
+            }
+            else {
+                callback(value);
+            }
+        }
+    }
+    clear() { this.#set.clear(); }
+}

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@opendaw/lib-jsx",
+  "version": "0.0.6",
+  "license": "LGPL-3.0-or-later",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist/**/*"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "lint": "eslint \"**/*.ts\"",
+    "test": "echo \"No tests to run\""
+  },
+  "dependencies": {
+    "@opendaw/lib-dom": "^0.0.6",
+    "@opendaw/lib-std": "^0.0.6"
+  },
+  "devDependencies": {
+    "@opendaw/eslint-config": "^0.0.6",
+    "@opendaw/typescript-config": "^0.0.6"
+  },
+  "gitHead": "04e5363a9851c7e116a306c2e933c5f410980fbe"
+}