@zcomponent/core 0.0.1

package/lib/types.js

@@ -0,0 +1,295 @@
+export var TypeHint;
+(function (TypeHint) {
+    TypeHint["proportion"] = "proportion";
+    TypeHint["color-norm-rgb"] = "color-norm-rgb";
+    TypeHint["color-unnorm-rgb"] = "color-unnorm-rgb";
+    TypeHint["color-hex"] = "color-hex";
+})(TypeHint || (TypeHint = {}));
+function valuesCompatible(l, r) {
+    if (!l && !r)
+        return true;
+    if (!l || !r)
+        return false;
+    for (const [k, v] of Object.entries(l)) {
+        if (r[k] !== v)
+            return false;
+    }
+    return true;
+}
+export function areTypesCompatible(a, b) {
+    if (a.name !== b.name)
+        return false;
+    switch (a.name) {
+        case 'array':
+            return areTypesCompatible(a.child, b.child);
+        case 'literal':
+            return a.value === b.value;
+        case 'enum': {
+            const bt = b;
+            if (!valuesCompatible(a.values, bt.values))
+                return false;
+            if (!valuesCompatible(bt.values, a.values))
+                return false;
+            break;
+        }
+        case 'union': {
+            const bt = b;
+            for (let achild of a.children) {
+                let foundCompatible = false;
+                for (let bchild of bt.children) {
+                    if (areTypesCompatible(achild, bchild)) {
+                        foundCompatible = true;
+                        break;
+                    }
+                }
+                if (!foundCompatible)
+                    return false;
+            }
+            return true;
+        }
+        case 'tuple': {
+            const bt = b;
+            if (a.children.length !== bt.children.length)
+                return false;
+            for (let i = 0; i < a.children.length; i++) {
+                if (!areTypesCompatible(a.children[i], bt.children[i]))
+                    return false;
+            }
+            return true;
+        }
+        case 'function': {
+            const bt = b;
+            if (a.args.length !== bt.args.length)
+                return false;
+            for (let i = 0; i < a.args.length; i++) {
+                if (!areTypesCompatible(a.args[i].type, bt.args[i].type))
+                    return false;
+            }
+            if (a.ret && !bt.ret)
+                return false;
+            if (!a.ret && !bt.ret)
+                return false;
+            if (a.ret && bt.ret)
+                return areTypesCompatible(a.ret, bt.ret);
+        }
+    }
+    return true;
+}
+export function mergeValues(a, b) {
+    if (a === undefined && b === undefined)
+        return undefined;
+    a = a ?? [];
+    b = b ?? [];
+    const fileValues = new Set();
+    const ret = [];
+    for (const entry of a) {
+        if (entry.type === 'files')
+            fileValues.add(entry.param);
+        ret.push(entry);
+    }
+    for (const entry of b) {
+        if (entry.type === 'files' && fileValues.has(entry.param))
+            continue;
+        ret.push(entry);
+    }
+    return ret;
+}
+export function mergeProps(a, b) {
+    if (a.name !== b.name)
+        return;
+    const type = mergeTypes(a.type, b.type);
+    if (!type)
+        return;
+    let def;
+    if (a.default !== undefined && b.default !== undefined && JSON.stringify(a.default) === JSON.stringify(b.default))
+        def = a.default;
+    return {
+        name: a.name,
+        comments: mergeComments(a.comments ?? [], b.comments ?? []),
+        type,
+        default: def,
+        group: a.group === b.group ? a.group : undefined,
+        groupPriority: Math.max(a.groupPriority ?? 0, b.groupPriority ?? 0),
+        values: mergeValues(a.values, b.values)
+    };
+}
+function mergeComments(a, b) {
+    const s = new Set([...a, ...b]);
+    return [...s.values()];
+}
+function mergeValueComments(a, b) {
+    const ret = {};
+    for (const [k, v] of Object.entries(a)) {
+        ret[k] = mergeComments(a[k], b[k]);
+    }
+    return ret;
+}
+export function mergeTypes(a, b) {
+    if (!areTypesCompatible(a, b))
+        return;
+    const typeHint = a.typeHint === b.typeHint ? a.typeHint : undefined;
+    switch (a.name) {
+        case 'string':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+        case 'number':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+        case 'enum':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+                values: a.values,
+                valueComments: a.valueComments ? mergeValueComments(a.valueComments, b.valueComments) : undefined,
+            };
+        case 'boolean':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+        case 'unknown':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+        case 'literal':
+            return {
+                name: a.name,
+                typeHint,
+                value: a.value,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+        case 'array': {
+            const child = mergeTypes(a.child, b.child);
+            if (!child)
+                return undefined;
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+                child,
+            };
+        }
+        case 'tuple': {
+            const children = [];
+            for (let i = 0; i < a.children.length; i++) {
+                const merged = mergeTypes(a.children[i], b.children[i]);
+                if (!merged)
+                    return undefined;
+                children.push(merged);
+            }
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+                children,
+            };
+        }
+        case 'union':
+            return {
+                name: a.name,
+                typeHint,
+                children: a.children,
+                comments: mergeComments(a.comments ?? [], b.comments ?? [])
+            };
+        case 'function':
+            return {
+                name: a.name,
+                typeHint,
+                args: a.args,
+                ret: a.ret,
+                comments: mergeComments(a.comments ?? [], b.comments ?? [])
+            };
+        case 'event':
+            return {
+                name: a.name,
+                typeHint,
+                comments: mergeComments(a.comments ?? [], b.comments ?? []),
+            };
+    }
+}
+const regex = new RegExp(/((\.tsx?)|(\.d\.ts)|(\.jsx?))$/, 'i');
+export function symbolPathFromFilename(f) {
+    return f.replace(regex, '');
+}
+export function isValidValueForType(def, t, allowUndefined) {
+    if (allowUndefined && typeof def === 'undefined')
+        return true;
+    switch (t.name) {
+        case 'boolean': return typeof def === 'boolean';
+        case 'number': return typeof def === 'number';
+        case 'string': return typeof def === 'string';
+        case 'enum': {
+            for (const v of Object.values(t.values)) {
+                if (v === def)
+                    return true;
+            }
+            return false;
+        }
+        case 'unknown':
+            return true;
+        case 'array': {
+            if (!Array.isArray(def))
+                return false;
+            for (const entry of def) {
+                if (!isValidValueForType(entry, t.child))
+                    return false;
+            }
+            return true;
+        }
+        case 'tuple': {
+            if (!Array.isArray(def))
+                return false;
+            if (def.length !== t.children.length)
+                return false;
+            for (let i = 0; i < t.children.length; i++) {
+                if (!isValidValueForType(def[i], t.children[i]))
+                    return false;
+            }
+            return true;
+        }
+        case 'union': {
+            for (const child of t.children) {
+                if (isValidValueForType(def, child))
+                    return true;
+            }
+            return false;
+        }
+        case 'literal': return def === t.value;
+        case 'function': return false;
+    }
+    return false;
+}
+export function outputForType(t) {
+    switch (t.name) {
+        case 'array':
+            return outputForType(t.child) + '[]';
+        case 'tuple':
+            return `[${t.children.map(c => outputForType(c)).join(', ')}]`;
+        case 'unknown':
+            return 'any';
+        case 'number':
+        case 'enum':
+        case 'string':
+        case 'boolean':
+            return t.name;
+        case 'literal': {
+            if (t.value === undefined)
+                return "undefined";
+            return JSON.stringify(t.value);
+        }
+        case 'union': return t.children.map(val => outputForType(val)).join(' | ');
+        case 'function': return `(${t.args.map(entry => `${entry.name}: ${outputForType(entry.type)}`).join(', ')}) => ${t.ret ? outputForType(t.ret) : 'void'}`;
+        case 'event':
+            return 'Event';
+    }
+}

