@zcomponent/core 0.0.1 → 0.0.4

package/lib/zcomponent.js

@@ -1,4 +1,5 @@
 import { shouldBehaviorRunAtDesignTime } from './behavior';
+import { Component } from './component';
 import { defineContextType } from './context';
 import { isDesignTime } from './contexts/environmentcontext';
 import { Observable } from './observable';
@@ -11,8 +12,10 @@ export function useZComponentInstance(ctx, comp) {
 export function useConstructed(ctx) {
     return ctx.getOrThrow(ZComponentContext)?.zcomponent.constructed;
 }
-export class ZComponent {
-    constructor(constructorProps, ctx, _opts) {
+export class ZComponent extends Component {
+    constructor(constructorProps, contextManager, _opts) {
+        contextManager = contextManager.fork(ZComponentContext, undefined)[0];
+        super(constructorProps, contextManager, { dontConstructChildren: true });
         this._opts = _opts;
         this.idByRoot = new Map();
         this.nodes = {};
@@ -21,16 +24,20 @@ export class ZComponent {
         this.isConstructed = false;
         this._nodesById = new Map();
         this._behaviorsToInitialize = [];
+        contextManager.getOrThrow(ZComponentContext).zcomponent = this;
         this.id = this._opts.data.id;
-        this._initializeComponentProps();
-        this._contextManager = ctx.fork(ZComponentContext, this)[0];
-        this._root = this._inflate(this._opts.data.root, {}, this._contextManager);
-        this.root = this._root?.root;
+        const rootConstructor = this._constructorForNode(this._opts.data.root);
+        if (rootConstructor) {
+            this._constructChildren([
+                [rootConstructor, {}]
+            ]);
+        }
         this._inflateBehaviors();
+        this._initializeComponentProps();
         this.isConstructed = true;
         this._constructedResolve();
     }
-    _inflate(nodeId, additionalConstructorProps, ctx) {
+    _constructorForNode(nodeId) {
         const node = this._opts.data.nodes[nodeId];
         if (!node) {
             console.log('Warning - unable to find node with ID', nodeId);
@@ -41,80 +48,118 @@ export class ZComponent {
             console.log('Warning - unable to find constructor for type', node.type);
             return;
         }
-        const children = additionalConstructorProps['children'] ?? [];
-        for (const child of node.children) {
-            children.push([
-                (cp, ctx) => {
-                    const comp = this._inflate(child.id, cp, ctx);
-                    return {
-                        ...comp,
-                        dispose: () => {
-                            this.entityByID.delete(nodeId);
-                            this._nodesById.delete(nodeId);
-                            if (comp && typeof comp.dispose === 'function')
-                                comp.dispose();
+        const that = this;
+        return class extends construct {
+            constructor(constructorProps, contextManager) {
+                that._opts.onConstructingNode?.(nodeId);
+                const children = constructorProps.children ?? [];
+                for (const child of node?.children ?? []) {
+                    const childInstance = that._constructorForNode(child.id);
+                    if (childInstance)
+                        children.push([childInstance, {}]);
+                }
+                constructorProps = {
+                    ...constructorProps,
+                    ...(that._opts.data.entityConstructorProps?.[nodeId] ?? {}),
+                    ...(that._opts.constructorPropReplacement?.[nodeId] ?? {}),
+                    children,
+                };
+                super(constructorProps, contextManager);
+                that.entityByID.set(nodeId, this);
+                that._nodesById.set(nodeId, this);
+                if (nodeId === that._opts.data.root) {
+                    that._rootComponent = this;
+                    that.root = this.root;
+                }
+                if (this.root)
+                    that.idByRoot.set(this.root, 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;
                         }
-                    };
-                },
-                {}
-            ]);
-        }
-        let impl;
-        const constructorProps = {
-            ...(this._opts.data.entityConstructorProps?.[nodeId] ?? {}),
-            ...(this._opts.constructorPropReplacement?.[nodeId] ?? {}),
-            ...additionalConstructorProps,
-            children,
+                    }
+                    if (moreThanOne) {
+                        const current = that.nodes[node.scriptName] ?? {};
+                        that.nodes[node.scriptName] = current;
+                        current[node.id] = this;
+                    }
+                    else {
+                        that.nodes[node.scriptName] = this;
+                    }
+                }
+                that._behaviorsToInitialize.push([nodeId, 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();
+            }
+            dispose() {
+                that.entityByID.delete(nodeId);
+                that._nodesById.delete(nodeId);
+                if (this.root)
+                    that.idByRoot.delete(this.root);
+                return super.dispose();
+            }
         };
-        this._opts.onConstructingNode?.(nodeId);
-        try {
-            impl = construct(constructorProps, ctx);
+    }
+    _constructorForBehavior(behaviorId) {
+        const node = this._opts.data.behaviors[behaviorId];
+        if (!node) {
+            console.log('Warning - unable to find behavior with ID', behaviorId);
+            return;
         }
-        catch (err) {
-            console.log('Warning - unable to construct node of type', node.type, err);
+        const construct = this._opts.importMapping[node.type]?.();
+        if (!construct) {
+            console.log('Warning - unable to find constructor for type', node.type);
             return;
         }
-        this._behaviorsToInitialize.push([nodeId, impl, ctx]);
-        if (impl.root)
-            this.idByRoot.set(impl.root, nodeId);
-        this._nodesById.set(nodeId, impl);
-        this.entityByID.set(nodeId, impl);
-        if (node.scriptName) {
-            const entriesForScriptName = this._opts.data.entitiesByScriptName?.[node.scriptName] ?? {};
-            let moreThanOne = false;
-            for (const entry in entriesForScriptName) {
-                if (entry !== node.id) {
-                    moreThanOne = true;
-                    break;
+        const designTime = isDesignTime(this.contextManager);
+        if (designTime && !shouldBehaviorRunAtDesignTime(construct))
+            return;
+        const that = this;
+        return class extends construct {
+            constructor(constructorProps, contextManager) {
+                constructorProps = {
+                    ...constructorProps,
+                    ...(that._opts.data.entityConstructorProps?.[behaviorId] ?? {}),
+                    ...(that._opts.constructorPropReplacement?.[behaviorId] ?? {}),
+                };
+                super(constructorProps, contextManager);
+                that.entityByID.set(behaviorId, 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);
+                    }
                 }
             }
-            if (moreThanOne) {
-                const current = this.nodes[node.scriptName] ?? {};
-                this.nodes[node.scriptName] = current;
-                current[node.id] = impl;
-            }
-            else {
-                this.nodes[node.scriptName] = impl;
+            dispose() {
+                return super.dispose();
             }
-        }
-        if (!impl)
-            return impl;
-        const props = {
-            ...(this._opts.data.entityProps?.[nodeId] ?? {}),
-            ...(this._opts.propReplacement?.[nodeId] ?? {}),
         };
-        for (const [key, val] of Object.entries(props)) {
-            try {
-                this._setEntityProp(impl, key, val);
-            }
-            catch (err) {
-                console.log('Warning - unable to set node prop', key, val);
-            }
-        }
-        this._opts.onConstructingNode?.(undefined);
-        if (this.isConstructed)
-            this._inflateBehaviors();
-        return impl;
     }
     _inflateBehaviors() {
         for (const [nodeID, impl, ctx] of this._behaviorsToInitialize) {
@@ -124,7 +169,6 @@ export class ZComponent {
     }
     _wrapBehaviors(nodeID, impl, ctx) {
         const behaviors = this._opts.data.behaviorsByNode?.[nodeID] ?? [];
-        const designTime = isDesignTime(this._contextManager);
         for (const behaviorID of behaviors) {
             const behavior = this._opts.data.behaviors?.[behaviorID];
             if (!behavior)
@@ -134,29 +178,10 @@ export class ZComponent {
                 ...(this._opts.constructorPropReplacement?.[behaviorID] ?? {}),
                 instance: impl
             };
-            const constructor = this._opts.importMapping[behavior.type]?.();
-            if (!constructor)
-                continue;
-            if (designTime && !shouldBehaviorRunAtDesignTime(constructor))
-                continue;
-            const res = constructor(constructorProps, ctx);
-            if (!res)
-                continue;
-            this.entityByID.set(behaviorID, res);
-            const props = {
-                ...(this._opts.data.entityProps?.[behaviorID] ?? {}),
-                ...(this._opts.propReplacement?.[behaviorID] ?? {}),
-            };
-            for (const [key, val] of Object.entries(props)) {
-                try {
-                    this._setEntityProp(res, key, val);
-                }
-                catch (err) {
-                    console.log('Warning - unable to set behavior prop', key, val);
-                }
-            }
+            const constructor = this._constructorForBehavior(behaviorID);
+            if (constructor)
+                new constructor(constructorProps, ctx);
         }
-        return impl;
     }
     notifyPropsChanged(entries) {
         for (const [entityID, propSet] of entries.entries()) {
@@ -176,25 +201,22 @@ export class ZComponent {
     _initializeComponentProps() {
         const componentProps = this._opts.data.propEntityOverrides ?? {};
         for (const [prop, entry] of Object.entries(componentProps)) {
-            let value = undefined;
-            Object.defineProperty(this, prop, {
-                get: () => value,
-                set: v => {
-                    value = v;
-                    for (const [entityID, overriddenProps] of Object.entries(entry)) {
-                        const entity = this.entityByID.get(entityID);
-                        if (!entity)
-                            continue;
-                        for (const overriddenProp of Object.keys(overriddenProps)) {
-                            try {
-                                this._setEntityProp(entity, overriddenProp, v);
-                            }
-                            catch (err) {
-                                console.log('Warning - unable to set prop', overriddenProp, v);
-                            }
+            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);
                         }
                     }
-                },
+                }
             });
         }
     }
@@ -207,10 +229,6 @@ export class ZComponent {
     _getNodeById(id) {
         return this._nodesById.get(id);
     }
-    set _parent(v) {
-        if (this._root)
-            this._root.parent = v;
-    }
     dispose() {
         for (const entity of this.entityByID.values()) {
             if (entity && typeof entity.dispose === 'function') {
@@ -222,5 +240,6 @@ export class ZComponent {
                 }
             }
         }
+        return super.dispose();
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",

package/lib/props.js

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