@mulsense/xnew 0.6.7 → 0.7.0

package/README.md

@@ -13,7 +13,7 @@ providing a flexible architecture well-suited for applications with dynamic scen
 ### Via CDN
 Include the following script in your HTML file:
 ```html
-<script src="https://unpkg.com/@mulsense/xnew@0.6.x/dist/xnew.js"></script>
+<script src="https://unpkg.com/@mulsense/xnew@0.7.x/dist/xnew.js"></script>
 ```
 
 ### Via CDN (ESM)
@@ -22,7 +22,7 @@ Use the ES module version with an import map:
 <script type="importmap">
 {
     "imports": {
-        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.6.x/dist/xnew.mjs"
+        "@mulsense/xnew": "https://unpkg.com/@mulsense/xnew@0.7.x/dist/xnew.mjs"
     }
 }
 </script>
@@ -37,7 +37,7 @@ import xnew from '@mulsense/xnew';
 ### Via npm
 Install `xnew` using npm:
 ```bash
-npm install @mulsense/xnew@0.6.x
+npm install @mulsense/xnew@0.7.x
 ```
 
 Then import it in your JavaScript file:

package/dist/addons/xpixi.js

@@ -29,6 +29,11 @@
         },
         nest(object) {
             xnew(Nest, { object });
+            xnew.extend(() => {
+                return {
+                    get pixiObject() { return object; }
+                };
+            });
             return object;
         },
         get renderer() {
@@ -52,7 +57,7 @@
         })).then((value) => {
             renderer = value;
         });
-        let scene = new PIXI__namespace.Container();
+        const scene = new PIXI__namespace.Container();
         return {
             get renderer() { return renderer; },
             get scene() { return scene; },

package/dist/addons/xpixi.mjs

@@ -7,6 +7,11 @@ var xpixi = {
     },
     nest(object) {
         xnew(Nest, { object });
+        xnew.extend(() => {
+            return {
+                get pixiObject() { return object; }
+            };
+        });
         return object;
     },
     get renderer() {
@@ -30,7 +35,7 @@ function Root(unit, { canvas }) {
     })).then((value) => {
         renderer = value;
     });
