@zcomponent/core 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# @zcomponent/core
+
+## Tests
+
+- Requires node 16 for ESM support.
+- `npx playwright install`
+- `npm run test`

package/css/zcomponent.css

@@ -0,0 +1,35 @@
+.zcomponent-defaultloader {
+    position: fixed;
+    font-family: sans-serif;
+    color: white;
+    background-color: black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    background-position: center center;
+}
+
+#zcomponent-defaultloader-container {
+    text-align: center;
+}
+
+#zcomponent-defaultloader-subtitle {
+    margin-bottom: 32px;
+}
+
+#zcomponent-defaultloader-progress {
+    position: relative;
+    width: 300px;
+    background-color: #333;
+    height: 12px;
+    border-radius: 6px;
+    margin: 0 auto;
+}
+
+#zcomponent-defaultloader-progress-percentage {
+    position: relative;
+    background-color: white;
+    height: 12px;
+    border-radius: 6px;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './lib';

package/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable node/no-unsupported-features/es-syntax */
+export * from './lib';

package/lib/actionbehavior.d.ts

@@ -0,0 +1,20 @@
+import { ConcreteBehavior } from "./behavior";
+import { InstanceOfComponent } from "./component";
+import { ContextManager } from "./context";
+export declare type ActionConstructorType<T extends {}> = (props: T, ctx: ContextManager) => (() => void);
+export interface ActionBehaviorConstructorProps {
+    /** @zprop
+     * @zvalues events
+     */
+    event: string;
+    instance: InstanceOfComponent<any>;
+}
+export interface ActionBehaviorProps {
+    dispose: () => void;
+}
+export interface PreviewableActionBehaviorProps extends ActionBehaviorProps {
+    /** @zprop */
+    preview: () => void;
+}
+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

@@ -0,0 +1,32 @@
+import { defineBehavior } 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);
+                }
+                upstreamHandler?.();
+            };
+            evt.bindfn(handler);
+        }
+        return {
+            /** @zprop */
+            preview: preview ? () => {
+                upstreamHandler?.();
+            } : undefined,
+            dispose: () => {
+                if (handler)
+                    evt?.unbindfn(handler);
+            },
+        };
+    }, true);
+}

package/lib/animation.d.ts

@@ -0,0 +1,129 @@
+export declare type ByID<T> = {
+    [id: string]: T | undefined;
+};
+export declare type ByNodeProperty<T> = {
+    [id: string]: {
+        [id: string]: T | undefined;
+    } | undefined;
+};
+export interface Animation {
+    clips: ByID<Clip>;
+    layers: ByID<Layer>;
+}
+export declare type BlendType = 'overlay' | 'add';
+export interface FadeParameters {
+    time: number;
+    pin?: 'start' | 'middle' | 'end';
+}
+export interface Layer {
+    defaultFadeParameters?: FadeParameters;
+    clips: LayerClip[];
+}
+export interface LayerClip {
+    clipID: string;
+    loop?: string;
+    reverse?: boolean;
+    playbackSpeed?: number;
+}
+export declare type Clip = StateClip | TimelineClip;
+export interface BaseClip {
+    type: 'timeline' | 'state';
+}
+export interface StateClip extends BaseClip {
+    type: 'state';
+    values: ByNodeProperty<any>;
+    defaultFadeParameters?: FadeParameters;
+    fadeParameters: ByNodeProperty<FadeParameters>;
+    blend: ByNodeProperty<StateClipBlend>;
+}
+export interface StateClipBlend {
+    weight?: number;
+    type?: BlendType;
+}
+export interface TimelineClip extends BaseClip {
+    type: 'timeline';
+    length: number;
+    tracks: ByID<Track>;
+    trackOrder: string[];
+    defaultFadeParameters?: FadeParameters;
+    timeSourceTrack?: string;
+}
+export declare type Track = PropertyTrack | ClipTrack | StreamTrack | FunctionTrack | LabelTrack;
+export interface BaseTrack {
+    type: 'property' | 'clip' | 'stream' | 'function' | 'label';
+}
+export interface Keyframe<T> {
+    v: T;
+    t: number;
+    label?: string;
+    easing?: Easing;
+}
+export declare type Easing = 'linear' | 'step' | 'bounce' | Bezier[];
+export declare type BezierCP = [number, number];
+export declare type Bezier = [
+    BezierCP,
+    BezierCP,
+    [number, number]
+] | [
+    BezierCP,
+    BezierCP
+];
+export interface PropertyTrack extends BaseTrack {
+    type: 'property';
+    entityID: string;
+    property: string;
+    values: Keyframe<any>[];
+    blend: BlendType;
+    weight: Keyframe<number>[];
+    fadeParameters?: FadeParameters;
+}
+export interface ClipTrack extends BaseTrack {
+    type: 'clip';
+    clipID: string;
+    data: ClipTrackEntry[];
+    weight: Keyframe<number>[];
+}
+export interface ClipTrackEntry {
+    t0: number;
+    t1: number;
+    s0: number;
+    rate: number;
+}
+export interface StreamTrack extends BaseTrack {
+    type: 'stream';
+    entityID: string;
+    data: StreamTrackEntry[];
+    weight: Keyframe<number>[];
+}
+export interface StreamTrackEntry {
+    t0: number;
+    t1: number;
+    s0: number;
+    rate: number;
+}
+export interface FunctionTrack extends BaseTrack {
+    type: 'function';
+    data: FunctionTrackEntry[];
+}
+export declare type FunctionTrackEntry = EntityFunctionTrackEntry | ImportFunctionTrackEntry;
+export interface BaseFunctionTrackEntry {
+    type: 'entity' | 'import';
+    args: any[];
+}
+export interface EntityFunctionTrackEntry extends BaseFunctionTrackEntry {
+    type: 'entity';
+    entityID: string;
+    functionName: string;
+}
+export interface ImportFunctionTrackEntry extends BaseFunctionTrackEntry {
+    type: 'import';
+    import: string;
+}
+export interface LabelTrack extends BaseTrack {
+    type: 'label';
+    data: LabelTrackEntry[];
+}
+export interface LabelTrackEntry {
+    t: number;
+    label: string;
+}

