jmx-runtime 0.0.14 → 0.0.16

package/base.ts

@@ -0,0 +1,25 @@
+export function rebind(o: Record<string, any>) {
+    Object.entries(Object.getOwnPropertyDescriptors(Object.getPrototypeOf(o)))
+        .filter(([name, p]) => name != 'constructor' && p.value instanceof Function)
+        .forEach(([name]) => o[name] = o[name].bind(o))
+    return o
+}
+
+export function mount(o: Record<string, any>) { Object.assign(globalThis, o) }
+
+export const loggedmethodsex = <T extends Record<string, any>>(o: T, logger: (name: string, args: any[], result: any) => void) => new Proxy(o, {
+    get(target, name: string, receiver) {
+        if (typeof target[name] === "function") {
+            return function (this: T, ...args: any[]) {
+
+                logger(name, args, undefined)
+                let r = target[name].apply(this, args)
+                return r
+            }
+        }
+        return Reflect.get(target, name, receiver)
+    },
+})
+
+export const loggedmethods = <T extends Record<string, any>>(o: T ): T => loggedmethodsex(o, (name, args, result) => console.log("%c" + name, "background:#585059;color:white;padding:2px;font-weight:bold", args))
+export const loggedmethodscolored = <T extends Record<string, any>>(bgcolor: string, o: T ): T => loggedmethodsex(o, (name, args, result) => console.log("%c" + name, `background:${bgcolor};color:white;padding:2px;font-weight:bold`, args))

package/dist/jmx.js

