@zcomponent/core 0.0.6 → 0.0.8

package/lib/actionbehavior.d.ts

@@ -1,17 +1,26 @@
 import { Behavior, BehaviorConstructorProps } from "./behavior";
+import { Component } from "./component";
 import { ContextManager } from "./context";
+import { Observable } from "./observable";
 export interface ActionBehaviorConstructorProps extends BehaviorConstructorProps {
     /** @zprop
      * @zvalues events
      */
     event: string;
+    /**
+     * @zprop
+     * @zdefault false
+     */
+    runAtEditTime: boolean;
 }
-export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<any, ConstructorProps> {
+export declare abstract class ActionBehavior<ConstructorProps extends ActionBehaviorConstructorProps = ActionBehaviorConstructorProps> extends Behavior<Component, ConstructorProps> {
     /**
      * @zprop
      * @zdefault true
      */
-    enabled: boolean;
+    enabled: Observable<boolean, never>;
     constructor(props: ConstructorProps, contextManager: ContextManager);
+    private _updateRegistration;
+    private _perform;
     abstract perform(): any;
 }

package/lib/actionbehavior.js

@@ -1,6 +1,7 @@
 import { Behavior } from "./behavior";
-import { isEditTime } from "./contexts/environmentcontext";
+import { EnvironmentContext, isEditTime } from "./contexts/environmentcontext";
 import { Event } from "./event";
+import { Observable } from "./observable";
 export class ActionBehavior extends Behavior {
     constructor(props, contextManager) {
         super(props, contextManager);
@@ -8,15 +9,30 @@ export class ActionBehavior extends Behavior {
          * @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);
+        this.enabled = new Observable(true);
+        this._updateRegistration = () => {
+            const evt = this.constructorProps.instance[this.constructorProps.event];
+            if (evt instanceof Event) {
+                if (this.enabled.value && (!isEditTime(this.contextManager) || this.constructorProps.runAtEditTime === true)) {
+                    this.register(evt, this._perform);
                 }
-            });
-        }
+                else {
+                    this.unregister(evt, this._perform);
+                }
+            }
+        };
+        this._perform = (e) => {
+            if (!this.enabled.value)
+                return;
+            if (!this.instance.enabledResolved.value)
+                return;
+            this.perform();
+            if (e && typeof e === 'object' && typeof e['stopPropagation'] === 'function') {
+                e['stopPropagation'].call(e);
+            }
+        };
+        const env = contextManager.get(EnvironmentContext);
+        this.register(env.editTime, this._updateRegistration);
+        this.register(this.enabled, this._updateRegistration);
     }
 }

package/lib/behavior.d.ts

@@ -7,7 +7,7 @@ export declare type ConstructorPropsOfBehavior<BehaviorType> = BehaviorType exte
 export interface BehaviorConstructorProps<InstanceType extends Component = Component> {
     instance: InstanceType;
 }
