@zcomponent/core 1.29.0 → 2.0.0-alpha.2

package/lib/icons.js

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

package/lib/index.d.ts

@@ -1,19 +1,24 @@
-export { ValuesManager } from './values/values';
-export * from './component';
-export * from './behavior';
 export * from './actionbehavior';
-export * from './zcomponent';
+export * from './animation';
+export * from './behavior';
+export { CacheOptions, CachePerformer, cache } from './cache';
+export * from './component';
 export * from './context';
-export * from './event';
+export * from './contexts/analyticscontext';
+export * from './contexts/audiocontextcontext';
 export * from './contexts/canvascontext';
-export * from './contexts/loadcontext';
 export * from './contexts/cookieconsentcontext';
-export * from './contexts/analyticscontext';
-export * from './contexts/usereventcontext';
-export * from './contexts/tagcontext';
+export * from './contexts/environmentcontext';
 export * from './contexts/gamepadcontext';
+export * from './contexts/loadcontext';
+export * from './contexts/rootcomponentscontext';
+export * from './contexts/tagcontext';
+export * from './contexts/usereventcontext';
+export * from './decorators';
+export * from './event';
+export * from './groups';
 export * from './observable';
-export * from './contexts/environmentcontext';
-export * from './contexts/audiocontextcontext';
-export * from './animation';
-export { cache, CacheOptions, CachePerformer } from './cache';
+export { reset } from './observe';
+export { Angle, Color, EmailAddress, MultilineText, ProjectFile, Proportion, Range, Time, Url, ValueOf } from './types';
+export { ValuesManager } from './values/values';
+export * from './zcomponent';

package/lib/index.js

@@ -1,22 +1,26 @@
-export { ValuesManager } from './values/values';
-export * from './component';
-export * from './behavior';
 export * from './actionbehavior';
-export * from './zcomponent';
+export * from './animation';
+export * from './behavior';
+export { cache } from './cache';
+export * from './component';
 export * from './context';
-export * from './event';
+export * from './contexts/analyticscontext';
+export * from './contexts/audiocontextcontext';
 export * from './contexts/canvascontext';
-export * from './contexts/loadcontext';
 export * from './contexts/cookieconsentcontext';
-export * from './contexts/analyticscontext';
-export * from './contexts/usereventcontext';
-export * from './contexts/tagcontext';
+export * from './contexts/environmentcontext';
 export * from './contexts/gamepadcontext';
+export * from './contexts/loadcontext';
+export * from './contexts/rootcomponentscontext';
+export * from './contexts/tagcontext';
+export * from './contexts/usereventcontext';
+export * from './decorators';
+export * from './event';
+export * from './groups';
 export * from './observable';
-export * from './contexts/environmentcontext';
-export * from './contexts/audiocontextcontext';
-export * from './animation';
-export { cache } from './cache';
+export { reset } from './observe';
+export { ValuesManager } from './values/values';
+export * from './zcomponent';
 const link = document.createElement('link');
 link.setAttribute('rel', 'stylesheet');
 link.setAttribute('href', new URL('../css/zcomponent.css', import.meta.url).toString());

package/lib/inflate.d.ts

@@ -1,13 +1,13 @@
-import { Track } from './animation/tracks/track';
-import * as Data from './data';
-import { ZComponent } from './zcomponent';
-import { Clip } from './animation/clips/clip';
 import { Animation } from './animation/animation';
-import { LayerClip } from './animation/layerclip';
-import { Layer } from './animation/layer';
-import { ByID } from './data';
 import { Bezier } from './animation/bezier';
+import { Clip } from './animation/clips/clip';
 import { Keyframe } from './animation/keyframe';
