structured-fw 0.7.2

package/build/system/Util.js

@@ -0,0 +1,336 @@
+export function queryStringDecode(queryString, initialValue = {}, trimValues = true) {
+    const pairsRaw = queryString.replaceAll('+', ' ').split('&');
+    let pairs = pairsRaw.map((pair) => {
+        let parts = pair.split('=');
+        if (parts.length > 2) {
+            parts = [parts[0]].concat(parts.slice(1).join('='));
+        }
+        const hasValue = parts.length > 1;
+        const keyRaw = decodeURIComponent(parts[0]);
+        const value = hasValue ? (trimValues ? decodeURIComponent(parts[1]).trim() : decodeURIComponent(parts[1])) : true;
+        const arrayOrObject = /\[[^\[\]]*\]/.test(keyRaw);
+        const pathStart = arrayOrObject ? /\[(.*?)\]/.exec(keyRaw)[1] : null;
+        const isObject = pathStart !== null && /[^\[\]]+/.test(pathStart) && !/^\s+$/.test(pathStart) && !/^\d+$/.test(pathStart);
+        const isArray = pathStart !== null && !isObject;
+        const key = isArray || isObject ? keyRaw.substring(0, keyRaw.indexOf('[')) : keyRaw;
+        return {
+            key,
+            value,
+            isArray,
+            isObject,
+            path: pathStart,
+            keyRaw
+        };
+    });
+    while (pairs.length > 0) {
+        const item = pairs.shift();
+        if (item) {
+            if (!item.isArray && !item.isObject) {
+                initialValue[item.key] = item.value;
+            }
+            else if (item.isObject) {
+                const properties = [item].concat(pairs.filter((pair) => {
+                    return pair.isObject && pair.key === item.key;
+                }));
+                pairs = pairs.filter((pair) => {
+                    return !(pair.isObject && pair.key === item.key);
+                });
+                let obj = {};
+                const simpleProperties = properties.filter((prop) => {
+                    return prop.keyRaw === `${prop.key}[${prop.path}]`;
+                });
+                const complexProperties = properties.filter((prop) => {
+                    return prop.keyRaw !== `${prop.key}[${prop.path}]`;
+                });
+                for (const property of simpleProperties) {
+                    if (!property.path) {
+                        continue;
+                    }
+                    obj[property.path] = property.value;
+                }
+                const complexPropertyPathsResolved = [];
+                for (const property of complexProperties) {
+                    if (!property.path) {
+                        continue;
+                    }
+                    if (complexPropertyPathsResolved.includes(property.path)) {
+                        continue;
+                    }
+                    const objectProperties = complexProperties.filter((prop) => {
+                        return prop.path === property.path;
+                    });
+                    complexPropertyPathsResolved.push(property.path);
+                    obj[property.path] = queryStringDecode(objectProperties.map((prop) => {
+                        const pathRemaining = prop.keyRaw.substring(prop.key.length + (prop.path?.length || 0) + 3);
+                        const val = prop.value === true ? '' : `=${encodeURIComponent(prop.value)}`;
+                        return `value[${pathRemaining.substring(0, pathRemaining.length - 1)}]${val}`;
+                    }).join('&')).value;
+                }
+                initialValue[item.key] = obj;
+            }
+            else if (item.isArray) {
+                let arrayValues = [item].concat(pairs.filter((pair) => {
+                    return pair.isArray && pair.key === item.key;
+                }));
+                pairs = pairs.filter((pair) => {
+                    return !(pair.isArray && pair.key === item.key);
+                });
+                arrayValues.sort((a, b) => {
+                    if (a.path === b.path) {
+                        return 0;
+                    }
+                    if (a.path && b.path && a.path.trim().length > 0 && b.path.trim().length > 0) {
+                        const aIndex = parseInt(a.path);
+                        const bIndex = parseInt(b.path);
+                        return aIndex - bIndex;
+                    }
+                    return 0;
+                });
+                const complexPropertyPathsResolved = [];
+                const arrayItems = arrayValues.map((value) => {
+                    const simpleValue = value.keyRaw === `${value.key}[${value.path}]`;
+                    if (simpleValue) {
+                        return value.value;
+                    }
+                    if (complexPropertyPathsResolved.includes(value.path)) {
+                        return null;
+                    }
+                    const objectProperties = arrayValues.filter((prop) => {
+                        return prop.path === value.path;
+                    });
+                    complexPropertyPathsResolved.push(value.path);
+                    return queryStringDecode(objectProperties.map((prop) => {
+                        const pathRemaining = prop.keyRaw.substring(prop.key.length + (prop.path?.length || 0) + 3);
+                        return `value${pathRemaining.length > 0 ? `[${pathRemaining.substring(0, pathRemaining.length - 1)}]` : ''}=${encodeURIComponent(prop.value)}`;
+                    }).join('&')).value;
+                }).filter((val) => {
+                    return val !== null;
+                });
+                initialValue[item.key] = arrayItems;
+            }
+        }
+    }
+    return initialValue;
+}
+export function queryStringDecodedSetValue(obj, value) {
+    if (typeof obj === 'string') {
+        obj = queryStringDecode(obj);
+    }
+    const setValue = (obj) => {
+        for (const key in obj) {
+            if (typeof obj[key] === 'object' && obj[key] !== null) {
+                setValue(obj[key]);
+            }
+            else if (obj[key] === true) {
+                obj[key] = value;
+            }
+        }
+    };
+    setValue(obj);
+    return obj;
+}
+export function objectEach(obj, callbackEach) {
+    for (const key in obj) {
+        callbackEach(key, obj[key]);
+    }
+}
+export function toCamelCase(dataKey, separator = '-') {
+    let index;
+    do {
+        index = dataKey.indexOf(separator);
+        if (index > -1) {
+            dataKey = dataKey.substring(0, index) + dataKey.substring(index + 1, index + 2).toUpperCase() + dataKey.substring(index + 2);
+        }
+    } while (index > -1);
+    return dataKey;
+}
+export function toSnakeCase(str, joinWith = '_') {
+    let start = 0;
+    const parts = [];
+    if (str.length < 2) {
+        return str.toLowerCase();
+    }
+    for (let i = 1; i < str.length; i++) {
+        if (str[i] !== str[i].toLowerCase()) {
+            parts.push(str.substring(start, i).toLowerCase());
+            start = i;
+        }
+    }
+    if (start === 0) {
+        return str.toLowerCase();
+    }
+    parts.push(str.substring(start).toLowerCase());
+    return parts.join(joinWith);
+}
+export function capitalize(str) {
+    return str.substring(0, 1).toUpperCase() + str.substring(1);
+}
+export function isAsync(fn) {
+    return fn.constructor.name === 'AsyncFunction';
+}
+export function randomString(len) {
+    const charCodes = new Uint8Array(len);
+    const generators = [
+        function () {
+            return 65 + Math.floor(Math.random() * 26);
+        },
+        function () {
+            return 97 + Math.floor(Math.random() * 26);
+        },
+        function () {
+            return 48 + Math.floor(Math.random() * 10);
+        }
+    ];
+    for (let i = 0; i < len; i++) {
+        charCodes[i] = generators[Math.floor(Math.random() * generators.length)]();
+    }
+    return String.fromCodePoint(...charCodes);
+}
+export function unique(arr) {
+    return arr.reduce((prev, curr) => {
+        if (!prev.includes(curr)) {
+            prev.push(curr);
+        }
+        return prev;
+    }, []);
+}
+export function stripTags(contentWithHTML, keepTags = []) {
+    if (contentWithHTML === undefined) {
+        return '';
+    }
+    ;
+    return contentWithHTML.replaceAll(/<\s*\/?\s*[a-zA-Z]+[^>]*?>/g, (sub, index) => {
+        const keep = keepTags.some((kept) => {
+            const match = new RegExp(`^<\s*\/?\s*${kept}`);
+            return match.test(sub);
+        });
+        if (keep) {
+            return sub;
+        }
+        return sub.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+    });
+}
+function base64ToBytes(base64) {
+    const binString = atob(base64);
+    return Uint8Array.from(binString, (m) => m.codePointAt(0));
+}
+function bytesToBase64(bytes) {
+    const binString = String.fromCodePoint(...bytes);
+    return btoa(binString);
+}
+export function attributeValueToString(key, value) {
+    return 'base64:' + bytesToBase64(new TextEncoder().encode(JSON.stringify({ key, value })));
+}
+export function attributeValueFromString(attributeValue) {
+    if (attributeValue.indexOf('base64:') === 0) {
+        try {
+            const decoded = new TextDecoder().decode(base64ToBytes(attributeValue.substring(7)));
+            if (decoded.indexOf('{') !== 0) {
+                return attributeValue;
+            }
+            const valObj = JSON.parse(decoded);
+            if (!('value' in valObj) || !('key' in valObj)) {
+                return decoded;
+            }
+            return valObj;
+        }
+        catch (e) {
+            return attributeValue;
+        }
+    }
+    return attributeValue;
+}
+export function attributeValueEscape(str) {
+    return str.replaceAll('"', '&quot;');
+}
+export function isObject(item) {
+    if (typeof window === 'undefined') {
+        return (item && typeof item === 'object' && !Array.isArray(item)) && !Buffer.isBuffer(item);
+    }
+    return (item && typeof item === 'object' && !Array.isArray(item));
+}
+export function equalDeep(a, b) {
+    if (a === b) {
+        return true;
+    }
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    const keyDifferent = keysA.some((keyA) => {
+        return !(keyA in b);
+    });
+    if (keyDifferent) {
+        return false;
+    }
+    for (let i = 0; i < keysA.length; i++) {
+        const key = keysA[i];
+        const valA = a[key];
+        const valB = b[key];
+        const typeA = typeof valA;
+        const typeB = typeof valB;
+        if (valA === valB) {
+            continue;
+        }
+        if (typeA !== typeB) {
+            return false;
+        }
+        else {
+            if (typeA !== 'object') {
+                if (valA !== valB) {
+                    return false;
+                }
+            }
+        }
+        if ((valA === null && valB !== null) || (valA !== null && valB === null)) {
+            return false;
+        }
+        const isArrayA = Array.isArray(valA);
+        const isArrayB = Array.isArray(valB);
+        if ((isArrayA && !isArrayB) || (!isArrayA && isArrayB)) {
+            return false;
+        }
+        if (!isArrayA && !isArrayB) {
+            if (!equalDeep(valA, valB)) {
+                return false;
+            }
+        }
+        if (isArrayA && isArrayB) {
+            if (valA.length !== valB.length) {
+                return false;
+            }
+            for (let j = 0; j < valA.length; j++) {
+                if (!equalDeep({
+                    value: valA[j]
+                }, {
+                    value: valB[j]
+                })) {
+                    return false;
+                }
+            }
+        }
+    }
+    return true;
+}
+export function mergeDeep(target, ...sources) {
+    if (!sources.length)
+        return target;
+    const source = sources.shift();
+    if (isObject(target) && isObject(source)) {
+        for (const key in source) {
+            if (isObject(source[key])) {
+                if (!target[key])
+                    Object.assign(target, { [key]: {} });
+                mergeDeep(target[key], source[key]);
+            }
+            else {
+                Object.assign(target, { [key]: source[key] });
+            }
+        }
+    }
+    if (Array.isArray(target) && Array.isArray(source)) {
+        return target.concat(source);
+    }
+    return mergeDeep(target, ...sources);
+}