package/lib/validators.d.ts

@@ -0,0 +1,8 @@
+import { Import, NodeData, ZComponentData } from './interfaces';
+interface Issue {
+    text: string;
+}
+export declare const validateImport: (i: Import) => Issue[];
+export declare const validatorZcomponentTopLevel: (url: string, component: ZComponentData) => Issue[];
+export declare const validatorZcomponentComponent: (node: NodeData, nodeId: string) => Issue[];
+export {};

package/lib/validators.js

@@ -0,0 +1,32 @@
+export const validateImport = (i) => {
+    if (typeof i !== 'string')
+        return [{ text: 'Import structure is invalid' }];
+    if (i.indexOf('#') < 0)
+        return [{ text: 'Import structure is invalid' }];
+    return [];
+};
+export const validatorZcomponentTopLevel = (url, component) => {
+    if (typeof component !== 'object' ||
+        typeof component.nodes !== 'object' ||
+        typeof component.entityConstructorProps !== 'object' ||
+        typeof component.entityProps !== 'object' ||
+        typeof component.behaviors !== 'object' ||
+        typeof component.behaviorsByNode !== 'object' ||
+        typeof component.id !== 'string' ||
+        typeof component.root !== 'string') {
+        return [{ text: 'Component structure is invalid' }];
+    }
+    if (component.id.length === 0)
+        return [{ text: 'Component structure ID has zero length' }];
+    if (component.nodes[component.root] === undefined)
+        return [{ text: 'Component root node does not exist' }];
+    return [];
+};
+export const validatorZcomponentComponent = (node, nodeId) => {
+    if (typeof node !== 'object' || !Array.isArray(node.children))
+        return [{ text: 'Component structure ID has zero length' }];
+    if (node.id !== nodeId)
+        return [{ text: 'Component ID mismatch' }];
+    const issues = validateImport(node.type);
+    return issues;
+};

