@esportsplus/reactivity 0.2.3 → 0.2.4

package/build/reactive/array.d.ts

@@ -1,49 +1,76 @@
-import { Listener, Options, Signal } from '../types';
-import { ReactiveObject } from './object';
+import { Infer, Prettify } from '../types';
+import { Listener, Options, ReactiveObject, Signal } from '../types';
+type API<T> = Prettify<{
+    [index: number]: Infer<T>;
+} & ReturnType<typeof methods<T>>>;
 type Events<T> = {
     pop: {
-        item: R<T>;
+        item: Item<T>;
     };
     push: {
-        items: R<T>[];
+        items: Item<T>[];
     };
     reverse: undefined;
+    set: {
+        index: number;
+        item: Item<T>;
+    };
     shift: {
-        item: R<T>;
+        item: Item<T>;
     };
     sort: undefined;
     splice: {
         deleteCount: number;
-        items: R<T>[];
+        items: Item<T>[];
         start: number;
     };
     unshift: {
-        items: R<T>[];
+        items: Item<T>[];
     };
 };
-type R<T> = Signal<T> | ReactiveObject<T extends Record<PropertyKey, unknown> ? {
-    [K in keyof T]: T[K];
-} : never>;
-declare class ReactiveArray<T> extends Array<R<T>> {
+type Item<T> = T extends Record<PropertyKey, unknown> ? ReactiveObject<T> : Signal<T>;
+declare class ReactiveArray<T> extends Array<Item<T>> {
     private options;
-    private self;
+    private proxy;
     private signal;
-    constructor(data: R<T>[], options?: Options);
+    constructor(data: Item<T>[], proxy: API<T>, options?: Options);
     set length(n: number);
-    at(index: number): any;
+    at(i: number): any;
     dispatch<E extends keyof Events<T>>(event: E, data?: Events<T>[E]): void;
     dispose(): void;
-    map<U>(fn: (this: T[], value: T, i: number) => U): U[];
+    map<U>(fn: (this: API<T>, value: T, i: number) => U, i?: number, n?: number): U[];
     on<E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>): void;
     once<E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>): void;
-    pop(): R<T> | undefined;
+    pop(): Item<T> | undefined;
     push(...input: T[]): number;
     reverse(): this;
-    shift(): R<T> | undefined;
-    sort(): this;
-    splice(start: number, deleteCount?: number, ...input: T[]): R<T>[];
+    shift(): Item<T> | undefined;
+    sort(fn: (a: T, b: T) => number): this;
+    splice(start: number, deleteCount?: number, ...input: T[]): Item<T>[];
     unshift(...input: T[]): number;
 }
-declare const _default: <T>(input: T[], options?: Options) => any;
+declare function methods<T>(a: ReactiveArray<T>): Prettify<{
+    get constructor(): typeof a['constructor'];
+    get length(): number;
+    set length(n: number);
+} & Pick<typeof a, 'at' | 'dispatch' | 'dispose' | 'map' | 'on' | 'once' | 'pop' | 'push' | 'reverse' | 'shift' | 'sort' | 'splice' | 'unshift'>>;
+declare const _default: <T>(input: T[], options?: Options) => {
+    [x: number]: Infer<T>;
+    readonly constructor: Function;
+    length: number;
+    dispatch: <E extends keyof Events<T>>(event: E, data?: Events<T>[E] | undefined) => void;
+    dispose: () => void;
+    on: <E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>) => void;
+    once: <E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>) => void;
+    at: (i: number) => any;
+    map: <U>(fn: (this: any, value: T, i: number) => U, i?: number, n?: number) => U[];
+    pop: () => Item<T> | undefined;
+    push: (...input: T[]) => number;
+    reverse: () => ReactiveArray<T>;
+    shift: () => Item<T> | undefined;
+    sort: (fn: (a: T, b: T) => number) => ReactiveArray<T>;
+    splice: (start: number, deleteCount?: number, ...input: T[]) => Item<T>[];
+    unshift: (...input: T[]) => number;
+};
 export default _default;
-export { ReactiveArray };
+export { API as ReactiveArray };

package/build/reactive/array.js

