@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/zcomponent.js

@@ -1,3 +1,37 @@
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
 /* eslint-disable @typescript-eslint/no-this-alias */
 import { Animation } from './animation/index';
 import { Behavior, shouldBehaviorRunAtDesignTime } from './behavior';
@@ -6,15 +40,20 @@ import { Context } from './context';
 import { useOnBeforeRender } from './contexts/canvascontext';
 import { isDesignTime } from './contexts/environmentcontext';
 import { isStarted, started } from './contexts/loadcontext';
+import { RootComponentsContext } from './contexts/rootcomponentscontext';
 import { TagContext } from './contexts/tagcontext';
 import { computeBehaviorHierarchy, computeNodeHierarchy } from './data';
+import { EntityPropOverrideType, FunctionCallType } from './data/core';
+import { zIgnore } from './decorators';
 import { Entity } from './entity';
+import { Event } from './event';
 import { populateAnimationStructureFromData, populateAnimationTracksFromData, updateClipFromData } from './inflate';
-import { EntityPropOverrideType, FunctionCallType } from './data/core';
 import { Observable } from './observable';
+import { reset as resetObservable } from './observe';
 import { setCurrentZComponentConstruction } from './zcomponentconstruction';
-import { Event } from './event';
 export class ZComponentContext extends Context {
+    zcomponent;
+    children;
     /**
      * Creates an instance of ZComponentContext.
      * @param contextManager - The current ContextManager
@@ -26,630 +65,768 @@ export class ZComponentContext extends Context {
         this.children = props.children;
     }
 }
-export class ZComponent extends Component {
-    /**
-     * Creates an instance of ZComponent.
-     * @param contextManager - The current ContextManager
-     * @param constructorProps  - The constructor properties.
-     * @param _opts - The options for the component.
-     */
-    constructor(contextManager, constructorProps, _opts) {
-        super(contextManager, { ...constructorProps, children: [] });
-        this.constructorProps = constructorProps;
-        this._opts = _opts;
+let ZComponent = (() => {
+    let _classSuper = Component;
+    let _instanceExtraInitializers = [];
+    let _animation_decorators;
+    let _animation_initializers = [];
+    let _animation_extraInitializers = [];
+    let _resolveNodeID_decorators;
+    let _resolveBehaviorID_decorators;
+    let _resolveEntityID_decorators;
+    let _notifyPropsChanged_decorators;
+    let _notifyClipsChanged_decorators;
+    let _resolveStreamID_decorators;
+    let _traverse_decorators;
+    return class ZComponent extends _classSuper {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _animation_decorators = [zIgnore()];
+            _resolveNodeID_decorators = [zIgnore()];
+            _resolveBehaviorID_decorators = [zIgnore()];
+            _resolveEntityID_decorators = [zIgnore()];
+            _notifyPropsChanged_decorators = [zIgnore()];
+            _notifyClipsChanged_decorators = [zIgnore()];
+            _resolveStreamID_decorators = [zIgnore()];
+            _traverse_decorators = [zIgnore()];
+            __esDecorate(this, null, _resolveNodeID_decorators, { kind: "method", name: "resolveNodeID", static: false, private: false, access: { has: obj => "resolveNodeID" in obj, get: obj => obj.resolveNodeID }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _resolveBehaviorID_decorators, { kind: "method", name: "resolveBehaviorID", static: false, private: false, access: { has: obj => "resolveBehaviorID" in obj, get: obj => obj.resolveBehaviorID }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _resolveEntityID_decorators, { kind: "method", name: "resolveEntityID", static: false, private: false, access: { has: obj => "resolveEntityID" in obj, get: obj => obj.resolveEntityID }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _notifyPropsChanged_decorators, { kind: "method", name: "notifyPropsChanged", static: false, private: false, access: { has: obj => "notifyPropsChanged" in obj, get: obj => obj.notifyPropsChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _notifyClipsChanged_decorators, { kind: "method", name: "notifyClipsChanged", static: false, private: false, access: { has: obj => "notifyClipsChanged" in obj, get: obj => obj.notifyClipsChanged }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _resolveStreamID_decorators, { kind: "method", name: "resolveStreamID", static: false, private: false, access: { has: obj => "resolveStreamID" in obj, get: obj => obj.resolveStreamID }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _traverse_decorators, { kind: "method", name: "traverse", static: false, private: false, access: { has: obj => "traverse" in obj, get: obj => obj.traverse }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _animation_decorators, { kind: "field", name: "animation", static: false, private: false, access: { has: obj => "animation" in obj, get: obj => obj.animation, set: (obj, value) => { obj.animation = value; } }, metadata: _metadata }, _animation_initializers, _animation_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        constructorProps = __runInitializers(this, _instanceExtraInitializers);
+        _opts;
+        /**
+         * The id of the component.
+         */
+        id;
         /**
          * A map of elements to node IDs.
          */
-        this.idByElement = new Map();
+        idByElement = new Map();
         /**
          * Object that maps node script names to scripts.
+         * @default {}
          */
-        this.nodes = {};
+        nodes = {};
         /**
          * Map of entites  by ID.
          */
-        this.entityByID = new Map();
+        entityByID = new Map();
         /**
          * A map of entity labels to components.
          */
-        this.entityByLabel = new Map();
+        entityByLabel = new Map();
         /**
          * A map of node labels to components.
          */
-        this.nodeByLabel = new Map();
+        nodeByLabel = new Map();
+        _constructedResolve;
         /**
          * A promise that is resolved once construction of this component is complete.
          */
-        this.constructed = new Promise(resolve => (this._constructedResolve = resolve));
+        constructed = new Promise(resolve => {
+            this._constructedResolve = resolve;
+        });
+        /**
+         * @default false
+         */
+        _isConstructed = false;
         /**
          * A boolean indicating if construction of this component is complete.
          */
-        this.isConstructed = false;
+        get isConstructed() {
+            return this._isConstructed;
+        }
         /**
          * The animation object for this component.
+         * @zignore
          */
-        this.animation = new Animation(false);
+        animation = __runInitializers(this, _animation_initializers, new Animation(false));
         /**
          * @zstreams layerclipids
+         * @default {}
+         */
+        streams = (__runInitializers(this, _animation_extraInitializers), {});
+        _nodesById = new Map();
+        /**
+         * @default []
          */
-        this.streams = {};
-        this._nodesById = new Map();
-        this._behaviorsToInitialize = [];
-        this._constructorPropOverridesByEntityID = new Map();
-        this._updateAnimationRegistrations = () => {
+        _behaviorsToInitialize = [];
+        _constructorPropOverridesByEntityID = new Map();
+        /**
+         * Creates an instance of ZComponent.
+         * @param contextManager - The current ContextManager
+         * @param constructorProps  - The constructor properties.
+         * @param _opts - The options for the component.
+         */
+        constructor(contextManager, constructorProps, _opts) {
+            super(contextManager, { ...constructorProps, children: [] });
+            this.constructorProps = constructorProps;
+            this._opts = _opts;
+            const contextManagerForChildren = contextManager.forkMultiple([ZComponentContext, { zcomponent: this }], [TagContext, {}])[0];
+            this.id = this._opts.data.id;
+            this._initializeConstructorPropOverrides();
+            if (this._opts.data.animation)
+                populateAnimationStructureFromData(this, this.animation, this._opts.data.animation);
+            const rootConstructor = this._constructorForNode(this._opts.data.root);
+            if (rootConstructor) {
+                this.constructChildren([[rootConstructor, {}]], contextManagerForChildren);
+            }
+            this._constructTopLevelComponents();
+            this._inflateBehaviors();
+            this._initializeComponentProps();
+            this._initializeOverrides();
+            if (this._opts.data.animation)
+                populateAnimationTracksFromData(this, this.animation, this._opts.data.animation);
+            this.animation.initialize();
+            for (const layerClip of this.animation.layerClipByID.values()) {
+                if (layerClip.id)
+                    this.streams[layerClip.id] = layerClip;
+            }
+            this._isConstructed = true;
+            this._constructedResolve();
+            started(contextManager).then(() => {
+                this._updateAnimationRegistrations();
+                if (!isDesignTime(contextManager))
+                    this.animation.start();
+            });
+            this.register(this.animation.hasLayers, this._updateAnimationRegistrations, { bindWhenDisabled: true });
+        }
+        _updateAnimationRegistrations = () => {
             if (this.animation.hasLayers && isStarted(this.contextManager) && !this.disposed)
                 this.register(useOnBeforeRender(this.contextManager), this._animationTick);
             else
                 this.unregister(useOnBeforeRender(this.contextManager), this._animationTick);
         };
-        this._animationTick = () => {
+        _animationTick = () => {
             this.animation.tick();
         };
-        const contextManagerForChildren = contextManager.forkMultiple([ZComponentContext, { zcomponent: this }], [TagContext, {}])[0];
-        this.id = this._opts.data.id;
-        this._initializeConstructorPropOverrides();
-        if (this._opts.data.animation)
-            populateAnimationStructureFromData(this, this.animation, this._opts.data.animation);
-        const rootConstructor = this._constructorForNode(this._opts.data.root);
-        if (rootConstructor) {
-            this.constructChildren([[rootConstructor, {}]], contextManagerForChildren);
-        }
-        this._inflateBehaviors();
-        this._initializeComponentProps();
-        this._initializeOverrides();
-        if (this._opts.data.animation)
-            populateAnimationTracksFromData(this, this.animation, this._opts.data.animation);
-        this.animation.initialize();
-        for (const layerClip of this.animation.layerClipByID.values()) {
-            if (layerClip.id)
-                this.streams[layerClip.id] = layerClip;
-        }
-        this.isConstructed = true;
-        this._constructedResolve();
-        started(contextManager).then(() => {
-            this._updateAnimationRegistrations();
-            if (!isDesignTime(contextManager))
-                this.animation.start();
-        });
-        this.register(this.animation.hasLayers, this._updateAnimationRegistrations, { bindWhenDisabled: true });
-    }
-    _constructorForNode(nodeId) {
-        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 that = this;
-        return class extends construct {
-            /**
-             *  Creates an instance of the component.
-             * @param contextManager - The current ContextManager
-             * @param constructorProps - The constructor properties.
-             */
-            constructor(contextManager, constructorProps) {
-                that._opts.onConstructingNode?.(nodeId);
-                const children = constructorProps.children ?? [];
-                const childIDs = computeNodeHierarchy(that._opts.data.nodes)[nodeId] ?? [];
-                for (const childID of childIDs) {
-                    const childInstance = that._constructorForNode(childID);
-                    if (childInstance)
-                        children.push([childInstance, {}]);
-                }
-                constructorProps = {
-                    ...constructorProps,
-                    ...(that._opts.data.entityConstructorProps?.[nodeId] ?? {}),
-                    ...(that._opts.constructorPropReplacement?.[nodeId] ?? {}),
-                    ...(that._constructorPropOverridesByEntityID.get(nodeId) ?? {}),
-                    children,
-                };
-                setCurrentZComponentConstruction(that);
-                super(contextManager, constructorProps);
-                this.locked = that._opts.data.nodes[nodeId]?.locked;
-                that.entityByID.set(nodeId, this);
-                if (node?.label) {
-                    that.entityByLabel.set(node.label, this);
-                    that.nodeByLabel.set(node.label, this);
-                    if (this.element)
-                        this.element['__zlabel'] = node.label;
-                }
-                that._nodesById.set(nodeId, this);
-                for (const element of this.elementsResolved) {
-                    that.idByElement.set(element, nodeId);
-                }
-                if (node?.scriptName) {
-                    const entriesForScriptName = that._opts.data.entitiesByScriptName?.[node.scriptName] ?? {};
-                    let moreThanOne = false;
-                    for (const entry in entriesForScriptName) {
-                        if (entry !== node.id) {
-                            moreThanOne = true;
-                            break;
-                        }
+        _constructorForNode(nodeId) {
+            const node = this._opts.data.nodes[nodeId];
+            if (!node) {
+                console.log('Warning - unable to find node with ID', nodeId);
+                return;
+            }
+            if ((node.excludeDesignTime && isDesignTime(this.contextManager)) || (node.excludeRuntime && !isDesignTime(this.contextManager))) {
+                return;
+            }
+            const construct = this._opts.importMapping[node.type]?.();
+            if (!construct) {
+                console.log('Warning - unable to find constructor for type', node.type);
+                return;
+            }
+            const that = this;
+            return class extends construct {
+                /**
+                 *  Creates an instance of the component.
+                 * @param contextManager - The current ContextManager
+                 * @param constructorProps - The constructor properties.
+                 */
+                constructor(contextManager, constructorProps) {
+                    that._opts.onConstructingNode?.(nodeId);
+                    const children = constructorProps.children ?? [];
+                    const childIDs = computeNodeHierarchy(that._opts.data.nodes)[nodeId] ?? [];
+                    for (const childID of childIDs) {
+                        const childInstance = that._constructorForNode(childID);
+                        if (childInstance)
+                            children.push([childInstance, {}]);
                     }
-                    if (moreThanOne) {
-                        const current = that.nodes[node.scriptName] ?? {};
-                        that.nodes[node.scriptName] = current;
-                        current[node.id] = this;
+                    constructorProps = {
+                        ...constructorProps,
+                        ...(that._opts.data.entityConstructorProps?.[nodeId] ?? {}),
+                        ...(that._opts.constructorPropReplacement?.[nodeId] ?? {}),
+                        ...(that._constructorPropOverridesByEntityID.get(nodeId) ?? {}),
+                        children,
+                    };
+                    setCurrentZComponentConstruction(that);
+                    super(contextManager, constructorProps);
+                    this.locked = that._opts.data.nodes[nodeId]?.locked;
+                    that.entityByID.set(nodeId, this);
+                    if (node?.label) {
+                        that.entityByLabel.set(node.label, this);
+                        that.nodeByLabel.set(node.label, this);
+                        if (this.element)
+                            this.element['__zlabel'] = node.label;
                     }
-                    else {
-                        that.nodes[node.scriptName] = this;
+                    that._nodesById.set(nodeId, this);
+                    for (const element of this.elementsResolved) {
+                        that.idByElement.set(element, nodeId);
                     }
-                }
-                that._behaviorsToInitialize.push([nodeId, this, this.contextManager]);
-                const props = {
-                    ...(that._opts.data.entityProps?.[nodeId] ?? {}),
-                    ...(that._opts.propReplacement?.[nodeId] ?? {}),
-                    // TOOD add forwarded props
-                };
-                for (const [key, val] of Object.entries(props)) {
-                    try {
-                        that._setEntityProp(this, key, val);
+                    if (node?.scriptName) {
+                        const entriesForScriptName = that._opts.data.entitiesByScriptName?.[node.scriptName] ?? {};
+                        let moreThanOne = false;
+                        for (const entry in entriesForScriptName) {
+                            if (entry !== node.id) {
+                                moreThanOne = true;
+                                break;
+                            }
+                        }
+                        if (moreThanOne) {
+                            const current = that.nodes[node.scriptName] ?? {};
+                            that.nodes[node.scriptName] = current;
+                            current[node.id] = this;
+                        }
+                        else {
+                            that.nodes[node.scriptName] = this;
+                        }
                     }
-                    catch (err) {
-                        console.log('Warning - unable to set entity prop', key, val);
+                    that._behaviorsToInitialize.push([nodeId, this, this.contextManager]);
+                    const props = {
+                        ...(that._opts.data.entityProps?.[nodeId] ?? {}),
+                        ...(that._opts.propReplacement?.[nodeId] ?? {}),
+                        // TOOD add forwarded props
+                    };
+                    for (const [key, val] of Object.entries(props)) {
+                        try {
+                            that._setEntityProp(this, key, val);
+                        }
+                        catch (err) {
+                            console.log('Warning - unable to set entity prop', key, val);
+                        }
                     }
+                    that._opts.onConstructingNode?.(undefined);
+                    if (that.isConstructed)
+                        that._inflateBehaviors();
                 }
-                that._opts.onConstructingNode?.(undefined);
-                if (that.isConstructed)
-                    that._inflateBehaviors();
-            }
-            dispose() {
-                that.entityByID.delete(nodeId);
-                if (node.label)
-                    that.entityByLabel.delete(node.label);
-                that._nodesById.delete(nodeId);
-                for (const element of this.elementsResolved) {
-                    that.idByElement.delete(element);
+                dispose() {
+                    that.entityByID.delete(nodeId);
+                    if (node.label)
+                        that.entityByLabel.delete(node.label);
+                    that._nodesById.delete(nodeId);
+                    for (const element of this.elementsResolved) {
+                        that.idByElement.delete(element);
+                    }
+                    return super.dispose();
                 }
-                return super.dispose();
-            }
-        };
-    }
-    _constructorForBehavior(behaviorId) {
-        const node = this._opts.data.behaviors[behaviorId];
-        if (!node) {
-            console.log('Warning - unable to find behavior with ID', behaviorId);
-            return;
-        }
-        const construct = this._opts.importMapping[node.type]?.();
-        if (!construct) {
-            console.log('Warning - unable to find constructor for type', node.type);
-            return;
+            };
         }
-        const designTime = isDesignTime(this.contextManager);
-        if (designTime && !shouldBehaviorRunAtDesignTime(construct))
-            return;
-        const that = this;
-        return class extends construct {
-            /**
-             * Creates an instance of the behavior.
-             * @param contextManager - The current ContextManager
-             * @param instance - The instance of the component that this behavior is attached to
-             * @param constructorProps - The constructor properties.
-             */
-            constructor(contextManager, instance, constructorProps) {
-                constructorProps = {
-                    ...constructorProps,
-                    ...(that._opts.data.entityConstructorProps?.[behaviorId] ?? {}),
-                    ...(that._opts.constructorPropReplacement?.[behaviorId] ?? {}),
-                    ...(that._constructorPropOverridesByEntityID.get(behaviorId) ?? {}),
-                };
-                for (const key in constructorProps) {
-                    const val = constructorProps[key];
-                    if (val !== undefined && val !== null && val['_zfn'] === true)
-                        constructorProps[key] = that._wrapFunctionCall(val);
-                }
-                setCurrentZComponentConstruction(that);
-                super(contextManager, instance, constructorProps);
-                that.entityByID.set(behaviorId, this);
-                if (node?.parent?.scriptName)
-                    instance.behaviors[node.parent.scriptName] = this;
-                const props = {
-                    ...(that._opts.data.entityProps?.[behaviorId] ?? {}),
-                    ...(that._opts.propReplacement?.[behaviorId] ?? {}),
-                    // TOOD add forwarded props
-                };
-                for (const [key, val] of Object.entries(props)) {
-                    try {
-                        that._setEntityProp(this, key, val);
+        _constructorForBehavior(behaviorId) {
+            const node = this._opts.data.behaviors[behaviorId];
+            if (!node) {
+                console.log('Warning - unable to find behavior with ID', behaviorId);
+                return;
+            }
+            const construct = this._opts.importMapping[node.type]?.();
+            if (!construct) {
+                console.log('Warning - unable to find constructor for type', node.type);
+                return;
+            }
+            const designTime = isDesignTime(this.contextManager);
+            if (designTime && !shouldBehaviorRunAtDesignTime(construct))
+                return;
+            const that = this;
+            return class extends construct {
+                /**
+                 * Creates an instance of the behavior.
+                 * @param contextManager - The current ContextManager
+                 * @param instance - The instance of the component that this behavior is attached to
+                 * @param constructorProps - The constructor properties.
+                 */
+                constructor(contextManager, instance, constructorProps) {
+                    constructorProps = {
+                        ...constructorProps,
+                        ...(that._opts.data.entityConstructorProps?.[behaviorId] ?? {}),
+                        ...(that._opts.constructorPropReplacement?.[behaviorId] ?? {}),
+                        ...(that._constructorPropOverridesByEntityID.get(behaviorId) ?? {}),
+                    };
+                    for (const key in constructorProps) {
+                        const val = constructorProps[key];
+                        if (val !== undefined && val !== null && val['_zfn'] === true)
+                            constructorProps[key] = that._wrapFunctionCall(val);
                     }
-                    catch (err) {
-                        console.log('Warning - unable to set entity prop', key, val);
+                    setCurrentZComponentConstruction(that);
+                    super(contextManager, instance, constructorProps);
+                    that.entityByID.set(behaviorId, this);
+                    if (node?.parent?.scriptName)
+                        instance.behaviors[node.parent.scriptName] = this;
+                    const props = {
+                        ...(that._opts.data.entityProps?.[behaviorId] ?? {}),
+                        ...(that._opts.propReplacement?.[behaviorId] ?? {}),
+                        // TOOD add forwarded props
+                    };
+                    for (const [key, val] of Object.entries(props)) {
+                        try {
+                            that._setEntityProp(this, key, val);
+                        }
+                        catch (err) {
+                            console.log('Warning - unable to set entity prop', key, val);
+                        }
                     }
                 }
+                dispose() {
+                    that.entityByID.delete(behaviorId);
+                    if (node?.parent?.scriptName)
+                        delete this.instance.behaviors[node.parent.scriptName];
+                    return super.dispose();
+                }
+            };
+        }
+        /**
+         * This function returns the component with the given ID. If the component is not found, it will return undefined.
+         * This function is used to get a component from a node ID, which is a string representation of a node.
+         * The node ID is used to identify a node in the graph.
+         * If a component constructor is passed as `type`, this function will ensure that the node that's returned
+         * is an instance of that component, or return undefined if it is not.
+         */
+        resolveNodeID(id, type) {
+            const entity = this.entityByID.get(id);
+            try {
+                if (!entity)
+                    return this.getZComponentInstance()?.resolveNodeID(id, type);
             }
-            dispose() {
-                that.entityByID.delete(behaviorId);
-                if (node?.parent?.scriptName)
-                    delete this.instance.behaviors[node.parent.scriptName];
-                return super.dispose();
+            catch (err) {
+                return undefined;
             }
-        };
-    }
-    /**
-     * This function returns the component with the given ID. If the component is not found, it will return undefined.
-     * This function is used to get a component from a node ID, which is a string representation of a node.
-     * The node ID is used to identify a node in the graph.
-     * If a component constructor is passed as `type`, this function will ensure that the node that's returned
-     * is an instance of that component, or return undefined if it is not.
-     */
-    resolveNodeID(id, type) {
-        const entity = this.entityByID.get(id);
-        try {
-            if (!entity)
-                return this.getZComponentInstance()?.resolveNodeID(id, type);
-        }
-        catch (err) {
-            return undefined;
-        }
-        if (!(entity instanceof Component))
-            return undefined;
-        if (!type)
-            return entity;
-        if (entity instanceof type)
-            return entity;
-        return undefined;
-    }
-    /**
-     * This function returns the behavior with the given ID. If the behavior is not found, it will return undefined.
-     * This function is used to get a behavior from a behavior ID, which is a string representation of a behavior.
-     */
-    resolveBehaviorID(id, type) {
-        const entity = this.entityByID.get(id);
-        try {
-            if (!entity)
-                return this.getZComponentInstance()?.resolveBehaviorID(id, type);
-        }
-        catch (err) {
-            return undefined;
-        }
-        if (!(entity instanceof Behavior))
-            return undefined;
-        if (!type)
-            return entity;
-        if (entity instanceof type)
-            return entity;
-        return undefined;
-    }
-    /**
-     * Resolves an entity ID to an entity instance.
-     *
-     * @param id - The ID of the entity to resolve.
-     * @returns The resolved entity as an instance of T (which extends Entity), or undefined if the entity could not be resolved.
-     * @template T The entity type.
-     */
-    resolveEntityID(id) {
-        const entity = this.entityByID.get(id);
-        try {
-            if (!entity)
-                return this.getZComponentInstance()?.resolveEntityID(id);
-        }
-        catch (err) {
+            if (!(entity instanceof Component))
+                return undefined;
+            if (!type)
+                return entity;
+            if (entity instanceof type)
+                return entity;
             return undefined;
         }
-        if (!(entity instanceof Entity))
+        /**
+         * This function returns the behavior with the given ID. If the behavior is not found, it will return undefined.
+         * This function is used to get a behavior from a behavior ID, which is a string representation of a behavior.
+         */
+        resolveBehaviorID(id, type) {
+            const entity = this.entityByID.get(id);
+            try {
+                if (!entity)
+                    return this.getZComponentInstance()?.resolveBehaviorID(id, type);
+            }
+            catch (err) {
+                return undefined;
+            }
+            if (!(entity instanceof Behavior))
+                return undefined;
+            if (!type)
+                return entity;
+            if (entity instanceof type)
+                return entity;
             return undefined;
-        return entity;
-    }
-    _inflateBehaviors() {
-        for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
-            this._wrapBehaviors(nodeID, impl, ctx);
         }
-        this._behaviorsToInitialize = [];
-    }
-    _wrapBehaviors(nodeID, impl, ctx) {
-        const behaviors = computeBehaviorHierarchy(this._opts.data.behaviors)[nodeID] ?? [];
-        for (const behaviorID of behaviors) {
+        /**
+         * Resolves an entity ID to an entity instance.
+         *
+         * @param id - The ID of the entity to resolve.
+         * @returns The resolved entity as an instance of T (which extends Entity), or undefined if the entity could not be resolved.
+         * @template T The entity type.
+         */
+        resolveEntityID(id) {
+            const entity = this.entityByID.get(id);
             try {
-                const constructor = this._constructorForBehavior(behaviorID);
-                if (constructor)
-                    new constructor(ctx, impl);
+                if (!entity)
+                    return this.getZComponentInstance()?.resolveEntityID(id);
             }
             catch (err) {
-                const nodeName = this._opts.data.nodes[nodeID]?.label ?? 'Unknown node';
-                const behaviorType = this._opts.data.behaviors[behaviorID]?.type;
-                console.log('An error occurred when constructing behavior of type:', behaviorType, 'for node:', nodeName, err);
+                return undefined;
             }
+            if (!(entity instanceof Entity))
+                return undefined;
+            return entity;
         }
-    }
-    _wrapFunctionCall(c) {
-        switch (c.t) {
-            case FunctionCallType.Context:
-                return () => {
-                    try {
-                        if (typeof c.imp !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
-                            throw new Error('Invalid function call data');
-                        const contextConstructor = c.resolved;
-                        if (!contextConstructor)
-                            throw new Error('Unable to find context');
-                        const context = this.contextManager.get(contextConstructor);
-                        if (!context)
-                            throw new Error('Unable to get context');
-                        const func = context[c.fn];
-                        if (!func || typeof func !== 'function')
-                            throw new Error('Unable to find function on enttiy');
-                        const tf = func;
-                        const converted = [];
-                        for (const key in c.args)
-                            converted[key] = c.args[key];
-                        return tf.call(context, ...converted);
-                    }
-                    catch (err) {
-                        console.error('Unable to call context function', err);
-                    }
-                };
-            case FunctionCallType.Entity:
-                return () => {
-                    try {
-                        if (typeof c.entityID !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
-                            throw new Error('Invalid function call data');
-                        const entity = this.resolveEntityID(c.entityID);
-                        if (!entity)
-                            throw new Error('Unable to find entity');
-                        const func = entity[c.fn];
-                        if (!func || typeof func !== 'function')
-                            throw new Error('Unable to find function on enttiy');
-                        const tf = func;
-                        const converted = [];
-                        for (const key in c.args)
-                            converted[key] = c.args[key];
-                        return tf.call(entity, ...converted);
-                    }
-                    catch (err) {
-                        console.error('Unable to call entity function', err);
-                    }
-                };
-            case FunctionCallType.EmitComponentEvent:
-                return () => {
-                    try {
-                        if (typeof c.prop !== 'string' || typeof c.args !== 'object')
-                            throw new Error('Invalid function call data');
-                        const evt = this[c.prop];
-                        if (!evt)
-                            throw new Error('Unable to find component event');
-                        if (!(evt instanceof Event))
-                            throw new Error('Component property is not an event');
-                        const converted = [];
-                        for (const key in c.args)
-                            converted[key] = c.args[key];
-                        evt.emit.call(evt, ...converted);
-                    }
-                    catch (err) {
-                        console.error('Unable to emit component event', err);
-                    }
-                };
+        _inflateBehaviors() {
+            for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
+                this._wrapBehaviors(nodeID, impl, ctx);
+            }
+            this._behaviorsToInitialize = [];
         }
-    }
-    /**
-     * Notifies the component that the properties of certain entities have changed.
-     *
-     * @param entries - A map where the keys are entity IDs and the values are sets of property names.
-     */
-    notifyPropsChanged(entries) {
-        for (const [entityID, propSet] of entries.entries()) {
-            const entity = this.entityByID.get(entityID);
-            if (!entity)
-                continue;
-            for (const prop of propSet.values()) {
+        _wrapBehaviors(nodeID, impl, ctx) {
+            const behaviors = computeBehaviorHierarchy(this._opts.data.behaviors)[nodeID] ?? [];
+            for (const behaviorID of behaviors) {
                 try {
-                    this._setEntityProp(entity, prop, this._opts.data.entityProps[entityID]?.[prop]);
-                    this.animation.clearCachedDefault(entityID, prop);
+                    const _constructor = this._constructorForBehavior(behaviorID);
+                    if (_constructor)
+                        new _constructor(ctx, impl);
                 }
                 catch (err) {
-                    console.log('Warning - unable to set prop', entityID, prop);
+                    const nodeName = this._opts.data.nodes[nodeID]?.label ?? 'Unknown node';
+                    const behaviorType = this._opts.data.behaviors[behaviorID]?.type;
+                    console.log('An error occurred when constructing behavior of type:', behaviorType, 'for node:', nodeName, err);
                 }
             }
         }
-    }
-    /**
-     * The animation editor will call this function when the user changes
-     * the list of clips in the animation. We need to update the clip
-     * data for each clip that was changed.
-     */
-    notifyClipsChanged(clips) {
-        for (const clipId of clips.values()) {
-            const clip = this.animation.clipByID.get(clipId);
-            const clipData = this._opts.data.animation?.clips?.[clipId];
-            if (!clip || !clipData)
-                continue;
-            updateClipFromData(this, clip, clipData);
+        _wrapFunctionCall(c) {
+            switch (c.t) {
+                case FunctionCallType.Context:
+                    return () => {
+                        try {
+                            if (typeof c.imp !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
+                                throw new Error('Invalid function call data');
+                            const contextConstructor = c.resolved;
+                            if (!contextConstructor)
+                                throw new Error('Unable to find context');
+                            const context = this.contextManager.get(contextConstructor);
+                            if (!context)
+                                throw new Error('Unable to get context');
+                            const func = context[c.fn];
+                            if (!func || typeof func !== 'function')
+                                throw new Error('Unable to find function on enttiy');
+                            const tf = func;
+                            const converted = [];
+                            for (const key in c.args)
+                                converted[key] = c.args[key];
+                            return tf.call(context, ...converted);
+                        }
+                        catch (err) {
+                            console.error('Unable to call context function', err);
+                        }
+                    };
+                case FunctionCallType.Entity:
+                    return () => {
+                        try {
+                            if (typeof c.entityID !== 'string' || typeof c.fn !== 'string' || typeof c.args !== 'object')
+                                throw new Error('Invalid function call data');
+                            const entity = this.resolveEntityID(c.entityID);
+                            if (!entity)
+                                throw new Error('Unable to find entity');
+                            const func = entity[c.fn];
+                            if (!func || typeof func !== 'function')
+                                throw new Error('Unable to find function on enttiy');
+                            const tf = func;
+                            const converted = [];
+                            for (const key in c.args)
+                                converted[key] = c.args[key];
+                            return tf.call(entity, ...converted);
+                        }
+                        catch (err) {
+                            console.error('Unable to call entity function', err);
+                        }
+                    };
+                case FunctionCallType.EmitComponentEvent:
+                    return () => {
+                        try {
+                            if (typeof c.prop !== 'string' || typeof c.args !== 'object')
+                                throw new Error('Invalid function call data');
+                            const evt = this[c.prop];
+                            if (!evt)
+                                throw new Error('Unable to find component event');
+                            if (!(evt instanceof Event))
+                                throw new Error('Component property is not an event');
+                            const converted = [];
+                            for (const key in c.args)
+                                converted[key] = c.args[key];
+                            evt.emit.call(evt, ...converted);
+                        }
+                        catch (err) {
+                            console.error('Unable to emit component event', err);
+                        }
+                    };
+            }
         }
-    }
-    _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;
+        /**
+         * Notifies the component that the properties of certain entities have changed.
+         *
+         * @param entries - A map where the keys are entity IDs and the values are sets of property names.
+         */
+        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]);
+                        this.animation.clearCachedDefault(entityID, prop);
                     }
-                    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;
+                    catch (err) {
+                        console.log('Warning - unable to set prop', entityID, prop);
                     }
-                    case EntityPropOverrideType.ComponentProp: {
-                        if (override.isConstructorProp) {
-                            const prop = this._opts.data.constructorProps?.[override.propName];
-                            if (!prop)
+                }
+            }
+        }
+        /**
+         * The animation editor will call this function when the user changes
+         * the list of clips in the animation. We need to update the clip
+         * data for each clip that was changed.
+         */
+        notifyClipsChanged(clips) {
+            for (const clipId of clips.values()) {
+                const clip = this.animation.clipByID.get(clipId);
+                const clipData = this._opts.data.animation?.clips?.[clipId];
+                if (!clip || !clipData)
+                    continue;
+                updateClipFromData(this, clip, clipData);
+            }
+        }
+        _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 val = this.constructorProps[override.propName] ?? prop.default;
-                            if (val !== undefined)
-                                this._setEntityPropPath(entity, override.entityPropPath, val);
+                            }
+                            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;
                         }
-                        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);
+                }
             }
-            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;
             }
         }
-    }
-    _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)) {
+                if (prop.type.name === 'event')
+                    this[prop.name] = new Event();
+                else
+                    this[prop.name] = new Observable(prop.default);
+            }
         }
-    }
-    _initializeComponentProps() {
-        const componentProps = this._opts.data.props ?? {};
-        for (const prop of Object.values(componentProps)) {
-            if (prop.type.name === 'event')
-                this[prop.name] = new Event();
+        _setEntityProp(entity, prop, v) {
+            if (v !== undefined && v !== null && v['_zfn'] === true)
+                v = this._wrapFunctionCall(v);
+            if (v === undefined && resetObservable(entity, prop))
+                return;
+            if (entity[prop] instanceof Observable)
+                entity[prop].value = v;
             else
-                this[prop.name] = new Observable(prop.default);
+                entity[prop] = v;
         }
-    }
-    _setEntityProp(entity, prop, v) {
-        if (v !== undefined && v !== null && v['_zfn'] === true)
-            v = this._wrapFunctionCall(v);
-        if (entity[prop] instanceof Observable)
-            entity[prop].value = v;
-        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';
+        _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];
+            }
+            if (v !== undefined && v !== null && v['_zfn'] === true)
+                v = this._wrapFunctionCall(v);
+            parent[currentKey] = v;
         }
-        for (let i = 1; i < propPath.length; i++) {
-            parent = parent[currentKey];
-            currentKey = propPath[i];
+        /**
+         * Returns the node with the specified ID.
+         */
+        _getNodeById(id) {
+            return this._nodesById.get(id);
         }
-        if (v !== undefined && v !== null && v['_zfn'] === true)
-            v = this._wrapFunctionCall(v);
-        parent[currentKey] = v;
-    }
-    /**
-     * Returns the node with the specified ID.
-     */
-    _getNodeById(id) {
-        return this._nodesById.get(id);
-    }
-    /**
-     * Rsolves a stream ID to a stream object. The stream ID is a string that
-     * is constructed from the entity ID of the stream's parent entity, followed by a
-     * period, followed by the name of the stream. This function splits the string into
-     * parts, and then uses the parts to traverse the entity tree until it finds the
-     * named stream.
-     */
-    resolveStreamID(id) {
-        const parts = id.split('.');
-        let obj = this.entityByID.get(parts[0]);
-        if (!obj)
-            return undefined;
-        for (let i = 1; i < parts.length; i++) {
+        /**
+         * Rsolves a stream ID to a stream object. The stream ID is a string that
+         * is constructed from the entity ID of the stream's parent entity, followed by a
+         * period, followed by the name of the stream. This function splits the string into
+         * parts, and then uses the parts to traverse the entity tree until it finds the
+         * named stream.
+         */
+        resolveStreamID(id) {
+            const parts = id.split('.');
+            let obj = this.entityByID.get(parts[0]);
             if (!obj)
                 return undefined;
-            obj = obj[parts[i]];
-        }
-        return obj;
-    }
-    /**
-     * Traverses the component tree starting from the current component,
-     * moving down the tree using either Breadth-First Search (BFS) or Depth-First Search (DFS),
-     * and invokes the given callback function on each component.
-     *
-     * Breadth-first chosen for traversal can be specifying `true` for the second parameter
-     *
-     * Example usage:
-     * ```
-     * component.traverse((comp) => {
-     *   // Your logic here, e.g.
-     *   console.log(comp.name);
-     * }, true);
-     * ```
-     *
-     * @param callback A function that will be called for each component in the traversal. The current component is passed as a parameter to the callback.
-     * @param breadthFirst If traversal should be breadth-first. Defaults to `false` (depth-first).
-     */
-    traverse(callback, breadthFirst = false) {
-        if (breadthFirst) {
-            this._traverseBFS(callback);
-        }
-        else {
-            this._traverseDFS(callback);
+            for (let i = 1; i < parts.length; i++) {
+                if (!obj)
+                    return undefined;
+                obj = obj[parts[i]];
+            }
+            return obj;
         }
-    }
-    _traverseBFS(callback) {
-        const queue = [this];
-        while (queue.length > 0) {
-            const currentComponent = queue.shift();
-            if (currentComponent) {
-                callback(currentComponent);
-                queue.push(...currentComponent.children);
+        /**
+         * Traverses the component tree starting from the current component,
+         * moving down the tree using either Breadth-First Search (BFS) or Depth-First Search (DFS),
+         * and invokes the given callback function on each component.
+         *
+         * Breadth-first chosen for traversal can be specifying `true` for the second parameter
+         *
+         * Example usage:
+         * ```
+         * component.traverse((comp) => {
+         *   // Your logic here, e.g.
+         *   console.log(comp.name);
+         * }, true);
+         * ```
+         *
+         * @param callback A function that will be called for each component in the traversal. The current component is passed as a parameter to the callback.
+         * @param breadthFirst If traversal should be breadth-first. Defaults to `false` (depth-first).
+         */
+        traverse(callback, breadthFirst = false) {
+            if (breadthFirst) {
+                this._traverseBFS(callback);
+            }
+            else {
+                this._traverseDFS(callback);
             }
         }
-    }
-    _traverseDFS(callback) {
-        const dfs = (comp) => {
-            if (comp) {
-                callback(comp);
-                comp.children.forEach(dfs);
+        _traverseBFS(callback) {
+            const queue = [this];
+            while (queue.length > 0) {
+                const currentComponent = queue.shift();
+                if (currentComponent) {
+                    callback(currentComponent);
+                    queue.push(...currentComponent.children);
+                }
             }
-        };
-        dfs(this);
-    }
-    dispose() {
-        this.animation.dispose();
-        for (const entity of this.entityByID.values()) {
-            if (entity && typeof entity.dispose === 'function') {
-                try {
-                    entity.dispose();
+        }
+        _traverseDFS(callback) {
+            const dfs = (comp) => {
+                if (comp) {
+                    callback(comp);
+                    comp.children.forEach(dfs);
                 }
-                catch (err) {
-                    // Ignore
+            };
+            dfs(this);
+        }
+        _constructTopLevelComponents() {
+            if (!this._opts.data.topLevelComponents)
+                return;
+            for (const nodeId of Object.keys(this._opts.data.topLevelComponents)) {
+                const node = this._opts.data.nodes[nodeId];
+                if (!node) {
+                    console.log('Warning - unable to find node with ID', nodeId);
+                    return;
+                }
+                if ((node.excludeDesignTime && isDesignTime(this.contextManager)) || (node.excludeRuntime && !isDesignTime(this.contextManager))) {
+                    return;
+                }
+                const construct = this._opts.importMapping[node.type]?.();
+                if (!construct) {
+                    console.log('Warning - unable to find constructor for type', node.type);
+                    return;
+                }
+                const instance = this.contextManager.get(RootComponentsContext).lockTopLevelComponent(construct, {
+                    ...(this._opts.data.entityConstructorProps?.[nodeId] ?? {}),
+                    ...(this._opts.constructorPropReplacement?.[nodeId] ?? {}),
+                    children: [],
+                }, this);
+                this.entityByID.set(nodeId, instance);
+                if (node?.label) {
+                    this.entityByLabel.set(node.label, instance);
+                    this.nodeByLabel.set(node.label, instance);
+                }
+                this._nodesById.set(nodeId, instance);
+                for (const element of instance.elementsResolved) {
+                    this.idByElement.set(element, nodeId);
+                }
+                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] = instance;
+                    }
+                    else {
+                        this.nodes[node.scriptName] = instance;
+                    }
+                }
+                this._behaviorsToInitialize.push([nodeId, instance, this.contextManager]);
+                const props = {
+                    ...(this._opts.data.entityProps?.[nodeId] ?? {}),
+                    ...(this._opts.propReplacement?.[nodeId] ?? {}),
+                };
+                for (const [key, val] of Object.entries(props)) {
+                    try {
+                        this._setEntityProp(instance, key, val);
+                    }
+                    catch (err) {
+                        console.log('Warning - unable to set entity prop', key, val);
+                    }
                 }
             }
         }
-        return super.dispose();
-    }
-}
+        dispose() {
+            this.animation.dispose();
+            for (const [id, entity] of this.entityByID.entries()) {
+                if (this._opts.data.topLevelComponents?.[id])
+                    continue;
+                if (entity && typeof entity.dispose === 'function') {
+                    try {
+                        entity.dispose();
+                    }
+                    catch (err) {
+                        // Ignore
+                    }
+                }
+            }
+            // Unlock top-level components
+            for (const nodeId of Object.keys(this._opts.data.topLevelComponents ?? {})) {
+                const node = this._opts.data.nodes[nodeId];
+                if (!node)
+                    continue;
+                const construct = this._opts.importMapping[node.type]?.();
+                if (!construct)
+                    continue;
+                this.contextManager.get(RootComponentsContext).unlockTopLevelComponent(construct, this);
+            }
+            return super.dispose();
+        }
+    };
+})();
+export { ZComponent };