@lexriver/dome 2.0.1 → 2.0.3

package/package.json

@@ -1,13 +1,28 @@
 {
     "sideEffects": false,
     "name": "@lexriver/dome",
-    "version": "2.0.1",
+    "version": "2.0.3",
     "description": "DOM manipulator",
     "type": "module",
-    "exports": "./out/src/index.mjs",
+    "types": "./out/src/index.d.ts",
+    "main": "./out/index.cjs",
+    "module": "./out/index.mjs",
+    "exports": {
+        ".": {
+            "types": "./out/src/index.d.mts",
+            "import": "./out/src/index.mjs",
+            "require": "./out/index.cjs",
+            "default": "./out/src/index.mjs"
+        }
+    },
+    "files": [
+        "out",
+        "README.md"
+    ],
     "scripts": {
         "test": "vitest",
-        "build": "rimraf out && tsc"
+        "build": "rimraf out && tsc && node scripts/build-compat.mjs",
+        "test:compat": "npm run build && npm --prefix compatibility/ts39-webpack4 install && npm --prefix compatibility/ts39-webpack4 run build"
     },
     "keywords": [
         "typescript",
@@ -24,6 +39,7 @@
     "license": "MIT",
     "devDependencies": {
         "@types/node": "^22.7.0",
+        "esbuild": "^0.21.5",
         "rimraf": "^6.0.1",
         "typescript": "^5.6.2",
         "vitest": "^2.1.1"
@@ -32,6 +48,7 @@
         "@lexriver/async": "^3.0.1",
         "@lexriver/data-types": "^3.0.5",
         "@lexriver/observable": "^3.0.0",
+        "@lexriver/type-event": "^2.0.0",
         "svg-tag-names": "^3.0.1",
         "ts-debounce": "^4.0.0"
     }

package/out/vitest.config.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("vite").UserConfig;
-export default _default;

package/out/vitest.config.js

@@ -1,9 +0,0 @@
-import { defineConfig } from 'vitest/config';
-export default defineConfig({
-    test: {
-        exclude: [
-            './out/**',
-            './node_modules/**'
-        ]
-    }
-});

package/src/AnimatedArray.mts

@@ -1,74 +0,0 @@
-import { Animation } from './Animation.mjs'
-import { DomeManipulator } from "./DomeManipulator.mjs"
-import { LongestCommonSubsequence } from "./LongestCommonSubsequence.mjs"
-
-interface KeyToElementPair{
-    key:string
-    element:HTMLElement
-}
-
-export class AnimatedArray<T>{
-    arrayOfKeyToElement:KeyToElementPair[] = []
-
-    constructor(protected params:{
-        parentElement?:HTMLElement,
-        array?:T[], 
-        getKey:(o:T)=>string,
-        getHtmlElement:(o:T)=>HTMLElement,
-        animationShow?:Animation
-        animationHide?:Animation
-        //renderEmptyList?:()=>HTMLElement
-        emptyList?:HTMLElement
-    }){
-        if(params.array && params.parentElement){
-            this.update(params.array)
-        }
-    }
-
-    get size():number{
-        return this.arrayOfKeyToElement.length
-    }
-
-    update(array:T[], parentElement?:HTMLElement|Element){
-        parentElement = parentElement || this.params.parentElement
-        if(!parentElement){
-            console.warn('AnimatedArray unable to update, no parentElement')
-            return
-        }
-
-        if(array.length == 0 && this.params.emptyList){
-            DomeManipulator.replaceAllChildrenAsync(parentElement, this.params.emptyList)    
-            return
-        }
-
-        if(array.length > 0 && this.params.emptyList){
-            DomeManipulator.removeElementAsync(this.params.emptyList, this.params.animationHide)
-        }
-
-        //let arrayOfKeyToElement:KeyToElementPair[] = []
-        let newArrayOfKeys = array.map((item:T) => this.params.getKey(item))
-        let oldArrayOfKeys = this.arrayOfKeyToElement.map(x => x.key)
-        LongestCommonSubsequence.getPatchOrdered({
-            oldArray: oldArrayOfKeys,
-            newArray: newArrayOfKeys,
-            onAdd:(index:number, key:string) => {
-                if(!parentElement) throw new Error('no parent element') //TODO: remove this
-                let itemIndex = newArrayOfKeys.indexOf(key)
-                if(itemIndex == -1) throw new Error('no itemIndex') //TODO: remove this
-                let item = array[itemIndex]
-                let element = this.params.getHtmlElement(item)
-                this.arrayOfKeyToElement.splice(index,0,{key, element})
-                DomeManipulator.insertByIndexAsync(element, index, parentElement, this.params.animationShow)
-                //this.insertNewElementWithAnimation(element, index, parentElement)
-
-            },
-            onRemove: (index:number, key:string) => {
-                DomeManipulator.removeElementAsync(this.arrayOfKeyToElement[index].element, this.params.animationHide)
-                this.arrayOfKeyToElement.splice(index,1)
-            }
-        })
-
-    }
-
-
-}

package/src/AnimatedTable.mts

@@ -1,120 +0,0 @@
-import { ObservableVariable } from '@lexriver/observable'
-import { Animation } from './Animation.mjs'
-import { DomeManipulator } from "./DomeManipulator.mjs"
-import { AnimatedArray, DomeComponent } from "./index.mjs"
-
-interface Attrs<T>{
-    isLoadingO?:ObservableVariable<boolean>
-    itemsO:ObservableVariable<T[]>
-    animationShowRow:Animation
-    animationHideRow:Animation
-    animationHideTable?:Animation
-    animationShowTable?:Animation
-    animationHideEmptyList?:Animation
-    animationShowEmptyList?:Animation
-    animationShowLoading?:Animation
-    animationHideLoading?:Animation
-    getKey:(item:T)=>string
-    rootElement?:HTMLElement
-    tableElement?:HTMLElement
-    tableBody?:HTMLElement
-    renderTableHead?:(items:T[])=>HTMLElement
-    renderTableRow:(item:T)=>HTMLElement
-    renderTableFooter?:(items:T[]) => HTMLElement
-    renderEmptyList:()=>HTMLElement
-    renderLoading?:()=>HTMLElement
-}
-
-export class AnimatedTable<T> extends DomeComponent<Attrs<T>>{
-    // rootElement
-    //   table
-    //     thead
-    //     tbody
-    //     tfooter
-    //   emptyList
-    refRoot:HTMLElement = this.attrs.rootElement || document.createElement('div')
-    refTable:HTMLElement = this.attrs.tableElement || document.createElement('table')
-    refTableHead:Element = this.attrs.renderTableHead ? this.attrs.renderTableHead(this.attrs.itemsO.get()) : document.createElement('thead')
-    refTableBody:HTMLElement = this.attrs.tableBody || document.createElement('tbody')
-    refTableFooter:Element = this.attrs.renderTableFooter ? this.attrs.renderTableFooter(this.attrs.itemsO.get()) : document.createElement('tfoot')
-    refEmptyList:Element = this.attrs.renderEmptyList ? this.attrs.renderEmptyList() : document.createElement('div')
-    refLoading:Element = this.attrs.renderLoading ? this.attrs.renderLoading() : document.createElement('div')
-    
-    animatedArray = new AnimatedArray<T>({
-        animationHide: this.attrs.animationHideRow,
-        animationShow: this.attrs.animationShowRow,
-        array: [],
-        getKey: this.attrs.getKey,
-        getHtmlElement: this.attrs.renderTableRow
-    })
-
-    render(){
-        // refRoot
-        //     refTable
-        //         refTableHead
-        //         refTableBody
-        //         refTableFooter
-        //     refEmptyListEl
-        //     refLoading
-        
-        this.refRoot.appendChild(this.refTable)
-        this.refRoot.appendChild(this.refEmptyList)
-        this.refRoot.appendChild(this.refLoading)
-        if(this.refTableHead) this.refTable.appendChild(this.refTableHead)
-        if(this.refTableBody) this.refTable.appendChild(this.refTableBody)
-        if(this.refTableFooter) this.refTable.appendChild(this.refTableFooter)
-        console.log('AnimatedTable render()', 'refRoot=', this.refRoot)
-        return this.refRoot
-    }
-
-    afterRender(){
-        this.updateAsync()
-        //this.animatedArray.update(this.attrs.items, this.el)
-    }
-
-    async updateAsync(){
-        try {
-            if(this.attrs.renderLoading){
-                this.refLoading = await DomeManipulator.replaceAsync(this.refLoading, this.attrs.renderLoading())
-            }
-            if(this.attrs.isLoadingO && this.attrs.isLoadingO.get()){
-                // show loading
-                await DomeManipulator.unhideElementAsync(this.refLoading, this.attrs.animationShowLoading) 
-            } else {
-                // hide loading
-                await DomeManipulator.hideElementAsync(this.refLoading, this.attrs.animationHideLoading)
-            }
-
-            const items = this.attrs.itemsO.get()
-            const currentCount = items.length
-
-            if(currentCount == 0){
-                // render empty list
-                await DomeManipulator.hideElementAsync(this.refTable, this.attrs.animationHideTable)
-                if(this.attrs.renderEmptyList){
-                    this.refEmptyList = await DomeManipulator.replaceAsync(this.refEmptyList, this.attrs.renderEmptyList())
-                }
-                await DomeManipulator.unhideElementAsync(this.refEmptyList, this.attrs.animationShowEmptyList)
-                
-            } else {
-
-                // render list with items
-                await DomeManipulator.hideElementAsync(this.refEmptyList, this.attrs.animationHideEmptyList)
-                if(this.attrs.renderTableHead){
-                    this.refTableHead = await DomeManipulator.replaceAsync(this.refTableHead, this.attrs.renderTableHead(items))
-                }
-                if(this.attrs.renderTableFooter){
-                    this.refTableFooter = await DomeManipulator.replaceAsync(this.refTableFooter, this.attrs.renderTableFooter(items))
-                }
-                await DomeManipulator.unhideElementAsync(this.refTable, this.attrs.animationShowTable)
-
-                this.animatedArray.update(items, this.refTableBody)
-            }
-        } catch(x){
-            console.error('AnimatedTable update failed', x)
-        }
-
-
-
-    }
-}

package/src/AnimatedText.mts

@@ -1,30 +0,0 @@
-import { ObservableVariable } from "@lexriver/observable";
-import { CssClass, DomeManipulator } from "./DomeManipulator.mjs";
-import { DomeComponent } from "./index.mjs";
-
-interface Attrs{
-    textO:ObservableVariable<string>
-    tag?:string
-    class?:CssClass
-}
-
-export class AnimatedText extends DomeComponent<Attrs>{
-    render(){
-        //const result = this.attrs.tag ? document.createElement(this.attrs.tag) : document.createElement('span')
-        const result = document.createElement(this.attrs.tag || 'span')
-        //console.log('AnimatedText', 'this.attrs.class=',this.attrs.class)
-        if(this.attrs.class){
-            DomeManipulator.setCssClasses(result, this.attrs.class)
-        }
-        result.append(this.attrs.textO.get())
-        return result
-    }
-    async updateAsync(){
-        if(!this.rootElement) return
-        try {
-            this.rootElement = await DomeManipulator.replaceAsync(this.rootElement, this.render(), this.attrs.onHideAnimation, this.attrs.onShowAnimation)
-        } catch(x){
-            console.error('AnimatedText update failed', x)
-        }
-    }
-}

package/src/Animation.mts

@@ -1,4 +0,0 @@
-export interface Animation{
-    cssClassName:string
-    timeMs:number
-}

package/src/Dome.mts

@@ -1,346 +0,0 @@
-// inspiration: https://github.com/vadimdemedes/dom-chef/blob/master/index.js
-const svgTagNames = require('svg-tag-names')
-import { DataTypes } from '@lexriver/data-types'
-import { ObservableVariable, checkIfObservable } from '@lexriver/observable'
-import { DomeComponent } from './DomeComponent.mjs'
-import { DomeManipulator } from './DomeManipulator.mjs'
-
-const filename = '[Dome]: '
-
-
-interface OnEventObject{
-    eventName:string
-    eventParams:Object
-    eventReaction:(eventParams:Object)=>void
-}
-
-
-
-//const mountFunctionByNode = new Map<Node, (ref:any)=>void>()
-
-// https://github.com/jonschlinkert/arr-flatten/blob/master/index.js
-function flattenArray(arr:any[], res:any[] = []){
-    var i = 0, cur;
-    var len = arr.length;
-    for (; i < len; i++) {
-        cur = arr[i];
-        Array.isArray(cur) ? flattenArray(cur, res) : res.push(cur);
-    }
-    return res;
-}
-
-
-function checkIfNonDimensionalCssName(name:string){
-    // Copied from Preact
-    const IS_NON_DIMENSIONAL = /acit|ex(?:s|g|n|p|$)|rph|ows|mnc|ntw|ine[ch]|zoo|^ord/i
-    return IS_NON_DIMENSIONAL.test(name)
-}
-
-
-const excludeSvgTags = [
-	'a',
-	'audio',
-	'canvas',
-	'iframe',
-	'script',
-	'video'
-]
-
-const svgTags = svgTagNames.filter(name => !excludeSvgTags.includes(name))
-
-const isSVG = tagName => svgTags.includes(tagName)
-
-const setCSSProps = (el, style:{[key:string]:string|number}) => {
-    if(DataTypes.isString(style)){
-        el.style = style
-
-    } else if(DataTypes.isObjectWithKeys(style)){
-        Object.keys(style).forEach(name => {
-            let value = style[name]
-
-            if (typeof value === 'number' && !checkIfNonDimensionalCssName(name)) {
-                value = `${value}px`
-            }
-
-            el.style[name] = value
-        })
-    }
-}
-
-const createElement = (tagName) => {
-	if (isSVG(tagName)) {
-		return document.createElementNS('http://www.w3.org/2000/svg', tagName)
-	}
-
-	if (tagName === DocumentFragment) {
-		return document.createDocumentFragment()
-	}
-
-	return document.createElement(tagName)
-}
-
-
-// function subscribeToEventByParam(x:OnEventObject, el:HTMLElement){
-//     if(
-//         !x.eventName ||
-//         Data.isString(x.eventName) == false ||
-//         !x.eventReaction ||
-//         Data.isFunction(x.eventReaction) == false
-//     ){
-//         console.error('x=', x, 'el=', el)
-//         throw new Error(`Please provide object of type {eventName:string, eventParams:Object, eventReaction:(eventParams, htmlElement)=>void}`)
-//     }
-//     //DomeEventDispatcher.subscribeToEvent(el, x.eventName, x.eventParams || {}, x.eventReaction)
-//     DomeEventDispatcher.subscribeToEvent({
-//         eventName: x.eventName,
-//         eventParamsFilter: x.eventParams || {},
-//         action: x.eventReaction,
-//         unsubscribeWhen: () => DomeManipulator.isInDom(el) == false
-//     })
-    
-
-// }
-
-const build = (tagName, attrs, children:DocumentFragment) => {
-    if(!tagName) {
-        console.trace()
-        throw new Error('tagName='+tagName)
-    }
-    // if(children && typeof children !== 'object'){
-    //      //console.log('tagName=', tagName, 'attrs=',attrs, 'children=', children)
-    //      console.log('tagName=', tagName, 'children=', children, 'typeof children=', typeof children)
-    // }
-    if(tagName == DocumentFragment){
-        //console.warn(filename, 'isDocumentFragment!')
-        const el = createElement(tagName)
-        el.appendChild(children)
-        return el
-    }
-
-    //console.log(filename, 'instaceof=', tagName instanceof DomeComponent)
-    //console.log(filename, 'has render=', tagName.render)
-    //console.log(filename, 'instanceof Object=', tagName instanceof Object)
-
-    if(tagName.prototype && tagName.prototype['__DomeComponent']){
-        // we have a DomeComponent
-        //console.warn('DomeComponent!')
-        try {
-            const instance = new tagName(attrs, children) as DomeComponent<any>
-            //console.log('instance=', instance)
-            if(instance['render'] && DataTypes.isFunction(instance['render'])){
-
-
-                //#region make ref points to instance, not element
-                if(attrs.ref && DataTypes.isFunction(attrs.ref)){
-                    attrs.ref(instance)
-                }
-                //#endregion
-
-                instance['init']()
-                
-                instance.rootElement = instance['render']()
-
-                //#region subscribe to observable attribute
-                for(let attribute of Object.values(attrs)){
-                    if(checkIfObservable(attribute)){
-                        attribute.eventOnChange.subscribe(() => {
-                            //this.update()
-                            instance.scheduleUpdate()
-                        })
-                    }
-                }
-                //#endregion
-
-
-                //requestAnimationFrame(() => {
-                    instance['afterRender']()
-                //})
-
-                return instance.rootElement
-            }
-        } catch(error){
-            console.error('error while creating DomeComponent class', error)
-        }
-        return;
-
-    }
-    if(DataTypes.isFunction(tagName)){
-        // call functional component
-        return tagName(attrs, children)
-        
-    } else if(DataTypes.isString(tagName)){
-        const el = createElement(tagName)
-        //console.log('lex-dome', 'creating element', el)
-
-        Object.keys(attrs).forEach(name => {
-            const value = attrs[name]
-            
-            if (name === 'class' || name === 'className' || name === 'cssClasses') {
-                //DomeManipulator.setCssClasses(el, value)
-                assignDynamicCssClasses(name, value, el) 
-
-                
-
-            } else if (name === 'style') {
-                setCSSProps(el, value)
-
-            } else if(['disabled', 'autocomplete', 'selected', 'checked'].indexOf(name) >= 0){
-                if(attrs[name]){
-                    DomeManipulator.setAttribute(el, name, name)    
-                }
-
-            } else if(name === 'onCreate' || name === 'ref'){
-                if(DataTypes.isFunction(value) == false) throw new Error(`Please provide function <${tagName} ${name}={ref => myRef=ref} />`)
-                value(el)
-
-            // } else if(name === 'onEvent'){ //TODO: remove this!?
-            //     // <div onEvent={{eventName:'myCumstomEvent', eventParams:{any:'params',can:'be',here:true}, eventReaction:()=>{}}}>some text for div</div>
-            //     //#region is Object
-            //     if(Data.isObjectWithKeys(value)){
-            //         subscribeToEventByParam(value as OnEventObject, el)
-            //         return
-            //     }
-            //     //#endregion 
-
-            //     //#region is Array
-            //     if(Data.isArray(value)){
-            //         for(let x of value){
-            //             subscribeToEventByParam(x as OnEventObject, el)
-            //         }
-            //     }
-            //     //#endregion
-
-            } else if(name == 'visibleIf'){ //TODO: remove this!?
-                if(checkIfObservable(value) == false) {
-                    console.error('value=', value)
-                    throw new Error('Please provide Observable<boolean> as argument for visibleIf')
-                }
-                let obs = value as ObservableVariable<boolean>
-                obs.eventOnChange.subscribe((isVisible) => {
-                    if(isVisible){
-                        DomeManipulator.unhideElementAsync(el)
-                    } else {
-                        DomeManipulator.hideElementAsync(el)
-                    }
-                })
-
-                setTimeout(() => { //TODO: hack to trigger event on mount to DOM
-                    obs.eventOnChange.triggerAsync(obs.get())
-                }, 1)
-
-            } else if (name.indexOf('on') === 0 && value) {
-                const eventName = name.slice(2).toLowerCase()
-                if(DataTypes.isFunction(value) == false) {
-                    console.error('unable to subscribe for event', eventName, 'listener is not a function', 'element=', el, 'listener=', value)
-                    return
-                }
-                //console.log('adding event listener for', el, 'eventName=', eventName, 'value=', value)
-                el.addEventListener(eventName, value)
-                
-            } else if (name === 'innerHtml') {
-                el.innerHTML = value
-                
-            } else if (name !== 'key' && value !== false) {
-                DomeManipulator.setAttribute(el, name, value === true ? '' : value)
-            }
-        })
-
-        if (!attrs.innerHtml) {
-            el.appendChild(children)
-        }
-
-        return el
-        
-    } else throw new Error("not implemented")
-}
-
-
-
-/**
- * 
- * @param value 
- * @param name 
- * @param element 
- */
-function assignDynamicCssClasses(name: string, value: {[key:string]:boolean|ObservableVariable<boolean>}, element: any) {
-    if (DataTypes.isObjectWithKeys(value) == false){
-        DomeManipulator.setCssClasses(element, value)
-        return
-        //throw new Error(`Please provide object for ${name}, ex: {class1:true, class2:myVarO}`)
-    }
-    let resultArray: string[] = []
-    for (let [k, v] of Object.entries(value)) {
-        if(v === undefined){
-            //skip
-            
-        } else if (DataTypes.isBoolean(v)) {
-            if(v){
-                resultArray.push(k)
-            }
-
-        } else if (checkIfObservable(v)) {
-            let o = v as ObservableVariable<boolean>
-            o.eventOnChange.subscribe((showThiCssClass) => {
-                if(!DomeManipulator.isInDom(element)) return {unsubscribe:true} //TODO: test it
-                // reassign whole attribute
-                DomeManipulator.setCssClasses(element, value)
-            })
-            if (o.get()) {
-                resultArray.push(k)
-            }
-        } else {
-            console.error(`Please provide classNames as a keys and boolean or Observable<boolean> for values., ex: {class1:true, class2:myVarO}`, 'name=', name, 'value=', value, 'typeof value =', typeof value)
-            throw new Error('Wrong value for `class` attribute')
-        }
-    }
-    DomeManipulator.setCssClasses(element, resultArray) // yes, array of classes is ok here
-}
-
-export function h(tagName, attrs, ...childrenArgs) {
-	// eslint-disable-next-line prefer-rest-params
-	//const childrenArgs = [].slice.apply(arguments, [2])
-    const children = document.createDocumentFragment()
-    //const childArray:any[] = []
-    
-    // console.log(filename, 'childrenArgs=', childrenArgs)
-    // console.log(filename, 'childrenO=', childrenO)
-    // if(tagName === 'hoho'){
-    //     console.warn(filename, tagName, attrs, ...childrenArgs)
-    // }
-
-	flattenArray(childrenArgs).forEach(child => {
-    //(childrenArgs).forEach(child => {
-        // if(tagName === 'hoho'){
-        //     console.warn(filename, 'child=', child)
-        // }
-		if (child instanceof Node) {
-            children.appendChild(child)
-            //childArray.push(child)
-
-            // const mountFunction = mountFunctionByNode.get(child)
-            // if(mountFunction){
-            //     mountFunction(child)
-            //     mountFunctionByNode.delete(child)// delete after execution
-            // }
-
-		} else if (typeof child !== 'boolean' && typeof child !== 'undefined' && child !== null) {
-            //console.log('[Dome] child=', child)
-            //console.warn(filename, 'text? child=', child)
-            children.appendChild(document.createTextNode(child))
-            //childArray.push(document.createTextNode(child))
-        }
-	})
-
-    //return build(tagName, attrs || {}, children)
-    return build(tagName, attrs || {}, children)
-}
-
-// Improve TypeScript support for DocumentFragment
-// https://github.com/Microsoft/TypeScript/issues/20469
-export const React = {
-	createElement: h,
-	Fragment: typeof DocumentFragment === 'function' ? DocumentFragment : () => {}
-}
-
-export default React
-