@mulsense/xnew 0.1.8 → 0.1.10

package/README.md

@@ -1,46 +1,46 @@
-# xnew
-`xnew` is a JavaScript / TypeScript library for component-oriented programming,
-providing a flexible architecture well-suited for applications with dynamic scenes and games.
-
-[**Visit the xnew website**](https://mulsense.github.io/xnew)
-
-<div>
-    <img src="website/static/img/introduction.svg" width="500" alt="xnew introduction" />
-</div>
-
-## Setup
-
-### Via CDN
-Include the following script in your HTML file:
-```html
-<script src="https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.js"></script>
-```
-
-### Via CDN (ESM)
-Use the ES module version with an import map:
-```html
-<script type="importmap">
-{
-    "imports": {
-        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.mjs"
-    }
-}
-</script>
-
-<script type="module">
-import xnew from '@mulsense/xnew';
-
-// Your code here
-</script>
-```
-
-### Via npm
-Install `xnew` using npm:
-```bash
-npm install @mulsense/xnew@0.1.x
-```
-
-Then import it in your JavaScript file:
-```js
-import xnew from '@mulsense/xnew';
-```
+# xnew
+`xnew` is a JavaScript / TypeScript library for component-oriented programming,
+providing a flexible architecture well-suited for applications with dynamic scenes and games.
+
+[**Visit the xnew website**](https://mulsense.github.io/xnew)
+
+<div>
+    <img src="website/static/img/introduction.svg" width="500" alt="xnew introduction" />
+</div>
+
+## Setup
+
+### Via CDN
+Include the following script in your HTML file:
+```html
+<script src="https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.js"></script>
+```
+
+### Via CDN (ESM)
+Use the ES module version with an import map:
+```html
+<script type="importmap">
+{
+    "imports": {
+        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.1.x/dist/xnew.mjs"
+    }
+}
+</script>
+
+<script type="module">
+import xnew from '@mulsense/xnew';
+
+// Your code here
+</script>
+```
+
+### Via npm
+Install `xnew` using npm:
+```bash
+npm install @mulsense/xnew@0.1.x
+```
+
+Then import it in your JavaScript file:
+```js
+import xnew from '@mulsense/xnew';
+```

package/dist/types/audio/audio.d.ts

@@ -1,2 +1,55 @@
-export declare const context: AudioContext;
-export declare const master: GainNode;
+export declare const audio: {
+    load(path: string): AudioFile;
+    synthesizer(props: SynthProps): Synthesizer;
+    volume: number;
+};
+declare class AudioFile {
+    buffer?: AudioBuffer;
+    promise: Promise<void>;
+    source?: AudioBufferSourceNode;
+    amp?: GainNode;
+    start: number | null;
+    constructor(path: string);
+    play(offset?: number, loop?: boolean): void;
+    pause(): number | undefined;
+}
+type SynthProps = {
+    oscillator: OscillatorOptions;
+    amp: AmpOptions;
+    filter?: FilterOptions;
+    reverb?: ReverbOptions;
+    bpm?: number;
+};
+type OscillatorOptions = {
+    type: OscillatorType;
+    envelope?: Envelope;
+    LFO?: LFO;
+};
+type FilterOptions = {
+    type: BiquadFilterType;
+    cutoff: number;
+};
+type AmpOptions = {
+    envelope: Envelope;
+};
+type ReverbOptions = {
+    time: number;
+    mix: number;
+};
+type Envelope = {
+    amount: number;
+    ADSR: [number, number, number, number];
+};
+type LFO = {
+    amount: number;
+    type: OscillatorType;
+    rate: number;
+};
+declare class Synthesizer {
+    props: SynthProps;
+    constructor(props: SynthProps);
+    press(frequency: number | string, duration?: number | string, wait?: number): {
+        release: () => void;
+    } | undefined;
+}
+export {};

package/dist/types/audio/loader.d.ts

@@ -1,12 +1,16 @@
+import { AudioNodeMap } from './audio';
 export declare function load(path: string): AudioFile;
 declare class AudioFile {
     data: any;
     startTime: number | null;
-    source: AudioBufferSourceNode;
-    amp: GainNode;
+    nodes: AudioNodeMap;
     constructor(path: string);
     isReady(): boolean;
     get promise(): Promise<void>;
+    set volume(value: number);
+    get volume(): number;
+    set loop(value: boolean);
+    get loop(): boolean;
     play(offset?: number): void;
     pause(): number | undefined;
 }

package/dist/types/basics/Event.d.ts

@@ -1,3 +1,4 @@
-import { xnew } from '../core/xnew';
-export declare function ResizeEvent(self: any): void;
-export declare function UserEvent(self: xnew.Unit): void;
+import { Unit } from '../core/unit';
+export declare function ResizeEvent(resize: Unit): void;
+export declare function KeyboardEvent(unit: Unit): void;
+export declare function PointerEvent(unit: Unit): void;

package/dist/types/basics/Touch.d.ts

@@ -8,14 +8,15 @@ export declare function TouchStick(self: xnew.Unit, { size, fill, fillOpacity, s
     strokeWidth?: number | undefined;
     strokeLinejoin?: string | undefined;
 }): void;
-export declare function TouchDPad(self: xnew.Unit, { size, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
-    size?: number | undefined;
-    fill?: string | undefined;
-    fillOpacity?: number | undefined;
-    stroke?: string | undefined;
-    strokeOpacity?: number | undefined;
-    strokeWidth?: number | undefined;
-    strokeLinejoin?: string | undefined;
+export declare function DirectionalPad(self: xnew.Unit, { size, diagonal, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
+    size?: number;
+    diagonal?: boolean;
+    fill?: string;
+    fillOpacity?: number;
+    stroke?: string;
+    strokeOpacity?: number;
+    strokeWidth?: number;
+    strokeLinejoin?: string;
 }): void;
 export declare function TouchButton(self: xnew.Unit, { size, fill, fillOpacity, stroke, strokeOpacity, strokeWidth, strokeLinejoin }?: {
     size?: number | undefined;

package/dist/types/core/time.d.ts

@@ -6,15 +6,19 @@ export declare class Ticker {
 export declare class Timer {
     private timeout;
     private transition;
-    private delay;
+    private interval;
     private loop;
+    private easing;
     private id;
     private time;
     private offset;
     private status;
     private visibilitychange;
     private ticker;
-    constructor(timeout: Function, transition: Function | null, delay: number, loop?: boolean);
+    constructor(transition: Function | null, timeout: Function | null, interval?: number, { loop, easing }?: {
+        loop?: boolean;
+        easing?: string;
+    });
     clear(): void;
     elapsed(): number;
     start(): void;

package/dist/types/core/unit.d.ts

@@ -33,23 +33,17 @@ interface UnitInternal {
     defines: Record<string, any>;
     systems: Record<string, Function[]>;
 }
-export declare class UnitPromise {
-    private promise;
-    constructor(promise: Promise<any>);
-    then(callback: Function): UnitPromise;
-    catch(callback: Function): UnitPromise;
-    finally(callback: Function): UnitPromise;
-}
 export declare class Unit {
     [key: string]: any;
     _: UnitInternal;
-    constructor(parent: Unit | null, target: Object | null, component?: Function | string, props?: Object);
+    constructor(parent: Unit | null, ...args: any[]);
     get element(): UnitElement;
     get components(): Function[];
     start(): void;
     stop(): void;
     finalize(): void;
     reboot(): void;
+    append(...args: any[]): void;
     static initialize(unit: Unit, anchor: UnitElement | null): void;
     static finalize(unit: Unit): void;
     static nest(unit: Unit, tag: string): UnitElement;
@@ -67,13 +61,50 @@ export declare class Unit {
     static scope(snapshot: Snapshot, func: Function, ...args: any[]): any;
     static snapshot(unit: Unit): Snapshot;
     static context(unit: Unit, key: string, value?: any): any;
-    static componentUnits: MapSet<Function, Unit>;
+    static component2units: MapSet<Function, Unit>;
     static find(component: Function): Unit[];
-    static typeUnits: MapSet<string, Unit>;
+    static type2units: MapSet<string, Unit>;
     on(type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     off(type?: string, listener?: Function): void;
     emit(type: string, ...args: any[]): void;
     static subon(unit: Unit, target: UnitElement | Window | Document, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     static suboff(unit: Unit, target: UnitElement | Window | Document | null, type?: string, listener?: Function): void;
 }
+export declare class UnitPromise {
+    private promise;
+    constructor(promise: Promise<any>);
+    then(callback: Function): UnitPromise;
+    catch(callback: Function): UnitPromise;
+    finally(callback: Function): UnitPromise;
+}
+export declare class UnitTimer {
+    private unit;
+    private stack;
+    constructor({ transition, timeout, interval, easing, loop }: {
+        transition?: Function;
+        timeout?: Function;
+        interval: number;
+        easing?: string;
+        loop?: boolean;
+    });
+    clear(): void;
+    timeout(timeout: Function, interval?: number): this;
+    transition(transition: Function, interval?: number, easing?: string): this;
+    static execute(timer: UnitTimer, { transition, timeout, interval, easing, loop }: {
+        transition?: Function;
+        timeout?: Function;
+        interval: number;
+        easing?: string;
+        loop?: boolean;
+    }): void;
+    static next(timer: UnitTimer): void;
+    static Component(unit: Unit, { snapshot, transition, timeout, interval, loop, easing }: {
+        snapshot: Snapshot;
+        transition?: Function;
+        timeout?: Function;
+        interval?: number;
+        loop?: boolean;
+        easing?: string;
+    }): void;
+}
 export {};

package/dist/types/core/xnew.d.ts

@@ -119,36 +119,26 @@ export declare const xnew: CreateUnit & {
      * buttons.forEach(btn => btn.finalize())
      */
     find(component: Function): Unit[];
-    /**
-     * Appends new components to existing component(s) in the tree
-     * @param anchor - Component function or Unit instance to append to
-     * @param args - Arguments to pass to xnew for creating child components
-     * @throws Error if anchor parameter is invalid
-     * @example
-     * xnew.append(MyContainer, ChildComponent, { prop: 'value' })
-     * xnew.append(unitInstance, AnotherComponent)
-     */
-    append(anchor: Unit, ...args: any[]): void;
     /**
      * Executes a callback once after a delay, managed by component lifecycle
-     * @param callback - Function to execute after delay
-     * @param delay - Delay in milliseconds
+     * @param timeout - Function to execute after Interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to cancel the timeout
      * @example
      * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
      * // Cancel if needed: timer.clear()
      */
-    timeout(callback: Function, delay: number): any;
+    timeout(timeout: Function, interval?: number): any;
     /**
      * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-     * @param callback - Function to execute at each interval
-     * @param delay - Interval duration in milliseconds
+     * @param timeout - Function to execute at each interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to stop the interval
      * @example
      * const timer = xnew.interval(() => console.log('Tick'), 1000)
      * // Stop when needed: timer.clear()
      */
-    interval(callback: Function, delay: number): any;
+    interval(timeout: Function, interval: number): any;
     /**
      * Creates a transition animation with easing, executing callback with progress values
      * @param callback - Function called with progress value (0.0 to 1.0)
@@ -156,13 +146,13 @@ export declare const xnew: CreateUnit & {
      * @param easing - Easing function: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' (default: 'linear')
      * @returns Object with clear() and next() methods for controlling transitions
      * @example
-     * xnew.transition(progress => {
-     *   element.style.opacity = progress
-     * }, 500, 'ease-out').next(progress => {
-     *   element.style.transform = `scale(${progress})`
+     * xnew.transition(p => {
+     *   element.style.opacity = p
+     * }, 500, 'ease-out').transition(p => {
+     *   element.style.transform = `scale(${p})`
      * }, 300)
      */
-    transition(callback: Function, interval: number, easing?: string): any;
+    transition(transition: Function, interval?: number, easing?: string): any;
     /**
      * Creates an event listener manager for a target element with automatic cleanup
      * @param target - Element, Window, or Document to attach listeners to

package/dist/types/index.d.ts

@@ -1,17 +1,14 @@
 import { xnew as base } from './core/xnew';
 import { Unit } from './core/unit';
-import { ResizeEvent } from './basics/ResizeEvent';
-import { PointerEvent } from './basics/PointerEvent';
-import { KeyboardEvent } from './basics/KeyboardEvent';
+import { AccordionFrame, AccordionHeader, AccordionBullet, AccordionContent } from './basics/Accordion';
+import { ResizeEvent, PointerEvent, KeyboardEvent } from './basics/Event';
 import { Screen } from './basics/Screen';
 import { InputFrame } from './basics/Input';
 import { ModalFrame, ModalContent } from './basics/Modal';
 import { TabFrame, TabButton, TabContent } from './basics/Tab';
-import { AccordionFrame, AccordionHeader, AccordionBullet, AccordionContent } from './basics/Accordion';
 import { DragFrame, DragTarget } from './basics/Drag';
 import { AnalogStick, DirectionalPad } from './basics/Controller';
-import { load } from './audio/file';
-import { synthesizer } from './audio/synthesizer';
+import { audio } from './audio/audio';
 declare const basics: {
     Screen: typeof Screen;
     PointerEvent: typeof PointerEvent;
@@ -32,12 +29,6 @@ declare const basics: {
     AnalogStick: typeof AnalogStick;
     DirectionalPad: typeof DirectionalPad;
 };
-declare const audio: {
-    master: GainNode;
-    context: AudioContext;
-    synthesizer: typeof synthesizer;
-    load: typeof load;
-};
 declare namespace xnew {
     type Unit = InstanceType<typeof Unit>;
 }

package/dist/xnew.d.ts

@@ -59,23 +59,17 @@ interface UnitInternal {
     defines: Record<string, any>;
     systems: Record<string, Function[]>;
 }
-declare class UnitPromise {
-    private promise;
-    constructor(promise: Promise<any>);
-    then(callback: Function): UnitPromise;
-    catch(callback: Function): UnitPromise;
-    finally(callback: Function): UnitPromise;
-}
 declare class Unit {
     [key: string]: any;
     _: UnitInternal;
-    constructor(parent: Unit | null, target: Object | null, component?: Function | string, props?: Object);
+    constructor(parent: Unit | null, ...args: any[]);
     get element(): UnitElement;
     get components(): Function[];
     start(): void;
     stop(): void;
     finalize(): void;
     reboot(): void;
+    append(...args: any[]): void;
     static initialize(unit: Unit, anchor: UnitElement | null): void;
     static finalize(unit: Unit): void;
     static nest(unit: Unit, tag: string): UnitElement;
@@ -93,15 +87,22 @@ declare class Unit {
     static scope(snapshot: Snapshot, func: Function, ...args: any[]): any;
     static snapshot(unit: Unit): Snapshot;
     static context(unit: Unit, key: string, value?: any): any;
-    static componentUnits: MapSet<Function, Unit>;
+    static component2units: MapSet<Function, Unit>;
     static find(component: Function): Unit[];
-    static typeUnits: MapSet<string, Unit>;
+    static type2units: MapSet<string, Unit>;
     on(type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     off(type?: string, listener?: Function): void;
     emit(type: string, ...args: any[]): void;
     static subon(unit: Unit, target: UnitElement | Window | Document, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
     static suboff(unit: Unit, target: UnitElement | Window | Document | null, type?: string, listener?: Function): void;
 }
+declare class UnitPromise {
+    private promise;
+    constructor(promise: Promise<any>);
+    then(callback: Function): UnitPromise;
+    catch(callback: Function): UnitPromise;
+    finally(callback: Function): UnitPromise;
+}
 
 interface CreateUnit {
     /**
@@ -223,36 +224,26 @@ declare const xnew$1: CreateUnit & {
      * buttons.forEach(btn => btn.finalize())
      */
     find(component: Function): Unit[];
-    /**
-     * Appends new components to existing component(s) in the tree
-     * @param anchor - Component function or Unit instance to append to
-     * @param args - Arguments to pass to xnew for creating child components
-     * @throws Error if anchor parameter is invalid
-     * @example
-     * xnew.append(MyContainer, ChildComponent, { prop: 'value' })
-     * xnew.append(unitInstance, AnotherComponent)
-     */
-    append(anchor: Unit, ...args: any[]): void;
     /**
      * Executes a callback once after a delay, managed by component lifecycle
-     * @param callback - Function to execute after delay
-     * @param delay - Delay in milliseconds
+     * @param timeout - Function to execute after Interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to cancel the timeout
      * @example
      * const timer = xnew.timeout(() => console.log('Delayed'), 1000)
      * // Cancel if needed: timer.clear()
      */
-    timeout(callback: Function, delay: number): any;
+    timeout(timeout: Function, interval?: number): any;
     /**
      * Executes a callback repeatedly at specified intervals, managed by component lifecycle
-     * @param callback - Function to execute at each interval
-     * @param delay - Interval duration in milliseconds
+     * @param timeout - Function to execute at each interval
+     * @param interval - Interval duration in milliseconds
      * @returns Object with clear() method to stop the interval
      * @example
      * const timer = xnew.interval(() => console.log('Tick'), 1000)
      * // Stop when needed: timer.clear()
      */
-    interval(callback: Function, delay: number): any;
+    interval(timeout: Function, interval: number): any;
     /**
      * Creates a transition animation with easing, executing callback with progress values
      * @param callback - Function called with progress value (0.0 to 1.0)
@@ -260,13 +251,13 @@ declare const xnew$1: CreateUnit & {
      * @param easing - Easing function: 'linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out' (default: 'linear')
      * @returns Object with clear() and next() methods for controlling transitions
      * @example
-     * xnew.transition(progress => {
-     *   element.style.opacity = progress
-     * }, 500, 'ease-out').next(progress => {
-     *   element.style.transform = `scale(${progress})`
+     * xnew.transition(p => {
+     *   element.style.opacity = p
+     * }, 500, 'ease-out').transition(p => {
+     *   element.style.transform = `scale(${p})`
      * }, 300)
      */
-    transition(callback: Function, interval: number, easing?: string): any;
+    transition(transition: Function, interval?: number, easing?: string): any;
     /**
      * Creates an event listener manager for a target element with automatic cleanup
      * @param target - Element, Window, or Document to attach listeners to
@@ -292,11 +283,29 @@ declare const xnew$1: CreateUnit & {
     capture(execute: (unit: Unit) => boolean | void): void;
 };
 
-declare function ResizeEvent(resize: Unit): void;
-
-declare function PointerEvent(unit: Unit): void;
+declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
+    open?: boolean;
+    duration?: number;
+    easing?: string;
+}): {
+    toggle(): void;
+    open(): void;
+    close(): void;
+};
+declare function AccordionHeader(header: Unit, {}?: {}): void;
+declare function AccordionBullet(bullet: Unit, { type }?: {
+    type?: string;
+}): void;
+declare function AccordionContent(content: Unit, {}?: {}): {
+    transition({ element, rate }: {
+        element: HTMLElement;
+        rate: number;
+    }): void;
+};
 
+declare function ResizeEvent(resize: Unit): void;
 declare function KeyboardEvent(unit: Unit): void;
+declare function PointerEvent(unit: Unit): void;
 
 declare function Screen(screen: Unit, { width, height, fit }?: {
     width?: number | undefined;
@@ -348,26 +357,6 @@ declare function TabContent(content: Unit, { key }?: {
     }): void;
 };
 
-declare function AccordionFrame(frame: Unit, { open, duration, easing }?: {
-    open?: boolean;
-    duration?: number;
-    easing?: string;
-}): {
-    toggle(): void;
-    open(): void;
-    close(): void;
-};
-declare function AccordionHeader(header: Unit, {}?: {}): void;
-declare function AccordionBullet(bullet: Unit, { type }?: {
-    type?: string;
-}): void;
-declare function AccordionContent(content: Unit, {}?: {}): {
-    transition({ element, rate }: {
-        element: HTMLElement;
-        rate: number;
-    }): void;
-};
-
 declare function DragFrame(frame: Unit, { x, y }?: {
     x?: number;
     y?: number;
@@ -395,7 +384,11 @@ declare function DirectionalPad(self: Unit, { size, diagonal, fill, fillOpacity,
     strokeLinejoin?: string;
 }): void;
 
-declare function load(path: string): AudioFile;
+declare const audio: {
+    load(path: string): AudioFile;
+    synthesizer(props: SynthProps): Synthesizer;
+    volume: number;
+};
 declare class AudioFile {
     buffer?: AudioBuffer;
     promise: Promise<void>;
@@ -406,8 +399,6 @@ declare class AudioFile {
     play(offset?: number, loop?: boolean): void;
     pause(): number | undefined;
 }
-
-declare function synthesizer(props: SynthProps): Synthesizer;
 type SynthProps = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;
@@ -468,12 +459,6 @@ declare const basics: {
     AnalogStick: typeof AnalogStick;
     DirectionalPad: typeof DirectionalPad;
 };
-declare const audio: {
-    master: GainNode;
-    context: AudioContext;
-    synthesizer: typeof synthesizer;
-    load: typeof load;
-};
 declare namespace xnew {
     type Unit = InstanceType<typeof Unit>;
 }