@zcomponent/core 0.0.13 → 0.0.15

package/lib/interfaces.d.ts

@@ -29,15 +29,12 @@ export interface ZComponentData {
     nodes: NodeByID;
     root: string;
     props: Props;
+    constructorProps?: Props;
     entityProps: PropsByID;
     entityConstructorProps: PropsByID;
     preview: Import;
-    propEntityOverrides?: {
-        [propName: string]: {
-            [entityID: string]: {
-                [propName: string]: boolean;
-            };
-        };
+    entityPropOverrides?: {
+        [id: string]: EntityPropOverride;
     };
     behaviors: BehaviorByID;
     animation?: Animation;
@@ -70,3 +67,30 @@ export interface BehaviorData {
         order: string;
     };
 }
+export type EntityPropOverride = PropEntityPropOverride | ImportEntityPropOverride | ContextValueEntityPropOverride;
+export declare enum EntityPropOverrideType {
+    ComponentProp = "componentprop",
+    Import = "import",
+    ContextValue = "contextvalue"
+}
+export interface BaseEntityPropOverride {
+    id: string;
+    entityID: string;
+    entityPropPath: (string | number)[];
+    entityPropIsConstructor: boolean;
+    type: EntityPropOverrideType;
+}
+export interface PropEntityPropOverride extends BaseEntityPropOverride {
+    propName: string;
+    isConstructorProp: boolean;
+    type: EntityPropOverrideType.ComponentProp;
+}
+export interface ImportEntityPropOverride extends BaseEntityPropOverride {
+    imp: string;
+    type: EntityPropOverrideType.Import;
+}
+export interface ContextValueEntityPropOverride extends BaseEntityPropOverride {
+    imp: string;
+    val: string;
+    type: EntityPropOverrideType.ContextValue;
+}

package/lib/interfaces.js

@@ -1 +1,6 @@
-export {};
+export var EntityPropOverrideType;
+(function (EntityPropOverrideType) {
+    EntityPropOverrideType["ComponentProp"] = "componentprop";
+    EntityPropOverrideType["Import"] = "import";
+    EntityPropOverrideType["ContextValue"] = "contextvalue";
+})(EntityPropOverrideType || (EntityPropOverrideType = {}));

package/lib/observable.d.ts

@@ -1,3 +1,4 @@
+import { Emitter } from "./emitter";
 type Resolved<T, M> = [T] extends [never] ? M : T;
 /**
  * A class that holds a value and watches it for changes (deeply by default).
@@ -31,14 +32,11 @@ type Resolved<T, M> = [T] extends [never] ? M : T;
  * @typeParam Type - The type of the contained value
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
-export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> {
+export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> extends Emitter<[Resolved<Type, TypeInternal>]> {
     private _default;
     private _deep;
     private _proxies;
     private _value;
-    private _nextToken;
-    private _handlersByToken;
-    private _tokenByHandler;
     /**
      * Constructs a new Observable
      *
@@ -56,8 +54,7 @@ export declare class Observable<Type = never, TypeInternal extends any[] | [] |
     get value(): Resolved<Type, TypeInternal>;
     private _wrap;
     set value(v: Resolved<Type, TypeInternal> | undefined);
-    withValue(fn: (v: Resolved<Type, TypeInternal>) => void): number;
-    removeWithValue(fnOrToken: number | ((v: Resolved<Type, TypeInternal>) => void)): void;
+    addListener(fn: (v: Resolved<Type, TypeInternal>) => void, priority?: number): void;
     private _emitValue;
 }
 export {};

package/lib/observable.js

@@ -1,3 +1,4 @@
+import { Emitter } from "./emitter";
 /**
  * A class that holds a value and watches it for changes (deeply by default).
  *
@@ -30,14 +31,12 @@
  * @typeParam Type - The type of the contained value
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
-export class Observable {
+export class Observable extends Emitter {
     constructor(_default, withHandler, _deep = true) {
+        super();
         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) && this._deep) {
             initial = this._default.slice();
@@ -49,7 +48,7 @@ export class Observable {
         }
         this._value = this._wrap(initial);
         if (withHandler)
-            this.withValue(withHandler);
+            this.addListener(withHandler);
     }
     /**
      * Access the current value for this Observable. Changing this value (or, unless deep inspection is disabled, its recursive elements and keys) will trigger any registered handlers to be called with the new value.
@@ -117,40 +116,16 @@ export class Observable {
         this._value = this._wrap(v);
         this._emitValue();
     }
-    withValue(fn) {
-        const token = this._nextToken++;
-        this._handlersByToken.set(token, fn);
-        this._tokenByHandler.set(fn, token);
+    addListener(fn, priority = 0) {
+        this.addListener(fn);
         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);
-            }
-        }
+        this._emit(this._value.proxy);
     }
 }

package/lib/selectors.d.ts

@@ -1,4 +1,4 @@
-import { Import, NodeByID, ParsedImport, Props } from './interfaces';
+import { EntityPropOverride, 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: {
@@ -6,8 +6,20 @@ export declare function getScriptName(n: string, requireUniqueIn: {
 }): string;
 export declare function isValidVariableName(n: string): boolean;
 export declare function variableNameFromImport(imp: ParsedImport): string;
-export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props, scriptNames: {
+export type EntityPropOverrideByEntityPropPath = {
+    [entityID: string]: {
+        [propName: string]: {
+            [path: string]: EntityPropOverride;
+        };
+    };
+};
+export declare function entityPropOverrideByEntityAndProp(entityPropOverrides: {
+    [id: string]: EntityPropOverride;
+}): EntityPropOverrideByEntityPropPath;
+export declare function summaryForEntityPropOverrideDestination(o: EntityPropOverride): string;
+export declare const typeDefinitionForComponent: (nodes: NodeByID, props: Props, constructorProps: Props | undefined, scriptNames: {
     [id: string]: {
         [id: string]: boolean;
     };
-}, url: string) => string;
+} | undefined, url: string) => string;
+export declare function getSafeKeyName(n: string): string;

package/lib/selectors.js

@@ -1,3 +1,4 @@
+import { EntityPropOverrideType } from './interfaces';
 import * as path from 'path';
 import { outputForType } from './types';
 export function parseImport(i) {
@@ -117,11 +118,52 @@ export function variableNameFromImport(imp) {
         return imp[1];
     return 'unknown';
 }
-export const typeDefinitionForComponent = (nodes, props, scriptNames, url) => {
+export function entityPropOverrideByEntityAndProp(entityPropOverrides) {
+    const ret = Object.create(null);
+    for (const val of Object.values(entityPropOverrides)) {
+        if (!Array.isArray(val.entityPropPath) || val.entityPropPath.length < 1)
+            continue;
+        const obj = ret[val.entityID] || Object.create(null);
+        ret[val.entityID] = obj;
+        const propName = val.entityPropPath[0];
+        const arr = obj[propName] || Object.create(null);
+        obj[propName] = arr;
+        arr[val.entityPropPath.join('.')] = val;
+    }
+    return ret;
+}
+export function summaryForEntityPropOverrideDestination(o) {
+    switch (o.type) {
+        case EntityPropOverrideType.ComponentProp:
+            return 'Component Prop: ' + o.propName;
+        case EntityPropOverrideType.ContextValue: {
+            const imp = parseImport(o.imp);
+            if (imp[1] === 'default' && typeof imp[0] === 'string') {
+                const parts = imp[0].split(path.sep);
+                return parts[parts.length - 1] + '.' + o.val;
+            }
+            if (typeof imp[1] === 'string')
+                return imp[1] + '.' + o.val;
+            return `?.` + o.val;
+        }
+        case EntityPropOverrideType.Import: {
+            return o.imp;
+            // const imp = parseImport(o.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 '?';
+        }
+    }
+    return '?';
+}
+export const typeDefinitionForComponent = (nodes, props, constructorProps, scriptNames, url) => {
     const importMapping = new Map();
     let indx = 0;
     let importStrings = [];
-    for (const scriptNameNodes of Object.values(scriptNames)) {
+    for (const scriptNameNodes of Object.values(scriptNames ?? {})) {
         for (const nodeID of Object.keys(scriptNameNodes)) {
             const node = nodes[nodeID];
             if (!node)
@@ -139,15 +181,20 @@ export const typeDefinitionForComponent = (nodes, props, scriptNames, url) => {
 
 ${importStrings.join('\n')}
 
+interface ConstructorProps {
+${Object.values(constructorProps ?? {}).map(typeOutputForConstructorProp).join('\n\n')}
+}
+
 /**
 * @zcomponent
+* @zicon zcomponent
 */
 declare class Comp extends ZComponent {
 
-	constructor(contextManager: ContextManager, constructorProps: {});
+	constructor(contextManager: ContextManager, constructorProps: ConstructorProps);
 
 	nodes: {
-${Object.entries(scriptNames).map(entry => {
+${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)}: ${importMapping.get(nodes[e].type)}`).join(', ')}},`;
@@ -158,16 +205,40 @@ ${Object.entries(scriptNames).map(entry => {
     }).join("\n")}
 	};
 
-${Object.values(props).map(typeOutputForProp).join('\n')}
+${Object.values(props).map(typeOutputForProp).join('\n\n')}
 }
 
 export default Comp;
 `;
 };
+function makeCommentSafe(c) {
+    return c.replaceAll('*/', '').split('\n').join('\n\t* ');
+}
 function typeOutputForProp(prop) {
-    return `	/**
+    const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
+    return `	/**${comments}
 	* @zprop
-	* ${prop.default && `@zdefault ${JSON.stringify(prop.default)}`}
+	* ${prop.default !== undefined ? `@zdefault ${JSON.stringify(prop.default)}` : ''}
 	*/
 	public ${prop.name}: Observable<${outputForType(prop.type, true)}>;`;
 }
+function typeOutputForConstructorProp(prop) {
+    const comments = (prop.comments && prop.comments.length > 0) ? '\n\t* ' + prop.comments.map(makeCommentSafe).join('\n\t*\n\t* ') + '\n\t* ' : '';
+    return `	/**${comments}
+	* @zprop
+	* ${prop.default !== undefined && `@zdefault ${JSON.stringify(prop.default)}`}
+	*/
+	${prop.name}: ${outputForType(prop.type, true)};`;
+}
+export function getSafeKeyName(n) {
+    if (n.length === 0)
+        return '_';
+    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;
+    }
+    return scriptname;
+}

package/lib/types.d.ts

@@ -1,3 +1,4 @@
+import { EntityPropOverride } from "./interfaces";
 export interface BaseType {
     comments?: string[];
     typeHint?: TypeHint;
@@ -69,10 +70,18 @@ export interface Prop {
     groupPriority?: number;
     values?: Values[];
 }
+export interface DefaultChild {
+    label: string;
+    type: string;
+    initialProps: {
+        [id: string]: any;
+    };
+}
+export type ComponentInfoType = "component" | "behavior" | "context";
 export interface ComponentInfo {
     name: string;
     file: string;
-    type: "component" | "behavior";
+    type: ComponentInfoType;
     isDefault?: boolean;
     constructorProps: {
         [id: string]: Prop;
@@ -86,10 +95,23 @@ export interface ComponentInfo {
     tags: string[];
     allowedChildren: string[];
     allowedParents?: string[];
+    defaultChildren?: DefaultChild[];
+}
+export interface ValueInfo {
+    name: string;
+    file: string;
+    isDefault?: boolean;
+    type: Type;
+    comments?: string[];
+}
+export interface SourceFileTypeInfo {
+    components: {
+        [id: string]: ComponentInfo;
+    };
+    values: {
+        [id: string]: ValueInfo;
+    };
 }
-export type SourceFileTypeInfo = {
-    [id: string]: ComponentInfo;
-};
 export type TypeInfoByFileName = {
     [id: string]: SourceFileTypeInfo;
 };
@@ -105,3 +127,8 @@ export interface TemplateInfo {
 export declare function symbolPathFromFilename(f: string): string;
 export declare function isValidValueForType(def: any, t: Type, allowUndefined?: boolean): boolean;
 export declare function outputForType(t: Type, alwaysBasic?: boolean): string;
+export declare function overridesAreCompatible(a: {
+    [path: string]: EntityPropOverride;
+}, b: {
+    [path: string]: EntityPropOverride;
+}): boolean;

package/lib/types.js

@@ -1,3 +1,5 @@
+import { EntityPropOverrideType } from "./interfaces";
+import { getSafeKeyName } from "./selectors";
 export var TypeHint;
 (function (TypeHint) {
     TypeHint["proportion"] = "proportion";
@@ -291,6 +293,9 @@ function getBasicType(t) {
         case 'array':
             return outputForType(t.child) + '[]';
         case 'tuple':
+            if (Array.isArray(t.names) && t.names.length === t.children.length) {
+                return `[${t.children.map((c, indx) => `${getSafeKeyName(t.names[indx])}: ${outputForType(c)}`).join(', ')}]`;
+            }
             return `[${t.children.map(c => outputForType(c)).join(', ')}]`;
         case 'unknown':
             return 'any';
@@ -310,3 +315,59 @@ function getBasicType(t) {
             return 'Event';
     }
 }
+export function overridesAreCompatible(a, b) {
+    const bkeys = new Set(Object.keys(b));
+    for (const [p, obj] of Object.entries(a)) {
+        if (!b[p])
+            return false;
+        if (!overrideAreCompatible(obj, b[p]))
+            return false;
+        bkeys.delete(p);
+    }
+    if (bkeys.size > 0)
+        return false;
+    return true;
+}
+function overrideAreCompatible(a, b) {
+    if (a && b) {
+        if (a.type !== b.type)
+            return false;
+        if (a.entityPropPath.length !== b.entityPropPath.length)
+            return false;
+        if (a.entityPropIsConstructor !== b.entityPropIsConstructor)
+            return false;
+        for (let i = 0; i < a.entityPropPath.length; i++) {
+            if (a.entityPropPath[i] !== b.entityPropPath[i])
+                return false;
+        }
+        switch (a.type) {
+            case EntityPropOverrideType.ComponentProp: {
+                const bt = b;
+                if (a.isConstructorProp !== bt.isConstructorProp)
+                    return false;
+                if (a.propName !== bt.propName)
+                    return false;
+                return true;
+            }
+            case EntityPropOverrideType.ContextValue: {
+                const bt = b;
+                if (a.imp !== bt.imp)
+                    return false;
+                if (a.val !== bt.val)
+                    return false;
+                return true;
+            }
+            case EntityPropOverrideType.Import: {
+                const bt = b;
+                if (a.imp !== bt.imp)
+                    return false;
+                return true;
+            }
+        }
+    }
+    if (!a && b)
+        return false;
+    if (a && !b)
+        return false;
+    return true;
+}

package/lib/zcomponent.d.ts

@@ -1,5 +1,6 @@
 import { Component, ComponentChildren, ConstructorProps } from './component';
 import { ContextManager, Context } from './context';
+import { Entity } from './entity';
 import { ZComponentData } from './interfaces';
 export interface ZComponentOptions {
     data: ZComponentData;
@@ -35,21 +36,26 @@ export declare class ZComponent<RootType = any> extends Component<RootType> {
     nodes: {
         [id: string]: Component | Component[];
     };
-    entityByID: Map<string, any>;
-    entityByLabel: Map<string, any>;
+    entityByID: Map<string, Entity>;
+    entityByLabel: Map<string, Entity>;
+    nodeByLabel: Map<string, Component<any, ConstructorProps>>;
     private _constructedResolve;
     constructed: Promise<void>;
     isConstructed: boolean;
     private _nodesById;
     private _behaviorsToInitialize;
+    private _constructorPropOverridesByEntityID;
     constructor(contextManager: ContextManager, constructorProps: ConstructorProps, _opts: ZComponentOptions);
     private _constructorForNode;
     private _constructorForBehavior;
     private _inflateBehaviors;
     private _wrapBehaviors;
     notifyPropsChanged(entries: Map<string, Set<string>>): void;
+    private _initializeOverrides;
+    private _initializeConstructorPropOverrides;
     private _initializeComponentProps;
     private _setEntityProp;
+    private _setEntityPropPath;
     _getNodeById(id: string): Component | undefined;
     dispose(): never;
 }

package/lib/zcomponent.js

@@ -4,6 +4,7 @@ import { Context } from './context';
 import { isDesignTime } from './contexts/environmentcontext';
 import { TagContext } from './contexts/tagcontext';
 import { computeBehaviorHierarchy, computeNodeHierarchy } from './data';
+import { EntityPropOverrideType } from './interfaces';
 import { Observable } from './observable';
 import { setCurrentZComponentConstruction } from './zcomponentconstruction';
 export class ZComponentContext extends Context {
@@ -22,12 +23,15 @@ export class ZComponent extends Component {
         this.nodes = {};
         this.entityByID = new Map();
         this.entityByLabel = new Map();
+        this.nodeByLabel = new Map();
         this.constructed = new Promise(resolve => this._constructedResolve = resolve);
         this.isConstructed = false;
         this._nodesById = new Map();
         this._behaviorsToInitialize = [];
+        this._constructorPropOverridesByEntityID = new Map();
         const contextManagerForChildren = contextManager.forkMultiple([ZComponentContext, { zcomponent: this }], [TagContext, {}])[0];
         this.id = this._opts.data.id;
+        this._initializeConstructorPropOverrides();
         const rootConstructor = this._constructorForNode(this._opts.data.root);
         if (rootConstructor) {
             this.constructChildren([
@@ -36,6 +40,7 @@ export class ZComponent extends Component {
         }
         this._inflateBehaviors();
         this._initializeComponentProps();
+        this._initializeOverrides();
         this.isConstructed = true;
         this._constructedResolve();
     }
@@ -65,13 +70,16 @@ export class ZComponent extends Component {
                     ...constructorProps,
                     ...(that._opts.data.entityConstructorProps?.[nodeId] ?? {}),
                     ...(that._opts.constructorPropReplacement?.[nodeId] ?? {}),
+                    ...(that._constructorPropOverridesByEntityID.get(nodeId) ?? {}),
                     children
                 };
                 setCurrentZComponentConstruction(that);
                 super(contextManager, constructorProps);
                 that.entityByID.set(nodeId, this);
-                if (node?.label)
+                if (node?.label) {
                     that.entityByLabel.set(node.label, this);
+                    that.nodeByLabel.set(node.label, this);
+                }
                 that._nodesById.set(nodeId, this);
                 for (const element of this.elementsResolved) {
                     that.idByElement.set(element, nodeId);
@@ -145,6 +153,7 @@ export class ZComponent extends Component {
                     ...constructorProps,
                     ...(that._opts.data.entityConstructorProps?.[behaviorId] ?? {}),
                     ...(that._opts.constructorPropReplacement?.[behaviorId] ?? {}),
+                    ...(that._constructorPropOverridesByEntityID.get(behaviorId) ?? {}),
                 };
                 setCurrentZComponentConstruction(that);
                 super(contextManager, instance, constructorProps);
@@ -205,26 +214,84 @@ export class ZComponent extends Component {
             }
         }
     }
-    _initializeComponentProps() {
-        const componentProps = this._opts.data.propEntityOverrides ?? {};
-        for (const [prop, entry] of Object.entries(componentProps)) {
-            const propInfo = this._opts.data.props[prop];
-            const entries = Object.entries(entry).map(e => [e[0], Object.keys(e[1])]);
-            this[prop] = new Observable(propInfo?.default, v => {
-                for (const e of entries) {
-                    const entity = this.entityByID.get(e[0]);
-                    if (!entity)
-                        continue;
-                    for (const overriddenProp of e[1]) {
-                        try {
-                            this._setEntityProp(entity, overriddenProp, v);
-                        }
-                        catch (err) {
-                            console.log('Warning - unable to set prop', overriddenProp, v);
+    _initializeOverrides() {
+        const overrides = this._opts.data.entityPropOverrides ?? {};
+        for (const override of Object.values(overrides)) {
+            const entity = this.entityByID.get(override.entityID);
+            if (!entity)
+                continue;
+            try {
+                switch (override.type) {
+                    case EntityPropOverrideType.Import: {
+                        const v = this._opts.importMapping[override.imp]?.();
+                        if (!v)
+                            continue;
+                        if (v instanceof Observable)
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
+                        else
+                            this._setEntityPropPath(entity, override.entityPropPath, v);
+                        break;
+                    }
+                    case EntityPropOverrideType.ContextValue: {
+                        const ctx = this._opts.importMapping[override.imp]?.();
+                        const ctxInstance = entity.contextManager.getOrThrow(ctx);
+                        const v = ctxInstance[override.val];
+                        if (!v)
+                            continue;
+                        if (v instanceof Observable)
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
+                        else
+                            this._setEntityPropPath(entity, override.entityPropPath, v);
+                        break;
+                    }
+                    case EntityPropOverrideType.ComponentProp: {
+                        if (override.isConstructorProp) {
+                            const prop = this._opts.data.constructorProps?.[override.propName];
+                            if (!prop)
+                                break;
+                            const val = this.constructorProps[override.propName] ?? prop.default;
+                            if (val !== undefined)
+                                this._setEntityPropPath(entity, override.entityPropPath, val);
+                            break;
                         }
+                        const v = this[override.propName];
+                        if (!v)
+                            continue;
+                        if (v instanceof Observable)
+                            this.register(v, val => this._setEntityPropPath(entity, override.entityPropPath, val), { bindWhenDisabled: true });
+                        else
+                            this._setEntityPropPath(entity, override.entityPropPath, v);
+                        break;
                     }
                 }
-            });
+            }
+            catch (err) {
+                console.log('Unable to set entity prop override', err);
+            }
+        }
+    }
+    _initializeConstructorPropOverrides() {
+        for (const entry of Object.values(this._opts.data.entityPropOverrides ?? {})) {
+            if (entry.type !== EntityPropOverrideType.ComponentProp)
+                continue;
+            if (!entry.isConstructorProp)
+                continue;
+            if (entry.entityPropPath.length !== 1)
+                continue;
+            const obj = this._constructorPropOverridesByEntityID.get(entry.entityID) ?? Object.create(null);
+            this._constructorPropOverridesByEntityID.set(entry.entityID, obj);
+            const prop = this._opts.data.constructorProps?.[entry.propName];
+            if (!prop)
+                continue;
+            const val = this.constructorProps[entry.propName] ?? prop.default;
+            if (val !== undefined)
+                obj[entry.entityPropPath[0]] = val;
+        }
+    }
+    _initializeComponentProps() {
+        const componentProps = this._opts.data.props ?? {};
+        for (const prop of Object.values(componentProps)) {
+            this[prop.name] = new Observable(prop.default);
         }
     }
     _setEntityProp(entity, prop, v) {
@@ -233,6 +300,22 @@ export class ZComponent extends Component {
         else
             entity[prop] = v;
     }
+    _setEntityPropPath(entity, propPath, v) {
+        if (propPath.length < 1)
+            return;
+        const prop = propPath[0];
+        let parent = entity;
+        let currentKey = prop;
+        if (entity[prop] instanceof Observable) {
+            parent = entity[prop];
+            currentKey = 'value';
+        }
+        for (let i = 1; i < propPath.length; i++) {
+            parent = parent[currentKey];
+            currentKey = propPath[i];
+        }
+        parent[currentKey] = v;
+    }
     _getNodeById(id) {
         return this._nodesById.get(id);
     }