@zcomponent/core 0.0.1

package/lib/event.js

@@ -0,0 +1,61 @@
+import { Observable } from "./observable";
+export class Event {
+    constructor() {
+        this.hasBindings = new Observable(false);
+        this._funcs = [];
+        this._emitting = false;
+        this._toUnbind = new Set();
+    }
+    clear() {
+        this._funcs = [];
+        this.hasBindings.value = false;
+    }
+    /**
+     * Bind new handler function.
+     * @param f - The callback function to be bound.
+     */
+    bindfn(f) {
+        this._funcs.push(f);
+        if (!this.hasBindings.value)
+            this.hasBindings.value = true;
+    }
+    /**
+     * Unbind an existing function.
+     * @param f - The callback function to be unbound.
+     */
+    unbindfn(f) {
+        if (this._emitting) {
+            this._toUnbind.add(f);
+            return;
+        }
+        this._toUnbind.delete(f);
+        const indx = this._funcs.indexOf(f);
+        if (indx > -1) {
+            this._funcs.splice(indx, 1);
+        }
+        if (this._funcs.length === 0 && this.hasBindings.value)
+            this.hasBindings.value = false;
+    }
+    /**
+     * Emit an event.
+     *
+     * @param a - The argument to pass to handler functions.
+     */
+    emit(...args) {
+        this._emitting = true;
+        for (let i = 0, total = this._funcs.length; i < total; i++) {
+            try {
+                if (this._toUnbind.has(this._funcs[i]))
+                    continue;
+                this._funcs[i](...args);
+            }
+            catch (ex) {
+                console.log('Exception in event handler', ex);
+            }
+        }
+        this._emitting = false;
+        if (this._toUnbind.size > 0) {
+            this._toUnbind.forEach(fn => this.unbindfn(fn));
+        }
+    }
+}

package/lib/index.d.ts

@@ -0,0 +1,13 @@
+export * from './component';
+export * from './behavior';
+export * from './actionbehavior';
+export * from './zcomponent';
+export * from './context';
+export * from './event';
+export * from './contexts/canvascontext';
+export * from './contexts/loadcontext';
+export * from './contexts/cookieconsentcontext';
+export * from './contexts/analyticscontext';
+export * from './contexts/usereventcontext';
+export * from './observable';
+export * from './contexts/environmentcontext';

package/lib/index.js

@@ -0,0 +1,20 @@
+export * from './component';
+export * from './behavior';
+export * from './actionbehavior';
+export * from './zcomponent';
+export * from './context';
+export * from './event';
+export * from './contexts/canvascontext';
+export * from './contexts/loadcontext';
+export * from './contexts/cookieconsentcontext';
+export * from './contexts/analyticscontext';
+export * from './contexts/usereventcontext';
+export * from './observable';
+export * from './contexts/environmentcontext';
+const link = document.createElement('link');
+link.setAttribute('rel', 'stylesheet');
+link.setAttribute('href', new URL('../css/zcomponent.css', import.meta.url).toString());
+if (document.head)
+    document.head.appendChild(link);
+else if (document.body)
+    document.body.appendChild(link);

package/lib/interfaces.d.ts

@@ -0,0 +1,67 @@
+import { Prop } from './types';
+export interface ID {
+    id: string;
+}
+export declare type Child = ID;
+export declare type NodeByID = {
+    [id: string]: NodeData | undefined;
+};
+export declare type PropsByID = {
+    [id: string]: {
+        [id: string]: any;
+    } | undefined;
+};
+export declare type BehaviorByID = {
+    [id: string]: BehaviorData | undefined;
+};
+export declare type Props = {
+    [id: string]: Prop;
+};
+export declare type Import = string;
+export declare type ParsedImport = [string, string];
+export declare type ElementType = Import;
+export declare type PropType = string;
+export interface ZComponentData {
+    id: string;
+    nodes: NodeByID;
+    root: string;
+    props: Props;
+    entityProps: PropsByID;
+    entityConstructorProps: PropsByID;
+    preview: Import;
+    propEntityOverrides?: {
+        [propName: string]: {
+            [entityID: string]: {
+                [propName: string]: boolean;
+            };
+        };
+    };
+    behaviors: BehaviorByID;
+    behaviorsByNode: {
+        [nodeId: string]: string[];
+    };
+    animation?: Animation;
+    entitiesByLabel?: {
+        [id: string]: {
+            [id: string]: boolean;
+        };
+    };
+    entitiesByScriptName?: {
+        [id: string]: {
+            [id: string]: boolean;
+        };
+    };
+}
+export interface NodeData {
+    id: string;
+    label?: string;
+    scriptName?: string;
+    type: ElementType;
+    parent?: string;
+    children: Child[];
+}
+export interface BehaviorData {
+    id: string;
+    type: Import;
+    nodeId?: string;
+}

