@lexriver/dome 2.0.2 → 2.0.3

package/out/src/AnimatedArray.d.ts

@@ -0,0 +1,29 @@
+import { Animation } from './Animation';
+interface KeyToElementPair {
+    key: string;
+    element: HTMLElement;
+}
+export declare class AnimatedArray<T> {
+    protected params: {
+        parentElement?: HTMLElement;
+        array?: T[];
+        getKey: (o: T) => string;
+        getHtmlElement: (o: T) => HTMLElement;
+        animationShow?: Animation;
+        animationHide?: Animation;
+        emptyList?: HTMLElement;
+    };
+    arrayOfKeyToElement: KeyToElementPair[];
+    constructor(params: {
+        parentElement?: HTMLElement;
+        array?: T[];
+        getKey: (o: T) => string;
+        getHtmlElement: (o: T) => HTMLElement;
+        animationShow?: Animation;
+        animationHide?: Animation;
+        emptyList?: HTMLElement;
+    });
+    get size(): number;
+    update(array: T[], parentElement?: HTMLElement | Element): void;
+}
+export {};

package/out/src/AnimatedTable.d.mts

@@ -1,6 +1,7 @@
 import { ObservableVariable } from '@lexriver/observable';
 import { Animation } from './Animation.mjs';
-import { AnimatedArray, DomeComponent } from "./index.mjs";
+import { AnimatedArray } from "./AnimatedArray.mjs";
+import { DomeComponent } from "./DomeComponent.mjs";
 interface Attrs<T> {
     isLoadingO?: ObservableVariable<boolean>;
     itemsO: ObservableVariable<T[]>;

package/out/src/AnimatedTable.d.ts

@@ -0,0 +1,39 @@
+import { ObservableVariable } from '@lexriver/observable';
+import { Animation } from './Animation';
+import { AnimatedArray } from "./AnimatedArray";
+import { DomeComponent } from "./DomeComponent";
+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 declare class AnimatedTable<T> extends DomeComponent<Attrs<T>> {
+    refRoot: HTMLElement;
+    refTable: HTMLElement;
+    refTableHead: Element;
+    refTableBody: HTMLElement;
+    refTableFooter: Element;
+    refEmptyList: Element;
+    refLoading: Element;
+    animatedArray: AnimatedArray<T>;
+    render(): HTMLElement;
+    afterRender(): void;
+    updateAsync(): Promise<void>;
+}
+export {};

package/out/src/AnimatedTable.mjs

@@ -1,5 +1,6 @@
 import { DomeManipulator } from "./DomeManipulator.mjs";
-import { AnimatedArray, DomeComponent } from "./index.mjs";
+import { AnimatedArray } from "./AnimatedArray.mjs";
+import { DomeComponent } from "./DomeComponent.mjs";
 export class AnimatedTable extends DomeComponent {
     // rootElement
     //   table

package/out/src/AnimatedText.d.mts

@@ -1,6 +1,6 @@
 import { ObservableVariable } from "@lexriver/observable";
 import { CssClass } from "./DomeManipulator.mjs";
-import { DomeComponent } from "./index.mjs";
+import { DomeComponent } from "./DomeComponent.mjs";
 interface Attrs {
     textO: ObservableVariable<string>;
     tag?: string;

package/out/src/AnimatedText.d.ts

@@ -0,0 +1,13 @@
+import { ObservableVariable } from "@lexriver/observable";
+import { CssClass } from "./DomeManipulator";
+import { DomeComponent } from "./DomeComponent";
+interface Attrs {
+    textO: ObservableVariable<string>;
+    tag?: string;
+    class?: CssClass;
+}
+export declare class AnimatedText extends DomeComponent<Attrs> {
+    render(): HTMLElement;
+    updateAsync(): Promise<void>;
+}
+export {};

package/out/src/AnimatedText.mjs

@@ -1,5 +1,5 @@
 import { DomeManipulator } from "./DomeManipulator.mjs";
-import { DomeComponent } from "./index.mjs";
+import { DomeComponent } from "./DomeComponent.mjs";
 export class AnimatedText extends DomeComponent {
     render() {
         //const result = this.attrs.tag ? document.createElement(this.attrs.tag) : document.createElement('span')

package/out/src/Animation.d.ts

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

package/out/src/Dome.d.ts

@@ -0,0 +1,9 @@
+export declare function h(tagName: any, attrs: any, ...childrenArgs: any[]): any;
+export declare const React: {
+    createElement: typeof h;
+    Fragment: {
+        new (): DocumentFragment;
+        prototype: DocumentFragment;
+    } | (() => void);
+};
+export default React;

package/out/src/Dome.mjs

@@ -1,5 +1,5 @@
 // inspiration: https://github.com/vadimdemedes/dom-chef/blob/master/index.js
-const svgTagNames = require('svg-tag-names');
+import { svgTagNames } from 'svg-tag-names';
 import { DataTypes } from '@lexriver/data-types';
 import { checkIfObservable } from '@lexriver/observable';
 import { DomeManipulator } from './DomeManipulator.mjs';

package/out/src/DomeComponent.d.ts

@@ -0,0 +1,25 @@
+import { Animation } from './Animation';
+interface InternalAttrs {
+    ref?: (ref: any) => void;
+    onShowAnimation?: Animation;
+    onHideAnimation?: Animation;
+}
+export declare abstract class DomeComponent<Attrs> {
+    attrs: Attrs & InternalAttrs;
+    children: any;
+    rootElement: Element | HTMLElement;
+    private updateInProgress;
+    private updateRequested;
+    constructor(attrs: Attrs & InternalAttrs, children: any);
+    protected init(): void;
+    protected abstract render(): HTMLElement;
+    protected afterRender(): void;
+    updateAsync(): Promise<void>;
+    private runScheduledUpdateAsync;
+    scheduleUpdate: {
+        (this: unknown, ...args: [] & any[]): Promise<Promise<void>>;
+        cancel: (reason?: any) => void;
+    };
+    protected afterUpdate(): void;
+}
+export {};

package/out/src/DomeManipulator.d.ts

@@ -0,0 +1,52 @@
+import { ObservableVariable } from "@lexriver/observable";
+import { Animation } from './Animation';
+export type CssClass = {
+    [key: string]: boolean | ObservableVariable<boolean>;
+} | string[] | string;
+export declare namespace DomeManipulator {
+    function hideElementAsync(element: Element, animation?: Animation): Promise<void>;
+    function unhideElementAsync(element: Element, animation?: Animation): Promise<void>;
+    function insertAsFirstChildAsync(elementToInsert: Element, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
+    function insertBeforeAsync(elementToInsert: Element, refElement: Element | null, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
+    function insertAfterAsync(elementToInsert: Element, refElement: Element | null | undefined, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
+    function insertByIndexAsync(elementToInsert: Element, index: number, parentElement: Element | DocumentFragment, animation?: Animation): Promise<void>;
+    function replaceAsync(oldElement: Element, newElement: Element, animationHide?: Animation, animationShow?: Animation): Promise<Element>;
+    function removeElementAsync(element: Element, animation?: Animation): Promise<void>;
+    function forEachChildrenOf(element: Element, action: (child: ChildNode) => void): void;
+    function removeAllChildrenAsync(element: Element, animation?: Animation): Promise<void>;
+    function appendChildAsync(containerElement: Element, child: Element, animation?: Animation): Promise<void>;
+    function appendChildrenAsync(containerElement: Element, children: Element | Element[] | DocumentFragment | Text | string | null | undefined, animation?: Animation): Promise<void>;
+    /**
+     * Replacements for the same container run in call order. A rejected replacement does
+     * not block the queue, and replacements for different containers remain independent.
+     */
+    function replaceAllChildrenAsync(containerElement: Element, childrenToInsert: Element | Element[] | DocumentFragment | Text | string | null | undefined, animationForHide?: Animation, animationForShow?: Animation): Promise<void>;
+    function isInDom(el: Element | undefined): boolean;
+    function isOnScreen(el: Element | undefined): boolean;
+    function addCssClassAsync(element: Element, cssClassName: string, removeAfterMs?: number): Promise<void>;
+    function addCssClassesAsync(element: Element, cssClassNames: string[], removeAfterMs?: number): Promise<void>;
+    function removeCssClass(element: Element, cssClassName: string): void;
+    function removeCssClasses(element: Element, cssClassNames: string[]): void;
+    /**
+     * set css classes by array ['class1', 'class2'] or
+     * by object {class1:true, class2:false} or
+     * by Observable<boolean> {class1:true, class2:myVarO} or
+     * by string
+     * this function will replace class attribute so all classes that are not in params will be removed
+     * @param value
+     * @param element
+     */
+    function setCssClasses(element: Element, value: CssClass): void;
+    function setAttribute(element: Element, name: string, value: any): void;
+    function hasFocus(el: Element): boolean;
+    function scrollIntoView(element: Element, paddingFromTop?: number): void;
+    const scrollToTop: () => void;
+    function getCurrentScrollPosition(): number;
+    function scrollToAsync(p: {
+        pxFromTop?: number;
+        pxFromLeft?: number;
+        smooth?: boolean;
+        msStep?: number;
+        maxMsToWait?: number;
+    }): Promise<void>;
+}

package/out/src/DomeRouter.console-test.d.ts

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

package/out/src/DomeRouter.d.ts

@@ -0,0 +1,32 @@
+export type RouteAction = (params: {
+    [key: string]: string | number;
+}, url: string, scrollToPreviousPositionAsync: () => Promise<void>, query: {
+    [key: string]: string;
+}) => void | Promise<void>;
+export declare namespace DomeRouter {
+    let maxHistoryUrlsCount: number;
+    function navigate(url: string): void;
+    function goBack(): void;
+    function goForward(): void;
+    function changeUrl(url: string): void;
+    function getCurrentUrl(): string;
+    /**
+     * get previous page url navigated by router
+     * @param previousPageIndex 0=previousPage, 1=previousPage-1, etc
+     */
+    function getPreviousPageUrl(previousPageIndex?: number): string | undefined;
+    function resolveUrl(url?: string, addToHistory?: boolean): void;
+    function onRoute(route: string, exactMatch: boolean, action: RouteAction): void;
+    function onNotFound(action: () => void): void;
+    /**
+     * Check if url matched route.
+     *   example: /get-product/445345, /get-product/:productId, true ==> Map([productId:445345])
+     *   example: /get-product/123, /another-route, true ==> undefined
+     *   example: /articles, /articles, true ==> Map()
+     *   example: /articles/some-article, /articles, false ==> Map()
+     * @param url
+     * @param route
+     * @param exactMatch
+     */
+    function checkUrlMatchRouteAndGetParameters(url: string, route: string, exactMatch?: boolean): Object | undefined;
+}

package/out/src/LongestCommonSubsequence.d.ts

@@ -0,0 +1,15 @@
+export declare namespace LongestCommonSubsequence {
+    function getLongestCommonSubsequence(set1: string[], set2: string[]): string[];
+    function getPatch({ oldArray, newArray, onRemove, onAdd }: {
+        oldArray: string[];
+        newArray: string[];
+        onRemove: (index: number, item: string) => void;
+        onAdd: (index: number, item: string) => void;
+    }): number;
+    function getPatchOrdered({ oldArray, newArray, onRemove, onAdd }: {
+        oldArray: string[];
+        newArray: string[];
+        onRemove: (index: number, item: string) => void;
+        onAdd: (index: number, item: string) => void;
+    }): number;
+}

package/out/src/concurrent-updates.test.d.ts

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

package/out/src/index.d.ts

@@ -0,0 +1,11 @@
+export * from '@lexriver/async';
+export * from '@lexriver/data-types';
+export * from '@lexriver/observable';
+export * from '@lexriver/type-event';
+export * from './AnimatedArray';
+export * from './AnimatedTable';
+export * from './AnimatedText';
+export * from './Dome';
+export * from './DomeComponent';
+export * from './DomeManipulator';
+export * from './DomeRouter.console-test';

package/out/src/temp-test.d.ts

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

package/package.json

@@ -1,13 +1,28 @@
 {
     "sideEffects": false,
     "name": "@lexriver/dome",
-    "version": "2.0.2",
+    "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
-}