@@ -54,7 +54,7 @@ function sync(p, i, h) {
         const props = evaluate(h.p);
         if (iselement(h)) {
             let n;
-            if (c?.tagName != h.tag) {
+            if (c?.tagName.toLowerCase() != h.tag.toLowerCase()) {
                 n = createElement(h.tag);
                 c ? c.replaceWith(n) : p.appendChild(n);
                 setprops(n, props);

package/dist/jmx.js.map

@@ -1 +1 @@
-{"version":3,"file":"jmx.js","sourceRoot":"./","sources":["jmx.ts"],"names":[],"mappings":"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","sourcesContent":["import { rebind } from './base'\r\nimport { Expr, FComponent, H, HComp, HCompClass, HElement, HFragment, IClassComponent, Props } from './h'\r\n\r\n// config\r\nexport function createElement(tag: string) {\r\n    let ns = window.jmx?.getnamespace?.(tag)\r\n    return ns ? document.createElementNS(ns, tag) : document.createElement(tag)\r\n}\r\n\r\nconst enum NodeType { // vaporizes (but for that must be in this file, otherwise not)\r\n    TextNode = 3,\r\n}\r\n\r\nlet evaluate = <T>(expr: Expr<T>): T => (expr instanceof Function ? expr() : expr)\r\nlet removeexcesschildren = (n: Element, i: number) => {\r\n    let c: ChildNode\r\n    while ((c = n.childNodes[i])) {\r\n        c.remove()\r\n    }\r\n}\r\nlet iswebcomponent = (h: HElement) => (h.tag as string).includes('-')\r\nlet isclasscomponent = (h: HComp): h is HCompClass => (h.tag as any)?.prototype?.view\r\nlet iselement = (h: any): h is HElement => typeof h.tag == 'string'\r\nlet isfragment = (h: any): h is HFragment => {\r\n    return h.tag == undefined && h.cn != undefined\r\n}\r\nlet isobject = (o: any): o is object => typeof o === 'object'\r\n\r\nlet isproperty = (name: string, value: any) =>\r\n    ['value', 'checked', 'disabled', 'className', 'style', 'href', 'src', 'selected', 'readOnly', 'tabIndex'].includes(\r\n        name\r\n    ) ||\r\n    value instanceof Object ||\r\n    value instanceof Function\r\n\r\nlet setprops = (e: Element, newprops: Props = {}) => {\r\n    let oldprops = evaluate(e.h?.p) ?? {}\r\n    for (let p in oldprops)\r\n        !(p in newprops) && isproperty(p, oldprops[p]) ? ((e as any)[p] = null) : e.removeAttribute(p)\r\n    for (let p in newprops) isproperty(p, newprops[p]) ? ((e as any)[p] = newprops[p]) : e.setAttribute(p, newprops[p])\r\n}\r\n\r\n/** syncs at position i of p. returns the number of the element past the last added element.\r\n * if no element was added (eg when h=null) then it returns i\r\n * if a fragment with 5 nodes was added, it returns i + 5\r\n * when a single element or component is added, it is i+1 since they always create exactly 1 node\r\n */\r\nfunction sync(p: Element, i: number, h: Expr<H | undefined>): number {\r\n    // console.log('%csync', \"background:orange\", p.tagName, i, h, 'html = ' + document.body.outerHTML)\r\n\r\n    h = evaluate(h)\r\n    if (h === null || h === undefined) return i // skip this element. not that !!h would forbid to render the number 0 or the boolean value false\r\n\r\n    let c = p.childNodes[i] // is often null, eg during fresh creation\r\n\r\n    function synctextnode(text: string) {\r\n        if (c && c.nodeType == NodeType.TextNode) {\r\n            if (c.textContent != text) c.textContent = text // firefox updates even equal text, loosing an existing text selection\r\n        } else {\r\n            let tn = document.createTextNode(text)\r\n            c ? c.replaceWith(tn) : p.appendChild(tn)\r\n        }\r\n    }\r\n\r\n    if (isobject(h)) {\r\n        // element nodes\r\n\r\n        /** synchronizes children starting at the i-th element. returns the index of the last child synchronized */\r\n        function syncchildren(p: Element, h: HElement | HComp | HFragment, i: number): number {\r\n            evaluate(h.cn)\r\n                ?.flat()\r\n                .forEach(hc => (i = sync(p, i, hc)))\r\n            return i\r\n        }\r\n\r\n        if (isfragment(h)) return syncchildren(p, h, i)\r\n\r\n        const props = evaluate(h.p)\r\n\r\n        if (iselement(h)) {\r\n            let n: Element\r\n\r\n            if ((<Element>c)?.tagName != h.tag) {\r\n                n = createElement(h.tag)\r\n                c ? c.replaceWith(n) : p.appendChild(n)\r\n                setprops(n, props)\r\n                props?.mounted?.(n)\r\n            } else {\r\n                n = c as Element\r\n                setprops(n, props)\r\n                if (props?.update?.(c, globaluc)) return i + 1\r\n            }\r\n\r\n            // if only components shall be updateable (advantage: close variables inside component functions are always fresh materialized, avoids surprises), comment this out\r\n            n.h = h\r\n\r\n            if (!globaluc.patchElementOnly && !iswebcomponent(h as HElement)) {\r\n                // tbd: make \"island\" attribute\r\n                const j = syncchildren(n, h, 0)\r\n                removeexcesschildren(n, j)\r\n            }\r\n            return i + 1\r\n        }\r\n\r\n        switch (typeof h.tag) {\r\n            case 'function':\r\n                let isupdate = c?.h?.tag == h.tag\r\n\r\n                let ci: IClassComponent | undefined\r\n\r\n                if (isclasscomponent(h)) {\r\n                    h.i = ci = (c?.h as HCompClass)?.i ?? rebind(new h.tag(props))\r\n                    ci.props = props\r\n\r\n                    // if component instance returns truthy for update(), then syncing is susbstituted by the component\r\n                    if (isupdate && ci.update(globaluc)) return i + 1\r\n                }\r\n\r\n                // materialize the component\r\n                // we run compoents view() and fun code often, we do not compare properties to avoid their computation\r\n                // this means that the inner hr (h resolved) is run often\r\n                let hr = ci?.view() ?? (h.tag as FComponent)(props, evaluate(h.cn))\r\n\r\n                // a component can return undefined or null if it has no elements to show\r\n                if (hr === undefined || hr == null) return i\r\n\r\n                let j = sync(p, i, hr)\r\n\r\n                let cn = p.childNodes[i]!\r\n                cn.h = h // attach h onto the materialized component node\r\n                // ;(cn as HTMLElement).setAttribute?.('comp', '')\r\n\r\n                if (ci) ci.element = cn\r\n                if (!isupdate) ci?.mounted?.()\r\n\r\n                return j\r\n\r\n            case 'object':\r\n                return sync(p, i, h.tag) // tbd: type of h is not correct, h.tag == never\r\n        }\r\n    }\r\n    // text nodes\r\n    synctextnode(h as string)\r\n    return i + 1\r\n}\r\n\r\nlet globaluc: IUpdateContext = {}\r\n\r\nexport function patch(e: Node | null, h: Expr<H>) {\r\n    if (!e) return\r\n    if (globaluc.replace) (e as HTMLElement).replaceChildren()\r\n    const p = e.parentElement as HTMLElement\r\n    const i = [].indexOf.call<any, any, any>(p.childNodes, e)\r\n    // always called deferred, because removing elements can trigger events and their handlers (like blur)\r\n    sync(p, i, h)\r\n}\r\n\r\n// Overload signatures\r\ntype Selector = string | Node | undefined | null\r\ntype Selectors = Selector[]\r\n\r\nexport function updateviewuc(uc: IUpdateContext, ...sels: Selectors): void {\r\n    {\r\n        globaluc = uc\r\n        updateviewinternal(...sels)\r\n    }\r\n}\r\nexport function updateview(...sels: Selectors): void {\r\n    {\r\n        globaluc = {}\r\n        updateviewinternal(...sels)\r\n    }\r\n}\r\n\r\nfunction updateviewinternal(...sels: Selector[]): void {\r\n    if (!sels.length) sels.push('body')\r\n    sels.flatMap(s => (typeof s == 'string' ? [...document.querySelectorAll(s)] : s ? [s] : [])).forEach(e => {\r\n        if (!e?.h) throw 'jmx: no h exists on the node'\r\n        patch(e, e.h)\r\n    })\r\n}\r\n"]}
+{"version":3,"file":"jmx.js","sourceRoot":"./","sources":["jmx.ts"],"names":[],"mappings":"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","sourcesContent":["import { rebind } from './base'\r\nimport { Expr, FComponent, H, HComp, HCompClass, HElement, HFragment, IClassComponent, Props } from './h'\r\n\r\n// config\r\nexport function createElement(tag: string) {\r\n    let ns = window.jmx?.getnamespace?.(tag)\r\n    return ns ? document.createElementNS(ns, tag) : document.createElement(tag)\r\n}\r\n\r\nconst enum NodeType { // vaporizes (but for that must be in this file, otherwise not)\r\n    TextNode = 3,\r\n}\r\n\r\nlet evaluate = <T>(expr: Expr<T>): T => (expr instanceof Function ? expr() : expr)\r\nlet removeexcesschildren = (n: Element, i: number) => {\r\n    let c: ChildNode\r\n    while ((c = n.childNodes[i])) {\r\n        c.remove()\r\n    }\r\n}\r\nlet iswebcomponent = (h: HElement) => (h.tag as string).includes('-')\r\nlet isclasscomponent = (h: HComp): h is HCompClass => (h.tag as any)?.prototype?.view\r\nlet iselement = (h: any): h is HElement => typeof h.tag == 'string'\r\nlet isfragment = (h: any): h is HFragment => {\r\n    return h.tag == undefined && h.cn != undefined\r\n}\r\nlet isobject = (o: any): o is object => typeof o === 'object'\r\n\r\nlet isproperty = (name: string, value: any) =>\r\n    ['value', 'checked', 'disabled', 'className', 'style', 'href', 'src', 'selected', 'readOnly', 'tabIndex'].includes(\r\n        name\r\n    ) ||\r\n    value instanceof Object ||\r\n    value instanceof Function\r\n\r\nlet setprops = (e: Element, newprops: Props = {}) => {\r\n    let oldprops = evaluate(e.h?.p) ?? {}\r\n    for (let p in oldprops)\r\n        !(p in newprops) && isproperty(p, oldprops[p]) ? ((e as any)[p] = null) : e.removeAttribute(p)\r\n    for (let p in newprops) isproperty(p, newprops[p]) ? ((e as any)[p] = newprops[p]) : e.setAttribute(p, newprops[p])\r\n}\r\n\r\n/** syncs at position i of p. returns the number of the element past the last added element.\r\n * if no element was added (eg when h=null) then it returns i\r\n * if a fragment with 5 nodes was added, it returns i + 5\r\n * when a single element or component is added, it is i+1 since they always create exactly 1 node\r\n */\r\nfunction sync(p: Element, i: number, h: Expr<H | undefined>): number {\r\n    // console.log('%csync', \"background:orange\", p.tagName, i, h, 'html = ' + document.body.outerHTML)\r\n\r\n    h = evaluate(h)\r\n    if (h === null || h === undefined) return i // skip this element. not that !!h would forbid to render the number 0 or the boolean value false\r\n\r\n    let c = p.childNodes[i] // is often null, eg during fresh creation\r\n\r\n    function synctextnode(text: string) {\r\n        if (c && c.nodeType == NodeType.TextNode) {\r\n            if (c.textContent != text) c.textContent = text // firefox updates even equal text, loosing an existing text selection\r\n        } else {\r\n            let tn = document.createTextNode(text)\r\n            c ? c.replaceWith(tn) : p.appendChild(tn)\r\n        }\r\n    }\r\n\r\n    if (isobject(h)) {\r\n        // element nodes\r\n\r\n        /** synchronizes children starting at the i-th element. returns the index of the last child synchronized */\r\n        function syncchildren(p: Element, h: HElement | HComp | HFragment, i: number): number {\r\n            evaluate(h.cn)\r\n                ?.flat()\r\n                .forEach(hc => (i = sync(p, i, hc)))\r\n            return i\r\n        }\r\n\r\n        if (isfragment(h)) return syncchildren(p, h, i)\r\n\r\n        const props = evaluate(h.p)\r\n\r\n        if (iselement(h)) {\r\n            let n: Element\r\n\r\n            if ((<Element>c)?.tagName.toLowerCase() != h.tag.toLowerCase()) {\r\n                n = createElement(h.tag)\r\n                c ? c.replaceWith(n) : p.appendChild(n)\r\n                setprops(n, props)\r\n                props?.mounted?.(n)\r\n            } else {\r\n                n = c as Element\r\n                setprops(n, props)\r\n                if (props?.update?.(c, globaluc)) return i + 1\r\n            }\r\n\r\n            // if only components shall be updateable (advantage: close variables inside component functions are always fresh materialized, avoids surprises), comment this out\r\n            n.h = h\r\n\r\n            if (!globaluc.patchElementOnly && !iswebcomponent(h as HElement)) {\r\n                // tbd: make \"island\" attribute\r\n                const j = syncchildren(n, h, 0)\r\n                removeexcesschildren(n, j)\r\n            }\r\n            return i + 1\r\n        }\r\n\r\n        switch (typeof h.tag) {\r\n            case 'function':\r\n                let isupdate = c?.h?.tag == h.tag\r\n\r\n                let ci: IClassComponent | undefined\r\n\r\n                if (isclasscomponent(h)) {\r\n                    h.i = ci = (c?.h as HCompClass)?.i ?? rebind(new h.tag(props))\r\n                    ci.props = props\r\n\r\n                    // if component instance returns truthy for update(), then syncing is susbstituted by the component\r\n                    if (isupdate && ci.update(globaluc)) return i + 1\r\n                }\r\n\r\n                // materialize the component\r\n                // we run compoents view() and fun code often, we do not compare properties to avoid their computation\r\n                // this means that the inner hr (h resolved) is run often\r\n                let hr = ci?.view() ?? (h.tag as FComponent)(props, evaluate(h.cn))\r\n\r\n                // a component can return undefined or null if it has no elements to show\r\n                if (hr === undefined || hr == null) return i\r\n\r\n                let j = sync(p, i, hr)\r\n\r\n                let cn = p.childNodes[i]!\r\n                cn.h = h // attach h onto the materialized component node\r\n                // ;(cn as HTMLElement).setAttribute?.('comp', '')\r\n\r\n                if (ci) ci.element = cn\r\n                if (!isupdate) ci?.mounted?.()\r\n\r\n                return j\r\n\r\n            case 'object':\r\n                return sync(p, i, h.tag) // tbd: type of h is not correct, h.tag == never\r\n        }\r\n    }\r\n    // text nodes\r\n    synctextnode(h as string)\r\n    return i + 1\r\n}\r\n\r\nlet globaluc: IUpdateContext = {}\r\n\r\nexport function patch(e: Node | null, h: Expr<H>) {\r\n    if (!e) return\r\n    if (globaluc.replace) (e as HTMLElement).replaceChildren()\r\n    const p = e.parentElement as HTMLElement\r\n    const i = [].indexOf.call<any, any, any>(p.childNodes, e)\r\n    // always called deferred, because removing elements can trigger events and their handlers (like blur)\r\n    sync(p, i, h)\r\n}\r\n\r\n// Overload signatures\r\ntype Selector = string | Node | undefined | null\r\ntype Selectors = Selector[]\r\n\r\nexport function updateviewuc(uc: IUpdateContext, ...sels: Selectors): void {\r\n    {\r\n        globaluc = uc\r\n        updateviewinternal(...sels)\r\n    }\r\n}\r\nexport function updateview(...sels: Selectors): void {\r\n    {\r\n        globaluc = {}\r\n        updateviewinternal(...sels)\r\n    }\r\n}\r\n\r\nfunction updateviewinternal(...sels: Selector[]): void {\r\n    if (!sels.length) sels.push('body')\r\n    sels.flatMap(s => (typeof s == 'string' ? [...document.querySelectorAll(s)] : s ? [s] : [])).forEach(e => {\r\n        if (!e?.h) throw 'jmx: no h exists on the node'\r\n        patch(e, e.h)\r\n    })\r\n}\r\n"]}

package/h.ts

@@ -0,0 +1,88 @@
+// jmx internal types - hopst
+// the following types describe the js expression we get from tsx after conversion be our jmx plugin
+// they can be useful for users as well, components might return them.
+
+type Func<T> = () => T
+export type Expr<T> = T | Func<T>
+
+export type Props = Record<string, any>
+
+export type FComponent = (props: Props | undefined, children?: ChildrenH) => HElement // show an example for usage of children
+
+export type FComponentT<P> = (pcn: P, cn?: Children) => H | void
+
+export interface IClassComponent {
+    element: Node
+    props?: Record<string, any>
+    view(): H
+    update(uc: IUpdateContext): boolean | void
+    mounted?(): void
+}
+
+interface CComponent {
+    new (props: any): IClassComponent // while a real component expresses its interface via props pass to the ctor, internally we assign props after construction with new()
+}
+
+export type ChildrenH = (H | undefined)[]
+export type Children = Expr<ChildrenH>
+
+type HText =
+    | string // text node
+    | number // text node
+    | boolean // do not allow boolean, that
+
+export type HFragment = {
+    cn: Children
+}
+
+export type HElement = {
+    tag: string
+    p?: Expr<Props>
+    cn: Children
+    i?: any
+}
+
+type HCompFun = {
+    tag: FComponent
+    p?: Expr<Props>
+    cn?: Children
+}
+
+export type HCompClass = {
+    tag: CComponent
+    p?: Expr<Props>
+    cn: Children
+    i: IClassComponent
+}
+
+export type HComp = HCompFun | HCompClass
+
+export type H = // a hyperscript atom that describes a ...
+
+        | HText
+        | HElement // a tag, like p, div with attributes and children
+        | HComp // a dynamic component computing any other HNode
+        | HFragment
+
+declare global {
+    interface Node {
+        h?: HElement | HCompFun | HCompClass
+    }
+    export interface IUpdateContext {
+        patchElementOnly?: boolean
+        replace?: boolean
+    }
+
+    export interface Window {
+        jmx?: {
+            getnamespace: (tag: string) => string | undefined
+        }
+    }
+}
+
+export function jsx(): HElement {
+    throw 'jmx plugin not configured'
+} // dumy function for app code - jmx-plugin removes calls to this function, minifyer then removes it
+export function jsxf(): HElement {
+    throw 'jmx plugin not configured'
+} // dumy function for app code - jmx-plugin removes calls to this function, minifyer then removes it

package/index.ts

@@ -0,0 +1,5 @@
+export * from './jmx';
+export * from './lib';
+export * from './base';
+export * from './h';
+export * from './jsx';

package/jmx.ts

@@ -0,0 +1,181 @@
+import { rebind } from './base'
+import { Expr, FComponent, H, HComp, HCompClass, HElement, HFragment, IClassComponent, Props } from './h'
+
+// config
+export function createElement(tag: string) {
+    let ns = window.jmx?.getnamespace?.(tag)
+    return ns ? document.createElementNS(ns, tag) : document.createElement(tag)
+}
+
+const enum NodeType { // vaporizes (but for that must be in this file, otherwise not)
+    TextNode = 3,
+}
+
+let evaluate = <T>(expr: Expr<T>): T => (expr instanceof Function ? expr() : expr)
+let removeexcesschildren = (n: Element, i: number) => {
+    let c: ChildNode
+    while ((c = n.childNodes[i])) {
+        c.remove()
+    }
+}
+let iswebcomponent = (h: HElement) => (h.tag as string).includes('-')
+let isclasscomponent = (h: HComp): h is HCompClass => (h.tag as any)?.prototype?.view
+let iselement = (h: any): h is HElement => typeof h.tag == 'string'
+let isfragment = (h: any): h is HFragment => {
+    return h.tag == undefined && h.cn != undefined
+}
+let isobject = (o: any): o is object => typeof o === 'object'
+
+let isproperty = (name: string, value: any) =>
+    ['value', 'checked', 'disabled', 'className', 'style', 'href', 'src', 'selected', 'readOnly', 'tabIndex'].includes(
+        name
+    ) ||
+    value instanceof Object ||
+    value instanceof Function
+
+let setprops = (e: Element, newprops: Props = {}) => {
+    let oldprops = evaluate(e.h?.p) ?? {}
+    for (let p in oldprops)
+        !(p in newprops) && isproperty(p, oldprops[p]) ? ((e as any)[p] = null) : e.removeAttribute(p)
+    for (let p in newprops) isproperty(p, newprops[p]) ? ((e as any)[p] = newprops[p]) : e.setAttribute(p, newprops[p])
+}
+
+/** syncs at position i of p. returns the number of the element past the last added element.
+ * if no element was added (eg when h=null) then it returns i
+ * if a fragment with 5 nodes was added, it returns i + 5
+ * when a single element or component is added, it is i+1 since they always create exactly 1 node
+ */
+function sync(p: Element, i: number, h: Expr<H | undefined>): number {
+    // console.log('%csync', "background:orange", p.tagName, i, h, 'html = ' + document.body.outerHTML)
+
+    h = evaluate(h)
+    if (h === null || h === undefined) return i // skip this element. not that !!h would forbid to render the number 0 or the boolean value false
+
+    let c = p.childNodes[i] // is often null, eg during fresh creation
+
+    function synctextnode(text: string) {
+        if (c && c.nodeType == NodeType.TextNode) {
+            if (c.textContent != text) c.textContent = text // firefox updates even equal text, loosing an existing text selection
+        } else {
+            let tn = document.createTextNode(text)
+            c ? c.replaceWith(tn) : p.appendChild(tn)
+        }
+    }
+
+    if (isobject(h)) {
+        // element nodes
+
+        /** synchronizes children starting at the i-th element. returns the index of the last child synchronized */
+        function syncchildren(p: Element, h: HElement | HComp | HFragment, i: number): number {
+            evaluate(h.cn)
+                ?.flat()
+                .forEach(hc => (i = sync(p, i, hc)))
+            return i
+        }
+
+        if (isfragment(h)) return syncchildren(p, h, i)
+
+        const props = evaluate(h.p)
+
+        if (iselement(h)) {
+            let n: Element
+
+            if ((<Element>c)?.tagName.toLowerCase() != h.tag.toLowerCase()) {
+                n = createElement(h.tag)
+                c ? c.replaceWith(n) : p.appendChild(n)
+                setprops(n, props)
+                props?.mounted?.(n)
+            } else {
+                n = c as Element
+                setprops(n, props)
+                if (props?.update?.(c, globaluc)) return i + 1
+            }
+
+            // if only components shall be updateable (advantage: close variables inside component functions are always fresh materialized, avoids surprises), comment this out
+            n.h = h
+
+            if (!globaluc.patchElementOnly && !iswebcomponent(h as HElement)) {
+                // tbd: make "island" attribute
+                const j = syncchildren(n, h, 0)
+                removeexcesschildren(n, j)
+            }
+            return i + 1
+        }
+
+        switch (typeof h.tag) {
+            case 'function':
+                let isupdate = c?.h?.tag == h.tag
+
+                let ci: IClassComponent | undefined
+
+                if (isclasscomponent(h)) {
+                    h.i = ci = (c?.h as HCompClass)?.i ?? rebind(new h.tag(props))
+                    ci.props = props
+
+                    // if component instance returns truthy for update(), then syncing is susbstituted by the component
+                    if (isupdate && ci.update(globaluc)) return i + 1
+                }
+
+                // materialize the component
+                // we run compoents view() and fun code often, we do not compare properties to avoid their computation
+                // this means that the inner hr (h resolved) is run often
+                let hr = ci?.view() ?? (h.tag as FComponent)(props, evaluate(h.cn))
+
+                // a component can return undefined or null if it has no elements to show
+                if (hr === undefined || hr == null) return i
+
+                let j = sync(p, i, hr)
+
+                let cn = p.childNodes[i]!
+                cn.h = h // attach h onto the materialized component node
+                // ;(cn as HTMLElement).setAttribute?.('comp', '')
+
+                if (ci) ci.element = cn
+                if (!isupdate) ci?.mounted?.()
+
+                return j
+
+            case 'object':
+                return sync(p, i, h.tag) // tbd: type of h is not correct, h.tag == never
+        }
+    }
+    // text nodes
+    synctextnode(h as string)
+    return i + 1
+}
+
+let globaluc: IUpdateContext = {}
+
+export function patch(e: Node | null, h: Expr<H>) {
+    if (!e) return
+    if (globaluc.replace) (e as HTMLElement).replaceChildren()
+    const p = e.parentElement as HTMLElement
+    const i = [].indexOf.call<any, any, any>(p.childNodes, e)
+    // always called deferred, because removing elements can trigger events and their handlers (like blur)
+    sync(p, i, h)
+}
+
+// Overload signatures
+type Selector = string | Node | undefined | null
+type Selectors = Selector[]
+
+export function updateviewuc(uc: IUpdateContext, ...sels: Selectors): void {
+    {
+        globaluc = uc
+        updateviewinternal(...sels)
+    }
+}
+export function updateview(...sels: Selectors): void {
+    {
+        globaluc = {}
+        updateviewinternal(...sels)
+    }
+}
+
+function updateviewinternal(...sels: Selector[]): void {
+    if (!sels.length) sels.push('body')
+    sels.flatMap(s => (typeof s == 'string' ? [...document.querySelectorAll(s)] : s ? [s] : [])).forEach(e => {
+        if (!e?.h) throw 'jmx: no h exists on the node'
+        patch(e, e.h)
+    })
+}

package/jsx.ts

@@ -0,0 +1,748 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable @typescript-eslint/ban-types */
+// This code is based on react definition in DefinitelyTyped published under the MIT license.
+//      Repository: https://github.com/DefinitelyTyped/DefinitelyTyped
+//      Path in the repository: types/react/v15/index.d.ts
+//
+// Copyrights of original definition are:
+//      Asana <https://asana.com>
+//      AssureSign <http://www.assuresign.com>
+//      Microsoft <https://microsoft.com>
+//      John Reilly <https://github.com/johnnyreilly/>
+//      Benoit Benezech <https://github.com/bbenezech>
+//      Patricio Zavolinsky <https://github.com/pzavolinsky>
+//      Digiguru <https://github.com/digiguru>
+//      Eric Anderson <https://github.com/ericanderson>
+//      Albert Kurniawan <https://github.com/morcerf>
+//      Tanguy Krotoff <https://github.com/tkrotoff>
+//      Dovydas Navickas <https://github.com/DovydasNavickas>
+//      Stéphane Goetz <https://github.com/onigoetz>
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements extends IntrinsicElementAttributes {
+            // additional attributes for selected elements
+            // label: HTMLAttributes & { bunny: number }
+        }
+    }
+}
+
+interface EventHandler<E extends Event> {
+    (event: E): void
+}
+
+export interface AdditionalElementAttributes {
+    mounted?: (n:Node) => void
+    update?: (n:Node, uc:IUpdateContext) => void
+}
+
+export interface HTMLAttributes extends AdditionalElementAttributes {
+    class?: string
+    style?: string
+    accesskey?: string
+    contenteditable?: boolean
+    contextmenu?: string
+    dir?: string
+    disabled?: boolean
+    draggable?: boolean
+    hidden?: boolean
+    id?: string
+    lang?: string
+    spellcheck?: boolean
+    tabindex?: number
+    title?: string
+    role?: string
+
+    // clipboard events
+    onCopy?: ClipboardEvent
+    onCut?: ClipboardEvent
+    onPaste?: ClipboardEvent
+
+    // composition events
+    onCompositionend?: CompositionEvent
+    onCompositionstart?: CompositionEvent
+    onCompositionupdate?: CompositionEvent
+
+    // drag drop events
+    ondrag?: EventHandler<DragEvent>
+    ondragend?: EventHandler<DragEvent>
+    ondragenter?: EventHandler<DragEvent>
+    ondragexit?: EventHandler<DragEvent>
+    ondragleave?: EventHandler<DragEvent>
+    ondragover?: EventHandler<DragEvent>
+    ondragstart?: EventHandler<DragEvent>
+    ondrop?: EventHandler<DragEvent>
+
+    // focus events
+    onfocus?: (ev: FocusEvent) => void
+    onfocusout?: (ev: FocusEvent) => void
+    onblur?: (ev: FocusEvent) => void
+
+    // form events
+    onchange?: EventHandler<Event>
+    oninput?: EventHandler<Event>
+    onreset?: EventHandler<Event>
+    onsubmit?: EventHandler<Event>
+    oninvalid?: EventHandler<Event>
+
+    // image events
+    onload?: EventHandler<Event>
+    onerror?: EventHandler<Event>
+
+    // keyboard events
+    onkeydown?: EventHandler<KeyboardEvent>
+    onkeypress?: EventHandler<KeyboardEvent>
+    onkeyup?: EventHandler<KeyboardEvent>
+
+    // mouse events
+    onclick?: EventHandler<MouseEvent>
+    oncontextmenu?: EventHandler<MouseEvent>
+    ondblclick?: EventHandler<MouseEvent>
+    onmousedown?: EventHandler<MouseEvent>
+    onmouseenter?: EventHandler<MouseEvent>
+    onmouseleave?: EventHandler<MouseEvent>
+    onmousemove?: EventHandler<MouseEvent>
+    onmouseout?: EventHandler<MouseEvent>
+    onmouseover?: EventHandler<MouseEvent>
+    onmouseup?: EventHandler<MouseEvent>
+
+    // media events
+    onAbort?: EventHandler<Event>
+    onCanplay?: EventHandler<Event>
+    onCanplaythrough?: EventHandler<Event>
+    onDurationchange?: EventHandler<Event>
+    onEmptied?: EventHandler<Event>
+    onEncrypted?: EventHandler<Event>
+    onEnded?: EventHandler<Event>
+    onLoadeddata?: EventHandler<Event>
+    onLoadedmetadata?: EventHandler<Event>
+    onLoadstart?: EventHandler<Event>
+    onPause?: EventHandler<Event>
+    onPlay?: EventHandler<Event>
+    onPlaying?: EventHandler<Event>
+    onProgress?: EventHandler<Event>
+    onRatechange?: EventHandler<Event>
+    onSeeked?: EventHandler<Event>
+    onSeeking?: EventHandler<Event>
+    onStalled?: EventHandler<Event>
+    onSuspend?: EventHandler<Event>
+    onTimeupdate?: EventHandler<Event>
+    onVolumechange?: EventHandler<Event>
+    onWaiting?: EventHandler<Event>
+
+    // selection events
+    onSelect?: EventHandler<Event>
+
+    // UI events
+    onScroll?: UIEvent
+
+    // touch events
+    onTouchcancel?: TouchEvent
+    onTouchend?: TouchEvent
+    onTouchmove?: TouchEvent
+    onTouchstart?: TouchEvent
+
+    // wheel events
+    onWheel?: WheelEvent
+
+    // animation events
+    onAnimationstart?: AnimationEvent
+    onAnimationend?: AnimationEvent
+    onAnimationiteration?: AnimationEvent
+
+    // transition events
+    onTransitionend?: TransitionEvent
+    onTransitionstart?: TransitionEvent
+}
+
+export interface AnchorHTMLAttributes extends HTMLAttributes {
+    download?: any
+    href?: string
+    hreflang?: string
+    media?: string
+    rel?: string
+    target?: string
+}
+
+export interface AreaHTMLAttributes extends HTMLAttributes {
+    alt?: string
+    coord?: string
+    download?: any
+    href?: string
+    hreflang?: string
+    media?: string
+    rel?: string
+    shape?: string
+    target?: string
+}
+
+export interface AudioHTMLAttributes extends MediaHTMLAttributes { }
+
+export interface BaseHTMLAttributes extends HTMLAttributes {
+    href?: string
+    target?: string
+}
+
+export interface BlockquoteHTMLAttributes extends HTMLAttributes {
+    cite?: string
+}
+
+export interface ButtonHTMLAttributes extends HTMLAttributes {
+    autofocus?: boolean
+    disabled?: boolean
+    form?: string
+    formaction?: string
+    formenctype?: string
+    formmethod?: string
+    formnovalidate?: boolean
+    formtarget?: string
+    name?: string
+    type?: string
+    value?: string | string[] | number
+}
+
+export interface CanvasHTMLAttributes extends HTMLAttributes {
+    height?: number | string
+    width?: number | string
+}
+
+export interface ColHTMLAttributes extends HTMLAttributes {
+    span?: number
+}
+
+export interface ColgroupHTMLAttributes extends ColHTMLAttributes { }
+
+export interface DetailsHTMLAttributes extends HTMLAttributes {
+    open?: boolean
+}
+
+export interface DelHTMLAttributes extends HTMLAttributes {
+    cite?: string
+    datetime?: string
+}
+
+export interface EmbedHTMLAttributes extends HTMLAttributes {
+    height?: number | string
+    src?: string
+    type?: string
+    width?: number | string
+}
+
+export interface FieldsetHTMLAttributes extends HTMLAttributes {
+    disabled?: boolean
+    form?: string
+    name?: string
+}
+
+export interface FormHTMLAttributes extends HTMLAttributes {
+    acceptcharset?: string
+    action?: string
+    autocomplete?: string
+    enctype?: string
+    method?: string
+    name?: string
+    novalidate?: boolean
+    target?: string
+}
+
+export interface HtmlHTMLAttributes extends HTMLAttributes {
+    manifest?: string
+}
+
+export interface IframeHTMLAttributes extends HTMLAttributes {
+    allowfullscreen?: boolean
+    allowtransparency?: boolean
+    frameborder?: number | string
+    height?: number | string
+    marginheight?: number
+    marginwidth?: number
+    name?: string
+    sandbox?: string
+    scrolling?: string
+    seamless?: boolean
+    src?: string
+    srcdoc?: string
+    width?: number | string
+}
+
+export interface ImgHTMLAttributes extends HTMLAttributes {
+    alt?: string
+    height?: number | string
+    sizes?: string
+    src?: string
+    srcset?: string
+    usemap?: string
+    width?: number | string
+}
+
+export interface InsHTMLAttributes extends HTMLAttributes {
+    cite?: string
+    datetime?: string
+}
+
+export interface InputHTMLAttributes extends HTMLAttributes {
+    accept?: string
+    alt?: string
+    autocomplete?: string
+    autofocus?: boolean
+    capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute
+    checked?: boolean
+    crossorigin?: string
+    disabled?: boolean
+    form?: string
+    formaction?: string
+    formenctype?: string
+    formmethod?: string
+    formnovalidate?: boolean
+    formtarget?: string
+    height?: number | string
+    list?: string
+    max?: number | string
+    maxlength?: number
+    min?: number | string
+    minlength?: number
+    multiple?: boolean
+    name?: string
+    pattern?: string
+    placeholder?: string
+    readonly?: boolean
+    required?: boolean
+    size?: number
+    src?: string
+    step?: number | string
+    type?: string
+    value?: string | string[] | number
+    width?: number | string
+}
+
+export interface KeygenHTMLAttributes extends HTMLAttributes {
+    autofocus?: boolean
+    challenge?: string
+    disabled?: boolean
+    form?: string
+    keytype?: string
+    keyparams?: string
+    name?: string
+}
+
+export interface LabelHTMLAttributes extends HTMLAttributes {
+    form?: string
+    for?: string
+}
+
+export interface LiHTMLAttributes extends HTMLAttributes {
+    value?: string | string[] | number
+}
+
+export interface LinkHTMLAttributes extends HTMLAttributes {
+    href?: string
+    hreflang?: string
+    integrity?: string
+    media?: string
+    rel?: string
+    sizes?: string
+    type?: string
+}
+
+export interface MapHTMLAttributes extends HTMLAttributes {
+    name?: string
+}
+
+export interface MenuHTMLAttributes extends HTMLAttributes {
+    type?: string
+}
+
+export interface MediaHTMLAttributes extends HTMLAttributes {
+    autoplay?: boolean
+    controls?: boolean
+    crossorigin?: string
+    loop?: boolean
+    mediagroup?: string
+    muted?: boolean
+    preload?: string
+    src?: string
+}
+
+export interface MetaHTMLAttributes extends HTMLAttributes {
+    charset?: string
+    content?: string
+    httpequiv?: string
+    name?: string
+}
+
+export interface MeterHTMLAttributes extends HTMLAttributes {
+    form?: string
+    high?: number
+    low?: number
+    max?: number | string
+    min?: number | string
+    optimum?: number
+    value?: string | string[] | number
+}
+
+export interface QuoteHTMLAttributes extends HTMLAttributes {
+    cite?: string
+}
+
+export interface ObjectHTMLAttributes extends HTMLAttributes {
+    classid?: string
+    data?: string
+    form?: string
+    height?: number | string
+    name?: string
+    type?: string
+    usemap?: string
+    width?: number | string
+    wmode?: string
+}
+
+export interface OlHTMLAttributes extends HTMLAttributes {
+    reversed?: boolean
+    start?: number
+}
+
+export interface OptgroupHTMLAttributes extends HTMLAttributes {
+    disabled?: boolean
+    label?: string
+}
+
+export interface OptionHTMLAttributes extends HTMLAttributes {
+    disabled?: boolean
+    label?: string
+    selected?: boolean
+    value?: string | string[] | number
+}
+
+export interface OutputHTMLAttributes extends HTMLAttributes {
+    form?: string
+    htmlfor?: string
+    name?: string
+}
+
+export interface ParamHTMLAttributes extends HTMLAttributes {
+    name?: string
+    value?: string | string[] | number
+}
+
+export interface ProgressHTMLAttributes extends HTMLAttributes {
+    max?: number | string
+    value?: string | string[] | number
+}
+
+export interface ScriptHTMLAttributes extends HTMLAttributes {
+    async?: boolean
+    charset?: string
+    crossorigin?: string
+    defer?: boolean
+    integrity?: string
+    nonce?: string
+    src?: string
+    type?: string
+}
+
+export interface SelectHTMLAttributes extends HTMLAttributes {
+    autofocus?: boolean
+    disabled?: boolean
+    form?: string
+    multiple?: boolean
+    name?: string
+    required?: boolean
+    size?: number
+    value?: string | string[] | number
+}
+
+export interface SourceHTMLAttributes extends HTMLAttributes {
+    media?: string
+    sizes?: string
+    src?: string
+    srcset?: string
+    type?: string
+}
+
+export interface StyleHTMLAttributes extends HTMLAttributes {
+    media?: string
+    nonce?: string
+    scoped?: boolean
+    type?: string
+}
+
+export interface TableHTMLAttributes extends HTMLAttributes {
+    cellpadding?: number | string
+    cellspacing?: number | string
+    summary?: string
+}
+
+export interface TextareaHTMLAttributes extends HTMLAttributes {
+    autocomplete?: string
+    autofocus?: boolean
+    cols?: number
+    dirname?: string
+    disabled?: boolean
+    form?: string
+    maxlength?: number
+    minlength?: number
+    name?: string
+    placeholder?: string
+    readonly?: boolean
+    required?: boolean
+    rows?: number
+    value?: string | string[] | number
+    wrap?: string
+}
+
+export interface TdHTMLAttributes extends HTMLAttributes {
+    colspan?: number
+    headers?: string
+    rowspan?: number
+}
+
+export interface ThHTMLAttributes extends HTMLAttributes {
+    colspan?: number
+    headers?: string
+    rowspan?: number
+    scope?: string
+}
+
+export interface TimeHTMLAttributes extends HTMLAttributes {
+    datetime?: string
+}
+
+export interface TrackHTMLAttributes extends HTMLAttributes {
+    default?: boolean
+    kind?: string
+    label?: string
+    src?: string
+    srclang?: string
+}
+
+export interface VideoHTMLAttributes extends MediaHTMLAttributes {
+    height?: number | string
+    playsinline?: boolean
+    poster?: string
+    width?: number | string
+}
+
+export interface AllHTMLAttributes extends HTMLAttributes {
+    accept?: string
+    acceptcharset?: string
+    action?: boolean
+    allowfullscreen?: boolean
+    allowtransparency?: boolean
+    alt?: string
+    async?: boolean
+    autocomplete?: string
+    autofocus?: boolean
+    autoplay?: boolean
+    capture?: boolean // https://www.w3.org/tr/html-media-capture/#the-capture-attribute
+    cellpadding?: number | string
+    cellspacing?: number | string
+    challenge?: string
+    charset?: string
+    checked?: boolean
+    cite?: string
+    classid?: string
+    cols?: number
+    colspan?: number
+    content?: string
+    controls?: boolean
+    coord?: string
+    crossorigin?: string
+    data?: string
+    datetime?: string
+    default?: boolean
+    defer?: boolean
+    dirname?: string
+    disabled?: boolean
+    download?: any
+    enctype?: string
+    form?: string
+    formaction?: string
+    formenctype?: string
+    formmethod?: string
+    formnovalidate?: boolean
+    formtarget?: string
+    frameborder?: number | string
+    headers?: string
+    height?: number | string
+    high?: number
+    href?: string
+    hreflang?: string
+    htmlfor?: string
+    httpequiv?: string
+    integrity?: string
+    keyparams?: string
+    keytype?: string
+    kind?: string
+    label?: string
+    list?: string
+    loop?: boolean
+    low?: number
+    manifest?: string
+    marginheight?: number
+    marginwidth?: number
+    max?: number | string
+    maxlength?: number
+    media?: string
+    mediagroup?: string
+    method?: string
+    min?: number | string
+    minlength?: number
+    multiple?: boolean
+    muted?: boolean
+    name?: string
+    nonce?: string
+    novalidate?: boolean
+    open?: boolean
+    optimum?: number
+    pattern?: string
+    placeholder?: string
+    playsinline?: boolean
+    poster?: string
+    preload?: string
+    readonly?: boolean
+    rel?: string
+    required?: boolean
+    reversed?: boolean
+    rows?: number
+    rowspan?: number
+    sandbox?: string
+    scope?: string
+    scoped?: boolean
+    scrolling?: string
+    seamless?: boolean
+    selected?: boolean
+    shape?: string
+    size?: number
+    sizes?: string
+    span?: number
+    src?: string
+    srcdoc?: string
+    srclang?: string
+    srcset?: string
+    start?: number
+    step?: number | string
+    summary?: string
+    target?: string
+    type?: string
+    usemap?: string
+    value?: string | string[] | number
+    width?: number | string
+    wmode?: string
+    wrap?: string
+}
+
+export interface IntrinsicElementAttributes {
+    a: AnchorHTMLAttributes
+    abbr: HTMLAttributes
+    address: HTMLAttributes
+    area: AreaHTMLAttributes
+    article: HTMLAttributes
+    aside: HTMLAttributes
+    audio: AudioHTMLAttributes
+    b: HTMLAttributes
+    base: BaseHTMLAttributes
+    bdi: HTMLAttributes
+    bdo: HTMLAttributes
+    big: HTMLAttributes
+    blockquote: BlockquoteHTMLAttributes
+    body: HTMLAttributes
+    br: HTMLAttributes
+    button: ButtonHTMLAttributes
+    canvas: CanvasHTMLAttributes
+    caption: HTMLAttributes
+    cite: HTMLAttributes
+    code: HTMLAttributes
+    col: ColHTMLAttributes
+    colgroup: ColgroupHTMLAttributes
+    data: HTMLAttributes
+    datalist: HTMLAttributes
+    dd: HTMLAttributes
+    del: DelHTMLAttributes
+    details: DetailsHTMLAttributes
+    dfn: HTMLAttributes
+    dialog: HTMLAttributes
+    div: HTMLAttributes
+    dl: HTMLAttributes
+    dt: HTMLAttributes
+    em: HTMLAttributes
+    embed: EmbedHTMLAttributes
+    fieldset: FieldsetHTMLAttributes
+    figcaption: HTMLAttributes
+    figure: HTMLAttributes
+    footer: HTMLAttributes
+    form: FormHTMLAttributes
+    h1: HTMLAttributes
+    h2: HTMLAttributes
+    h3: HTMLAttributes
+    h4: HTMLAttributes
+    h5: HTMLAttributes
+    h6: HTMLAttributes
+    head: HTMLAttributes
+    header: HTMLAttributes
+    hgroup: HTMLAttributes
+    hr: HTMLAttributes
+    html: HtmlHTMLAttributes
+    i: HTMLAttributes
+    iframe: IframeHTMLAttributes
+    img: ImgHTMLAttributes
+    input: InputHTMLAttributes
+    ins: InsHTMLAttributes
+    kbd: HTMLAttributes
+    keygen: KeygenHTMLAttributes
+    label: LabelHTMLAttributes
+    legend: HTMLAttributes
+    li: LiHTMLAttributes
+    link: LinkHTMLAttributes
+    main: HTMLAttributes
+    map: MapHTMLAttributes
+    mark: HTMLAttributes
+    menu: MenuHTMLAttributes
+    menuitem: HTMLAttributes
+    meta: MetaHTMLAttributes
+    meter: MeterHTMLAttributes
+    nav: HTMLAttributes
+    noscript: HTMLAttributes
+    object: ObjectHTMLAttributes
+    ol: OlHTMLAttributes
+    optgroup: OptgroupHTMLAttributes
+    option: OptionHTMLAttributes
+    output: OutputHTMLAttributes
+    p: HTMLAttributes
+    param: ParamHTMLAttributes
+    picture: HTMLAttributes
+    pre: HTMLAttributes
+    progress: ProgressHTMLAttributes
+    q: QuoteHTMLAttributes
+    rp: HTMLAttributes
+    rt: HTMLAttributes
+    ruby: HTMLAttributes
+    s: HTMLAttributes
+    samp: HTMLAttributes
+    script: ScriptHTMLAttributes
+    section: HTMLAttributes
+    select: SelectHTMLAttributes
+    small: HTMLAttributes
+    source: SourceHTMLAttributes
+    span: HTMLAttributes
+    strong: HTMLAttributes
+    style: StyleHTMLAttributes
+    sub: HTMLAttributes
+    summary: HTMLAttributes
+    sup: HTMLAttributes
+    table: TableHTMLAttributes
+    tbody: HTMLAttributes
+    td: TdHTMLAttributes
+    textarea: TextareaHTMLAttributes
+    tfoot: HTMLAttributes
+    th: ThHTMLAttributes
+    thead: HTMLAttributes
+    time: TimeHTMLAttributes
+    title: HTMLAttributes
+    tr: HTMLAttributes
+    track: TrackHTMLAttributes
+    u: HTMLAttributes
+    ul: HTMLAttributes
+    var: HTMLAttributes
+    video: VideoHTMLAttributes
+    wbr: HTMLAttributes
+}

package/lib.ts

@@ -0,0 +1,28 @@
+import { Props, IClassComponent, H, FComponentT, Children } from 'h'
+import { updateview } from './jmx'
+
+export type DeepReadonly<T> = { readonly [K in keyof T]: T[K] extends Record<string, unknown> ? DeepReadonly<T[K]> : T[K]; }
+
+export const When = ({ cond }: { cond: boolean }, cn: Children) => cond ? { cn } : void 0;
+
+export abstract class JMXComp<P extends Props = {}> implements IClassComponent {
+
+    // assigned by jmx framework
+    element!: HTMLElement
+
+    // we provide this ctor for jsx which uses ctor arguments as properties of class components.
+    // at runtime, we pass the props directly
+    constructor(public props: P) { }
+
+    // overrides
+    mounted() { }
+    update(uc?: IUpdateContext): boolean | void { }
+    abstract view(): H
+
+    // utility: updates the component's view
+    updateview() { updateview(this.element) }
+}
+
+export function cc(...namesOrObjects: (string | any)[]): string {
+    return namesOrObjects.flatMap(n => (n.trim ? n : Object.keys(n).filter(k => n[k]))).join(' ') // n.trim distinguishes strings from objects
+}

package/package.json

@@ -1,16 +1,13 @@
 {
 	"name": "jmx-runtime",
 	"author": "snupo",
-	"version": "0.0.14",
+	"version": "0.0.16",
 	"publishConfig": {
 		"access": "public"
 	},
 	"type": "module",
 	"main": "dist/index.js",
 	"types": "./dist/index.d.ts",
-	"files": [
-		"dist"
-	],
 	"scripts": {
 		"build": "tsc"
 	}

package/rollup.config.js

@@ -0,0 +1,31 @@
+import typescript from "@rollup/plugin-typescript"
+import clean from "rollup-plugin-cleanup"
+import copy from 'rollup-plugin-copy'
+//import { createPathTransform } from 'rollup-sourcemap-path-transform'
+
+export default {
+    input: 'index.ts',
+    output: [
+        {
+            file: 'dist/index.js',
+            format: 'es',
+            sourcemap: true,
+        }
+    ],
+    // sourcemapPathTransform: createPathTransform({
+    //     prefixes: {
+    //         '*src/components/': '/compi/comps/',
+    //         '/node_modules/': '/compi/deps/',
+    //         "../../../../../../../jmxa": "hase"
+    //     }
+    // }),
+    plugins: [
+        typescript(),
+        copy({
+            targets: [
+                { src: '*.ts', dest: 'dist' }, // Copy all .ts files to dist/src
+            ],
+        }),
+        clean()
+    ]
+}

package/tsconfig.json

@@ -0,0 +1,38 @@
+/* Visit https://aka.ms/tsconfig.json to read more about this file */
+{
+    "compilerOptions": {
+
+        "target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
+        "module": "ESNext", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
+
+        "jsx": "react", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+        "jsxFactory": "jsx",
+        "jsxFragmentFactory": "jsxf",
+
+        "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+        // "declarationDir": "dist/types",
+        "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+
+        "sourceMap": true, /* Generates corresponding '.map' file. */
+        "inlineSources": true,
+
+        "outDir": "dist", /* Redirect output structure to the directory. */
+        "rootDir": ".",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */        
+
+        "removeComments": true, /* Do not emit comments to output. */
+
+        "strict": true,                           /* Enable all strict type-checking options. */
+        "strictNullChecks": true, /* Enable strict null checks. */
+        "noImplicitAny": true,
+
+        "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+        "baseUrl": ".",                       /* Base directory to resolve non-absolute module names. */
+        //"typeRoots": ["types"],                       /* List of folders to include type definitions from. */
+        "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+        "sourceRoot": ".",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+        "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
+        "skipLibCheck": true, /* Skip type checking of declaration files. */
+        "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
+    },
+    "include": ["./index.ts"]
+}