@zcomponent/core 0.0.1 → 0.0.4

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/contexts/canvascontext.d.ts

@@ -10,6 +10,6 @@ export interface CanvasContext {
 }
 export declare const CanvasContext: import("../context").ContextTypeWithDefault<CanvasContext, [canvas?: HTMLCanvasElement | undefined]>;
 export declare function useCanvas(mgr: ContextManager): HTMLCanvasElement;
-export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number]>;
+export declare function useCanvasSize(mgr: ContextManager): Observable<[number, number], never>;
 export declare function useOnBeforeRender(mgr: ContextManager): Event<[number]>;
 export declare function useOnAfterRender(mgr: ContextManager): Event<[number]>;

package/lib/contexts/cookieconsentcontext.d.ts

@@ -27,12 +27,12 @@ export interface CookieConsentContext {
     showSettings: Observable<(() => void) | undefined>;
 }
 export declare const CookieConsentContext: import("../context").ContextTypeWithDefault<CookieConsentContext, []>;
-export declare function useCookieConsentFunctional(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentPerformance(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentMarketing(mgr: ContextManager): Observable<ConsentStatus>;
-export declare function useCookieConsentStatus(mgr: ContextManager): Observable<Status>;
+export declare function useCookieConsentFunctional(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentPerformance(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentMarketing(mgr: ContextManager): Observable<ConsentStatus, never>;
+export declare function useCookieConsentStatus(mgr: ContextManager): Observable<Status, never>;
 export declare function registerPerformanceVendor(mgr: ContextManager, vendor: Vendor): void;
 export declare function registerMarketingVendor(mgr: ContextManager, vendor: Vendor): void;
 export declare function usePerformanceVendors(mgr: ContextManager): Vendor[];
 export declare function useMarketingVendors(mgr: ContextManager): Vendor[];
-export declare function useShowCookieSettings(mgr: ContextManager): Observable<(() => void) | undefined>;
+export declare function useShowCookieSettings(mgr: ContextManager): Observable<(() => void) | undefined, never>;

package/lib/contexts/loadcontext.d.ts

@@ -11,13 +11,13 @@ export interface LoadContext {
     startWhenLoaded: () => void;
 }
 export declare const LoadContext: import("../context").ContextTypeWithDefault<LoadContext, []>;
-export declare function useIsLoaded(mgr: ContextManager): Observable<boolean>;
+export declare function useIsLoaded(mgr: ContextManager): Observable<boolean, never>;
 export declare function isLoaded(mgr: ContextManager): boolean;
-export declare function useIsStarted(mgr: ContextManager): Observable<boolean>;
+export declare function useIsStarted(mgr: ContextManager): Observable<boolean, never>;
 export declare function isStarted(mgr: ContextManager): boolean;
-export declare function useIsConstructed(mgr: ContextManager): Observable<boolean>;
+export declare function useIsConstructed(mgr: ContextManager): Observable<boolean, never>;
 export declare function isConstructed(mgr: ContextManager): boolean;
-export declare function useLoadPercent(mgr: ContextManager): Observable<number>;
+export declare function useLoadPercent(mgr: ContextManager): Observable<number, never>;
 export declare function registerLoadable(mgr: ContextManager, p: Promise<any>): void;
 export declare function start(mgr: ContextManager): void;
 export declare function startWhenLoaded(mgr: ContextManager): void;

package/lib/event.d.ts

@@ -1,6 +1,6 @@
 import { Observable } from "./observable";
 export declare class Event<Args extends Array<any> = []> {
-    hasBindings: Observable<boolean>;
+    hasBindings: Observable<boolean, never>;
     private _funcs;
     private _emitting;
     private _toUnbind;

package/lib/observable.d.ts

@@ -1,4 +1,5 @@
-export declare class Observable<T> {
+declare type Resolved<T, M> = [T] extends [never] ? M : T;
+export declare class Observable<T = never, M extends any[] | [] | never = never> {
     private _default;
     private _deep;
     private _proxies;
@@ -6,11 +7,13 @@ export declare class Observable<T> {
     private _nextToken;
     private _handlersByToken;
     private _tokenByHandler;
-    constructor(_default: T, withHandler?: ((v: T) => void), _deep?: boolean);
-    get value(): T;
+    constructor(def: M, withHandler?: ((v: M) => void), deep?: boolean);
+    constructor(def: T, withHandler?: ((v: T) => void), deep?: boolean);
+    get value(): Resolved<T, M>;
     private _wrap;
-    set value(v: T | undefined);
-    withValue(fn: (v: T) => void): number;
-    removeWithValue(fnOrToken: number | ((v: T) => void)): void;
+    set value(v: Resolved<T, M> | undefined);
+    withValue(fn: (v: Resolved<T, M>) => void): number;
+    removeWithValue(fnOrToken: number | ((v: Resolved<T, M>) => void)): void;
     private _emitValue;
 }
+export {};

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;
 }