@esportsplus/reactivity 0.4.1 → 0.4.3

package/build/reactive/array.d.ts

@@ -1,6 +1,6 @@
-import { Infer, Prettify } from '../types.js';
+import { Infer } from '../types.js';
 import { Listener, Options, ReactiveObject, Signal } from '../types.js';
-type API<T> = Prettify<Infer<T>[] & ReturnType<typeof methods<T>>>;
+type API<T> = Infer<T>[] & ReactiveArray<T>;
 type Events<T> = {
     pop: {
         item: Item<T>;
@@ -27,19 +27,21 @@ type Events<T> = {
     };
 };
 type Item<T> = T extends Record<PropertyKey, unknown> ? ReactiveObject<T> : Signal<T>;
-declare class ReactiveArray<T> extends Array<Item<T>> {
+declare class ReactiveArray<T> {
+    private data;
     private options;
     private proxy;
     private signal;
     constructor(data: Item<T>[], proxy: API<T>, options?: Options);
+    get length(): number;
     set length(n: number);
     at(i: number): any;
-    dispatch<E extends keyof Events<T>>(event: E, data?: Events<T>[E]): void;
+    dispatch<E extends keyof Events<unknown>>(event: E, data?: Events<T>[E]): void;
     dispose(): void;
-    indexOf(value: T): number;
+    indexOf(value: T, fromIndex?: number): number;
     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;
+    on<E extends keyof Events<unknown>>(event: E, listener: Listener<Events<T>[E]>): void;
+    once<E extends keyof Events<unknown>>(event: E, listener: Listener<Events<T>[E]>): void;
     pop(): Item<T> | undefined;
     push(...input: T[]): number;
     reverse(): this;
@@ -48,185 +50,6 @@ declare class ReactiveArray<T> extends Array<Item<T>> {
     splice(start: number, deleteCount?: number, ...input: T[]): Item<T>[];
     unshift(...input: T[]): number;
 }
-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' | 'indexOf' | 'map' | 'on' | 'once' | 'pop' | 'push' | 'reverse' | 'shift' | 'sort' | 'splice' | 'unshift'>>;
-declare const _default: <T>(input: T[], options?: Options) => {
-    [x: number]: Infer<T>;
-    length: number;
-    toString: () => string;
-    toLocaleString: {
-        (): string;
-        (locales: string | string[], options?: Intl.NumberFormatOptions & Intl.DateTimeFormatOptions): string;
-    };
-    pop: (() => Infer<T> | undefined) & (() => Item<T> | undefined);
-    push: ((...items: Infer<T>[]) => number) & ((...input: T[]) => number);
-    concat: {
-        (...items: ConcatArray<Infer<T>>[]): Infer<T>[];
-        (...items: (Infer<T> | ConcatArray<Infer<T>>)[]): Infer<T>[];
-    };
-    join: (separator?: string) => string;
-    reverse: (() => Infer<T>[]) & (() => ReactiveArray<T>);
-    shift: (() => Infer<T> | undefined) & (() => Item<T> | undefined);
-    slice: (start?: number, end?: number) => Infer<T>[];
-    sort: ((compareFn?: ((a: Infer<T>, b: Infer<T>) => number) | undefined) => Infer<T>[] & {
-        readonly constructor: Function;
-        length: number;
-        dispatch: <E extends keyof Events<T_1>>(event: E, data?: Events<T>[E] | undefined) => void;
-        dispose: () => void;
-        on: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        once: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        at: (i: number) => any;
-        indexOf: (value: T) => number;
-        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;
-    }) & ((fn: (a: T, b: T) => number) => ReactiveArray<T>);
-    splice: {
-        (start: number, deleteCount?: number): Infer<T>[];
-        (start: number, deleteCount: number, ...items: Infer<T>[]): Infer<T>[];
-    } & ((start: number, deleteCount?: number, ...input: T[]) => Item<T>[]);
-    unshift: ((...items: Infer<T>[]) => number) & ((...input: T[]) => number);
-    indexOf: ((searchElement: Infer<T>, fromIndex?: number) => number) & ((value: T) => number);
-    lastIndexOf: (searchElement: Infer<T>, fromIndex?: number) => number;
-    every: {
-        <S extends Infer<T>>(predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => value is S, thisArg?: any): this is S[];
-        (predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => unknown, thisArg?: any): boolean;
-    };
-    some: (predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => unknown, thisArg?: any) => boolean;
-    forEach: (callbackfn: (value: Infer<T>, index: number, array: Infer<T>[]) => void, thisArg?: any) => void;
-    map: (<U>(callbackfn: (value: Infer<T>, index: number, array: Infer<T>[]) => U, thisArg?: any) => U[]) & (<U>(fn: (this: any, value: T, i: number) => U, i?: number, n?: number) => U[]);
-    filter: {
-        <S extends Infer<T>>(predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => value is S, thisArg?: any): S[];
-        (predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => unknown, thisArg?: any): Infer<T>[];
-    };
-    reduce: {
-        (callbackfn: (previousValue: Infer<T>, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => Infer<T>): Infer<T>;
-        (callbackfn: (previousValue: Infer<T>, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => Infer<T>, initialValue: Infer<T>): Infer<T>;
-        <U>(callbackfn: (previousValue: U, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => U, initialValue: U): U;
-    };
-    reduceRight: {
-        (callbackfn: (previousValue: Infer<T>, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => Infer<T>): Infer<T>;
-        (callbackfn: (previousValue: Infer<T>, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => Infer<T>, initialValue: Infer<T>): Infer<T>;
-        <U>(callbackfn: (previousValue: U, currentValue: Infer<T>, currentIndex: number, array: Infer<T>[]) => U, initialValue: U): U;
-    };
-    find: {
-        <S extends Infer<T>>(predicate: (value: Infer<T>, index: number, obj: Infer<T>[]) => value is S, thisArg?: any): S | undefined;
-        (predicate: (value: Infer<T>, index: number, obj: Infer<T>[]) => unknown, thisArg?: any): Infer<T> | undefined;
-    };
-    findIndex: (predicate: (value: Infer<T>, index: number, obj: Infer<T>[]) => unknown, thisArg?: any) => number;
-    fill: (value: Infer<T>, start?: number, end?: number) => Infer<T>[] & {
-        readonly constructor: Function;
-        length: number;
-        dispatch: <E extends keyof Events<T_1>>(event: E, data?: Events<T>[E] | undefined) => void;
-        dispose: () => void;
-        on: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        once: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        at: (i: number) => any;
-        indexOf: (value: T) => number;
-        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;
-    };
-    copyWithin: (target: number, start: number, end?: number) => Infer<T>[] & {
-        readonly constructor: Function;
-        length: number;
-        dispatch: <E extends keyof Events<T_1>>(event: E, data?: Events<T>[E] | undefined) => void;
-        dispose: () => void;
-        on: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        once: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-        at: (i: number) => any;
-        indexOf: (value: T) => number;
-        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;
-    };
-    entries: () => ArrayIterator<[number, Infer<T>]>;
-    keys: () => ArrayIterator<number>;
-    values: () => ArrayIterator<Infer<T>>;
-    includes: (searchElement: Infer<T>, fromIndex?: number) => boolean;
-    flatMap: <U, This = undefined>(callback: (this: This, value: Infer<T>, index: number, array: Infer<T>[]) => U | readonly U[], thisArg?: This | undefined) => U[];
-    flat: <A, D extends number = 1>(this: A, depth?: D | undefined) => FlatArray<A, D>[];
-    at: ((index: number) => Infer<T> | undefined) & ((i: number) => any);
-    findLast: {
-        <S extends Infer<T>>(predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => value is S, thisArg?: any): S | undefined;
-        (predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => unknown, thisArg?: any): Infer<T> | undefined;
-    };
-    findLastIndex: (predicate: (value: Infer<T>, index: number, array: Infer<T>[]) => unknown, thisArg?: any) => number;
-    toReversed: () => Infer<T>[];
-    toSorted: (compareFn?: ((a: Infer<T>, b: Infer<T>) => number) | undefined) => Infer<T>[];
-    toSpliced: {
-        (start: number, deleteCount: number, ...items: Infer<T>[]): Infer<T>[];
-        (start: number, deleteCount?: number): Infer<T>[];
-    };
-    with: (index: number, value: Infer<T>) => Infer<T>[];
-    [Symbol.iterator]: () => ArrayIterator<Infer<T>>;
-    readonly [Symbol.unscopables]: {
-        [x: number]: boolean | undefined;
-        length?: boolean | undefined;
-        toString?: boolean | undefined;
-        toLocaleString?: boolean | undefined;
-        pop?: boolean | undefined;
-        push?: boolean | undefined;
-        concat?: boolean | undefined;
-        join?: boolean | undefined;
-        reverse?: boolean | undefined;
-        shift?: boolean | undefined;
-        slice?: boolean | undefined;
-        sort?: boolean | undefined;
-        splice?: boolean | undefined;
-        unshift?: boolean | undefined;
-        indexOf?: boolean | undefined;
-        lastIndexOf?: boolean | undefined;
-        every?: boolean | undefined;
-        some?: boolean | undefined;
-        forEach?: boolean | undefined;
-        map?: boolean | undefined;
-        filter?: boolean | undefined;
-        reduce?: boolean | undefined;
-        reduceRight?: boolean | undefined;
-        find?: boolean | undefined;
-        findIndex?: boolean | undefined;
-        fill?: boolean | undefined;
-        copyWithin?: boolean | undefined;
-        entries?: boolean | undefined;
-        keys?: boolean | undefined;
-        values?: boolean | undefined;
-        includes?: boolean | undefined;
-        flatMap?: boolean | undefined;
-        flat?: boolean | undefined;
-        at?: boolean | undefined;
-        findLast?: boolean | undefined;
-        findLastIndex?: boolean | undefined;
-        toReversed?: boolean | undefined;
-        toSorted?: boolean | undefined;
-        toSpliced?: boolean | undefined;
-        with?: boolean | undefined;
-        [Symbol.iterator]?: boolean | undefined;
-        readonly [Symbol.unscopables]?: boolean | undefined;
-    };
-    readonly constructor: Function;
-    dispatch: <E extends keyof Events<T_1>>(event: E, data?: Events<T>[E] | undefined) => void;
-    dispose: () => void;
-    on: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-    once: <E extends keyof Events<T_1>>(event: E, listener: Listener<Events<T>[E]>) => void;
-};
+declare const _default: <T>(input: T[], options?: Options) => API<T>;
 export default _default;
 export type { API as ReactiveArray };

package/build/reactive/array.js

@@ -1,27 +1,28 @@
 import { isInstanceOf, isNumber, isObject } from '@esportsplus/utilities';
 import { dispose, signal, Reactive } from '../signal.js';
 import object from './object.js';
-class ReactiveArray extends Array {
+class ReactiveArray {
+    data;
     options;
     proxy;
     signal;
     constructor(data, proxy, options = {}) {
-        super();
-        for (let i = 0, n = data.length; i < n; i++) {
-            super.push(data[i]);
-        }
+        this.data = data;
         this.options = options;
         this.proxy = proxy;
         this.signal = signal(false);
     }
+    get length() {
+        return this.data.length;
+    }
     set length(n) {
-        if (n > this.length) {
+        if (n > this.data.length) {
             return;
         }
         this.splice(n);
     }
     at(i) {
-        let value = super.at(i);
+        let value = this.data[i];
         if (isInstanceOf(value, Reactive)) {
             return value.get();
         }
@@ -32,27 +33,28 @@ class ReactiveArray extends Array {
     }
     dispose() {
         this.signal.dispose();
-        dispose(this);
+        dispose(this.data);
     }
-    indexOf(value) {
-        for (let i = 0, n = this.length; i < n; i++) {
-            if (this[i].value === value) {
+    indexOf(value, fromIndex) {
+        let data = this.data;
+        for (let i = fromIndex ?? 0, n = data.length; i < n; i++) {
+            if (data[i].value === value) {
                 return i;
             }
         }
         return -1;
     }
     map(fn, i, n) {
-        let proxy = this.proxy, values = [];
+        let { data, proxy } = this, values = [];
         if (i === undefined) {
             i = 0;
         }
         if (n === undefined) {
-            n = this.length;
+            n = data.length;
         }
-        n = Math.min(n, this.length);
+        n = Math.min(n, data.length);
         for (; i < n; i++) {
-            let item = this[i];
+            let item = data[i];
             values.push(fn.call(proxy, isInstanceOf(item, Reactive) ? item.value : item, i));
         }
         return values;
@@ -64,7 +66,7 @@ class ReactiveArray extends Array {
         this.signal.once(event, listener);
     }
     pop() {
-        let item = super.pop();
+        let item = this.data.pop();
         if (item !== undefined) {
             dispose(item);
             this.signal.dispatch('pop', { item });
@@ -72,17 +74,17 @@ class ReactiveArray extends Array {
         return item;
     }
     push(...input) {
-        let items = factory(input, this.options), n = super.push(...items);
+        let items = factory(input, this.options), n = this.data.push(...items);
         this.signal.dispatch('push', { items });
         return n;
     }
     reverse() {
-        super.reverse();
+        this.data.reverse();
         this.signal.dispatch('reverse');
         return this;
     }
     shift() {
-        let item = super.shift();
+        let item = this.data.shift();
         if (item !== undefined) {
             dispose(item);
             this.signal.dispatch('shift', { item });
@@ -90,12 +92,12 @@ class ReactiveArray extends Array {
         return item;
     }
     sort(fn) {
-        super.sort((a, b) => fn(isInstanceOf(a, Reactive) ? a.value : a, isInstanceOf(b, Reactive) ? b.value : b));
+        this.data.sort((a, b) => fn(isInstanceOf(a, Reactive) ? a.value : a, isInstanceOf(b, Reactive) ? b.value : b));
         this.signal.dispatch('sort');
         return this;
     }
-    splice(start, deleteCount = super.length, ...input) {
-        let items = factory(input, this.options), removed = super.splice(start, deleteCount, ...items);
+    splice(start, deleteCount = this.data.length, ...input) {
+        let items = factory(input, this.options), removed = this.data.splice(start, deleteCount, ...items);
         if (items.length > 0 || removed.length > 0) {
             dispose(removed);
             this.signal.dispatch('splice', {
@@ -107,7 +109,7 @@ class ReactiveArray extends Array {
         return removed;
     }
     unshift(...input) {
-        let items = factory(input, this.options), length = super.unshift(...items);
+        let items = factory(input, this.options), length = this.data.unshift(...items);
         this.signal.dispatch('unshift', { items });
         return length;
     }
@@ -125,53 +127,26 @@ function factory(input, options = {}) {
     }
     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(),
-        indexOf: (value) => a.indexOf(value),
-        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 = {}) => {
-    let proxy = new Proxy({}, {
+    let wrapped = factory(input, options), proxy = new Proxy({}, {
         get(_, key) {
             if (isNumber(key)) {
-                let value = a[key];
+                let value = wrapped[key];
                 if (isInstanceOf(value, Reactive)) {
                     return value.get();
                 }
                 return value;
             }
-            else if (key in m) {
-                return m[key];
+            else if (key in a) {
+                return a[key];
             }
-            return a[key];
+            return wrapped[key];
         },
         set(_, key, value) {
             if (isNumber(key)) {
-                let host = a[key];
+                let host = wrapped[key];
                 if (host === undefined) {
-                    a[key] = factory([value], options)[0];
+                    wrapped[key] = factory([value], options)[0];
                 }
                 else if (isInstanceOf(host, Reactive)) {
                     host.set(value);
@@ -181,9 +156,12 @@ export default (input, options = {}) => {
                 }
                 return true;
             }
-            return a[key] = value;
+            else if (key === 'length') {
+                return a.length = value;
+            }
+            return false;
         }
     });
-    let a = new ReactiveArray(factory(input, options), proxy), m = methods(a);
+    let a = new ReactiveArray(wrapped, proxy);
     return proxy;
 };

package/package.json

@@ -12,7 +12,7 @@
   "private": false,
   "type": "module",
   "types": "build/index.d.ts",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "scripts": {
     "build": "tsc && tsc-alias",
     "-": "-"

package/src/reactive/array.ts

@@ -1,11 +1,11 @@
-import { Infer, Prettify } from '~/types';
+import { Infer } from '~/types';
 import { isInstanceOf, isNumber, isObject } from '@esportsplus/utilities';
 import { dispose, signal, Reactive } from '~/signal';
 import { Listener, Options, ReactiveObject, Signal } from '~/types';
 import object from './object';
 
 
-type API<T> = Prettify< Infer<T>[] & ReturnType<typeof methods<T>> >;
+type API<T> = Infer<T>[] & ReactiveArray<T>;
 
 type Events<T> = {
     pop: {
@@ -36,31 +36,27 @@ type Events<T> = {
 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<Item<T>> {
+class ReactiveArray<T> {
+    private data: Item<T>[]
     private options: Options;
     private proxy: API<T>;
     private signal: Signal<boolean>;
 
 
     constructor(data: Item<T>[], proxy: API<T>, options: Options = {}) {
-        super();
-
-        // Only method I could use to prevent TS and runtime JS errors
-        for (let i = 0, n = data.length; i < n; i++) {
-            super.push(data[i]);
-        }
-
+        this.data = data;
         this.options = options;
         this.proxy = proxy;
         this.signal = signal(false);
     }
 
 
+    get length(): number {
+        return this.data.length;
+    }
+
     set length(n: number) {
-        if (n > this.length) {
+        if (n > this.data.length) {
             return;
         }
 
@@ -69,7 +65,7 @@ class ReactiveArray<T> extends Array<Item<T>> {
 
 
     at(i: number) {
-        let value = super.at(i);
+        let value = this.data[i];
 
         if (isInstanceOf(value, Reactive)) {
             return value.get();
@@ -78,19 +74,20 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return value;
     }
 
-    dispatch<E extends keyof Events<T>>(event: E, data?: Events<T>[E]) {
+    dispatch<E extends keyof Events<unknown>>(event: E, data?: Events<T>[E]) {
         this.signal.dispatch(event, data);
     }
 
     dispose() {
         this.signal.dispose();
-        dispose(this);
+        dispose(this.data);
     }
 
-    // @ts-ignore
-    indexOf(value: T) {
-        for (let i = 0, n = this.length; i < n; i++) {
-            if (this[i].value === value) {
+    indexOf(value: T, fromIndex?: number) {
+        let data = this.data;
+
+        for (let i = fromIndex ?? 0, n = data.length; i < n; i++) {
+            if (data[i].value === value) {
                 return i;
             }
         }
@@ -98,9 +95,8 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return -1;
     }
 
-    // @ts-ignore
     map<U>(fn: (this: API<T>, value: T, i: number) => U, i?: number, n?: number) {
-        let proxy = this.proxy,
+        let { data, proxy } = this,
             values: U[] = [];
 
         if (i === undefined) {
@@ -108,13 +104,13 @@ class ReactiveArray<T> extends Array<Item<T>> {
         }
 
         if (n === undefined) {
-            n = this.length;
+            n = data.length;
         }
 
-        n = Math.min(n, this.length);
+        n = Math.min(n, data.length);
 
         for (; i < n; i++) {
-            let item = this[i];
+            let item = data[i];
 
             values.push(
                 fn.call(proxy, isInstanceOf(item, Reactive) ? item.value : item, i)
@@ -124,16 +120,16 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return values;
     }
 
-    on<E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>) {
+    on<E extends keyof Events<unknown>>(event: E, listener: Listener<Events<T>[E]>) {
         this.signal.on(event, listener);
     }
 
-    once<E extends keyof Events<T>>(event: E, listener: Listener<Events<T>[E]>) {
+    once<E extends keyof Events<unknown>>(event: E, listener: Listener<Events<T>[E]>) {
         this.signal.once(event, listener);
     }
 
     pop() {
-        let item = super.pop();
+        let item = this.data.pop();
 
         if (item !== undefined) {
             dispose(item);
@@ -143,26 +139,24 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return item;
     }
 
-    // @ts-ignore
     push(...input: T[]) {
         let items = factory(input, this.options),
-            n = super.push(...items);
+            n = this.data.push(...items);
 
         this.signal.dispatch('push', { items });
 
         return n;
     }
 
-    // @ts-ignore
     reverse() {
-        super.reverse();
+        this.data.reverse();
         this.signal.dispatch('reverse');
 
         return this;
     }
 
     shift() {
-        let item = super.shift();
+        let item = this.data.shift();
 
         if (item !== undefined) {
             dispose(item);
@@ -172,9 +166,8 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return item;
     }
 
-    // @ts-ignore
     sort(fn: (a: T, b: T) => number) {
-        super.sort((a, b) => fn(
+        this.data.sort((a, b) => fn(
             isInstanceOf(a, Reactive) ? a.value : a,
             isInstanceOf(b, Reactive) ? b.value : b
         ));
@@ -183,10 +176,9 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return this;
     }
 
-    // @ts-ignore
-    splice(start: number, deleteCount: number = super.length, ...input: T[]) {
+    splice(start: number, deleteCount: number = this.data.length, ...input: T[]) {
         let items = factory(input, this.options),
-            removed = super.splice(start, deleteCount, ...items);
+            removed = this.data.splice(start, deleteCount, ...items);
 
         if (items.length > 0 || removed.length > 0) {
             dispose(removed);
@@ -200,10 +192,9 @@ class ReactiveArray<T> extends Array<Item<T>> {
         return removed;
     }
 
-    // @ts-ignore
     unshift(...input: T[]) {
         let items = factory(input, this.options),
-            length = super.unshift(...items);
+            length = this.data.unshift(...items);
 
         this.signal.dispatch('unshift', { items });
 
@@ -231,60 +222,13 @@ function factory<T>(input: T[], options: Options = {}) {
     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' |
-        'indexOf' |
-        '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(),
-        indexOf: (value) => a.indexOf(value),
-        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 = {}) => {
-    let proxy = new Proxy({}, {
+    let wrapped = factory(input, options),
+        proxy = new Proxy({}, {
             get(_: any, key: any) {
                 if (isNumber(key)) {
-                    let value = a[key];
+                    let value = wrapped[key];
 
                     if (isInstanceOf(value, Reactive)) {
                         return value.get();
@@ -292,18 +236,18 @@ export default <T>(input: T[], options: Options = {}) => {
 
                     return value;
                 }
-                else if (key in m) {
-                    return m[key as keyof typeof m];
+                else if (key in a) {
+                    return a[key as keyof typeof a];
                 }
 
-                return a[key];
+                return wrapped[key];
             },
             set(_: any, key: any, value: any) {
                 if (isNumber(key)) {
-                    let host = a[key];
+                    let host = wrapped[key];
 
                     if (host === undefined) {
-                        a[key] = factory([value] as T[], options)[0];
+                        wrapped[key] = factory([value] as T[], options)[0];
                     }
                     else if (isInstanceOf(host, Reactive)) {
                         host.set(value);
@@ -314,13 +258,15 @@ export default <T>(input: T[], options: Options = {}) => {
 
                     return true;
                 }
+                else if (key === 'length') {
+                    return a.length = value;
+                }
 
-                return a[key] = value;
+                return false;
             }
         }) as API<T>;
 
-    let a = new ReactiveArray(factory(input, options), proxy),
-        m = methods(a);
+    let a = new ReactiveArray(wrapped, proxy);
 
     return proxy;
 };