@zcomponent/core 0.0.1 → 0.0.4

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,23 @@
-export interface LaunchURLProps {
-    /** @zprop */
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * Navigates the user to the provided URL.
+ *
+ * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
+ *
+ * @zbehavior
+ * @zgroup Actions
+ */
+export declare class LaunchURL extends ActionBehavior {
+    /**
+     * The URL to open
+     * @zprop
+     */
     url: string;
-    /** @zprop
+    /**
+     * If true, the URL will be opened in a new tab (using target '_blank')
+     * @zprop
      * @zdefault true
      */
     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,17 @@
-import { defineActionBehavior } from "../actionbehavior";
-/** @zbehavior
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * Navigates the user to the provided URL.
+ *
+ * **Important Note**: Safari on iOS will not open URLs in new tabs for pointer events except `onPointerUp`.
+ *
+ * @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,16 @@
-export interface LogAnalyticsEventProps {
+import { ActionBehavior } from "../actionbehavior";
+/**
+ * Logs an event through the currently configured analytics provider(s).
+ *
+ * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
+ *
+ * @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,15 @@
-import { defineActionBehavior } from "../actionbehavior";
+import { ActionBehavior } from "../actionbehavior";
 import { logEvent } from "../contexts/analyticscontext";
-/** @zbehavior
+/**
+ * Logs an event through the currently configured analytics provider(s).
+ *
+ * Note: you must have added an analytics provider to the Hierarchy in one of your components for this behavior to have any effect.
+ *
+ * @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,17 @@ export interface PlaySoundProps {
     */
     source: string;
 }
-/** @zbehavior
+/**
+ * Plays a sound
+ *
+ * @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,38 @@
-import { defineActionBehavior } from "../actionbehavior";
+import { ActionBehavior, } from "../actionbehavior";
+import { registerBehaviorRunAtDesignTime } from "../behavior";
 import { registerLoadable } from "../contexts/loadcontext";
-/** @zbehavior
+/**
+ * Plays a sound
+ *
+ * @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', err => {
+                console.error('Unable to create PlaySound', err);
+                reject(err);
+            });
+        }));
+        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
-     */
-    preview: Observable<boolean>;
+    * @zdefault false
+    * @zgroup Design Time
+    * @zgrouppriority 30
+    */
+    preview: Observable<boolean, never>;
     /** @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;
+}