@zcomponent/core 0.0.1 → 0.0.2

package/lib/actionbehavior.d.ts

@@ -1,20 +1,17 @@
-import { ConcreteBehavior } from "./behavior";
-import { InstanceOfComponent } from "./component";
+import { Behavior, BehaviorConstructorProps } from "./behavior";
 import { ContextManager } from "./context";
-export declare type ActionConstructorType<T extends {}> = (props: T, ctx: ContextManager) => (() => void);
-export interface ActionBehaviorConstructorProps {
+export interface ActionBehaviorConstructorProps extends BehaviorConstructorProps {
     /** @zprop
      * @zvalues events
      */
     event: string;
-    instance: InstanceOfComponent<any>;
 }
-export interface ActionBehaviorProps {
-    dispose: () => void;
-}
-export interface PreviewableActionBehaviorProps extends ActionBehaviorProps {
-    /** @zprop */
-    preview: () => void;
+export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<any, ConstructorProps> {
+    /**
+     * @zprop
+     * @zdefault true
+     */
+    enabled: boolean;
+    constructor(props: ConstructorProps, contextManager: ContextManager);
+    abstract perform(): any;
 }
-export declare function defineActionBehavior<ActionConstructorProps extends {}>(a: ActionConstructorType<ActionConstructorProps>): ConcreteBehavior<any, ActionConstructorProps & ActionBehaviorConstructorProps, ActionBehaviorProps>;
-export declare function defineActionBehavior<ActionConstructorProps extends {}>(a: ActionConstructorType<ActionConstructorProps>, preview: true): ConcreteBehavior<any, ActionConstructorProps & ActionBehaviorConstructorProps, PreviewableActionBehaviorProps>;

package/lib/actionbehavior.js

@@ -1,32 +1,22 @@
-import { defineBehavior } from "./behavior";
+import { Behavior } from "./behavior";
 import { isEditTime } from "./contexts/environmentcontext";
 import { Event } from "./event";
-export function defineActionBehavior(a, preview) {
-    return defineBehavior((props, ctx) => {
-        let handler;
-        let evt;
-        const upstreamHandler = (!isEditTime(ctx) || preview) ? a(props, ctx) : undefined;
-        if (props.event && !isEditTime(ctx)) {
-            const evt = props.instance[props.event];
-            if (!evt || !(evt instanceof Event))
-                throw new Error(`Event '${props.event}' does not exist on instance`);
-            const handler = (evt) => {
-                if (evt && typeof evt === 'object' && typeof evt['stopPropagation'] === 'function') {
-                    evt['stopPropagation'].call(evt);
+export class ActionBehavior extends Behavior {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        /**
+         * @zprop
+         * @zdefault true
+         */
+        this.enabled = true;
+        const evt = props.instance[props.event];
+        if (evt instanceof Event && !isEditTime(contextManager)) {
+            this.register(evt, e => {
+                this.perform();
+                if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
+                    e['stopPropagation'].call(e);
                 }
-                upstreamHandler?.();
-            };
-            evt.bindfn(handler);
+            });
         }
-        return {
-            /** @zprop */
-            preview: preview ? () => {
-                upstreamHandler?.();
-            } : undefined,
-            dispose: () => {
-                if (handler)
-                    evt?.unbindfn(handler);
-            },
-        };
-    }, true);
+    }
 }

package/lib/behavior.d.ts

@@ -1,26 +1,23 @@
-import { Component, InstanceOfComponent } from './component';
+import { Component } from './component';
 import { ContextManager } from './context';
-export declare type BehaviorInstance<PropsType extends {} = {
-    [id: string]: any;
-}> = PropsType & {
-    dispose?: () => void;
-    [id: string]: any;
-};
-export declare type Behavior<ComponentType extends Component = () => {}, ConstructorPropsType extends {
-    instance: InstanceOfComponent<ComponentType>;
-} = {
-    [id: string]: any;
-    instance: InstanceOfComponent<ComponentType>;
-}, PropsType extends {} = {}> = (constructorProps: ConstructorPropsType, context: ContextManager) => BehaviorInstance<PropsType> | undefined;
-export declare type ConcreteBehavior<ComponentType extends Component = () => {}, ConstructorPropsType extends {
-    instance: InstanceOfComponent<ComponentType>;
-} = {
-    [id: string]: any;
-    instance: InstanceOfComponent<ComponentType>;
-}, PropsType extends {} = {}> = (constructorProps: ConstructorPropsType, context: ContextManager) => BehaviorInstance<PropsType>;
-export declare type ConstructorPropsOfBehavior<BehaviorType extends Behavior> = Parameters<BehaviorType>[0];
-export declare type PropsOfBehavior<BehaviorType extends Behavior> = ReturnType<BehaviorType>;
-export declare type InstanceOfBehavior<BehaviorType extends Behavior> = ReturnType<BehaviorType>;
-export declare function shouldBehaviorRunAtDesignTime(b: Behavior): boolean;
-/** Register a new custom behavior */
-export declare function defineBehavior<BehaviorType extends Behavior>(c: BehaviorType, runAtDesignTime?: boolean): BehaviorType;
+import { Event } from './event';
+import { Observable } from './observable';
+export declare type BehaviorConstructor<BehaviorType = Behavior> = BehaviorType extends Behavior<any, infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => BehaviorType : never;
+export declare type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType extends Behavior<infer R> ? R : never;
+export interface BehaviorConstructorProps<InstanceType extends Component = Component> {
+    instance: InstanceType;
+}
+export declare class Behavior<InstanceType extends Component = any, ConstructorPropsType extends BehaviorConstructorProps<InstanceType> = BehaviorConstructorProps<InstanceType>> {
+    constructorProps: ConstructorPropsType;
+    contextManager: ContextManager;
+    private static callSuperDispose;
+    onDispose: Event<[]>;
+    instance: InstanceType;
+    private _registered;
+    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager);
+    register<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
+    register<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    dispose(): never;
+}
+export declare function shouldBehaviorRunAtDesignTime(b: BehaviorConstructor): boolean;
+export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (props: BehaviorConstructorProps<any>, contextManager: ContextManager) => Behavior<any, BehaviorConstructorProps<any>>>;

package/lib/behavior.js

@@ -1,10 +1,38 @@
+import { Event } from './event';
+import { Observable } from './observable';
+export class Behavior {
+    constructor(constructorProps, contextManager) {
+        this.constructorProps = constructorProps;
+        this.contextManager = contextManager;
+        this.onDispose = new Event();
+        this._registered = [];
+        this.instance = this.constructorProps.instance;
+    }
+    register(e, fn) {
+        if (e instanceof Event)
+            e.bindfn(fn);
+        else if (e instanceof Observable)
+            e.withValue(fn);
+        this._registered.push([e, 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);
 }
-/** Register a new custom behavior */
-export function defineBehavior(c, runAtDesignTime = false) {
-    if (runAtDesignTime)
-        behaviorsToRunAtDesignTime.add(c);
-    return c;
+export function registerBehaviorRunAtDesignTime(b) {
+    return behaviorsToRunAtDesignTime.add(b);
 }

package/lib/behaviors/LaunchURL.d.ts

@@ -1,12 +1,18 @@
-export interface LaunchURLProps {
-    /** @zprop */
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * @zbehavior
+ * @zgroup Actions
+ */
+export declare class LaunchURL extends ActionBehavior {
+    /**
+     * The URL to open
+     * @zprop
+     */
     url: string;
-    /** @zprop
-     * @zdefault true
+    /**
+     * If true, the URL will be opened in a new tab (using target '_blank')
+     * @zprop
      */
     openInNew: boolean;
+    perform(): void;
 }
-/** @zbehavior
- * @zgroup Actions
- */
-export declare const LaunchURL: import("..").ConcreteBehavior<any, LaunchURLProps & import("../actionbehavior").ActionBehaviorConstructorProps, import("../actionbehavior").ActionBehaviorProps>;

package/lib/behaviors/LaunchURL.js

@@ -1,12 +1,13 @@
-import { defineActionBehavior } from "../actionbehavior";
-/** @zbehavior
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * @zbehavior
  * @zgroup Actions
  */
-export const LaunchURL = defineActionBehavior((props) => {
-    return () => {
-        if (props.openInNew ?? true)
-            window.open(props.url, '_blank', 'noopener noreferrer');
+export class LaunchURL extends ActionBehavior {
+    perform() {
+        if (this.openInNew ?? true)
+            window.open(this.url, '_blank', 'noopener noreferrer');
         else
-            window.location.href = props.url;
-    };
-});
+            window.location.href = this.url;
+    }
+}

package/lib/behaviors/LogAnalyticsEvent.d.ts

@@ -1,10 +1,12 @@
-export interface LogAnalyticsEventProps {
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * @zbehavior
+ * @zgroup Actions
+ */
+export declare class LogAnalyticsEvent extends ActionBehavior {
     /** @zprop */
     name: string;
     /** @zprop */
     params: any;
+    perform(): void;
 }
-/** @zbehavior
- * @zgroup Actions
- */
-export declare const LogAnalyticsEvent: import("..").ConcreteBehavior<any, LogAnalyticsEventProps & import("../actionbehavior").ActionBehaviorConstructorProps, import("../actionbehavior").ActionBehaviorProps>;

package/lib/behaviors/LogAnalyticsEvent.js

@@ -1,10 +1,11 @@
-import { defineActionBehavior } from "../actionbehavior";
+import { ActionBehavior } from "../actionbehavior";
 import { logEvent } from "../contexts/analyticscontext";
-/** @zbehavior
+/**
+ * @zbehavior
  * @zgroup Actions
  */
-export const LogAnalyticsEvent = defineActionBehavior((props, mgr) => {
-    return () => {
-        logEvent(mgr, props.name, props.params);
-    };
-});
+export class LogAnalyticsEvent extends ActionBehavior {
+    perform() {
+        logEvent(this.contextManager, this.name, this.params);
+    }
+}

package/lib/behaviors/PlaySound.d.ts

@@ -1,4 +1,6 @@
-export interface PlaySoundProps {
+import { ActionBehavior, ActionBehaviorConstructorProps } from "../actionbehavior";
+import { ContextManager } from "../context";
+export interface PlaySoundProps extends ActionBehaviorConstructorProps {
     /** The URL of the file to play
      * @zprop
      * @zvalues files *.wav
@@ -6,7 +8,15 @@ export interface PlaySoundProps {
     */
     source: string;
 }
-/** @zbehavior
+/**
+ * @zbehavior
  * @zgroup Actions
  */
-export declare const PlaySound: import("..").ConcreteBehavior<any, PlaySoundProps & import("../actionbehavior").ActionBehaviorConstructorProps, import("../actionbehavior").PreviewableActionBehaviorProps>;
+export declare class PlaySound extends ActionBehavior<PlaySoundProps> {
+    private _elm;
+    constructor(props: PlaySoundProps, contextManager: ContextManager);
+    perform(): void;
+    /** @zprop */
+    preview(): void;
+    dispose(): never;
+}

package/lib/behaviors/PlaySound.js

@@ -1,18 +1,33 @@
-import { defineActionBehavior } from "../actionbehavior";
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
 import { registerLoadable } from "../contexts/loadcontext";
-/** @zbehavior
+/**
+ * @zbehavior
  * @zgroup Actions
  */
-export const PlaySound = defineActionBehavior((props, mgr) => {
-    const elm = document.createElement('audio');
-    elm.preload = 'auto';
-    registerLoadable(mgr, new Promise((resolve, reject) => {
-        elm.addEventListener('canplaythrough', () => resolve());
-        elm.addEventListener('error', reject);
-    }));
-    elm.src = props.source;
-    return () => {
-        elm.currentTime = 0;
-        elm.play();
-    };
-}, true);
+export class PlaySound extends ActionBehavior {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        this._elm = document.createElement('audio');
+        this._elm.preload = 'auto';
+        registerLoadable(contextManager, new Promise((resolve, reject) => {
+            this._elm.addEventListener('canplaythrough', () => resolve());
+            this._elm.addEventListener('error', reject);
+        }));
+        this._elm.src = props.source;
+    }
+    perform() {
+        this._elm.currentTime = 0;
+        this._elm.play();
+    }
+    /** @zprop */
+    preview() {
+        this.perform();
+    }
+    dispose() {
+        this._elm.pause();
+        this._elm.src = '';
+        return super.dispose();
+    }
+}
+registerBehaviorRunAtDesignTime(PlaySound);

package/lib/component.d.ts

@@ -1,22 +1,30 @@
 import { ContextManager } from './context';
-export declare type ComponentInstance<PropsType extends {} = {
-    [id: string]: any;
-}, RootType = any> = PropsType & {
-    dispose?: () => void;
-    root?: RootType;
-    [id: string]: any;
-};
-export declare type ComponentChildren = [Component, {
-    [id: string]: any;
-}][];
-export declare type Component<ConstructorPropsType extends {
-    children?: ComponentChildren;
-} = {
-    [id: string]: any;
+import { Event } from './event';
+import { Observable } from './observable';
+export declare type ComponentConstructor<ComponentType = Component> = ComponentType extends Component<infer ConstructorPropsType> ? new (props: ConstructorPropsType, contextManager: ContextManager) => ComponentType : never;
+export declare type ConstructorPropsOfComponent<ComponentType> = ComponentType extends Component<infer R> ? R : never;
+export declare type ComponentChild<ComponentType extends Component> = [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>];
+export declare type ComponentChildren = ComponentChild<any>[];
+export interface ConstructorProps {
     children?: ComponentChildren;
-}, PropsType extends {} = {}, RootType = any> = (constructorProps: ConstructorPropsType, context: ContextManager) => ComponentInstance<PropsType, RootType> | undefined;
-export declare type ConstructorPropsOfComponent<ComponentType extends Component> = Parameters<ComponentType>[0];
-export declare type PropsOfComponent<ComponentType extends Component> = ReturnType<ComponentType>;
-export declare type InstanceOfComponent<ComponentType extends Component> = ReturnType<ComponentType>;
-/** Register a new custom component */
-export declare function defineComponent<ComponentType extends Component>(c: ComponentType): ComponentType;
+}
+export interface ComponentOptions {
+    dontConstructChildren?: boolean;
+}
+export declare class Component<ConstructorPropsType extends ConstructorProps = ConstructorProps, RootType = any> {
+    constructorProps: ConstructorPropsType;
+    contextManager: ContextManager;
+    private _options?;
+    root?: RootType;
+    onDispose: Event<[]>;
+    children: Component[];
+    disposed: boolean;
+    private _registered;
+    constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager, _options?: ComponentOptions | undefined);
+    forEachRoot(fn: (root: any) => void): void;
+    protected _constructChildren(children?: ComponentChildren): void;
+    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;
+    dispose(): never;
+    private static callSuperDispose;
+}

package/lib/component.js

@@ -1,4 +1,56 @@
-/** Register a new custom component */
-export function defineComponent(c) {
-    return c;
+import { Event } from './event';
+import { Observable } from './observable';
+export class Component {
+    constructor(constructorProps, contextManager, _options) {
+        this.constructorProps = constructorProps;
+        this.contextManager = contextManager;
+        this._options = _options;
+        this.onDispose = new Event();
+        this.children = [];
+        this.disposed = false;
+        this._registered = [];
+        if (this._options?.dontConstructChildren !== true)
+            this._constructChildren(this.constructorProps.children);
+    }
+    forEachRoot(fn) {
+        if (Array.isArray(this.root))
+            this.root.forEach(fn);
+        else if (this.root !== undefined)
+            fn(this.root);
+    }
+    _constructChildren(children) {
+        if (Array.isArray(children)) {
+            for (const child of children) {
+                this.children.push(new child[0](child[1], this.contextManager));
+            }
+        }
+    }
+    register(e, fn) {
+        if (e instanceof Event)
+            e.bindfn(fn);
+        else if (e instanceof Observable)
+            e.withValue(fn);
+        this._registered.push([e, fn]);
+    }
+    dispose() {
+        this.disposed = true;
+        for (const child of this.children) {
+            try {
+                child.dispose();
+            }
+            catch (err) { }
+        }
+        this.children = [];
+        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;
+    }
 }
+Component.callSuperDispose = Symbol('Calling super.dispose() is mandatory');

package/lib/components/DefaultLoader.d.ts

@@ -1,5 +1,5 @@
-import { Observable } from "../";
-export interface DefaultLoaderConstructorProps {
+import { Component, Observable, ConstructorProps, ContextManager } from "..";
+export interface DefaultLoaderConstructorProps extends ConstructorProps {
     /** @zprop
      * @zgroup Appearance
      * @zgrouppriority 10
@@ -16,23 +16,23 @@ export interface DefaultLoaderConstructorProps {
  * @zicon loader
  * @zgroup Advanced
  */
-export declare const DefaultLoader: (props: DefaultLoaderConstructorProps, mgr: import("../context").ContextManager) => {
-    dispose: () => void;
+export declare class DefaultLoader extends Component<DefaultLoaderConstructorProps> {
+    root: HTMLDivElement;
     /** @zprop
-     * @zdefault false
-     * @zgroup Design Time
-     * @zgrouppriority 30
-     */
+    * @zdefault false
+    * @zgroup Design Time
+    * @zgrouppriority 30
+    */
     preview: Observable<boolean>;
     /** @zprop
      * @zgroup Text
      * @zgrouppriority 20
-    */
+     */
     title: Observable<string>;
     /** @zprop
      * @zgroup Text
      * @zgrouppriority 20
-    */
+     */
     subtitle: Observable<string>;
     /** @zprop
      * @zdefault black
@@ -47,9 +47,16 @@ export declare const DefaultLoader: (props: DefaultLoaderConstructorProps, mgr:
      */
     textColor: Observable<string>;
     /** @zprop
-     * @zdefault 1000
-     * @zgroup Appearance
-     * @zgrouppriority 10
-     */
+    * @zdefault 1000
+    * @zgroup Appearance
+    * @zgrouppriority 10
+    */
     zIndex: Observable<number>;
-};
+    private _percentageElement;
+    private _attached;
+    constructor(props: DefaultLoaderConstructorProps, contextManager: ContextManager);
+    private _updatePercentage;
+    private _updateVisibility;
+    private _update;
+    dispose(): never;
+}

package/lib/components/DefaultLoader.js

@@ -1,4 +1,4 @@
-import { defineComponent, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPercent } from "../";
+import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPercent } from "..";
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
  *
@@ -6,101 +6,70 @@ import { defineComponent, useCanvas, Observable, isDesignTime, useIsLoaded, useL
  * @zicon loader
  * @zgroup Advanced
  */
-export const DefaultLoader = defineComponent((props, mgr) => {
-    const preview = new Observable(false);
-    let disposed = false;
-    let attached = false;
-    const canvas = useCanvas(mgr);
-    const div = document.createElement('div');
-    div.innerHTML = loaderHTML;
-    div.className = "zcomponent-defaultloader";
-    if (props.backgroundImage) {
-        div.style.backgroundImage = `url(${props.backgroundImage})`;
-    }
-    const titleElement = div.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
-    const subtitleElement = div.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
-    const percentageElement = div.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
-    const title = new Observable('', t => titleElement.innerText = t);
-    const subtitle = new Observable('', t => subtitleElement.innerText = t);
-    const textColor = new Observable('white', t => div.style.color = t ?? 'white');
-    const backgroundColor = new Observable('black', t => div.style.backgroundColor = t ?? 'black');
-    const zIndex = new Observable(1000, t => div.style.zIndex = t.toString());
-    const update = () => {
-        if (disposed)
-            return;
-        const rect = canvas.getBoundingClientRect();
-        div.style.left = rect.left.toString() + "px";
-        div.style.top = rect.top.toString() + "px";
-        div.style.width = rect.width.toString() + "px";
-        div.style.height = rect.height.toString() + "px";
-        requestAnimationFrame(update);
-    };
-    const updatePercentage = () => {
-        const p = (isDesignTime(mgr) && preview.value) ? 30 : useLoadPercent(mgr).value;
-        percentageElement.style.width = p.toString() + "%";
-    };
-    const updateVisibility = () => {
-        let shouldBeAttached = false;
-        if (!isDesignTime(mgr) && !useIsLoaded(mgr).value)
-            shouldBeAttached = true;
-        if (isDesignTime(mgr) && preview.value)
-            shouldBeAttached = true;
-        if (!attached && shouldBeAttached) {
-            document.body.appendChild(div);
-            attached = true;
-        }
-        else if (attached && !shouldBeAttached) {
-            div.remove();
-            attached = false;
-        }
-    };
-    preview.withValue(updateVisibility);
-    preview.withValue(updatePercentage);
-    useIsLoaded(mgr).withValue(updateVisibility);
-    useLoadPercent(mgr).withValue(updatePercentage);
-    update();
-    return {
-        dispose: () => {
-            disposed = true;
-            useIsLoaded(mgr).removeWithValue(updateVisibility);
-            useLoadPercent(mgr).removeWithValue(updatePercentage);
-        },
-        /** @zprop
-         * @zdefault false
-         * @zgroup Design Time
-         * @zgrouppriority 30
-         */
-        preview,
-        /** @zprop
-         * @zgroup Text
-         * @zgrouppriority 20
-        */
-        title,
+export class DefaultLoader extends Component {
+    constructor(props, contextManager) {
+        super(props, contextManager);
+        this.root = document.createElement('div');
         /** @zprop
-         * @zgroup Text
-         * @zgrouppriority 20
+        * @zdefault false
+        * @zgroup Design Time
+        * @zgrouppriority 30
         */
-        subtitle,
-        /** @zprop
-         * @zdefault black
-         * @zgroup Appearance
-         * @zgrouppriority 10
-         */
-        backgroundColor,
-        /** @zprop
-         * @zdefault white
-         * @zgroup Appearance
-         * @zgrouppriority 10
-         */
-        textColor,
-        /** @zprop
-         * @zdefault 1000
-         * @zgroup Appearance
-         * @zgrouppriority 10
-         */
-        zIndex,
-    };
-});
+        this.preview = new Observable(false);
+        this._attached = false;
+        this._updatePercentage = () => {
+            const p = (isDesignTime(this.contextManager) && this.preview.value) ? 30 : useLoadPercent(this.contextManager).value;
+            this._percentageElement.style.width = p.toString() + "%";
+        };
+        this._updateVisibility = () => {
+            let shouldBeAttached = false;
+            if (!isDesignTime(this.contextManager) && !useIsLoaded(this.contextManager).value)
+                shouldBeAttached = true;
+            if (isDesignTime(this.contextManager) && this.preview.value)
+                shouldBeAttached = true;
+            if (!this._attached && shouldBeAttached) {
+                document.body.appendChild(this.root);
+                this._attached = true;
+            }
+            else if (this._attached && !shouldBeAttached) {
+                this.root.remove();
+                this._attached = false;
+            }
+        };
+        this._update = () => {
+            if (this.disposed)
+                return;
+            const rect = useCanvas(this.contextManager).getBoundingClientRect();
+            this.root.style.left = rect.left.toString() + "px";
+            this.root.style.top = rect.top.toString() + "px";
+            this.root.style.width = rect.width.toString() + "px";
+            this.root.style.height = rect.height.toString() + "px";
+            requestAnimationFrame(this._update);
+        };
+        this.root.innerHTML = loaderHTML;
+        this.root.className = "zcomponent-defaultloader";
+        if (props.backgroundImage) {
+            this.root.style.backgroundImage = `url(${props.backgroundImage})`;
+        }
+        const titleElement = this.root.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
+        const subtitleElement = this.root.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");
+        this._percentageElement = this.root.querySelector("#zcomponent-defaultloader-progress-percentage") || document.createElement("div");
+        this.title = new Observable('', t => titleElement.innerText = t);
+        this.subtitle = new Observable('', t => subtitleElement.innerText = t);
+        this.textColor = new Observable('white', t => this.root.style.color = t ?? 'white');
+        this.backgroundColor = new Observable('black', t => this.root.style.backgroundColor = t ?? 'black');
+        this.zIndex = new Observable(1000, t => this.root.style.zIndex = t.toString());
+        this.register(this.preview, this._updatePercentage);
+        this.register(this.preview, this._updateVisibility);
+        this.register(useIsLoaded(contextManager), this._updateVisibility);
+        this.register(useLoadPercent(contextManager), this._updatePercentage);
+        this._update();
+    }
+    dispose() {
+        this.root.remove();
+        return super.dispose();
+    }
+}
 const loaderHTML = `
 <div id="zcomponent-defaultloader-container">
     <h1 id="zcomponent-defaultloader-title"></h1>

package/lib/observable.js

@@ -7,11 +7,11 @@ export class Observable {
         this._handlersByToken = new Map();
         this._tokenByHandler = new Map();
         let initial = this._default;
-        if (Array.isArray(this._default)) {
+        if (Array.isArray(this._default) && this._deep) {
             initial = this._default.slice();
             this._default = this._default.slice();
         }
-        else if (typeof this._default === 'object') {
+        else if (typeof this._default === 'object' && this._deep && this._default !== null && Object.getPrototypeOf(this._default) !== Object.prototype) {
             initial = { ...this._default };
             this._default = { ...this._default };
         }
@@ -25,6 +25,7 @@ export class Observable {
     _wrap(v) {
         if (!Array.isArray(v) || this._deep === false) {
             if (typeof v !== 'object' ||
+                v === null ||
                 Object.getPrototypeOf(v) !== Object.prototype ||
                 this._deep === false ||
                 typeof v === 'function') {
@@ -43,6 +44,8 @@ export class Observable {
                     if (!Array.isArray(val)) {
                         if (typeof val !== 'object')
                             return val;
+                        if (val === null)
+                            return val;
                         if (Object.getPrototypeOf(val) !== Object.prototype)
                             return val;
                         if (typeof val === 'function')

package/lib/selectors.js

@@ -135,22 +135,22 @@ export const typeDefinitionForComponent = (nodes, props, scriptNames, url) => {
             }
         }
     }
-    return `import { ZComponent, ContextManager, InstanceOfComponent } from "@zcomponent/core";
+    return `import { ZComponent, ContextManager, Observable } from "@zcomponent/core";
 
 ${importStrings.join('\n')}
 
 declare class Comp extends ZComponent {
 
-    constructor(constructorProps: {}, ctx: ContextManager);
+	constructor(constructorProps: {}, ctx: ContextManager);
 
 	nodes: {
 ${Object.entries(scriptNames).map(entry => {
         const values = Object.keys(entry[1]);
         if (values.length > 1) {
-            return `\t\t${entry[0]}: {${values.map(e => `${JSON.stringify(e)}: InstanceOfComponent<typeof ${importMapping.get(nodes[e].type)}>`).join(', ')}},`;
+            return `\t\t${entry[0]}: {${values.map(e => `${JSON.stringify(e)}: ${importMapping.get(nodes[e].type)}`).join(', ')}},`;
         }
         else {
-            return `\t\t${entry[0]}: InstanceOfComponent<typeof ${importMapping.get(nodes[values[0]].type)}>,`;
+            return `\t\t${entry[0]}: ${importMapping.get(nodes[values[0]].type)},`;
         }
     }).join("\n")}
 	};
@@ -161,13 +161,13 @@ ${Object.values(props).map(typeOutputForProp).join('\n')}
 /**
 * @zcomponent
 */
-export default function ${getScriptName(path.basename(url), {})}(constructorProps: {}, mgr: ContextManager) : Comp;
+export default Comp;
 `;
 };
 function typeOutputForProp(prop) {
-    return `    /**
-    * @zprop
-    * ${prop.default && `@zdefault ${JSON.stringify(prop.default)}`}
-    */
-    public ${prop.name}: ${outputForType(prop.type)};`;
+    return `	/**
+	* @zprop
+	* ${prop.default && `@zdefault ${JSON.stringify(prop.default)}`}
+	*/
+	public ${prop.name}: Observable<${outputForType(prop.type, true)}>;`;
 }

package/lib/types.d.ts

@@ -1,6 +1,7 @@
 export interface BaseType {
     comments?: string[];
     typeHint?: TypeHint;
+    isObservable?: boolean;
 }
 export interface StringPrimitiveType extends BaseType {
     name: 'string';
@@ -102,4 +103,4 @@ export interface TemplateInfo {
 }
 export declare function symbolPathFromFilename(f: string): string;
 export declare function isValidValueForType(def: any, t: Type, allowUndefined?: boolean): boolean;
-export declare function outputForType(t: Type): string;
+export declare function outputForType(t: Type, alwaysBasic?: boolean): string;

package/lib/types.js

@@ -269,7 +269,12 @@ export function isValidValueForType(def, t, allowUndefined) {
     }
     return false;
 }
-export function outputForType(t) {
+export function outputForType(t, alwaysBasic = false) {
+    if (t.isObservable && !alwaysBasic)
+        return `Observable<${getBasicType(t)}>`;
+    return getBasicType(t);
+}
+function getBasicType(t) {
     switch (t.name) {
         case 'array':
             return outputForType(t.child) + '[]';

package/lib/zcomponent.d.ts

@@ -1,4 +1,4 @@
-import { ComponentInstance, InstanceOfComponent } from './component';
+import { Component, ComponentConstructor, ConstructorProps } from './component';
 import { ContextManager } from './context';
 import { ZComponentData } from './interfaces';
 export interface ZComponentOptions {
@@ -22,34 +22,32 @@ export interface ZComponentContext {
     zcomponent: ZComponent;
 }
 export declare const ZComponentContext: import("./context").ContextTypeWithDefault<ZComponentContext, [zcomponent: ZComponent<any>]>;
-export declare function useZComponentInstance<T extends ZComponent, K extends ((props: any, ctx: any) => T)>(ctx: ContextManager, comp?: K): InstanceOfComponent<K>;
+export declare function useZComponentInstance<T extends ZComponent>(ctx: ContextManager, comp?: ComponentConstructor<T>): T;
 export declare function useConstructed(ctx: ContextManager): Promise<void>;
-export declare class ZComponent<RootType = any> implements ComponentInstance {
+export declare class ZComponent<RootType = any> extends Component<ConstructorProps, RootType> {
     private _opts;
     id: string;
-    root: RootType;
     idByRoot: Map<any, string>;
     nodes: {
-        [id: string]: InstanceOfComponent<any> | InstanceOfComponent<any>[];
+        [id: string]: Component | Component[];
     };
     entityByID: Map<string, any>;
     private _constructedResolve;
     constructed: Promise<void>;
     isConstructed: boolean;
     private _nodesById;
-    private _root;
-    private _contextManager;
+    private _rootComponent;
     private _behaviorsToInitialize;
     constructor(constructorProps: {
         [id: string]: any;
-    }, ctx: ContextManager, _opts: ZComponentOptions);
-    private _inflate;
+    }, contextManager: ContextManager, _opts: ZComponentOptions);
+    private _constructorForNode;
+    private _constructorForBehavior;
     private _inflateBehaviors;
     private _wrapBehaviors;
     notifyPropsChanged(entries: Map<string, Set<string>>): void;
     private _initializeComponentProps;
     private _setEntityProp;
-    _getNodeById(id: string): ComponentInstance | undefined;
-    set _parent(v: any);
-    dispose(): void;
+    _getNodeById(id: string): Component | undefined;
+    dispose(): never;
 }

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.2",
   "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 };
-// }