@@ -1,63 +1,14 @@
 import { isInstanceOf, isNumber, isObject } from '@esportsplus/utilities';
 import { dispose, signal, Reactive } from '../signal';
-import { ReactiveObject } from './object';
-let handler = {
-    get(target, prop) {
-        let value = target[prop];
-        if (value === undefined) {
-            return value;
-        }
-        if (isInstanceOf(value, Reactive)) {
-            return value.get();
-        }
-        else if (supported.has(prop)) {
-            return value;
-        }
-        throw new Error(`Reactivity: '${prop}' is not supported on reactive arrays`);
-    },
-    set(target, prop, value) {
-        if (isNumber(prop)) {
-            let host = target[prop];
-            if (isInstanceOf(host, Reactive)) {
-                host.set(value);
-                return true;
-            }
-            return false;
-        }
-        return target[prop] = value;
-    }
-}, supported = new Set([
-    'at',
-    'dispatch', 'dispose',
-    'length',
-    'map',
-    'on', 'once',
-    'pop', 'push',
-    'reverse',
-    'self', 'shift', 'sort', 'splice',
-    'unshift'
-]);
-function factory(input, options = {}) {
-    let items = [];
-    for (let i = 0, n = input.length; i < n; i++) {
-        let value = input[i];
-        if (isObject(value)) {
-            items[i] = new ReactiveObject(value, options);
-        }
-        else {
-            items[i] = signal(value);
-        }
-    }
-    return items;
-}
+import object from './object';
 class ReactiveArray extends Array {
     options;
-    self;
+    proxy;
     signal;
-    constructor(data, options = {}) {
+    constructor(data, proxy, options = {}) {
         super(...data);
         this.options = options;
-        this.self = this;
+        this.proxy = proxy;
         this.signal = signal(false);
     }
     set length(n) {
@@ -66,8 +17,8 @@ class ReactiveArray extends Array {
         }
         this.splice(n);
     }
-    at(index) {
-        let value = super.at(index);
+    at(i) {
+        let value = super.at(i);
         if (isInstanceOf(value, Reactive)) {
             return value.get();
         }
@@ -78,12 +29,20 @@ class ReactiveArray extends Array {
     }
     dispose() {
         this.signal.dispose();
-        dispose(this.self);
+        dispose(this);
     }
-    map(fn) {
-        let self = this.self, values = [];
-        for (let i = 0, n = self.length; i < n; i++) {
-            values.push(fn.call(this, self[i].value, i));
+    map(fn, i, n) {
+        let proxy = this.proxy, values = [];
+        if (i === undefined) {
+            i = 0;
+        }
+        if (n === undefined) {
+            n = this.length;
+        }
+        n = Math.min(n, this.length);
+        for (; i < n; i++) {
+            let item = this[i];
+            values.push(fn.call(proxy, isInstanceOf(item, Reactive) ? item.value : item, i));
         }
         return values;
     }
@@ -119,8 +78,8 @@ class ReactiveArray extends Array {
         }
         return item;
     }
-    sort() {
-        super.sort();
+    sort(fn) {
+        super.sort((a, b) => fn(isInstanceOf(a, Reactive) ? a.value : a, isInstanceOf(b, Reactive) ? b.value : b));
         this.signal.dispatch('sort');
         return this;
     }
@@ -142,7 +101,72 @@ class ReactiveArray extends Array {
         return length;
     }
 }
+function factory(input, options = {}) {
+    let items = [];
+    for (let i = 0, n = input.length; i < n; i++) {
+        let value = input[i];
+        if (isObject(value)) {
+            items[i] = object(value, options);
+        }
+        else {
+            items[i] = signal(value);
+        }
+    }
+    return items;
+}
+function methods(a) {
+    return {
+        get constructor() {
+            return a.constructor;
+        },
+        get length() {
+            return a.length;
+        },
+        set length(n) {
+            a.length = n;
+        },
+        at: (index) => a.at(index),
+        dispatch: (event, data) => a.dispatch(event, data),
+        dispose: () => a.dispose(),
+        map: (fn, i, n) => a.map(fn, i, n),
+        on: (event, listener) => a.on(event, listener),
+        once: (event, listener) => a.once(event, listener),
+        pop: () => a.pop(),
+        push: (...input) => a.push(...input),
+        reverse: () => a.reverse(),
+        shift: () => a.shift(),
+        sort: (fn) => a.sort(fn),
+        splice: (start, deleteCount, ...input) => a.splice(start, deleteCount, ...input),
+        unshift: (...input) => a.unshift(...input)
+    };
+}
 export default (input, options = {}) => {
-    return new Proxy(new ReactiveArray(factory(input, options)), handler);
+    let proxy = new Proxy({}, {
+        get(_, key) {
+            if (isNumber(key)) {
+                let value = a[key];
+                if (isInstanceOf(value, Reactive)) {
+                    return value.get();
+                }
+                return value;
+            }
+            else if (key in m) {
+                return m[key];
+            }
+            throw new Error(`Reactivity: '${key}' is not supported on reactive arrays`);
+        },
+        set(_, key, value) {
+            if (isNumber(key)) {
+                let host = a[key];
+                if (isInstanceOf(host, Reactive)) {
+                    host.set(value);
+                    return true;
+                }
+                return false;
+            }
+            return a[key] = value;
+        }
+    });
+    let a = new ReactiveArray(factory(input, options), proxy), m = methods(a);
+    return proxy;
 };
-export { ReactiveArray };

package/build/reactive/index.d.ts

@@ -1,13 +1,10 @@
-import { Prettify } from '@esportsplus/typescript';
-import { Options } from '../types';
-import { ReactiveArray } from './array';
-import { ReactiveObject } from './object';
-type Guard<T> = T extends Record<PropertyKey, unknown> ? {
-    [K in keyof T]: Never<K, Guard<T[K]>>;
-} : T extends unknown[] ? T : T extends Function ? never : T;
-type Infer<T> = T extends (...args: unknown[]) => unknown ? ReturnType<T> : T extends (infer U)[] ? Prettify<Omit<U[], 'map'> & Pick<ReactiveArray<U>, 'dispatch' | 'dispose' | 'map' | 'on' | 'once'>> : T extends Record<PropertyKey, unknown> ? {
-    [K in keyof T]: T[K];
-} : T;
-type Never<K, V> = K extends keyof ReactiveObject<Record<PropertyKey, unknown>> ? never : V;
-declare const _default: <T>(data: Guard<T>, options?: Options) => T extends Record<PropertyKey, unknown> ? { [K in keyof T]: Infer<T[K]>; } : Infer<T>;
+import { Options, ReactiveArray, ReactiveObject } from '../types';
+type Guard<T> = T extends {
+    dispose: any;
+} | {
+    signals: any;
+} ? {
+    never: '[ dispose, signals ] are reserved keys';
+} : T extends Record<PropertyKey, unknown> | unknown[] ? T : never;
+declare const _default: <T>(data: Guard<T>, options?: Options) => T extends Record<PropertyKey, unknown> ? ReactiveObject<T> : ReactiveArray<T>;
 export default _default;

package/build/reactive/object.d.ts

@@ -1,11 +1,9 @@
-import { Computed, Options, Signal } from '../types';
-import { ReactiveArray } from './array';
-declare class ReactiveObject<T extends Record<PropertyKey, unknown>> {
-    signals: Record<PropertyKey, Computed<any> | ReactiveArray<any> | Signal<any>>;
-    constructor(data: T, options?: Options);
-    get value(): this;
-    dispose(): void;
-}
-declare const _default: <T extends Record<PropertyKey, unknown>>(input: T, options?: Options) => ReactiveObject<T>;
+import { Infer, Options, Prettify } from '../types';
+type API<T> = Prettify<{
+    [K in keyof T]: Infer<T[K]>;
+} & {
+    dispose: VoidFunction;
+}>;
+declare const _default: <T extends Record<PropertyKey, unknown>>(input: T, options?: Options) => API<T>;
 export default _default;
-export { ReactiveObject };
+export { API as ReactiveObject };

package/build/reactive/object.js

@@ -39,9 +39,6 @@ class ReactiveObject {
             }
         }
     }
-    get value() {
-        return this;
-    }
     dispose() {
         let signals = this.signals;
         for (let key in signals) {
@@ -52,4 +49,3 @@ class ReactiveObject {
 export default (input, options = {}) => {
     return new ReactiveObject(input, options);
 };
-export { ReactiveObject };

package/build/signal.js

@@ -41,17 +41,14 @@ class Reactive {
         if (this.listeners === null || this.listeners[event] === undefined) {
             return;
         }
-        let listeners = this.listeners[event], values = {
-            data,
-            value: this.value
-        };
+        let listeners = this.listeners[event];
         for (let i = 0, n = listeners.length; i < n; i++) {
             let listener = listeners[i];
             if (listener === null) {
                 continue;
             }
             try {
-                listener(values);
+                listener(data, this.value);
                 if (listener.once !== undefined) {
                     listeners[i] = null;
                 }

package/build/types.d.ts

@@ -1,5 +1,6 @@
 import { Function, NeverAsync, Prettify } from '@esportsplus/typescript';
 import { ReactiveArray } from './reactive/array';
+import { ReactiveObject } from './reactive/object';
 import { CHECK, CLEAN, COMPUTED, DIRTY, DISPOSED, EFFECT, ROOT, SIGNAL } from './constants';
 import { Reactive } from './signal';
 type Base<T> = Omit<Reactive<T>, 'changed' | 'fn' | 'get' | 'scheduler' | 'set' | 'task' | 'tracking'>;
@@ -14,13 +15,13 @@ type Effect = {
     root: Root;
     task: Function;
 } & Omit<Base<void>, 'value'>;
+type Infer<T> = T extends (...args: unknown[]) => unknown ? ReturnType<T> : T extends (infer U)[] ? ReactiveArray<U> : T extends ReactiveObject<T> ? ReactiveObject<T> : T extends Record<PropertyKey, unknown> ? {
+    [K in keyof T]: T[K];
+} : T;
 type Event = string;
 type Listener<D> = {
     once?: boolean;
-    <V>(event: {
-        data?: D;
-        value: V;
-    }): void;
+    <V>(data: D, value: V): void;
 };
 type Options = {
     changed?: Changed;
@@ -38,4 +39,4 @@ type Signal<T> = {
 } & Base<T>;
 type State = typeof CHECK | typeof CLEAN | typeof DIRTY | typeof DISPOSED;
 type Type = typeof COMPUTED | typeof EFFECT | typeof ROOT | typeof SIGNAL;
-export type { Changed, Computed, Effect, Event, Function, Listener, NeverAsync, Options, Prettify, ReactiveArray, Root, Scheduler, Signal, State, Type };
+export type { Changed, Computed, Effect, Event, Function, Infer, Listener, NeverAsync, Options, Prettify, ReactiveArray, ReactiveObject, Root, Scheduler, Signal, State, Type };

package/package.json

@@ -17,5 +17,5 @@
         "prepublishOnly": "npm run build"
     },
     "types": "build/index.d.ts",
-    "version": "0.2.3"
+    "version": "0.2.4"
 }

package/src/reactive/array.ts

@@ -1,112 +1,54 @@
+import { Infer, Prettify } from '~/types';
 import { isInstanceOf, isNumber, isObject } from '@esportsplus/utilities';
 import { dispose, signal, Reactive } from '~/signal';
-import { Listener, Options, Signal } from '~/types';
-import { ReactiveObject } from './object';
+import { Listener, Options, ReactiveObject, Signal } from '~/types';
+import object from './object';
 
 
+type API<T> = Prettify< { [index: number]: Infer<T> } & ReturnType<typeof methods<T>> >;
+
 type Events<T> = {
     pop: {
-        item: R<T>;
+        item: Item<T>;
     };
     push: {
-        items: R<T>[];
+        items: Item<T>[];
     };
     reverse: undefined;
+    set: {
+        index: number;
+        item: Item<T>;
+    };
     shift: {
-        item: R<T>;
+        item: Item<T>;
     };
     sort: undefined;
     splice: {
         deleteCount: number;
-        items: R<T>[];
+        items: Item<T>[];
         start: number;
     };
     unshift: {
-        items: R<T>[];
+        items: Item<T>[];
     };
 };
 
-type R<T> = Signal<T> | ReactiveObject< T extends Record<PropertyKey, unknown> ? { [K in keyof T]: T[K] } : never >;
-
-
-let handler = {
-        get(target: any, prop: any) {
-            let value = target[prop];
-
-            if (value === undefined) {
-                return value;
-            }
-
-            if (isInstanceOf(value, Reactive)) {
-                return value.get();
-            }
-            else if (supported.has(prop)) {
-                return value;
-            }
-
-            throw new Error(`Reactivity: '${prop}' is not supported on reactive arrays`);
-        },
-        set(target: any, prop: any, value: any) {
-            if (isNumber(prop)) {
-                let host = target[prop];
-
-                if (isInstanceOf(host, Reactive)) {
-                    host.set(value);
-                    return true;
-                }
-
-                return false;
-            }
-
-            return target[prop] = value;
-        }
-    },
-    supported = new Set([
-        'at',
-        'dispatch', 'dispose',
-        'length',
-        'map',
-        'on', 'once',
-        'pop', 'push',
-        'reverse',
-        'self', 'shift', 'sort', 'splice',
-        'unshift'
-    ]);
-
-
-function factory<T>(input: T[], options: Options = {}) {
-    let items: R<T>[] = [];
-
-    for (let i = 0, n = input.length; i < n; i++) {
-        let value = input[i];
-
-        if (isObject(value)) {
-            items[i] = new ReactiveObject(value, options);
-        }
-        else {
-            items[i] = signal(value);
-        }
-    }
-
-    return items;
-}
+type Item<T> = T extends Record<PropertyKey, unknown> ? ReactiveObject<T> : Signal<T>;
 
 
 // REMINDER:
 // - @ts-ignore flags are supressing type mismatch error
 // - Input values are being transformed by this class into reactive values and back during get
-class ReactiveArray<T> extends Array<R<T>> {
+class ReactiveArray<T> extends Array<Item<T>> {
     private options: Options;
-    // - Proxy binds itself to methods on get
-    // - Use 'self' to avoid going through proxy for internal loops
-    private self: ReactiveArray<T>;
+    private proxy: API<T>;
     private signal: Signal<boolean>;
 
 
-    constructor(data: R<T>[], options: Options = {}) {
+    constructor(data: Item<T>[], proxy: API<T>, options: Options = {}) {
         super(...data);
         this.options = options;
-        this.self = this;
+        this.proxy = proxy;
         this.signal = signal(false);
     }
 
@@ -120,8 +62,8 @@ class ReactiveArray<T> extends Array<R<T>> {
     }
 
 
-    at(index: number) {
-        let value = super.at(index);
+    at(i: number) {
+        let value = super.at(i);
 
         if (isInstanceOf(value, Reactive)) {
             return value.get();
@@ -136,17 +78,30 @@ class ReactiveArray<T> extends Array<R<T>> {
 
     dispose() {
         this.signal.dispose();
-        dispose(this.self as any);
+        dispose(this);
     }
 
     // @ts-ignore
-    map<U>(fn: (this: T[], value: T, i: number) => U) {
-        let self = this.self,
+    map<U>(fn: (this: API<T>, value: T, i: number) => U, i?: number, n?: number) {
+        let proxy = this.proxy,
             values: U[] = [];
 
-        for (let i = 0, n = self.length; i < n; i++) {
-            // @ts-ignore
-            values.push( fn.call(this, self[i].value, i) );
+        if (i === undefined) {
+            i = 0;
+        }
+
+        if (n === undefined) {
+            n = this.length;
+        }
+
+        n = Math.min(n, this.length);
+
+        for (; i < n; i++) {
+            let item = this[i];
+
+            values.push(
+                fn.call(proxy, isInstanceOf(item, Reactive) ? item.value : item, i)
+            );
         }
 
         return values;
@@ -200,8 +155,12 @@ class ReactiveArray<T> extends Array<R<T>> {
         return item;
     }
 
-    sort() {
-        super.sort();
+    // @ts-ignore
+    sort(fn: (a: T, b: T) => number) {
+        super.sort((a, b) => fn(
+            isInstanceOf(a, Reactive) ? a.value : a,
+            isInstanceOf(b, Reactive) ? b.value : b
+        ));
         this.signal.dispatch('sort');
 
         return this;
@@ -236,7 +195,109 @@ class ReactiveArray<T> extends Array<R<T>> {
 }
 
 
+function factory<T>(input: T[], options: Options = {}) {
+    let items: Item<T>[] = [];
+
+    for (let i = 0, n = input.length; i < n; i++) {
+        let value = input[i];
+
+        if (isObject(value)) {
+            // @ts-ignore
+            items[i] = object(value, options);
+        }
+        else {
+            // @ts-ignore
+            items[i] = signal(value);
+        }
+    }
+
+    return items;
+}
+
+function methods<T>(a: ReactiveArray<T>): Prettify<
+    {
+        get constructor(): typeof a['constructor'];
+        get length(): number;
+        set length(n: number);
+    } & Pick<
+        typeof a,
+        'at' |
+        'dispatch' | 'dispose' |
+        'map' |
+        'on' | 'once' |
+        'pop' | 'push' |
+        'reverse' |
+        'shift' | 'sort' | 'splice' |
+        'unshift'
+    >
+> {
+    return {
+        get constructor() {
+            return a.constructor;
+        },
+        get length() {
+            return a.length;
+        },
+        set length(n: number) {
+            a.length = n;
+        },
+        at: (index) => a.at(index),
+        dispatch: (event, data) => a.dispatch(event, data),
+        dispose: () => a.dispose(),
+        map: (fn, i, n) => a.map(fn, i, n),
+        on: (event, listener) => a.on(event, listener),
+        once: (event, listener) => a.once(event, listener),
+        pop: () => a.pop(),
+        push: (...input) => a.push(...input),
+        reverse: () => a.reverse(),
+        shift: () => a.shift(),
+        sort: (fn) => a.sort(fn),
+        splice: (start, deleteCount, ...input) => a.splice(start, deleteCount, ...input),
+        unshift: (...input) => a.unshift(...input)
+    };
+}
+
+
+// - Proxies are slow...
+// - `this.[property]` goes through proxy
+// - Wrapper slows down creation in exchange for 'faster' runtime use
 export default <T>(input: T[], options: Options = {}) => {
-    return new Proxy(new ReactiveArray(factory(input, options)), handler);
+    let proxy = new Proxy({}, {
+            get(_: any, key: any) {
+                if (isNumber(key)) {
+                    let value = a[key];
+
+                    if (isInstanceOf(value, Reactive)) {
+                        return value.get();
+                    }
+
+                    return value;
+                }
+                else if (key in m) {
+                    return m[key as keyof typeof m];
+                }
+
+                throw new Error(`Reactivity: '${key}' is not supported on reactive arrays`);
+            },
+            set(_: any, key: any, value: any) {
+                if (isNumber(key)) {
+                    let host = a[key];
+
+                    if (isInstanceOf(host, Reactive)) {
+                        host.set(value);
+                        return true;
+                    }
+
+                    return false;
+                }
+
+                return a[key] = value;
+            }
+        }) as API<T>;
+
+    let a = new ReactiveArray(factory(input, options), proxy),
+        m = methods(a);
+
+    return proxy;
 };
-export { ReactiveArray };
+export { API as ReactiveArray };

package/src/reactive/index.ts

@@ -1,29 +1,15 @@
-import { Prettify } from '@esportsplus/typescript';
 import { isArray, isObject } from '@esportsplus/utilities';
-import { Options } from '~/types';
-import { default as array, ReactiveArray } from './array';
-import { default as object, ReactiveObject } from './object';
+import { Options, ReactiveArray, ReactiveObject } from '~/types';
+import { default as array } from './array';
+import { default as object } from './object';
 
 
 type Guard<T> =
-    T extends Record<PropertyKey, unknown>
-        ? { [K in keyof T]: Never<K, Guard<T[K]>> }
-        : T extends unknown[]
+    T extends { dispose: any } | { signals: any }
+        ? { never: '[ dispose, signals ] are reserved keys' }
+        : T extends Record<PropertyKey, unknown> | unknown[]
             ? T
-            : T extends Function
-                ? never
-                : T;
-
-type Infer<T> =
-    T extends (...args: unknown[]) => unknown
-        ? ReturnType<T>
-        : T extends (infer U)[]
-            ? Prettify< Omit<U[], 'map'> & Pick<ReactiveArray<U>, 'dispatch' | 'dispose' | 'map' | 'on' | 'once'> >
-            : T extends Record<PropertyKey, unknown>
-                ? { [K in keyof T]: T[K] }
-                : T;
-
-type Never<K,V> = K extends keyof ReactiveObject<Record<PropertyKey, unknown>> ? never : V;
+            : never;
 
 
 export default <T>(data: Guard<T>, options: Options = {}) => {
@@ -39,5 +25,7 @@ export default <T>(data: Guard<T>, options: Options = {}) => {
         throw new Error(`Reactivity: 'reactive' received invalid input - ${JSON.stringify(data)}`);
     }
 
-    return value as T extends Record<PropertyKey, unknown> ? { [K in keyof T]: Infer<T[K]> } : Infer<T>;
+    return value as T extends Record<PropertyKey, unknown>
+        ? ReactiveObject<T>
+        : ReactiveArray<T>;
 };

package/src/reactive/object.ts

@@ -1,7 +1,10 @@
 import { defineProperty, isArray, isFunction } from '@esportsplus/utilities';
 import { computed, signal } from '~/signal';
-import { Computed, Options, Signal } from '~/types';
-import { default as array, ReactiveArray } from './array';
+import { Computed, Infer, Options, Prettify, ReactiveArray, Signal } from '~/types';
+import { default as array } from './array';
+
+
+type API<T> = Prettify< { [K in keyof T]: Infer<T[K]> } & { dispose: VoidFunction } >;
 
 
 class ReactiveObject<T extends Record<PropertyKey, unknown>> {
@@ -51,11 +54,6 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
     }
 
 
-    get value() {
-        return this;
-    }
-
-
     dispose() {
         let signals = this.signals;
 
@@ -67,6 +65,6 @@ class ReactiveObject<T extends Record<PropertyKey, unknown>> {
 
 
 export default <T extends Record<PropertyKey, unknown>>(input: T, options: Options = {}) => {
-    return new ReactiveObject(input, options);
+    return new ReactiveObject(input, options) as API<T>;
 };
-export { ReactiveObject };
+export { API as ReactiveObject };

package/src/signal.ts

@@ -57,11 +57,7 @@ class Reactive<T> {
             return;
         }
 
-        let listeners = this.listeners[event],
-            values = {
-                data,
-                value: this.value
-            };
+        let listeners = this.listeners[event];
 
         for (let i = 0, n = listeners.length; i < n; i++) {
             let listener = listeners[i];
@@ -71,7 +67,7 @@ class Reactive<T> {
             }
 
             try {
-                listener(values);
+                listener(data, this.value);
 
                 if (listener.once !== undefined) {
                     listeners[i] = null;

package/src/types.ts

@@ -1,5 +1,6 @@
 import { Function, NeverAsync, Prettify } from '@esportsplus/typescript'
 import { ReactiveArray } from './reactive/array';
+import { ReactiveObject } from './reactive/object';
 import { CHECK, CLEAN, COMPUTED, DIRTY, DISPOSED, EFFECT, ROOT, SIGNAL } from './constants';
 import { Reactive } from './signal';
 
@@ -20,12 +21,23 @@ type Effect = {
     task: Function;
 } & Omit<Base<void>, 'value'>;
 
+type Infer<T> =
+    T extends (...args: unknown[]) => unknown
+        ? ReturnType<T>
+        : T extends (infer U)[]
+            ? ReactiveArray<U>
+            : T extends ReactiveObject<T>
+                ? ReactiveObject<T>
+                : T extends Record<PropertyKey, unknown>
+                    ? { [K in keyof T]: T[K] }
+                    : T;
+
 type Event = string;
 
 type Listener<D> = {
     once?: boolean;
 
-    <V>(event: { data?: D, value: V }): void;
+    <V>(data: D, value: V): void;
 };
 
 type Options = {
@@ -55,12 +67,12 @@ export type {
     Changed, Computed,
     Effect, Event,
     Function,
+    Infer,
     Listener,
     NeverAsync,
     Options,
     Prettify,
-    ReactiveArray,
-    Root,
+    ReactiveArray, ReactiveObject, Root,
     Scheduler, Signal, State,
     Type
 };