-    let scene = new PIXI.Container();
+    const scene = new PIXI.Container();
     return {
         get renderer() { return renderer; },
         get scene() { return scene; },

package/dist/addons/xthree.js

@@ -29,6 +29,11 @@
         },
         nest(object) {
             xnew(Nest, { object });
+            xnew.extend(() => {
+                return {
+                    get threeObject() { return object; }
+                };
+            });
             return object;
         },
         get renderer() {
@@ -67,6 +72,17 @@
         parent.add(object);
         unit.on('finalize', () => {
             parent.remove(object);
+            object.traverse((obj) => {
+                if (obj.isMesh) {
+                    obj.geometry.dispose();
+                    if (Array.isArray(obj.material)) {
+                        obj.material.forEach((mat) => mat.dispose());
+                    }
+                    else {
+                        obj.material.dispose();
+                    }
+                }
+            });
         });
         return {
             get threeObject() { return object; },

package/dist/addons/xthree.mjs

@@ -7,6 +7,11 @@ var xthree = {
     },
     nest(object) {
         xnew(Nest, { object });
+        xnew.extend(() => {
+            return {
+                get threeObject() { return object; }
+            };
+        });
         return object;
     },
     get renderer() {
@@ -45,6 +50,17 @@ function Nest(unit, { object }) {
     parent.add(object);
     unit.on('finalize', () => {
         parent.remove(object);
+        object.traverse((obj) => {
+            if (obj.isMesh) {
+                obj.geometry.dispose();
+                if (Array.isArray(obj.material)) {
+                    obj.material.forEach((mat) => mat.dispose());
+                }
+                else {
+                    obj.material.dispose();
+                }
+            }
+        });
     });
     return {
         get threeObject() { return object; },

package/dist/xnew.d.ts

@@ -44,6 +44,7 @@ declare class Eventor {
 }
 
 type UnitElement = HTMLElement | SVGElement;
+type UnitArgs = [Component?: Function | string, props?: Object] | [target: UnitElement | string, Component?: Function | string, props?: Object];
 interface Context {
     previous: Context | null;
     key?: any;
@@ -55,39 +56,38 @@ interface Snapshot {
     element: UnitElement;
     Component: Function | null;
 }
-interface Internal {
-    parent: Unit | null;
-    ancestors: Unit[];
-    children: Unit[];
-    state: string;
-    tostart: boolean;
-    protected: boolean;
-    promises: UnitPromise[];
-    results: Record<string, any>;
-    defines: Record<string, any>;
-    systems: Record<string, {
-        listener: Function;
-        execute: Function;
-    }[]>;
-    currentElement: UnitElement;
-    currentContext: Context;
-    currentComponent: Function | null;
-    nestElements: {
-        element: UnitElement;
-        owned: boolean;
-    }[];
-    Components: Function[];
-    listeners: MapMap<string, Function, {
-        element: UnitElement;
-        Component: Function | null;
-        execute: Function;
-    }>;
-    eventor: Eventor;
-}
 declare class Unit {
     [key: string]: any;
-    _: Internal;
-    constructor(parent: Unit | null, target: UnitElement | string | null, Component?: Function | string | number, props?: Object);
+    _: {
+        parent: Unit | null;
+        ancestors: Unit[];
+        children: Unit[];
+        state: string;
+        tostart: boolean;
+        protected: boolean;
+        promises: UnitPromise[];
+        results: Record<string, any>;
+        defines: Record<string, any>;
+        systems: Record<string, {
+            listener: Function;
+            execute: Function;
+        }[]>;
+        currentElement: UnitElement;
+        currentContext: Context;
+        currentComponent: Function | null;
+        nestElements: {
+            element: UnitElement;
+            owned: boolean;
+        }[];
+        Components: Function[];
+        listeners: MapMap<string, Function, {
+            element: UnitElement;
+            Component: Function | null;
+            execute: Function;
+        }>;
+        eventor: Eventor;
+    };
+    constructor(parent: Unit | null, ...args: UnitArgs);
     get element(): UnitElement;
     start(): void;
     stop(): void;
@@ -120,49 +120,26 @@ declare class Unit {
     static emit(type: string, props?: object): void;
 }
 declare class UnitPromise {
-    promise: Promise<any>;
-    Component: Function | null;
-    constructor(promise: Promise<any>, Component: Function | null);
+    private promise;
+    constructor(promise: Promise<any>);
     then(callback: Function): UnitPromise;
     catch(callback: Function): UnitPromise;
     finally(callback: Function): UnitPromise;
+    static all(promises: UnitPromise[]): UnitPromise;
     private wrap;
 }
 declare class UnitTimer {
     private unit;
     private queue;
     clear(): void;
-    timeout(callback: Function, duration?: number): UnitTimer;
-    interval(callback: Function, duration?: number, iterations?: number): UnitTimer;
+    timeout(timeout: Function, duration?: number): UnitTimer;
+    interval(timeout: Function, duration?: number, iterations?: number): UnitTimer;
     transition(transition: Function, duration?: number, easing?: string): UnitTimer;
     private static execute;
     private static next;
     private static Component;
 }
 
-interface CreateUnit {
-    /**
-     * creates a new Unit component
-     * @param Component - component function
-     * @param props - properties for component function
-     * @returns a new Unit instance
-     * @example
-     * const unit = xnew(MyComponent, { data: 0 })
-     */
-    (Component?: Function | string, props?: Object): Unit;
-    /**
-     * creates a new Unit component
-     * @param target - HTMLElement | SVGElement, or HTML tag for new element
-     * @param Component - component function
-     * @param props - properties for component function
-     * @returns a new Unit instance
-     * @example
-     * const unit = xnew(element, MyComponent, { data: 0 })
-     * const unit = xnew('<div>', MyComponent, { data: 0 })
-     */
-    (target: HTMLElement | SVGElement | string, Component?: Function | string, props?: Object): Unit;
-}
-
 interface TransitionOptions {
     duration?: number;
     easing?: string;
@@ -179,10 +156,13 @@ declare function Accordion(unit: Unit): void;
 declare function Popup(unit: Unit): void;
 
 type ScreenFit = 'contain' | 'cover';
-declare function Screen(unit: Unit, { aspect, fit }?: {
-    aspect?: number;
+declare function Screen(unit: Unit, { width, height, fit }?: {
+    width?: number;
+    height?: number;
     fit?: ScreenFit;
-}): void;
+}): {
+    readonly canvas: UnitElement;
+};
 
 declare function AnalogStick(unit: Unit, { stroke, strokeOpacity, strokeWidth, strokeLinejoin, fill, fillOpacity }?: {
     stroke?: string;
@@ -227,12 +207,21 @@ declare function Panel(unit: Unit, { params }: PanelOptions): {
     separator(): void;
 };
 
+declare function Scene(unit: Unit): void;
 declare function Flow(unit: Unit): {
     get scene(): Unit | null;
     set scene(value: Unit);
-    next(Component: Function, props?: any): void;
+    next(Component: Function, props?: any, callback?: Function): void;
 };
 
+declare class XImage {
+    canvas: HTMLCanvasElement;
+    constructor(canvas: HTMLCanvasElement);
+    constructor(width: number, height: number);
+    clip(x: number, y: number, width: number, height: number): XImage;
+    download(filename: string): void;
+}
+
 type SynthesizerOptions = {
     oscillator: OscillatorOptions;
     amp: AmpOptions;
@@ -277,17 +266,22 @@ declare namespace xnew {
     type Unit = InstanceType<typeof Unit>;
     type UnitTimer = InstanceType<typeof UnitTimer>;
 }
-declare const xnew: CreateUnit & {
+declare const xnew: ((...args: UnitArgs) => Unit) & {
     nest(target: UnitElement | string): HTMLElement | SVGElement;
     extend(Component: Function, props?: Object): {
         [key: string]: any;
     };
+    append(parent: Unit, ...args: UnitArgs): void;
     context(key: any): any;
     promise(promise: Function | Promise<any> | Unit): UnitPromise;
     then(callback: Function): UnitPromise;
     catch(callback: Function): UnitPromise;
-    commit(object?: Record<string, any>): void;
     finally(callback: Function): UnitPromise;
+    resolvers(): {
+        resolve(): void;
+        reject(): void;
+    };
+    output(object?: Record<string, any>): void;
     scope(callback: any): any;
     find(Component: Function): Unit[];
     emit(type: string, ...args: any[]): void;
@@ -305,12 +299,16 @@ declare const xnew: CreateUnit & {
         Accordion: typeof Accordion;
         Popup: typeof Popup;
         Flow: typeof Flow;
+        Scene: typeof Scene;
     };
     audio: {
         load(path: string): UnitPromise;
         synthesizer(props: SynthesizerOptions): Synthesizer;
         volume: number;
     };
+    image: {
+        from(canvas: HTMLCanvasElement): XImage;
+    };
 };
 
 export { xnew as default };