-export declare class Behavior<InstanceType extends Component = any, ConstructorPropsType extends BehaviorConstructorProps<InstanceType> = BehaviorConstructorProps<InstanceType>> {
+export declare class Behavior<InstanceType extends Component = Component, ConstructorPropsType extends BehaviorConstructorProps<InstanceType> = BehaviorConstructorProps<InstanceType>> {
     constructorProps: ConstructorPropsType;
     contextManager: ContextManager;
     private static callSuperDispose;
@@ -17,7 +17,9 @@ export declare class Behavior<InstanceType extends Component = any, ConstructorP
     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;
+    unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
+    unregister<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>>>;
+export declare function registerBehaviorRunAtDesignTime(b: BehaviorConstructor): Set<new (props: BehaviorConstructorProps<Component<import("./component").ConstructorProps, any>>, contextManager: ContextManager) => Behavior<Component<import("./component").ConstructorProps, any>, BehaviorConstructorProps<Component<import("./component").ConstructorProps, any>>>>;

package/lib/behavior.js

@@ -15,6 +15,13 @@ export class Behavior {
             e.withValue(fn);
         this._registered.push([e, fn]);
     }
+    unregister(e, fn) {
+        if (e instanceof Event)
+            e.unbindfn(fn);
+        else if (e instanceof Observable)
+            e.removeWithValue(fn);
+        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
+    }
     dispose() {
         for (const entry of this._registered) {
             if (entry[0] instanceof Event)

package/lib/behaviors/PlaySound.js

@@ -11,7 +11,6 @@ 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 => {
@@ -20,6 +19,7 @@ export class PlaySound extends ActionBehavior {
             });
         }));
         this._elm.src = props.source;
+        this._elm.load();
     }
     perform() {
         this._elm.currentTime = 0;

package/lib/component.d.ts

@@ -3,9 +3,10 @@ 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 declare type ComponentChild<ComponentType extends Component> = [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>] | [ComponentConstructor<ComponentType>, ConstructorPropsOfComponent<ComponentType>, Observable<ComponentType | undefined>];
+export declare type ComponentChildren = ComponentChild<Component>[];
 export interface ConstructorProps {
+    [id: string]: any;
     children?: ComponentChildren;
 }
 export interface ComponentOptions {
@@ -18,13 +19,32 @@ export declare class Component<ConstructorPropsType extends ConstructorProps = C
     root?: RootType;
     onDispose: Event<[]>;
     children: Component[];
+    parent?: Component;
     disposed: boolean;
     private _registered;
     constructor(constructorProps: ConstructorPropsType, contextManager: ContextManager, _options?: ComponentOptions | undefined);
     forEachRoot(fn: (root: any) => void): void;
+    /**
+     * @zprop
+     * @zdefault true
+     * @zgroup Behavior
+     * @zgrouppriority 10
+     */
+    enabled: Observable<boolean, never>;
+    enabledResolved: Observable<boolean, never>;
+    /**
+     * @zprop
+     * @zgroup Other
+     * @zgrouppriority 0
+     */
+    tags: Observable<string[], never>;
     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;
+    protected unregister<Args extends Array<any>>(evt: Event<Args>, fn: (...args: Args) => void): any;
+    protected unregister<Type>(observable: Observable<Type>, fn: (v: Type) => void): any;
+    private _updateEnabledResolved;
+    private _updateTags;
     dispose(): never;
     private static callSuperDispose;
 }

package/lib/component.js

@@ -1,3 +1,4 @@
+import { TagContext } from './contexts/tagcontext';
 import { Event } from './event';
 import { Observable } from './observable';
 export class Component {
@@ -9,8 +10,38 @@ export class Component {
         this.children = [];
         this.disposed = false;
         this._registered = [];
+        /**
+         * @zprop
+         * @zdefault true
+         * @zgroup Behavior
+         * @zgrouppriority 10
+         */
+        this.enabled = new Observable(true);
+        this.enabledResolved = new Observable(true);
+        /**
+         * @zprop
+         * @zgroup Other
+         * @zgrouppriority 0
+         */
+        this.tags = new Observable([]);
+        this._updateEnabledResolved = () => {
+            let newValue = this.enabled.value;
+            if (this.parent?.enabledResolved?.value === false)
+                newValue = false;
+            if (newValue !== this.enabledResolved.value) {
+                this.enabledResolved.value = newValue;
+                for (const child of this.children)
+                    child._updateEnabledResolved();
+            }
+        };
+        this._updateTags = () => {
+            const context = this.contextManager.get(TagContext);
+            context.registerComponent(this, this.tags.value);
+        };
         if (this._options?.dontConstructChildren !== true)
             this._constructChildren(this.constructorProps.children);
+        this.register(this.enabled, this._updateEnabledResolved);
+        this.register(this.tags, this._updateTags);
     }
     forEachRoot(fn) {
         if (Array.isArray(this.root))
@@ -21,7 +52,11 @@ export class Component {
     _constructChildren(children) {
         if (Array.isArray(children)) {
             for (const child of children) {
-                this.children.push(new child[0](child[1], this.contextManager));
+                const instance = new child[0](child[1], this.contextManager);
+                this.children.push(instance);
+                instance.parent = this;
+                if (child[2] instanceof Observable)
+                    child[2].value = instance;
             }
         }
     }
@@ -32,6 +67,13 @@ export class Component {
             e.withValue(fn);
         this._registered.push([e, fn]);
     }
+    unregister(e, fn) {
+        if (e instanceof Event)
+            e.unbindfn(fn);
+        else if (e instanceof Observable)
+            e.removeWithValue(fn);
+        this._registered = this._registered.filter(entry => (entry[0] !== e || entry[1] !== fn));
+    }
     dispose() {
         this.disposed = true;
         for (const child of this.children) {
@@ -50,6 +92,7 @@ export class Component {
         this._registered = [];
         this.onDispose.emit();
         this.onDispose.clear();
+        this.contextManager.get(TagContext).unregisterComponent(this);
         return undefined;
     }
 }

package/lib/components/DefaultLoader.d.ts

@@ -1,5 +1,5 @@
-import { Component, Observable, ConstructorProps, ContextManager } from "..";
-export interface DefaultLoaderConstructorProps extends ConstructorProps {
+import { Component, Observable, ContextManager } from "..";
+export interface DefaultLoaderConstructorProps {
     /** @zprop
      * @zgroup Appearance
      * @zgrouppriority 10
@@ -7,7 +7,7 @@ export interface DefaultLoaderConstructorProps extends ConstructorProps {
      * @zvalues files *.png
      * @zvalues files *.jpg
      */
-    backgroundImage?: string;
+    backgroundImage: string;
 }
 /**
  * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
@@ -16,7 +16,7 @@ export interface DefaultLoaderConstructorProps extends ConstructorProps {
  * @zicon loader
  * @zgroup Advanced
  */
-export declare class DefaultLoader extends Component<DefaultLoaderConstructorProps> {
+export declare class DefaultLoader extends Component {
     root: HTMLDivElement;
     /** @zprop
     * @zdefault false
@@ -54,7 +54,7 @@ export declare class DefaultLoader extends Component<DefaultLoaderConstructorPro
     zIndex: Observable<number>;
     private _percentageElement;
     private _attached;
-    constructor(props: DefaultLoaderConstructorProps, contextManager: ContextManager);
+    constructor(constructorProps: DefaultLoaderConstructorProps, contextManager: ContextManager);
     private _updatePercentage;
     private _updateVisibility;
     private _update;

package/lib/components/DefaultLoader.js

@@ -7,8 +7,8 @@ import { Component, useCanvas, Observable, isDesignTime, useIsLoaded, useLoadPer
  * @zgroup Advanced
  */
 export class DefaultLoader extends Component {
-    constructor(props, contextManager) {
-        super(props, contextManager);
+    constructor(constructorProps, contextManager) {
+        super(constructorProps, contextManager);
         this.root = document.createElement('div');
         /** @zprop
         * @zdefault false
@@ -48,8 +48,8 @@ export class DefaultLoader extends Component {
         };
         this.root.innerHTML = loaderHTML;
         this.root.className = "zcomponent-defaultloader";
-        if (props.backgroundImage) {
-            this.root.style.backgroundImage = `url(${props.backgroundImage})`;
+        if (constructorProps.backgroundImage) {
+            this.root.style.backgroundImage = `url(${constructorProps.backgroundImage})`;
         }
         const titleElement = this.root.querySelector("#zcomponent-defaultloader-title") || document.createElement("h1");
         const subtitleElement = this.root.querySelector("#zcomponent-defaultloader-subtitle") || document.createElement("h1");

package/lib/components/LongLoad.d.ts

@@ -1,5 +1,5 @@
-import { Component, ConstructorProps, ContextManager } from "..";
-export interface LongLoadConstructorProps extends ConstructorProps {
+import { Component, ContextManager } from "..";
+export interface LongLoadConstructorProps {
     /**
      * The number of loading processes to simulate
      * @zprop
@@ -40,6 +40,6 @@ export interface LongLoadConstructorProps extends ConstructorProps {
  * @zicon settings
  * @zgroup Advanced
  */
-export declare class LongLoad extends Component<LongLoadConstructorProps> {
+export declare class LongLoad extends Component {
     constructor(props: LongLoadConstructorProps, contextManager: ContextManager);
 }

package/lib/contexts/tagcontext.d.ts

@@ -0,0 +1,14 @@
+import { Component } from "../component";
+import { ContextManager } from "../context";
+export interface TagContext {
+    registerComponent(component: Component, tags: string[]): any;
+    unregisterComponent(component: Component): any;
+    getComponentsByTag(tag: string): Set<Component>;
+    getComponentsByTags(tags: string[]): Set<Component>;
+    tagsByComponent: Map<Component, Set<string>>;
+    componentsByLocalTag: Map<string, Set<Component>>;
+    componentsByGlobalTag: Map<string, Set<Component>>;
+}
+export declare const TagContext: import("../context").ContextTypeWithDefault<TagContext, []>;
+export declare function getComponentsByTag(mgr: ContextManager, tag: string): Set<Component<import("../component").ConstructorProps, any>>;
+export declare function getComponentsByTags(mgr: ContextManager, tags: string[]): Set<Component<import("../component").ConstructorProps, any>>;

package/lib/contexts/tagcontext.js

@@ -0,0 +1,65 @@
+import { defineContextType } from "../context";
+export const TagContext = defineContextType(ctx => {
+    // We have to cast here to avoid a circular dependency
+    const upstream = ctx.getExisting(TagContext);
+    const tagsByComponent = new Map();
+    const componentsByLocalTag = new Map();
+    const componentsByGlobalTag = upstream?.componentsByGlobalTag ?? new Map();
+    console.log();
+    const registerComponent = (component, tags) => {
+        unregisterComponent(component);
+        for (const tag of tags) {
+            const map = tag.startsWith('global:') ? componentsByGlobalTag : componentsByLocalTag;
+            const set = map.get(tag) ?? new Set();
+            set.add(component);
+            map.set(tag, set);
+        }
+        tagsByComponent.set(component, new Set(tags));
+    };
+    const unregisterComponent = (component) => {
+        let tags = tagsByComponent.get(component);
+        if (!tags)
+            return;
+        for (const tag of tags.values()) {
+            const map = tag.startsWith('global:') ? componentsByGlobalTag : componentsByLocalTag;
+            const entry = map.get(tag);
+            if (!entry)
+                continue;
+            entry.delete(component);
+        }
+        tagsByComponent.delete(component);
+    };
+    const getComponentsByTag = (tag) => {
+        return ((tag.startsWith('global:') ? componentsByGlobalTag : componentsByLocalTag).get(tag)) ?? new Set();
+    };
+    const getComponentsByTags = (tags) => {
+        if (tags.length === 0)
+            return new Set();
+        if (tags.length === 1)
+            return getComponentsByTag(tags[0]);
+        const ret = new Set();
+        for (const tag of tags) {
+            const map = tag.startsWith('global:') ? componentsByGlobalTag : componentsByLocalTag;
+            const entries = map.get(tag);
+            if (!entries)
+                continue;
+            entries.forEach(entry => ret.add(entry));
+        }
+        return ret;
+    };
+    return {
+        tagsByComponent,
+        componentsByLocalTag,
+        componentsByGlobalTag,
+        getComponentsByTag,
+        getComponentsByTags,
+        registerComponent,
+        unregisterComponent,
+    };
+});
+export function getComponentsByTag(mgr, tag) {
+    return mgr.get(TagContext).getComponentsByTag(tag);
+}
+export function getComponentsByTags(mgr, tags) {
+    return mgr.get(TagContext).getComponentsByTags(tags);
+}

package/lib/index.d.ts

@@ -9,5 +9,6 @@ export * from './contexts/loadcontext';
 export * from './contexts/cookieconsentcontext';
 export * from './contexts/analyticscontext';
 export * from './contexts/usereventcontext';
+export * from './contexts/tagcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';

package/lib/index.js

@@ -9,6 +9,7 @@ export * from './contexts/loadcontext';
 export * from './contexts/cookieconsentcontext';
 export * from './contexts/analyticscontext';
 export * from './contexts/usereventcontext';
+export * from './contexts/tagcontext';
 export * from './observable';
 export * from './contexts/environmentcontext';
 const link = document.createElement('link');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zcomponent/core",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -26,13 +26,12 @@
   "author": "Zappar Limited",
   "license": "Proprietary",
   "devDependencies": {
-    "typescript": "^4.6.3",
     "@playwright/test": "^1.25.0",
-    "parcel": "2.6.2",
     "@types/ua-parser-js": "^0.7.36",
+    "parcel": "^2.8.2",
+    "typescript": "^4.6.3",
     "ua-parser-js": "^1.0.2"
   },
-  "dependencies": {},
   "zexports": [
     "./lib/components/**/*",
     "./lib/behaviors/**/*"