@mulsense/xnew 0.5.3 → 0.5.4

package/dist/xnew.d.ts

@@ -20,6 +20,14 @@ declare class MapMap<Key1, Key2, Value> extends Map<Key1, Map<Key2, Value>> {
     delete(key1: Key1, key2: Key2): boolean;
 }
 
+interface TimerOptions {
+    transition?: Function;
+    timeout?: Function;
+    duration: number;
+    iterations: number;
+    easing?: string;
+}
+
 declare class Eventor {
     private map;
     add(element: HTMLElement | SVGElement, type: string, listener: Function, options?: boolean | AddEventListenerOptions): void;
@@ -48,6 +56,21 @@ declare class UnitPromise {
     catch(callback: Function): UnitPromise;
     finally(callback: Function): UnitPromise;
 }
+declare class UnitTimer {
+    private unit;
+    private stack;
+    constructor(options: TimerOptions);
+    clear(): void;
+    timeout(timeout: Function, duration?: number): this;
+    iteration(timeout: Function, duration?: number, iterations?: number): this;
+    transition(transition: Function, duration?: number, easing?: string): this;
+    static execute(timer: UnitTimer, options: TimerOptions): void;
+    static next(timer: UnitTimer): void;
+    static Component(unit: Unit, { options, snapshot }: {
+        options: TimerOptions;
+        snapshot: Snapshot;
+    }): void;
+}
 interface Context {
     stack: Context | null;
     key?: string;
@@ -77,7 +100,10 @@ interface Internal {
     children: Unit[];
     promises: UnitPromise[];
     elements: UnitElement[];
-    components: Function[];
+    extends: {
+        component: Function;
+        defines: Record<string, any>;
+    }[];
     listeners: MapMap<string, Function, {
         element: UnitElement;
         component: Function | null;
@@ -149,20 +175,12 @@ interface CreateUnit {
     (target: HTMLElement | SVGElement | string, Component?: Function | string, props?: Object): Unit;
 }
 
-declare function Accordion(unit: Unit, { open, duration, easing }?: {
-    open?: boolean;
-    duration?: number;
-    easing?: string;
+declare function OpenAndClose(unit: Unit, { state: initialState }?: {
+    state?: number;
 }): {
-    toggle(): void;
-    open(): void;
-    close(): void;
-};
-declare function Modal(unit: Unit, { duration, easing }?: {
-    duration?: number;
-    easing?: string;
-}): {
-    close(): void;
+    toggle(duration?: number, easing?: string): void;
+    open(duration?: number, easing?: string): void;
+    close(duration?: number, easing?: string): void;
 };
 
 type ScreenFit = 'contain' | 'cover' | 'fill' | 'resize';
@@ -235,12 +253,16 @@ declare class Synthesizer {
 
 declare namespace xnew {
     type Unit = InstanceType<typeof Unit>;
+    type UnitTimer = InstanceType<typeof UnitTimer>;
 }
 declare const xnew: CreateUnit & {
     nest(tag: string, textContent?: string | number): HTMLElement | SVGElement;
     extend(component: Function, props?: Object): {
         [key: string]: any;
     };
+    internal(component: Function, props?: Object): {
+        [key: string]: any;
+    };
     context(key: string, value?: any): any;
     promise(promise: Promise<any>): UnitPromise;
     then(callback: Function): UnitPromise;
@@ -249,15 +271,16 @@ declare const xnew: CreateUnit & {
     scope(callback: any): any;
     find(component: Function): Unit[];
     emit(type: string, ...args: any[]): void;
-    timeout(timeout: Function, duration?: number): any;
-    interval(timeout: Function, duration: number, iterations?: number): any;
-    transition(transition: Function, duration?: number, easing?: string): any;
+    timeout(timeout: Function, duration?: number): UnitTimer;
+    interval(timeout: Function, duration: number, iterations?: number): UnitTimer;
+    transition(transition: Function, duration?: number, easing?: string): UnitTimer;
     protect(): void;
 } & {
     basics: {
         Screen: typeof Screen;
-        Modal: typeof Modal;
-        Accordion: typeof Accordion;
+        Modal: any;
+        Accordion: any;
+        OpenAndClose: typeof OpenAndClose;
         AnalogStick: typeof AnalogStick;
         DPad: typeof DPad;
     };

package/dist/xnew.js

@@ -676,7 +676,7 @@
                 children: [],
                 elements: [],
                 promises: [],
-                components: [],
+                extends: [],
                 listeners: new MapMap(),
                 defines: {},
                 systems: { start: [], update: [], render: [], stop: [], finalize: [] },
@@ -698,16 +698,14 @@
                 unit._.children.forEach((child) => child.finalize());
                 unit._.systems.finalize.forEach(({ execute }) => execute());
                 unit.off();
-                unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
+                unit._.extends.forEach(({ component }) => Unit.component2units.delete(component, unit));
                 if (unit._.elements.length > 0) {
                     unit._.baseElement.removeChild(unit._.elements[0]);
                     unit._.currentElement = unit._.baseElement;
                 }
                 // reset defines
                 Object.keys(unit._.defines).forEach((key) => {
-                    if (SYSTEM_EVENTS.includes(key) === false) {
-                        delete unit[key];
-                    }
+                    delete unit[key];
                 });
                 unit._.defines = {};
                 unit._.state = 'finalized';
@@ -739,34 +737,42 @@
         }
         static extend(unit, component, props) {
             var _a;
-            unit._.components.push(component);
-            Unit.component2units.add(component, unit);
-            const backupComponent = unit._.currentComponent;
-            unit._.currentComponent = component;
-            const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
-            unit._.currentComponent = backupComponent;
-            Object.keys(defines).forEach((key) => {
-                if (unit[key] !== undefined && unit._.defines[key] === undefined) {
-                    throw new Error(`The property "${key}" already exists.`);
-                }
-                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
-                const wrapper = { configurable: true, enumerable: true };
-                const snapshot = Unit.snapshot(unit);
-                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
-                    wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
-                if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                    wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
-                if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
-                }
-                else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
-                    wrapper.writable = true;
-                    wrapper.value = descriptor.value;
-                }
-                Object.defineProperty(unit._.defines, key, wrapper);
-                Object.defineProperty(unit, key, wrapper);
-            });
-            return Object.assign({}, unit._.defines);
+            const find = unit._.extends.find(({ component: c }) => c === component);
+            if (find !== undefined) {
+                throw new Error(`The component is already extended.`);
+            }
+            else {
+                const backupComponent = unit._.currentComponent;
+                unit._.currentComponent = component;
+                const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+                unit._.currentComponent = backupComponent;
+                Object.keys(defines).forEach((key) => {
+                    if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                        throw new Error(`The property "${key}" already exists.`);
+                    }
+                    const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+                    const wrapper = { configurable: true, enumerable: true };
+                    const snapshot = Unit.snapshot(unit);
+                    if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
+                        if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
+                            wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
+                        if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
+                            wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
+                    }
+                    else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                        wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
+                    }
+                    else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
+                        wrapper.get = () => defines[key];
+                        wrapper.set = (value) => defines[key] = value;
+                    }
+                    Object.defineProperty(unit._.defines, key, wrapper);
+                    Object.defineProperty(unit, key, wrapper);
+                });
+                Unit.component2units.add(component, unit);
+                unit._.extends.push({ component, defines });
+                return defines;
+            }
         }
         static start(unit) {
             if (unit._.tostart === false)
@@ -956,7 +962,7 @@
          * Extends the current component with another component's functionality
          * @param component - Component function to extend with
          * @param props - Optional properties to pass to the extended component
-         * @returns The extended component's return value
+         * @returns defines returned by the extended component
          * @throws Error if called after component initialization
          * @example
          * const api = xnew.extend(BaseComponent, { data: {} })
@@ -1173,51 +1179,48 @@
         },
     });
 