package/lib/animation.js

@@ -0,0 +1 @@
+export {};

package/lib/behavior.d.ts

@@ -0,0 +1,26 @@
+import { Component, InstanceOfComponent } 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;

package/lib/behavior.js

@@ -0,0 +1,10 @@
+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;
+}

package/lib/behaviors/LaunchURL.d.ts

@@ -0,0 +1,12 @@
+export interface LaunchURLProps {
+    /** @zprop */
+    url: string;
+    /** @zprop
+     * @zdefault true
+     */
+    openInNew: boolean;
+}
+/** @zbehavior
+ * @zgroup Actions
+ */
+export declare const LaunchURL: import("..").ConcreteBehavior<any, LaunchURLProps & import("../actionbehavior").ActionBehaviorConstructorProps, import("../actionbehavior").ActionBehaviorProps>;

package/lib/behaviors/LaunchURL.js

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

package/lib/behaviors/LogAnalyticsEvent.d.ts

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

package/lib/behaviors/LogAnalyticsEvent.js

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

package/lib/behaviors/PlaySound.d.ts

@@ -0,0 +1,12 @@
+export interface PlaySoundProps {
+    /** The URL of the file to play
+     * @zprop
+     * @zvalues files *.wav
+     * @zvalues files *.mp3
+    */
+    source: string;
+}
+/** @zbehavior
+ * @zgroup Actions
+ */
+export declare const PlaySound: import("..").ConcreteBehavior<any, PlaySoundProps & import("../actionbehavior").ActionBehaviorConstructorProps, import("../actionbehavior").PreviewableActionBehaviorProps>;

package/lib/behaviors/PlaySound.js

@@ -0,0 +1,18 @@
+import { defineActionBehavior } from "../actionbehavior";
+import { registerLoadable } from "../contexts/loadcontext";
+/** @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);

package/lib/component.d.ts

@@ -0,0 +1,22 @@
+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;
+    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;

package/lib/component.js

@@ -0,0 +1,4 @@
+/** Register a new custom component */
+export function defineComponent(c) {
+    return c;
+}

package/lib/components/DefaultLoader.d.ts

@@ -0,0 +1,55 @@
+import { Observable } from "../";
+export interface DefaultLoaderConstructorProps {
+    /** @zprop
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     * @zvalues files *.jpeg
+     * @zvalues files *.png
+     * @zvalues files *.jpg
+     */
+    backgroundImage?: string;
+}
+/**
+ * The DefaultLoader shows a customizable loading bar while the assets of your experience are being downloaded and parsed by the browser.
+ *
+ * @zcomponent
+ * @zicon loader
+ * @zgroup Advanced
+ */
+export declare const DefaultLoader: (props: DefaultLoaderConstructorProps, mgr: import("../context").ContextManager) => {
+    dispose: () => void;
+    /** @zprop
+     * @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
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     */
+    backgroundColor: Observable<string>;
+    /** @zprop
+     * @zdefault white
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     */
+    textColor: Observable<string>;
+    /** @zprop
+     * @zdefault 1000
+     * @zgroup Appearance
+     * @zgrouppriority 10
+     */
+    zIndex: Observable<number>;
+};