package/lib/zcomponent.d.ts

@@ -0,0 +1,55 @@
+import { ComponentInstance, InstanceOfComponent } from './component';
+import { ContextManager } from './context';
+import { ZComponentData } from './interfaces';
+export interface ZComponentOptions {
+    data: ZComponentData;
+    importMapping: {
+        [id: string]: () => any;
+    };
+    propReplacement: {
+        [id: string]: {
+            [id: string]: any;
+        };
+    };
+    constructorPropReplacement: {
+        [id: string]: {
+            [id: string]: any;
+        };
+    };
+    onConstructingNode?: (id: string | undefined) => void;
+}
+export interface ZComponentContext {
+    zcomponent: ZComponent;
+}
+export declare const ZComponentContext: import("./context").ContextTypeWithDefault<ZComponentContext, [zcomponent: ZComponent<any>]>;
+export declare function useZComponentInstance<T extends ZComponent, K extends ((props: any, ctx: any) => T)>(ctx: ContextManager, comp?: K): InstanceOfComponent<K>;
+export declare function useConstructed(ctx: ContextManager): Promise<void>;
+export declare class ZComponent<RootType = any> implements ComponentInstance {
+    private _opts;
+    id: string;
+    root: RootType;
+    idByRoot: Map<any, string>;
+    nodes: {
+        [id: string]: InstanceOfComponent<any> | InstanceOfComponent<any>[];
+    };
+    entityByID: Map<string, any>;
+    private _constructedResolve;
+    constructed: Promise<void>;
+    isConstructed: boolean;
+    private _nodesById;
+    private _root;
+    private _contextManager;
+    private _behaviorsToInitialize;
+    constructor(constructorProps: {
+        [id: string]: any;
+    }, ctx: ContextManager, _opts: ZComponentOptions);
+    private _inflate;
+    private _inflateBehaviors;
+    private _wrapBehaviors;
+    notifyPropsChanged(entries: Map<string, Set<string>>): void;
+    private _initializeComponentProps;
+    private _setEntityProp;
+    _getNodeById(id: string): ComponentInstance | undefined;
+    set _parent(v: any);
+    dispose(): void;
+}

package/lib/zcomponent.js

