@zcomponent/core 0.0.12 → 0.0.14

package/lib/behavior.d.ts

@@ -1,36 +1,21 @@
-import { Component, ConstructorForComponent } from './component';
+import { Component } from './component';
 import { ContextManager } from './context';
-import { Event } from './event';
-import { Observable } from './observable';
-import { ZComponent } from './zcomponent';
+import { Entity } from './entity';
 export type BehaviorConstructor<BehaviorType = Behavior, K extends Component = Component> = BehaviorType extends Behavior<K> ? new (contextManager: ContextManager, instance: K, ...args: any[]) => BehaviorType : never;
 export type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
 export type BehaviorConstructorProps = {
     [id: string]: unknown;
 };
-export declare class Behavior<InstanceType extends Component = Component> {
-    protected readonly contextManager: ContextManager;
+export declare class Behavior<InstanceType extends Component = Component> extends Entity {
     readonly instance: InstanceType;
-    private static callSuperDispose;
-    onDispose: Event<[]>;
-    private _registered;
-    private _zcomponent;
-    constructor(contextManager: ContextManager, instance: InstanceType);
-    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T;
-    private _updateEnabledResolved;
     /**
-     * @zprop
-     * @zdefault true
-     * @zgroup Behavior
-     * @zgrouppriority 10
+     * Constructs this behavior
+     *
+     * @param contextManager The current ContextManager
+     * @param instance The instance of the component that this behavior is attached to
      */
-    enabled: Observable<boolean, never>;
-    enabledResolved: Observable<boolean, never>;
-    register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
-    register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
-    unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
-    unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
-    dispose(): never;
+    constructor(contextManager: ContextManager, instance: InstanceType);
+    private _updateEnabledResolved;
 }
 export declare function shouldBehaviorRunAtDesignTime(b: BehaviorConstructor): boolean;
 export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (contextManager: ContextManager, instance: Component<any, import("./component").ConstructorProps>, ...args: any[]) => Behavior<Component<any, import("./component").ConstructorProps>>>;

package/lib/behavior.js

@@ -1,12 +1,14 @@
-import { Event } from './event';
-import { Observable } from './observable';
-import { getCurrentZComponentConstruction } from './zcomponentconstruction';
-export class Behavior {
+import { Entity } from './entity';
+export class Behavior extends Entity {
+    /**
+     * Constructs this behavior
+     *
+     * @param contextManager The current ContextManager
+     * @param instance The instance of the component that this behavior is attached to
+     */
     constructor(contextManager, instance) {
-        this.contextManager = contextManager;
+        super(contextManager);
         this.instance = instance;
-        this.onDispose = new Event();
-        this._registered = [];
         this._updateEnabledResolved = () => {
             let newValue = this.enabled.value;
             if (this.instance.enabledResolved?.value === false)
@@ -15,55 +17,10 @@ export class Behavior {
                 this.enabledResolved.value = newValue;
             }
         };
-        /**
-         * @zprop
-         * @zdefault true
-         * @zgroup Behavior
-         * @zgrouppriority 10
-         */
-        this.enabled = new Observable(true);
-        this.enabledResolved = new Observable(true);
-        this._zcomponent = getCurrentZComponentConstruction();
         this.register(this.enabled, this._updateEnabledResolved);
         this.register(instance.enabledResolved, this._updateEnabledResolved);
     }
-    getZComponentInstance(type) {
-        if (this._zcomponent === undefined)
-            throw new Error("getZComponentInstance called in behavior that's not part of a ZComponent");
-        if (!type)
-            return this._zcomponent;
-        if (this._zcomponent instanceof type)
-            return this._zcomponent;
-        throw new Error("getZComponentInstance called in behavior passing wrong kind of ZComponent");
-    }
-    register(e, fn) {
-        if (e instanceof Event)
-            e.bindfn(fn);
-        else if (e instanceof Observable)
-            e.withValue(fn);
-        this._registered.push([e, fn]);
-    }
-    unregister(e, fn) {
-        if (e instanceof Event)
-            e.unbindfn(fn);
-        else if (e instanceof Observable)
-            e.removeWithValue(fn);
-        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
-    }
-    dispose() {
-        for (const entry of this._registered) {
-            if (entry[0] instanceof Event)
-                entry[0].unbindfn(entry[1]);
-            else if (entry[0] instanceof Observable)
-                entry[0].removeWithValue(entry[1]);
-        }
-        this._registered = [];
-        this.onDispose.emit();
-        this.onDispose.clear();
-        return undefined;
-    }
 }
-Behavior.callSuperDispose = Symbol('Calling super.dispose() is mandatory');
 const behaviorsToRunAtDesignTime = new Set();
 export function shouldBehaviorRunAtDesignTime(b) {
     return behaviorsToRunAtDesignTime.has(b);

package/lib/component.d.ts

@@ -1,59 +1,66 @@
 import { ContextManager } from './context';
-import { Event } from './event';
+import { Entity } from './entity';
 import { Observable } from './observable';
-import { ZComponent } from './zcomponent';
 export type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<any, infer R> ? R : never;
 export type ComponentConstructor<ConstructorPropsType extends ConstructorProps, ComponentType extends Component> = new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType;
 export type ConstructorForComponent<ComponentType extends Component = Component> = new (contextManager: ContextManager, props: ComponentType extends Component<any, infer PropsType> ? PropsType : never) => ComponentType;
 export type ComponentChild<ComponentType extends Component> = [ConstructorForComponent<ComponentType>, ComponentType extends Component<any, infer U> ? U : never] | [
     ConstructorForComponent<ComponentType>,
     ComponentType extends Component<any, infer U> ? U : never,
-    Observable<ComponentType>
+    Observable<ComponentType | undefined>
 ];
 export type ComponentChildren = ComponentChild<Component>[];
 export interface ConstructorProps {
     [id: string]: any;
     children?: ComponentChildren;
 }
-export declare class Component<ElementType = any, ConstructorPropsType extends ConstructorProps = ConstructorProps> {
-    readonly contextManager: ContextManager;
+export declare class Component<ElementType = any, ConstructorPropsType extends ConstructorProps = ConstructorProps> extends Entity {
     protected constructorProps?: ConstructorPropsType | undefined;
+    /**
+     * The raw element(s) that this component exposes
+     */
     element?: ElementType;
-    readonly onDispose: Event<[]>;
     readonly children: Component[];
     parent?: Component;
-    disposed: boolean;
-    private _registered;
-    private _zcomponent;
     constructor(contextManager: ContextManager, constructorProps?: ConstructorPropsType | undefined);
     constructChildren(children: ComponentChildren, contextManager?: ContextManager): void;
-    getZComponentInstance<T extends ZComponent = ZComponent>(type?: ConstructorForComponent<T>): T | undefined;
+    /**
+     * Adds the supplied component instance as a child of this component, removing it from any existing parent.
+     *
+     * @param c The component instance to add
+     */
     appendChild(c: Component): void;
+    /**
+     * Removes the supplied component instance from the list of children.
+     * @param c The component to remove
+     */
     removeChild(c: Component): void;
+    /**
+     * Removes this component from its parent component.
+     */
     remove(): void;
-    get elementsResolved(): any[];
     /**
-     * @zprop
-     * @zdefault true
-     * @zgroup Behavior
-     * @group Behavior
-     * @zgrouppriority 10
+     * An array of the elements that this component instance exposes. In the case that this component
+     * does not expose any elements of its own, this will be an array of the elements
+     * exposed by this component's children.
      */
-    enabled: Observable<boolean, never>;
-    enabledResolved: Observable<boolean, never>;
+    get elementsResolved(): any[];
     /**
+     * An array of string 'tags' assocated with this component.
+     *
+     * The `getComponentsByTag(mgr, tag)` function can be used to get an array of components
+     * with the supplied tag.
+     *
+     * By default, tags are scoped to the ZComponent instance that a component is constructed by.
+     * Tags that begin with `global:` are scoped to the experience as a whole.
+     *
      * @zprop
      * @zgroup Other
      * @group Other
      * @zgrouppriority 0
      */
     tags: Observable<string[], never>;
-    protected register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
-    protected register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
-    protected unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
-    protected unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
     private _updateEnabledResolved;
     private _updateTags;
     dispose(): never;
-    private static callSuperDispose;
 }

package/lib/component.js

@@ -1,25 +1,20 @@
 import { TagContext } from './contexts/tagcontext';
-import { Event } from './event';
+import { Entity } from './entity';
 import { Observable } from './observable';
-import { getCurrentZComponentConstruction } from './zcomponentconstruction';
-export class Component {
+export class Component extends Entity {
     constructor(contextManager, constructorProps) {
-        this.contextManager = contextManager;
+        super(contextManager);
         this.constructorProps = constructorProps;
-        this.onDispose = new Event();
         this.children = [];
-        this.disposed = false;
-        this._registered = [];
-        /**
-         * @zprop
-         * @zdefault true
-         * @zgroup Behavior
-         * @group Behavior
-         * @zgrouppriority 10
-         */
-        this.enabled = new Observable(true);
-        this.enabledResolved = new Observable(true);
         /**
+         * An array of string 'tags' assocated with this component.
+         *
+         * The `getComponentsByTag(mgr, tag)` function can be used to get an array of components
+         * with the supplied tag.
+         *
+         * By default, tags are scoped to the ZComponent instance that a component is constructed by.
+         * Tags that begin with `global:` are scoped to the experience as a whole.
+         *
          * @zprop
          * @zgroup Other
          * @group Other
@@ -40,7 +35,6 @@ export class Component {
             const context = this.contextManager.get(TagContext);
             context.registerComponent(this, this.tags.value);
         };
-        this._zcomponent = getCurrentZComponentConstruction();
         this.constructChildren(constructorProps?.children ?? []);
         this.register(this.enabled, this._updateEnabledResolved);
         this.register(this.tags, this._updateTags);
@@ -59,29 +53,39 @@ export class Component {
             }
         }
     }
-    getZComponentInstance(type) {
-        if (this._zcomponent === undefined)
-            throw new Error("getZComponentInstance called in component that's not part of a ZComponent");
-        if (!type)
-            return this._zcomponent;
-        if (this._zcomponent instanceof type)
-            return this._zcomponent;
-        throw new Error("getZComponentInstance called in component passing wrong kind of ZComponent");
-    }
+    /**
+     * Adds the supplied component instance as a child of this component, removing it from any existing parent.
+     *
+     * @param c The component instance to add
+     */
     appendChild(c) {
         c.remove();
         this.children.push(c);
         c.parent = this;
         c._updateEnabledResolved();
     }
+    /**
+     * Removes the supplied component instance from the list of children.
+     * @param c The component to remove
+     */
     removeChild(c) {
         const indx = this.children.indexOf(c);
         if (indx >= 0)
             this.children.splice(indx, 1);
+        if (c.parent === this)
+            delete c.parent;
     }
+    /**
+     * Removes this component from its parent component.
+     */
     remove() {
         this.parent?.removeChild(this);
     }
+    /**
+     * An array of the elements that this component instance exposes. In the case that this component
+     * does not expose any elements of its own, this will be an array of the elements
+     * exposed by this component's children.
+     */
     get elementsResolved() {
         if (this.element !== undefined) {
             if (Array.isArray(this.element))
@@ -94,22 +98,7 @@ export class Component {
         }
         return ret;
     }
-    register(e, fn) {
-        if (e instanceof Event)
-            e.bindfn(fn);
-        else if (e instanceof Observable)
-            e.withValue(fn);
-        this._registered.push([e, fn]);
-    }
-    unregister(e, fn) {
-        if (e instanceof Event)
-            e.unbindfn(fn);
-        else if (e instanceof Observable)
-            e.removeWithValue(fn);
-        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
-    }
     dispose() {
-        this.disposed = true;
         for (const child of this.children) {
             try {
                 child.dispose();
@@ -117,17 +106,7 @@ export class Component {
             catch (err) { }
         }
         this.children.length = 0;
-        for (const entry of this._registered) {
-            if (entry[0] instanceof Event)
-                entry[0].unbindfn(entry[1]);
-            else if (entry[0] instanceof Observable)
-                entry[0].removeWithValue(entry[1]);
-        }
-        this._registered = [];
-        this.onDispose.emit();
-        this.onDispose.clear();
         this.contextManager.get(TagContext).unregisterComponent(this);
-        return undefined;
+        return super.dispose();
     }
 }
-Component.callSuperDispose = Symbol('Calling super.dispose() is mandatory');

package/lib/contexts/canvascontext.d.ts

@@ -5,6 +5,7 @@ export interface CanvasContextOptions {
     canvas?: HTMLCanvasElement;
     overlay?: HTMLDivElement;
 }
+/** @zcontext */
 export declare class CanvasContext extends Context {
     constructorProps: CanvasContextOptions;
     onBeforeRender: Event<[number]>;
@@ -12,6 +13,7 @@ export declare class CanvasContext extends Context {
     canvas: HTMLCanvasElement;
     overlayDefault: HTMLDivElement;
     overlay: Observable<HTMLDivElement>;
+    /** @zui */
     size: Observable<[number, number]>;
     private _resizeObserver;
     constructor(contextManager: ContextManager, constructorProps: CanvasContextOptions);

package/lib/contexts/canvascontext.js

@@ -1,6 +1,7 @@
 import { Context } from '../context';
 import { Event } from '../event';
 import { Observable } from '../observable';
+/** @zcontext */
 export class CanvasContext extends Context {
     constructor(contextManager, constructorProps) {
         super(contextManager, constructorProps);

package/lib/contexts/environmentcontext.d.ts

@@ -1,9 +1,19 @@
 import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export declare class EnvironmentContext extends Context {
+    /** @zprop */
     designTime: Observable<boolean, never>;
+    /** @zprop */
     editTime: Observable<boolean, never>;
+    /** @zprop */
+    runTime: Observable<boolean, never>;
+    /** @zprop */
+    developmentBuild: Observable<boolean, never>;
+    /** @zprop */
+    productionBuild: Observable<boolean, never>;
 }
 export declare function isDesignTime(ctx: ContextManager): boolean;
 export declare function isEditTime(ctx: ContextManager): boolean;
 export declare function isDevelopmentBuild(ctx: ContextManager): boolean;
+export declare function isProductionBuild(ctx: ContextManager): boolean;

package/lib/contexts/environmentcontext.js

@@ -1,10 +1,19 @@
 import { Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export class EnvironmentContext extends Context {
     constructor() {
         super(...arguments);
+        /** @zprop */
         this.designTime = new Observable(false);
+        /** @zprop */
         this.editTime = new Observable(false);
+        /** @zprop */
+        this.runTime = new Observable(true);
+        /** @zprop */
+        this.developmentBuild = new Observable(typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+        /** @zprop */
+        this.productionBuild = new Observable(!this.developmentBuild.value);
     }
 }
 export function isDesignTime(ctx) {
@@ -14,5 +23,8 @@ export function isEditTime(ctx) {
     return ctx.get(EnvironmentContext).editTime.value;
 }
 export function isDevelopmentBuild(ctx) {
-    return (typeof process !== 'undefined' && process?.env?.NODE_ENV === 'development');
+    return ctx.get(EnvironmentContext).developmentBuild.value;
+}
+export function isProductionBuild(ctx) {
+    return ctx.get(EnvironmentContext).productionBuild.value;
 }

package/lib/contexts/loadcontext.d.ts

@@ -1,9 +1,14 @@
 import { ContextManager, Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export declare class LoadContext extends Context {
+    /** @zui */
     isConstructed: Observable<boolean, never>;
+    /** @zui */
     isLoaded: Observable<boolean, never>;
+    /** @zui */
     isStarted: Observable<boolean, never>;
+    /** @zui */
     progressPercent: Observable<number, never>;
     private _startedResolved;
     started: Promise<void>;

package/lib/contexts/loadcontext.js

@@ -1,11 +1,16 @@
 import { Context } from '../context';
 import { Observable } from '../observable';
+/** @zcontext */
 export class LoadContext extends Context {
     constructor() {
         super(...arguments);
+        /** @zui */
         this.isConstructed = new Observable(false);
+        /** @zui */
         this.isLoaded = new Observable(false);
+        /** @zui */
         this.isStarted = new Observable(false);
+        /** @zui */
         this.progressPercent = new Observable(0);
         this.started = new Promise(resolve => this._startedResolved = resolve);
         this._loadables = new Set();

package/lib/data.d.ts

@@ -1,8 +1,13 @@
-import { BehaviorByID, BehaviorData, ComputedHierarchy, NodeByID, NodeData, ZComponentData } from "./interfaces";
+import { BehaviorByID, BehaviorData, ComputedHierarchy, EntityPropOverride, NodeByID, NodeData, ZComponentData } from "./interfaces";
+import { Prop } from "./types";
 export declare function computeNodeHierarchy(nodes: NodeByID): ComputedHierarchy;
 export declare function computeBehaviorHierarchy(behaviors: BehaviorByID): ComputedHierarchy;
 export declare function addNode(zcomp: ZComponentData, info: NodeDataCombined): void;
 export declare function addBehavior(zcomp: ZComponentData, info: BehaviorDataCombined): void;
+export declare function updateComponentProp(zcomp: ZComponentData, prop: string, isConstructorProp: boolean, newValue: Prop | undefined, newIsConstructorProp: boolean): void;
+export declare function addEntityPropOverride(zcomp: ZComponentData, o: EntityPropOverride): void;
+export declare function deleteEntityPropOverride(zcomp: ZComponentData, id: string): void;
+export declare function clone<T>(obj: T): T;
 export declare function addEntity(zcomp: ZComponentData, id: string, info: EntityDataCombined): void;
 export declare function moveNodes(zcomp: ZComponentData, nodeIDs: string[], newParentID: string, indx: number): void;
 export declare function deleteNode(zcomp: ZComponentData, id: string): void;

package/lib/data.js

@@ -1,4 +1,5 @@
 import { generateKeyBetween, generateNKeysBetween } from "./fractionalindexing";
+import { EntityPropOverrideType } from "./interfaces";
 // Simple memoizing of computed hierarchy
 const computedHierarchies = new Map();
 const computedBehaviors = new Map();
@@ -66,6 +67,80 @@ export function addBehavior(zcomp, info) {
     addEntity(zcomp, info.data.id, info);
     computedBehaviors.delete(zcomp.behaviors);
 }
+export function updateComponentProp(zcomp, prop, isConstructorProp, newValue, newIsConstructorProp) {
+    if (zcomp.constructorProps === undefined)
+        zcomp.constructorProps = {};
+    if (newValue === undefined) {
+        if (isConstructorProp)
+            delete zcomp.constructorProps[prop];
+        else
+            delete zcomp.props[prop];
+        if (zcomp.entityPropOverrides) {
+            for (const [id, override] of Object.entries(zcomp.entityPropOverrides)) {
+                if (override.type !== EntityPropOverrideType.ComponentProp)
+                    continue;
+                if (override.isConstructorProp !== isConstructorProp)
+                    continue;
+                if (override.propName !== prop)
+                    continue;
+                delete zcomp.entityPropOverrides[id];
+            }
+        }
+        return;
+    }
+    if (newValue.name !== prop || isConstructorProp !== newIsConstructorProp) {
+        if (isConstructorProp)
+            delete zcomp.constructorProps[prop];
+        else
+            delete zcomp.props[prop];
+        if (zcomp.entityPropOverrides) {
+            for (const [id, override] of Object.entries(zcomp.entityPropOverrides)) {
+                if (override.type !== EntityPropOverrideType.ComponentProp)
+                    continue;
+                if (override.isConstructorProp !== isConstructorProp)
+                    continue;
+                if (override.propName !== prop)
+                    continue;
+                delete zcomp.entityPropOverrides[id];
+                if (!(override.entityPropIsConstructor && !newIsConstructorProp)) {
+                    const newOverride = clone(override);
+                    newOverride.propName = newValue.name;
+                    newOverride.id = idForEntityPropOverride(override);
+                    zcomp.entityPropOverrides[newOverride.id] = newOverride;
+                }
+            }
+        }
+    }
+    newValue.type.isObservable = !newIsConstructorProp;
+    if (newIsConstructorProp)
+        zcomp.constructorProps[newValue.name] = newValue;
+    else
+        zcomp.props[newValue.name] = newValue;
+}
+export function addEntityPropOverride(zcomp, o) {
+    if (!zcomp.entityPropOverrides)
+        zcomp.entityPropOverrides = {};
+    o.id = idForEntityPropOverride(o);
+    zcomp.entityPropOverrides[o.id] = o;
+}
+export function deleteEntityPropOverride(zcomp, id) {
+    if (!zcomp.entityPropOverrides)
+        return;
+    delete zcomp.entityPropOverrides[id];
+}
+function idForEntityPropOverride(override) {
+    return override.type + ":" + (override.entityPropIsConstructor ? 'constructorprop' : 'prop') + ":" + override.entityID + ":" + override.entityPropPath.join('.');
+}
+export function clone(obj) {
+    try {
+        if (typeof structuredClone !== 'undefined')
+            return structuredClone(obj);
+    }
+    catch {
+        // Ignore
+    }
+    return JSON.parse(JSON.stringify(obj));
+}
 export function addEntity(zcomp, id, info) {
     zcomp.entityProps[id] = info.props;
     zcomp.entityConstructorProps[id] = info.constructorProps;
@@ -265,6 +340,13 @@ export function changeNodeScriptName(zcomp, id, newScriptName) {
 export function deleteEntity(zcomp, id) {
     delete zcomp.entityProps[id];
     delete zcomp.entityConstructorProps[id];
+    if (zcomp.entityPropOverrides) {
+        for (const [overrideID, override] of Object.entries(zcomp.entityPropOverrides)) {
+            if (override.entityID !== id)
+                continue;
+            delete zcomp.entityPropOverrides[overrideID];
+        }
+    }
 }
 export function forEachNodeAncestor(zcomp, id, fn) {
     const node = zcomp.nodes[id];