+import { Layer } from './animation/layer';
+import { LayerClip } from './animation/layerclip';
+import { Track } from './animation/tracks/track';
+import * as Data from './data';
+import { ByID } from './data';
+import { ZComponent } from './zcomponent';
 /**
  * Creates a track from the provided data.
  *

package/lib/inflate.js

@@ -1,12 +1,12 @@
-import * as Data from './data';
-import { PropertyTrack } from './animation/tracks/propertytrack';
+import { Bezier } from './animation/bezier';
 import { Clip } from './animation/clips/clip';
-import { LayerClip } from './animation/layerclip';
 import { Layer } from './animation/layer';
+import { LayerClip } from './animation/layerclip';
 import { ClipTrack } from './animation/tracks/cliptrack';
-import { Bezier } from './animation/bezier';
-import { StreamTrack } from './animation/tracks/streamtrack';
 import { FunctionTrack } from './animation/tracks/functiontrack';
+import { PropertyTrack } from './animation/tracks/propertytrack';
+import { StreamTrack } from './animation/tracks/streamtrack';
+import * as Data from './data';
 /**
  * Creates a track from the provided data.
  *

package/lib/observable.d.ts

@@ -1,5 +1,9 @@
 import { Emitter } from './emitter';
-type Resolved<T, M> = [T] extends [never] ? M : T;
+type Resolved<T, M> = [
+    T
+] extends [
+    never
+] ? M : T;
 /**
  * A class that holds a value and watches it for changes (deeply by default).
  *
@@ -32,7 +36,10 @@ type Resolved<T, M> = [T] extends [never] ? M : T;
  * @typeParam Type - The type of the contained value
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
-export declare class Observable<Type = never, TypeInternal extends any[] | [] | never = never> extends Emitter<[Resolved<Type, TypeInternal>]> {
+export declare class Observable<Type = never, TypeInternal extends any[] | [
+] | never = never> extends Emitter<[
+    Resolved<Type, TypeInternal>
+]> {
     private _deep;
     private _proxies;
     private _value;

package/lib/observable.js

@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/no-this-alias */
-/* eslint-disable @typescript-eslint/adjacent-overload-signatures */
 import { Emitter } from './emitter';
 /**
  * A class that holds a value and watches it for changes (deeply by default).
@@ -34,10 +33,13 @@ import { Emitter } from './emitter';
  * @typeParam TypeInternal - An internal type used to improve automatic type detection
  */
 export class Observable extends Emitter {
+    _deep;
+    _proxies = new WeakMap();
+    _value;
+    _default;
     constructor(def, withHandler, _deep = true, callWithImmediately = false) {
         super();
         this._deep = _deep;
-        this._proxies = new WeakMap();
         this._default = clone(def, _deep);
         this._value = this._wrap(clone(def, _deep));
         if (withHandler)
@@ -63,7 +65,7 @@ export class Observable extends Emitter {
                     if (!shouldWrap(val))
                         return val;
                     if (Array.isArray(target) && p === 'splice') {
-                        return function (...args) {
+                        return (...args) => {
                             for (let i = 2; i < args.length; i++) {
                                 args[i] = clone(args[i], true);
                             }
@@ -116,7 +118,6 @@ export class Observable extends Emitter {
         this._emit(this._value.proxy);
     }
     setValueAtPath(path, val) {
-        // eslint-disable-next-line @typescript-eslint/no-this-alias
         let target = this;
         let key = 'value';
         for (let i = 0; i < path.length; i++) {

package/lib/observe.d.ts

@@ -0,0 +1,18 @@
+import { Event } from './event';
+export interface ObserveOptions {
+    shallow?: boolean;
+    callImmediately?: boolean;
+    priority?: number;
+}
+/**
+ * Makes a property on an object observable. Whenever the property changes, the provided function will be called with the new value.
+ */
+export declare function observe<ObjectType extends object, PropNameType extends keyof ObjectType>(object: ObjectType, prop: PropNameType, fn: (v: ObjectType[PropNameType]) => void, options?: ObserveOptions): void;
+export declare function unobserve<ObjectType extends object, PropNameType extends keyof ObjectType>(object: ObjectType, prop: PropNameType, fn: (v: ObjectType[PropNameType]) => void): void;
+export declare function notify<ObjectType extends object, PropNameType extends keyof ObjectType>(object: ObjectType, prop: PropNameType): void;
+export declare function makeObservable<T>(entity: object, propName: string, deep?: boolean, forceDefaultUpdate?: boolean): Event<[
+    value: T,
+    entity: object,
+    prop: string
+]>;
+export declare function reset(entity: object, propName: string): boolean;

package/lib/observe.js

@@ -0,0 +1,177 @@
+import { Event } from './event';
+const _eventsSymbol = Symbol();
+const _defaultsSymbol = Symbol();
+function getEvent(entity, propName) {
+    if (entity[_eventsSymbol] === undefined)
+        entity[_eventsSymbol] = new Map();
+    return entity[_eventsSymbol].get(propName);
+}
+function setEvent(entity, propName, evt) {
+    if (entity[_eventsSymbol] === undefined)
+        entity[_eventsSymbol] = new Map();
+    entity[_eventsSymbol].set(propName, evt);
+}
+function getDefault(entity, propName) {
+    if (entity[_defaultsSymbol] === undefined)
+        entity[_defaultsSymbol] = new Map();
+    return entity[_defaultsSymbol].get(propName);
+}
+function setDefault(entity, propName, def) {
+    if (entity[_defaultsSymbol] === undefined)
+        entity[_defaultsSymbol] = new Map();
+    entity[_defaultsSymbol].set(propName, def);
+}
+/**
+ * Makes a property on an object observable. Whenever the property changes, the provided function will be called with the new value.
+ */
+export function observe(object, prop, fn, options) {
+    const e = makeObservable(object, prop, !(options?.shallow ?? false));
+    e.addListener(fn, options?.priority);
+    if (options?.callImmediately)
+        fn(object[prop]);
+}
+export function unobserve(object, prop, fn) {
+    const e = getEvent(object, prop);
+    if (!e)
+        return;
+    e.removeListener(fn);
+}
+export function notify(object, prop) {
+    const e = getEvent(object, prop);
+    e?.emit(object[prop], object, prop);
+}
+function resolveDescriptor(obj, propName) {
+    const p = Object.getOwnPropertyDescriptor(obj, propName);
+    if (p)
+        return p;
+    const proto = Object.getPrototypeOf(obj);
+    if (!proto || proto === Object.prototype)
+        return undefined;
+    return resolveDescriptor(proto, propName);
+}
+export function makeObservable(entity, propName, deep = true, forceDefaultUpdate = false) {
+    let _event = getEvent(entity, propName);
+    if (_event) {
+        if (forceDefaultUpdate)
+            setDefault(entity, propName, clone(entity[propName], deep));
+        return _event;
+    }
+    _event = new Event();
+    setEvent(entity, propName, _event);
+    setDefault(entity, propName, clone(entity[propName], deep));
+    const descriptor = resolveDescriptor(entity, propName);
+    let _value = wrap(clone(entity[propName], deep));
+    descriptor?.set?.(_value.proxy);
+    const _proxies = new WeakMap();
+    function getValue() {
+        return descriptor?.get ? descriptor?.get?.call(entity) : _value.proxy;
+    }
+    function wrap(v) {
+        if (!shouldWrap(v) || !deep)
+            return { proxy: v, target: v };
+        return {
+            target: v,
+            proxy: new Proxy(v, {
+                get(target, p, receiver) {
+                    const val = target[p];
+                    if (!shouldWrap(val))
+                        return val;
+                    if (Array.isArray(target) && p === 'splice') {
+                        return (...args) => {
+                            for (let i = 2; i < args.length; i++) {
+                                args[i] = clone(args[i], true);
+                            }
+                            val.apply(target, args);
+                            _event?.emit(getValue(), entity, propName);
+                        };
+                    }
+                    if (val['__z_is_observable'])
+                        return val;
+                    const proxy = _proxies.get(val) || wrap(val);
+                    _proxies.set(val, proxy);
+                    return proxy.proxy;
+                },
+                set(target, p, val) {
+                    const changed = target[p] !== val;
+                    target[p] = clone(val, true);
+                    if (changed)
+                        _event?.emit(getValue(), entity, propName);
+                    return true;
+                },
+                deleteProperty(target, p) {
+                    const changed = target[p] !== undefined;
+                    delete target[p];
+                    if (changed)
+                        _event?.emit(getValue(), entity, propName);
+                    return true;
+                },
+            }),
+        };
+    }
+    Object.defineProperty(entity, propName, {
+        enumerable: true,
+        get: getValue,
+        set: v => {
+            const changed = v !== getValue();
+            if (descriptor?.get && !descriptor?.set)
+                throw new Error('Unable to set property with getter but no setter');
+            _value = wrap(clone(v, deep));
+            descriptor?.set?.call(entity, _value.proxy);
+            if (changed)
+                _event?.emit(_value.proxy, entity, propName);
+        },
+        configurable: true,
+    });
+    return _event;
+}
+export function reset(entity, propName) {
+    if (entity[_defaultsSymbol] === undefined || !entity[_defaultsSymbol].has(propName))
+        return false;
+    entity[propName] = getDefault(entity, propName);
+    return true;
+}
+function shouldWrap(a) {
+    if (Array.isArray(a))
+        return true;
+    if (a === null)
+        return false;
+    if (typeof a === 'object' && a !== null) {
+        const proto = Object.getPrototypeOf(a);
+        if (proto === Object.prototype || proto === null)
+            return true;
+    }
+    if (typeof a === 'function')
+        return false;
+    return false;
+}
+function clone(a, deep) {
+    if (!deep) {
+        if (Array.isArray(a))
+            a.slice();
+        if (typeof a === 'object' && a !== null) {
+            const proto = Object.getPrototypeOf(a);
+            if (proto === Object.prototype || proto === null) {
+                return { ...a };
+            }
+        }
+        return a;
+    }
+    if (Array.isArray(a)) {
+        const ret = new Array(a.length);
+        for (let i = 0; i < ret.length; i++) {
+            ret[i] = clone(a[i], true);
+        }
+        return ret;
+    }
+    if (typeof a === 'object' && a !== null) {
+        const proto = Object.getPrototypeOf(a);
+        if (proto === Object.prototype || proto === null) {
+            const ret = Object.create(null);
+            for (const entry of Object.getOwnPropertyNames(a)) {
+                ret[entry] = clone(a[entry], true);
+            }
+            return ret;
+        }
+    }
+    return a;
+}

package/lib/profile.d.ts

@@ -1,10 +1,12 @@
+import { ValueOf } from './types';
 /**
  * The user device type. Can be either desktop or mobile.
  */
-export declare enum DeviceType {
-    DESKTOP = "desktop",
-    MOBILE = "mobile"
-}
+export declare const DeviceType: {
+    readonly DESKTOP: "desktop";
+    readonly MOBILE: "mobile";
+};
+export type DeviceTypeValue = ValueOf<typeof DeviceType>;
 /**
  * A helper class to store the user device type and other profile related information.
  */
@@ -15,6 +17,7 @@ export declare class Profile {
     isDesktop: boolean;
     /**
      * Whether the user is muted by default.
+     * @default false
      */
     muteByDefault: boolean;
     /**
@@ -27,6 +30,7 @@ export declare class Profile {
     urlSearchParams: URLSearchParams;
     /**
      * Whether the debug mode is enabled. This is enabled by adding the `debug=true` query parameter to the URL.
+     * @default false
      */
     debugMode: boolean;
     /**
@@ -36,5 +40,5 @@ export declare class Profile {
     /**
      * Returns the user agent type.
      */
-    get userAgent(): DeviceType;
+    get userAgent(): DeviceTypeValue;
 }

package/lib/profile.js

@@ -1,11 +1,11 @@
 /**
  * The user device type. Can be either desktop or mobile.
  */
-export var DeviceType;
-(function (DeviceType) {
-    DeviceType["DESKTOP"] = "desktop";
-    DeviceType["MOBILE"] = "mobile";
-})(DeviceType || (DeviceType = {}));
+export const DeviceType = {
+    DESKTOP: 'desktop',
+    MOBILE: 'mobile',
+};
+Object.freeze(DeviceType);
 /**
  * Determines the device type based on the user agent string.
  *
@@ -23,22 +23,32 @@ function getDeviceType() {
  * A helper class to store the user device type and other profile related information.
  */
 export class Profile {
+    /**
+     * Whether the user is using a desktop device.
+     */
+    isDesktop;
+    /**
+     * Whether the user is muted by default.
+     * @default false
+     */
+    muteByDefault = false;
+    /**
+     * The client language. This is the language of the browser.
+     */
+    clientLanguage = window.navigator.language;
+    /**
+     * The URL search parameters from the current window location.
+     */
+    urlSearchParams;
+    /**
+     * Whether the debug mode is enabled. This is enabled by adding the `debug=true` query parameter to the URL.
+     * @default false
+     */
+    debugMode = false;
     /**
      * Creates an instance of Profile.
      */
     constructor() {
-        /**
-         * Whether the user is muted by default.
-         */
-        this.muteByDefault = false;
-        /**
-         * The client language. This is the language of the browser.
-         */
-        this.clientLanguage = window.navigator.language;
-        /**
-         * Whether the debug mode is enabled. This is enabled by adding the `debug=true` query parameter to the URL.
-         */
-        this.debugMode = false;
         this.urlSearchParams = new URLSearchParams(window.location.search);
         this.debugMode = this.urlSearchParams.has('debug') && this.urlSearchParams.get('debug') === 'true';
         this.isDesktop = getDeviceType() === DeviceType.DESKTOP;

package/lib/selectors.d.ts

@@ -1,5 +1,5 @@
-import { BehaviorByID, EntityPropOverride, Import, NodeByID, ParsedImport, Props, ZComponentData } from './data/core';
 import * as Data from './data';
+import { BehaviorByID, EntityPropOverride, Import, NodeByID, ParsedImport, Props, ZComponentData } from './data/core';
 import { ZValues } from './values/values';
 /**
  * Parses an import string into a tuple containing the import path and import name.

package/lib/selectors.js

@@ -1,9 +1,9 @@
-import { EntityPropOverrideType } from './data/core';
 import * as path from 'path';
-import { outputForType } from './types';
 import * as Data from './data';
-import * as VALUES from './values/valuesmutator';
 import { computeBehaviorHierarchy } from './data';
+import { EntityPropOverrideType } from './data/core';
+import { outputForType } from './types';
+import * as VALUES from './values/valuesmutator';
 /**
  * Parses an import string into a tuple containing the import path and import name.
  *
@@ -325,9 +325,10 @@ export const typeDefinitionForComponent = (nodes, props, constructorProps, scrip
         `@zicon ${icon ?? 'zcomponent'}`,
         ...(group ? [`@zgroup ${group}`] : []),
         ...(tags ?? []).map(tag => `@ztag ${tag}`),
+        '@ztag zcomponent',
         ...(parents ?? []).map(parent => `@zparents ${parent}`),
     ];
-    return `import { ZComponent, ContextManager, Observable, Animation, Layer, LayerClip, Event } from "@zcomponent/core";
+    return `import { ZComponent, ContextManager, Observable, Animation, Layer, LayerClip, Event, ConstructorForComponent } from "@zcomponent/core";
 
 ${importStrings.join('\n')}