-    function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
-        xnew$1.context('xnew.accordion', unit);
-        let state = open ? 1.0 : 0.0;
-        let sign = open ? +1 : -1;
+    function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
+        let state = Math.max(0.0, Math.min(1.0, initialState));
+        let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
         let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
         return {
-            toggle() {
-                sign > 0 ? unit.close() : unit.open();
-            },
-            open() {
-                if (sign < 0)
-                    transition();
+            toggle(duration = 200, easing = 'ease') {
+                if (direction === null || direction < 0) {
+                    unit.open(duration, easing);
+                }
+                else {
+                    unit.close(duration, easing);
+                }
             },
-            close() {
-                if (sign > 0)
-                    transition();
+            open(duration = 200, easing = 'ease') {
+                if (direction === null || direction < 0) {
+                    direction = +1;
+                    const d = 1 - state;
+                    timer === null || timer === void 0 ? void 0 : timer.clear();
+                    timer = xnew$1.transition((x) => {
+                        const y = x < 1.0 ? (1 - x) * d : 0.0;
+                        state = 1.0 - y;
+                        xnew$1.emit('-transition', { state, type: '-transition' });
+                    }, duration * d, easing)
+                        .timeout(() => {
+                        xnew$1.emit('-opened', { state, type: '-opened' });
+                    });
+                }
             },
-        };
-        function transition() {
-            sign *= -1;
-            const d = sign > 0 ? 1 - state : state;
-            timer.clear();
-            timer = xnew$1.transition((x) => {
-                const y = x < 1.0 ? (1 - x) * d : 0.0;
-                state = sign > 0 ? 1.0 - y : y;
-                xnew$1.emit('-transition', { state });
-            }, duration * d, easing);
-        }
-    }
-    function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
-        xnew$1.context('xnew.modal', unit);
-        let state = 0.0;
-        let timer = xnew$1.transition((x) => {
-            state = x;
-            xnew$1.emit('-transition', { state });
-        }, duration, easing);
-        return {
-            close() {
-                const d = state;
-                timer.clear();
-                timer = xnew$1.transition((x) => {
-                    state = x < 1.0 ? (1 - x) * d : 0.0;
-                    xnew$1.emit('-transition', { state });
-                }, duration * d, easing)
-                    .timeout(() => unit.finalize());
+            close(duration = 200, easing = 'ease') {
+                if (direction === null || direction > 0) {
+                    direction = -1;
+                    const d = state;
+                    timer === null || timer === void 0 ? void 0 : timer.clear();
+                    timer = xnew$1.transition((x) => {
+                        const y = x < 1.0 ? (1 - x) * d : 0.0;
+                        state = y;
+                        xnew$1.emit('-transition', { state, type: '-transition' });
+                    }, duration * d, easing)
+                        .timeout(() => {
+                        xnew$1.emit('-closed', { state, type: '-closed' });
+                    });
+                }
             },
         };
     }
@@ -1613,8 +1616,7 @@
 
     const basics = {
         Screen,
-        Modal,
-        Accordion,
+        OpenAndClose,
         AnalogStick,
         DPad,
     };

package/dist/xnew.mjs

@@ -670,7 +670,7 @@ class Unit {
             children: [],
             elements: [],
             promises: [],
-            components: [],
+            extends: [],
             listeners: new MapMap(),
             defines: {},
             systems: { start: [], update: [], render: [], stop: [], finalize: [] },
@@ -692,16 +692,14 @@ class Unit {
             unit._.children.forEach((child) => child.finalize());
             unit._.systems.finalize.forEach(({ execute }) => execute());
             unit.off();
-            unit._.components.forEach((component) => Unit.component2units.delete(component, unit));
+            unit._.extends.forEach(({ component }) => Unit.component2units.delete(component, unit));
             if (unit._.elements.length > 0) {
                 unit._.baseElement.removeChild(unit._.elements[0]);
                 unit._.currentElement = unit._.baseElement;
             }
             // reset defines
             Object.keys(unit._.defines).forEach((key) => {
-                if (SYSTEM_EVENTS.includes(key) === false) {
-                    delete unit[key];
-                }
+                delete unit[key];
             });
             unit._.defines = {};
             unit._.state = 'finalized';
@@ -733,34 +731,42 @@ class Unit {
     }
     static extend(unit, component, props) {
         var _a;
-        unit._.components.push(component);
-        Unit.component2units.add(component, unit);
-        const backupComponent = unit._.currentComponent;
-        unit._.currentComponent = component;
-        const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
-        unit._.currentComponent = backupComponent;
-        Object.keys(defines).forEach((key) => {
-            if (unit[key] !== undefined && unit._.defines[key] === undefined) {
-                throw new Error(`The property "${key}" already exists.`);
-            }
-            const descriptor = Object.getOwnPropertyDescriptor(defines, key);
-            const wrapper = { configurable: true, enumerable: true };
-            const snapshot = Unit.snapshot(unit);
-            if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
-                wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
-            if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
-                wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
-            if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
-                wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
-            }
-            else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
-                wrapper.writable = true;
-                wrapper.value = descriptor.value;
-            }
-            Object.defineProperty(unit._.defines, key, wrapper);
-            Object.defineProperty(unit, key, wrapper);
-        });
-        return Object.assign({}, unit._.defines);
+        const find = unit._.extends.find(({ component: c }) => c === component);
+        if (find !== undefined) {
+            throw new Error(`The component is already extended.`);
+        }
+        else {
+            const backupComponent = unit._.currentComponent;
+            unit._.currentComponent = component;
+            const defines = (_a = component(unit, props)) !== null && _a !== void 0 ? _a : {};
+            unit._.currentComponent = backupComponent;
+            Object.keys(defines).forEach((key) => {
+                if (unit[key] !== undefined && unit._.defines[key] === undefined) {
+                    throw new Error(`The property "${key}" already exists.`);
+                }
+                const descriptor = Object.getOwnPropertyDescriptor(defines, key);
+                const wrapper = { configurable: true, enumerable: true };
+                const snapshot = Unit.snapshot(unit);
+                if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.get) || (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)) {
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.get)
+                        wrapper.get = (...args) => Unit.scope(snapshot, descriptor.get, ...args);
+                    if (descriptor === null || descriptor === void 0 ? void 0 : descriptor.set)
+                        wrapper.set = (...args) => Unit.scope(snapshot, descriptor.set, ...args);
+                }
+                else if (typeof (descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) === 'function') {
+                    wrapper.value = (...args) => Unit.scope(snapshot, descriptor.value, ...args);
+                }
+                else if ((descriptor === null || descriptor === void 0 ? void 0 : descriptor.value) !== undefined) {
+                    wrapper.get = () => defines[key];
+                    wrapper.set = (value) => defines[key] = value;
+                }
+                Object.defineProperty(unit._.defines, key, wrapper);
+                Object.defineProperty(unit, key, wrapper);
+            });
+            Unit.component2units.add(component, unit);
+            unit._.extends.push({ component, defines });
+            return defines;
+        }
     }
     static start(unit) {
         if (unit._.tostart === false)
@@ -950,7 +956,7 @@ const xnew$1 = Object.assign(function (...args) {
      * Extends the current component with another component's functionality
      * @param component - Component function to extend with
      * @param props - Optional properties to pass to the extended component
-     * @returns The extended component's return value
+     * @returns defines returned by the extended component
      * @throws Error if called after component initialization
      * @example
      * const api = xnew.extend(BaseComponent, { data: {} })
@@ -1167,51 +1173,48 @@ const xnew$1 = Object.assign(function (...args) {
     },
 });
 
-function Accordion(unit, { open = false, duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.accordion', unit);
-    let state = open ? 1.0 : 0.0;
-    let sign = open ? +1 : -1;
+function OpenAndClose(unit, { state: initialState = 0.0 } = {}) {
+    let state = Math.max(0.0, Math.min(1.0, initialState));
+    let direction = state === 1.0 ? +1 : (state === 0.0 ? -1 : null);
     let timer = xnew$1.timeout(() => xnew$1.emit('-transition', { state }));
     return {
-        toggle() {
-            sign > 0 ? unit.close() : unit.open();
-        },
-        open() {
-            if (sign < 0)
-                transition();
+        toggle(duration = 200, easing = 'ease') {
+            if (direction === null || direction < 0) {
+                unit.open(duration, easing);
+            }
+            else {
+                unit.close(duration, easing);
+            }
         },
-        close() {
-            if (sign > 0)
-                transition();
+        open(duration = 200, easing = 'ease') {
+            if (direction === null || direction < 0) {
+                direction = +1;
+                const d = 1 - state;
+                timer === null || timer === void 0 ? void 0 : timer.clear();
+                timer = xnew$1.transition((x) => {
+                    const y = x < 1.0 ? (1 - x) * d : 0.0;
+                    state = 1.0 - y;
+                    xnew$1.emit('-transition', { state, type: '-transition' });
+                }, duration * d, easing)
+                    .timeout(() => {
+                    xnew$1.emit('-opened', { state, type: '-opened' });
+                });
+            }
         },
-    };
-    function transition() {
-        sign *= -1;
-        const d = sign > 0 ? 1 - state : state;
-        timer.clear();
-        timer = xnew$1.transition((x) => {
-            const y = x < 1.0 ? (1 - x) * d : 0.0;
-            state = sign > 0 ? 1.0 - y : y;
-            xnew$1.emit('-transition', { state });
-        }, duration * d, easing);
-    }
-}
-function Modal(unit, { duration = 200, easing = 'ease' } = {}) {
-    xnew$1.context('xnew.modal', unit);
-    let state = 0.0;
-    let timer = xnew$1.transition((x) => {
-        state = x;
-        xnew$1.emit('-transition', { state });
-    }, duration, easing);
-    return {
-        close() {
-            const d = state;
-            timer.clear();
-            timer = xnew$1.transition((x) => {
-                state = x < 1.0 ? (1 - x) * d : 0.0;
-                xnew$1.emit('-transition', { state });
-            }, duration * d, easing)
-                .timeout(() => unit.finalize());
+        close(duration = 200, easing = 'ease') {
+            if (direction === null || direction > 0) {
+                direction = -1;
+                const d = state;
+                timer === null || timer === void 0 ? void 0 : timer.clear();
+                timer = xnew$1.transition((x) => {
+                    const y = x < 1.0 ? (1 - x) * d : 0.0;
+                    state = y;
+                    xnew$1.emit('-transition', { state, type: '-transition' });
+                }, duration * d, easing)
+                    .timeout(() => {
+                    xnew$1.emit('-closed', { state, type: '-closed' });
+                });
+            }
         },
     };
 }
@@ -1607,8 +1610,7 @@ class Synthesizer {
 
 const basics = {
     Screen,
-    Modal,
-    Accordion,
+    OpenAndClose,
     AnalogStick,
     DPad,
 };

package/package.json

@@ -4,7 +4,7 @@
   "keywords": [
     "Component-Oriented Programming"
   ],
-  "version": "0.5.3",
+  "version": "0.5.4",
   "main": "dist/xnew.js",
   "module": "dist/xnew.mjs",
   "types": "dist/xnew.d.ts",