package/lib/interfaces.js

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

package/lib/observable.d.ts

@@ -0,0 +1,16 @@
+export declare class Observable<T> {
+    private _default;
+    private _deep;
+    private _proxies;
+    private _value;
+    private _nextToken;
+    private _handlersByToken;
+    private _tokenByHandler;
+    constructor(_default: T, withHandler?: ((v: T) => void), _deep?: boolean);
+    get value(): T;
+    private _wrap;
+    set value(v: T | undefined);
+    withValue(fn: (v: T) => void): number;
+    removeWithValue(fnOrToken: number | ((v: T) => void)): void;
+    private _emitValue;
+}

package/lib/observable.js

@@ -0,0 +1,116 @@
+export class Observable {
+    constructor(_default, withHandler, _deep = true) {
+        this._default = _default;
+        this._deep = _deep;
+        this._proxies = new WeakMap();
+        this._nextToken = 0;
+        this._handlersByToken = new Map();
+        this._tokenByHandler = new Map();
+        let initial = this._default;
+        if (Array.isArray(this._default)) {
+            initial = this._default.slice();
+            this._default = this._default.slice();
+        }
+        else if (typeof this._default === 'object') {
+            initial = { ...this._default };
+            this._default = { ...this._default };
+        }
+        this._value = this._wrap(initial);
+        if (withHandler)
+            this.withValue(withHandler);
+    }
+    get value() {
+        return this._value.proxy;
+    }
+    _wrap(v) {
+        if (!Array.isArray(v) || this._deep === false) {
+            if (typeof v !== 'object' ||
+                Object.getPrototypeOf(v) !== Object.prototype ||
+                this._deep === false ||
+                typeof v === 'function') {
+                return { proxy: v, target: v };
+            }
+        }
+        const that = this;
+        return {
+            target: v,
+            proxy: new Proxy(v, {
+                get(target, p, receiver) {
+                    const val = target[p];
+                    if (Array.isArray(target) && p === "splice") {
+                        return function (...args) { val.apply(target, args); that._emitValue(); };
+                    }
+                    if (!Array.isArray(val)) {
+                        if (typeof val !== 'object')
+                            return val;
+                        if (Object.getPrototypeOf(val) !== Object.prototype)
+                            return val;
+                        if (typeof val === 'function')
+                            return val;
+                    }
+                    if (val['__z_is_observable'])
+                        return val;
+                    const proxy = that._proxies.get(val) || that._wrap(val);
+                    that._proxies.set(val, proxy);
+                    return proxy;
+                },
+                set(target, p, val) {
+                    target[p] = val;
+                    that._emitValue();
+                    return true;
+                },
+                deleteProperty(target, p) {
+                    delete target[p];
+                    that._emitValue();
+                    return true;
+                }
+            })
+        };
+    }
+    set value(v) {
+        v = v ?? this._default;
+        if (Array.isArray(this._value.target) && Array.isArray(v)) {
+            this._value.target.splice(0, Infinity, ...v);
+            this._emitValue();
+            return;
+        }
+        this._value = this._wrap(v);
+        this._emitValue();
+    }
+    withValue(fn) {
+        const token = this._nextToken++;
+        this._handlersByToken.set(token, fn);
+        this._tokenByHandler.set(fn, token);
+        try {
+            fn(this._value.proxy);
+        }
+        catch (err) {
+            console.error(err);
+        }
+        return token;
+    }
+    removeWithValue(fnOrToken) {
+        if (typeof fnOrToken === 'number') {
+            const handler = this._handlersByToken.get(fnOrToken);
+            if (handler !== undefined)
+                this._tokenByHandler.delete(handler);
+            this._handlersByToken.delete(fnOrToken);
+        }
+        else {
+            const token = this._tokenByHandler.get(fnOrToken);
+            if (token !== undefined)
+                this._handlersByToken.delete(token);
+            this._tokenByHandler.delete(fnOrToken);
+        }
+    }
+    _emitValue() {
+        for (let [key, h] of this._handlersByToken) {
+            try {
+                h(this._value.proxy);
+            }
+            catch (err) {
+                console.error(err);
+            }
+        }
+    }
+}

package/lib/props.js

@@ -0,0 +1,4 @@
+// export function defineProperty<T extends string, V, DefType extends V>(prop: T, fn: (val: V) => void, def: DefType) : { [key in T]: V } {
+// 	const t = {};
+// 	return t as { [key in T]: V };
+// }

package/lib/selectors.d.ts

