jmx-runtime 0.0.27 → 0.0.30

package/dist/lib.ts

@@ -0,0 +1,29 @@
+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) }
+    get ismounted():boolean { return this.element as any }
+}
+
+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/h.ts

@@ -1,88 +1,89 @@
-// 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
+// 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
+    //new(props: any): IClassComponent
+}
+
+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

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

package/jmx.ts

@@ -1,183 +1,186 @@
-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)
-
-    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
-                //
-                // if ci has a view, return ci.view() even if it is falsy, this is perfectly valid
-                let hr = ci?.view ? 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)
-    })
-}
+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)
+
+    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 = isupdate ? (c.h as HCompClass)?.i : rebind(new h.tag(props))
+                    ci.props = props
+
+                    // if component instance returns truthy for update(), then this update substitutes syncing
+                    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
+                //
+                // if ci has a view, return ci.view() even if it is falsy, this is perfectly valid
+                let hr = ci?.view ? 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)
+
+                // now the dom element exists
+
+                let cn = p.childNodes[i]!
+                cn.h = h // attach h onto the materialized component node
+                // ;(cn as HTMLElement).setAttribute?.('comp', '')
+
+                // class component life cycle calls
+                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)
+    })
+}