@@ -0,0 +1,226 @@
+import { shouldBehaviorRunAtDesignTime } from './behavior';
+import { defineContextType } from './context';
+import { isDesignTime } from './contexts/environmentcontext';
+import { Observable } from './observable';
+export const ZComponentContext = defineContextType((ctx, zcomponent) => {
+    return { zcomponent };
+});
+export function useZComponentInstance(ctx, comp) {
+    return ctx.getOrThrow(ZComponentContext)?.zcomponent;
+}
+export function useConstructed(ctx) {
+    return ctx.getOrThrow(ZComponentContext)?.zcomponent.constructed;
+}
+export class ZComponent {
+    constructor(constructorProps, ctx, _opts) {
+        this._opts = _opts;
+        this.idByRoot = new Map();
+        this.nodes = {};
+        this.entityByID = new Map();
+        this.constructed = new Promise(resolve => this._constructedResolve = resolve);
+        this.isConstructed = false;
+        this._nodesById = new Map();
+        this._behaviorsToInitialize = [];
+        this.id = this._opts.data.id;
+        this._initializeComponentProps();
+        this._contextManager = ctx.fork(ZComponentContext, this)[0];
+        this._root = this._inflate(this._opts.data.root, {}, this._contextManager);
+        this.root = this._root?.root;
+        this._inflateBehaviors();
+        this.isConstructed = true;
+        this._constructedResolve();
+    }
+    _inflate(nodeId, additionalConstructorProps, ctx) {
+        const node = this._opts.data.nodes[nodeId];
+        if (!node) {
+            console.log('Warning - unable to find node with ID', nodeId);
+            return;
+        }
+        const construct = this._opts.importMapping[node.type]?.();
+        if (!construct) {
+            console.log('Warning - unable to find constructor for type', node.type);
+            return;
+        }
+        const children = additionalConstructorProps['children'] ?? [];
+        for (const child of node.children) {
+            children.push([
+                (cp, ctx) => {
+                    const comp = this._inflate(child.id, cp, ctx);
+                    return {
+                        ...comp,
+                        dispose: () => {
+                            this.entityByID.delete(nodeId);
+                            this._nodesById.delete(nodeId);
+                            if (comp && typeof comp.dispose === 'function')
+                                comp.dispose();
+                        }
+                    };
+                },
+                {}
+            ]);
+        }
+        let impl;
+        const constructorProps = {
+            ...(this._opts.data.entityConstructorProps?.[nodeId] ?? {}),
+            ...(this._opts.constructorPropReplacement?.[nodeId] ?? {}),
+            ...additionalConstructorProps,
+            children,
+        };
+        this._opts.onConstructingNode?.(nodeId);
+        try {
+            impl = construct(constructorProps, ctx);
+        }
+        catch (err) {
+            console.log('Warning - unable to construct node of type', node.type, err);
+            return;
+        }
+        this._behaviorsToInitialize.push([nodeId, impl, ctx]);
+        if (impl.root)
+            this.idByRoot.set(impl.root, nodeId);
+        this._nodesById.set(nodeId, impl);
+        this.entityByID.set(nodeId, impl);
+        if (node.scriptName) {
+            const entriesForScriptName = this._opts.data.entitiesByScriptName?.[node.scriptName] ?? {};
+            let moreThanOne = false;
+            for (const entry in entriesForScriptName) {
+                if (entry !== node.id) {
+                    moreThanOne = true;
+                    break;
+                }
+            }
+            if (moreThanOne) {
+                const current = this.nodes[node.scriptName] ?? {};
+                this.nodes[node.scriptName] = current;
+                current[node.id] = impl;
+            }
+            else {
+                this.nodes[node.scriptName] = impl;
+            }
+        }
+        if (!impl)
+            return impl;
+        const props = {
+            ...(this._opts.data.entityProps?.[nodeId] ?? {}),
+            ...(this._opts.propReplacement?.[nodeId] ?? {}),
+        };
+        for (const [key, val] of Object.entries(props)) {
+            try {
+                this._setEntityProp(impl, key, val);
+            }
+            catch (err) {
+                console.log('Warning - unable to set node prop', key, val);
+            }
+        }
+        this._opts.onConstructingNode?.(undefined);
+        if (this.isConstructed)
+            this._inflateBehaviors();
+        return impl;
+    }
+    _inflateBehaviors() {
+        for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
+            this._wrapBehaviors(nodeID, impl, ctx);
+        }
+        this._behaviorsToInitialize = [];
+    }
+    _wrapBehaviors(nodeID, impl, ctx) {
+        const behaviors = this._opts.data.behaviorsByNode?.[nodeID] ?? [];
+        const designTime = isDesignTime(this._contextManager);
+        for (const behaviorID of behaviors) {
+            const behavior = this._opts.data.behaviors?.[behaviorID];
+            if (!behavior)
+                continue;
+            const constructorProps = {
+                ...(this._opts.data.entityConstructorProps?.[behaviorID] ?? {}),
+                ...(this._opts.constructorPropReplacement?.[behaviorID] ?? {}),
+                instance: impl
+            };
+            const constructor = this._opts.importMapping[behavior.type]?.();
+            if (!constructor)
+                continue;
+            if (designTime && !shouldBehaviorRunAtDesignTime(constructor))
+                continue;
+            const res = constructor(constructorProps, ctx);
+            if (!res)
+                continue;
+            this.entityByID.set(behaviorID, res);
+            const props = {
+                ...(this._opts.data.entityProps?.[behaviorID] ?? {}),
+                ...(this._opts.propReplacement?.[behaviorID] ?? {}),
+            };
+            for (const [key, val] of Object.entries(props)) {
+                try {
+                    this._setEntityProp(res, key, val);
+                }
+                catch (err) {
+                    console.log('Warning - unable to set behavior prop', key, val);
+                }
+            }
+        }
+        return impl;
+    }
+    notifyPropsChanged(entries) {
+        for (const [entityID, propSet] of entries.entries()) {
+            const entity = this.entityByID.get(entityID);
+            if (!entity)
+                continue;
+            for (const prop of propSet.values()) {
+                try {
+                    this._setEntityProp(entity, prop, this._opts.data.entityProps[entityID]?.[prop]);
+                }
+                catch (err) {
+                    console.log('Warning - unable to set prop', entityID, prop);
+                }
+            }
+        }
+    }
+    _initializeComponentProps() {
+        const componentProps = this._opts.data.propEntityOverrides ?? {};
+        for (const [prop, entry] of Object.entries(componentProps)) {
+            let value = undefined;
+            Object.defineProperty(this, prop, {
+                get: () => value,
+                set: v => {
+                    value = v;
+                    for (const [entityID, overriddenProps] of Object.entries(entry)) {
+                        const entity = this.entityByID.get(entityID);
+                        if (!entity)
+                            continue;
+                        for (const overriddenProp of Object.keys(overriddenProps)) {
+                            try {
+                                this._setEntityProp(entity, overriddenProp, v);
+                            }
+                            catch (err) {
+                                console.log('Warning - unable to set prop', overriddenProp, v);
+                            }
+                        }
+                    }
+                },
+            });
+        }
+    }
+    _setEntityProp(entity, prop, v) {
+        if (entity[prop] instanceof Observable)
+            entity[prop].value = v;
+        else
+            entity[prop] = v;
+    }
+    _getNodeById(id) {
+        return this._nodesById.get(id);
+    }
+    set _parent(v) {
+        if (this._root)
+            this._root.parent = v;
+    }
+    dispose() {
+        for (const entity of this.entityByID.values()) {
+            if (entity && typeof entity.dispose === 'function') {
+                try {
+                    entity.dispose();
+                }
+                catch (err) {
+                    // Ignore
+                }
+            }
+        }
+    }
+}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@zcomponent/core",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "engines": {
+    "node": ">=12.0.0",
+    "browsers": "defaults"
+  },
+  "type": "module",
+  "directories": {
+    "lib": "lib"
+  },
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "lib/**/*",
+    "css/**/*"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "PW_EXPERIMENTAL_TS_ESM=1 playwright test",
+    "tests": "parcel serve tests/index.html -p 8088"
+  },
+  "author": "Zappar Limited",
+  "license": "Proprietary",
+  "devDependencies": {
+    "typescript": "^4.6.3",
+    "@playwright/test": "^1.25.0",
+    "parcel": "2.6.2",
+    "@types/ua-parser-js": "^0.7.36",
+    "ua-parser-js": "^1.0.2"
+  },
+  "dependencies": {},
+  "zexports": [
+    "./lib/components/**/*",
+    "./lib/behaviors/**/*"
+  ]
+}