package/build/system/client/App.d.ts

@@ -0,0 +1,7 @@
+import { DataStore } from './DataStore.js';
+import { ClientComponent } from './ClientComponent.js';
+export declare class App {
+    root: ClientComponent;
+    store: DataStore;
+    constructor();
+}

package/build/system/client/App.js

@@ -0,0 +1,8 @@
+import { DataStore } from './DataStore.js';
+import { ClientComponent } from './ClientComponent.js';
+export class App {
+    constructor() {
+        this.store = new DataStore();
+        this.root = new ClientComponent(null, 'root', document.body, this.store);
+    }
+}

package/build/system/client/Client.d.ts

@@ -0,0 +1,6 @@
+import { App } from './App.js';
+import { Net } from './Net.js';
+export declare class Client {
+    Components: App;
+    Net: Net;
+}

package/build/system/client/Client.js

@@ -0,0 +1,9 @@
+import { App } from './App.js';
+import { Net } from './Net.js';
+export class Client {
+    constructor() {
+        this.Components = new App();
+        this.Net = new Net();
+    }
+}
+new App();

package/build/system/client/ClientComponent.d.ts

@@ -0,0 +1,68 @@
+import { InitializerFunction, LooseObject, StructuredClientConfig } from '../Types.js';
+import { DataStoreView } from './DataStoreView.js';
+import { DataStore } from './DataStore.js';
+import { Net } from './Net.js';
+import { EventEmitter } from './EventEmitter.js';
+declare global {
+    interface Window {
+        initializers: Record<string, InitializerFunction | string>;
+        structuredClientConfig: StructuredClientConfig;
+    }
+}
+export declare class ClientComponent extends EventEmitter {
+    readonly name: string;
+    children: Array<ClientComponent>;
+    readonly parent: ClientComponent;
+    readonly domNode: HTMLElement;
+    readonly isRoot: boolean;
+    readonly root: ClientComponent;
+    store: DataStoreView;
+    private storeGlobal;
+    readonly net: Net;
+    private initializerExecuted;
+    destroyed: boolean;
+    private redrawRequest;
+    onDestroy?: Function;
+    onRedraw?: Function;
+    private bound;
+    private conditionals;
+    private conditionalCallbacks;
+    private conditionalClassNames;
+    private refs;
+    private refsArray;
+    loaded: boolean;
+    private initializer;
+    private data;
+    constructor(parent: ClientComponent | null, name: string, domNode: HTMLElement, store: DataStore, runInitializer?: boolean);
+    private init;
+    private runInitializer;
+    private initData;
+    pathData(): Array<{
+        [key: string]: string;
+    }>;
+    setData(key: string, value: any, updateStore?: boolean): ClientComponent;
+    private initChildren;
+    redraw(data?: LooseObject): Promise<void>;
+    private initConditionals;
+    private initRefs;
+    private initModels;
+    private promoteRefs;
+    ref<T>(refName: string): T;
+    refArray<T>(refName: string): Array<T>;
+    private execCondition;
+    conditionalCallback(name: string, callback: (args?: any) => boolean, updateConditionals?: boolean): void;
+    private updateConditionals;
+    remove(): Promise<void>;
+    parentFind(parentName: string): ClientComponent | null;
+    find(componentName: string, recursive?: boolean): null | ClientComponent;
+    query(componentName: string, recursive?: boolean, results?: Array<ClientComponent>): Array<ClientComponent>;
+    add(appendTo: string | HTMLElement, componentName: string, data?: LooseObject): Promise<ClientComponent | null>;
+    getData<T>(key?: string): T;
+    show(domNode: HTMLElement, enableTransition?: boolean): void;
+    hide(domNode: HTMLElement, enableTransition?: boolean): void;
+    private transitionAttributes;
+    private transitionAxis;
+    private destroy;
+    bind(element: HTMLElement, event: string, callback: (e: Event) => void): void;
+    private unbindAll;
+}