@@ -0,0 +1,13 @@
+import { Import, NodeByID, ParsedImport, Props } from './interfaces';
+export declare function parseImport(i: Import): ParsedImport;
+export declare function constructImport(from: string, destFile: string, imp: string): string;
+export declare function getScriptName(n: string, requireUniqueIn: {
+    [k: string]: any;
+}): string;
+export declare function isValidVariableName(n: string): boolean;
+export declare function variableNameFromImport(imp: ParsedImport): string;
+export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props, scriptNames: {
+    [id: string]: {
+        [id: string]: boolean;
+    };
+}, url: string) => string;

package/lib/selectors.js

@@ -0,0 +1,173 @@
+import * as path from 'path';
+import { outputForType } from './types';
+export function parseImport(i) {
+    if (typeof i !== 'string')
+        return ['', ''];
+    const indx = i.lastIndexOf('#');
+    if (indx < 0)
+        return [i, 'default'];
+    return [i.substr(0, indx), i.substr(indx + 1)];
+}
+export function constructImport(from, destFile, imp) {
+    if (destFile.indexOf('/node_modules/') === 0) {
+        return destFile.substr('/node_modules/'.length) + '#' + imp;
+    }
+    let relative = path.relative(path.dirname(from), destFile);
+    if (!relative.startsWith('./') && !relative.startsWith('../'))
+        relative = './' + relative;
+    return relative + '#' + imp;
+}
+const reservedWords = [
+    'abstract',
+    'arguments',
+    'boolean',
+    'break',
+    'byte',
+    'case',
+    'catch',
+    'char',
+    'class',
+    'const',
+    'continue',
+    'debugger',
+    'default',
+    'delete',
+    'do',
+    'double',
+    'else',
+    'enum',
+    'eval',
+    'export',
+    'extends',
+    'false',
+    'final',
+    'finally',
+    'float',
+    'for',
+    'function',
+    'goto',
+    'if',
+    'implements',
+    'import',
+    'in',
+    'instanceof',
+    'int',
+    'interface',
+    'let',
+    'long',
+    'native',
+    'new',
+    'null',
+    'package',
+    'private',
+    'protected',
+    'public',
+    'return',
+    'short',
+    'static',
+    'super',
+    'switch',
+    'synchronized',
+    'this',
+    'throw',
+    'throws',
+    'transient',
+    'true',
+    'try',
+    'typeof',
+    'var',
+    'void',
+    'volatile',
+    'while',
+    'with',
+    'yield',
+];
+export function getScriptName(n, requireUniqueIn) {
+    if (n === undefined || n.length === 0) {
+        n = 'node';
+    }
+    let scriptname = n.replace(' ', '_');
+    scriptname = scriptname.replace('-', '_');
+    scriptname = scriptname.replace('.', '_');
+    scriptname = scriptname.replace(/[^a-zA-Z0-9_]/g, '');
+    if (scriptname.match(/^[0-9]/)) {
+        scriptname = 'n' + scriptname;
+    }
+    if (reservedWords.indexOf(scriptname) >= 0) {
+        scriptname += '_';
+    }
+    let finalname = scriptname;
+    let indx = 0;
+    while (requireUniqueIn[finalname]) {
+        finalname = scriptname + indx;
+        indx++;
+    }
+    return finalname;
+}
+const variableNameRegex = new RegExp(/[a-zA-Z_$][0-9a-zA-Z_$]*/);
+export function isValidVariableName(n) {
+    return variableNameRegex.test(n);
+}
+export function variableNameFromImport(imp) {
+    if (imp[1] === 'default' && typeof imp[0] === 'string') {
+        const parts = imp[0].split(path.sep);
+        return parts[parts.length - 1];
+    }
+    if (typeof imp[1] === 'string')
+        return imp[1];
+    return 'unknown';
+}
+export const typeDefinitionForComponent = (nodes, props, scriptNames, url) => {
+    const importMapping = new Map();
+    let indx = 0;
+    let importStrings = [];
+    for (const scriptNameNodes of Object.values(scriptNames)) {
+        for (const nodeID of Object.keys(scriptNameNodes)) {
+            const node = nodes[nodeID];
+            if (!node)
+                continue;
+            if (!importMapping.has(node.type)) {
+                const imp = parseImport(node.type);
+                const variable = `${getScriptName(variableNameFromImport(imp), {})}_${indx.toString()}`;
+                importStrings.push(`import { ${imp[1]} as ${variable} } from ${JSON.stringify(imp[0])};`);
+                importMapping.set(node.type, variable);
+                indx++;
+            }
+        }
+    }
+    return `import { ZComponent, ContextManager, InstanceOfComponent } from "@zcomponent/core";
+
+${importStrings.join('\n')}
+
+declare class Comp extends ZComponent {
+
+    constructor(constructorProps: {}, ctx: ContextManager);
+
+	nodes: {
+${Object.entries(scriptNames).map(entry => {
+        const values = Object.keys(entry[1]);
+        if (values.length > 1) {
+            return `\t\t${entry[0]}: {${values.map(e => `${JSON.stringify(e)}: InstanceOfComponent<typeof ${importMapping.get(nodes[e].type)}>`).join(', ')}},`;
+        }
+        else {
+            return `\t\t${entry[0]}: InstanceOfComponent<typeof ${importMapping.get(nodes[values[0]].type)}>,`;
+        }
+    }).join("\n")}
+	};
+
+${Object.values(props).map(typeOutputForProp).join('\n')}
+}
+
+/**
+* @zcomponent
+*/
+export default function ${getScriptName(path.basename(url), {})}(constructorProps: {}, mgr: ContextManager) : Comp;
+`;
+};
+function typeOutputForProp(prop) {
+    return `    /**
+    * @zprop
+    * ${prop.default && `@zdefault ${JSON.stringify(prop.default)}`}
+    */
+    public ${prop.name}: ${outputForType(prop.type)};`;
+}