package/lib/components/DefaultLoader.js

@@ -0,0 +1,112 @@
+import { defineComponent, 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.
+ *
+ * @zcomponent
+ * @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,
+        /** @zprop
+         * @zgroup Text
+         * @zgrouppriority 20
+        */
+        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,
+    };
+});
+const loaderHTML = `
+<div id="zcomponent-defaultloader-container">
+    <h1 id="zcomponent-defaultloader-title"></h1>
+    <div id="zcomponent-defaultloader-subtitle"></div>
+    <div id="zcomponent-defaultloader-progress">
+        <div id="zcomponent-defaultloader-progress-percentage"></div>
+    </div>
+</div>
+`;

package/lib/context.d.ts

@@ -0,0 +1,28 @@
+export interface ContextType<T extends {}> {
+    key: string;
+    hasDefault: false;
+}
+export interface ContextTypeWithDefault<T extends {}, Args extends Array<any> = []> {
+    key: string;
+    hasDefault: true;
+    def: (ctx: ContextManager, ...args: Args) => T;
+}
+export declare function defineContextType<T extends {}>(): ContextType<T>;
+export declare function defineContextType<T extends {}, Args extends Array<any> = []>(def: (ctx: ContextManager, ...args: Args) => T): ContextTypeWithDefault<T, Args>;
+export declare class ContextManager {
+    private _byKey;
+    private _root;
+    constructor();
+    static create(): ContextManager;
+    static create<T extends {}>(type: ContextType<T>, props: T): ContextManager;
+    static create<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): ContextManager;
+    add<T extends {}>(type: ContextType<T>, obj: T): T;
+    add<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): T;
+    fork<T extends {}>(type: ContextType<T>, obj: T): [ContextManager, T];
+    fork<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): [ContextManager, T];
+    get<T extends {}>(type: ContextType<T>): T | undefined;
+    get<T extends {}, Args extends Array<any>>(type: ContextTypeWithDefault<T, Args>, ...args: Args): T;
+    getExisting<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>): T | undefined;
+    getOrThrow<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>): T;
+    delete<T extends {}, Args extends Array<any>>(type: ContextType<T> | ContextTypeWithDefault<T, Args>): void;
+}

package/lib/context.js

@@ -0,0 +1,65 @@
+let _nextContextKey = 1;
+export function defineContextType(def) {
+    _nextContextKey++;
+    if (def) {
+        return {
+            key: _nextContextKey.toString(),
+            hasDefault: def !== undefined,
+            def,
+        };
+    }
+    else
+        return {
+            key: _nextContextKey.toString(),
+            hasDefault: false
+        };
+}
+export class ContextManager {
+    constructor() {
+        this._byKey = {};
+        this._root = this;
+    }
+    static create(type, ...args) {
+        const ctx = new ContextManager();
+        if (type) {
+            if (type.hasDefault)
+                ctx.add(type, ...args);
+            else
+                ctx.add(type, args[0]);
+        }
+        return ctx;
+    }
+    add(type, ...args) {
+        const root = this._root;
+        const t = type.hasDefault ? type.def(root, ...args) : args[0];
+        root._byKey[type.key] = t;
+        return t;
+    }
+    fork(type, ...args) {
+        const ret = new ContextManager();
+        ret._root = this._root;
+        ret._byKey = Object.create(this._byKey);
+        const t = type.hasDefault ? type.def(ret, ...args) : args[0];
+        ret._byKey[type.key] = t;
+        return [ret, t];
+    }
+    get(type, ...args) {
+        let entry = this._byKey[type.key];
+        if (!entry && type.hasDefault) {
+            entry = this.add(type, ...args);
+        }
+        return entry;
+    }
+    getExisting(type) {
+        return this._byKey[type.key];
+    }
+    getOrThrow(type) {
+        const res = this._byKey[type.key];
+        if (!res)
+            throw new Error("Required context not present");
+        return res;
+    }
+    delete(type) {
+        delete this._byKey[type.key];
+    }
+}

package/lib/contexts/analyticscontext.d.ts

@@ -0,0 +1,9 @@
+import { ContextManager } from '../context';
+import { Event } from '../event';
+export interface AnalyticsContext {
+    onEvent: Event<[string, any]>;
+    logEvent: (name: string, params?: any) => void;
+}
+export declare const AnalyticsContext: import("../context").ContextTypeWithDefault<AnalyticsContext, []>;
+export declare function logEvent(mgr: ContextManager, name: string, params?: any): void;
+export declare function useAnalyticsOnEvent(mgr: ContextManager): Event<[string, any]>;