package/lib/types.d.ts

@@ -0,0 +1,105 @@
+export interface BaseType {
+    comments?: string[];
+    typeHint?: TypeHint;
+}
+export interface StringPrimitiveType extends BaseType {
+    name: 'string';
+}
+export interface NumberPrimitiveType extends BaseType {
+    name: 'number';
+}
+export interface BooleanPrimitiveType extends BaseType {
+    name: 'boolean';
+}
+export interface LiteralType extends BaseType {
+    name: 'literal';
+    value: string | number | boolean | undefined | null;
+}
+export interface ArrayType extends BaseType {
+    name: 'array';
+    child: Type;
+}
+export interface TupleType extends BaseType {
+    name: 'tuple';
+    children: Type[];
+}
+export interface UnionType extends BaseType {
+    name: 'union';
+    children: Type[];
+}
+export interface UnknownType extends BaseType {
+    name: 'unknown';
+}
+export interface EnumType extends BaseType {
+    name: 'enum';
+    values: {
+        [id: string]: string | number;
+    };
+    valueComments?: {
+        [id: string]: string[];
+    };
+}
+export interface FunctionType extends BaseType {
+    name: 'function';
+    args: Prop[];
+    ret?: Type;
+}
+export interface EventType extends BaseType {
+    name: 'event';
+}
+export declare type Type = StringPrimitiveType | NumberPrimitiveType | BooleanPrimitiveType | ArrayType | TupleType | UnknownType | EnumType | UnionType | LiteralType | FunctionType | EventType;
+export declare enum TypeHint {
+    "proportion" = "proportion",
+    'color-norm-rgb' = "color-norm-rgb",
+    'color-unnorm-rgb' = "color-unnorm-rgb",
+    'color-hex' = "color-hex"
+}
+export interface Values {
+    type: 'files' | 'animations' | 'morphTargets' | 'events' | 'parentNodes' | 'nodelabels';
+    param: string;
+}
+export interface Prop {
+    name: string;
+    type: Type;
+    comments?: string[];
+    default?: any;
+    group?: string;
+    groupPriority?: number;
+    values?: Values[];
+}
+export interface ComponentInfo {
+    name: string;
+    file: string;
+    type: "component" | "behavior";
+    isDefault?: boolean;
+    constructorProps: {
+        [id: string]: Prop;
+    };
+    props: {
+        [id: string]: Prop;
+    };
+    comments?: string[];
+    icon?: string;
+    group?: string;
+    tags: string[];
+    allowedChildren: string[];
+    allowedParents?: string[];
+}
+export declare type SourceFileTypeInfo = {
+    [id: string]: ComponentInfo;
+};
+export declare type TypeInfoByFileName = {
+    [id: string]: SourceFileTypeInfo;
+};
+export declare function areTypesCompatible(a: Type, b: Type): boolean;
+export declare function mergeValues(a: Values[] | undefined, b: Values[] | undefined): Values[] | undefined;
+export declare function mergeProps(a: Prop, b: Prop): Prop | undefined;
+export declare function mergeTypes(a: Type, b: Type): Type | undefined;
+export interface TemplateInfo {
+    name: string;
+    content: string;
+    extn?: string;
+}
+export declare function symbolPathFromFilename(f: string): string;
+export declare function isValidValueForType(def: any, t: Type, allowUndefined?: boolean): boolean;
+export declare function outputForType(t: Type): string;