@oscarpalmer/mora 0.22.0 → 0.24.0

package/dist/mora.full.js

@@ -1,78 +1,124 @@
+const ACTIVE = {};
+const ARRAY_THRESHOLD = 100;
+const ARRAY_OFFSET = 25;
+const ARRAY_PEEK = 10;
+const BATCH = {
+    depth: 0,
+    handlers: new Set(),
+};
+const METHODS_AFFECTING_LENGTH = new Set([
+    'pop',
+    'push',
+    'shift',
+    'unshift',
+]);
+const METHODS_UPDATE = new Set([
+    ...METHODS_AFFECTING_LENGTH,
+    'copyWithin',
+    'fill',
+    'reverse',
+    'sort',
+    'splice',
+]);
+const NAME_ARRAY = 'array';
+const NAME_COMPUTED = 'computed';
+const NAME_EFFECT = 'effect';
+const NAME_MORA = '$mora';
+const NAME_SIGNAL = 'signal';
+const NAME_STORE = 'store';
+const NAMES = new Set([
+    NAME_ARRAY,
+    NAME_COMPUTED,
+    NAME_SIGNAL,
+    NAME_STORE,
+]);
+const PROPERTY_LENGTH = 'length';
+
+class Effect {
+    constructor(callback) {
+        Object.defineProperty(this, NAME_MORA, {
+            value: NAME_EFFECT,
+        });
+        this.state = {
+            callback,
+        };
+        runEffect(this);
+    }
+}
+function runEffect(effect) {
+    const previousEffect = ACTIVE.effect;
+    ACTIVE.effect = effect;
+    try {
+        effect.state.callback();
+    }
+    finally {
+        ACTIVE.effect = previousEffect;
+    }
+}
+/**
+ * Create an effect
+ * @param callback Callback for handling signal effects
+ * @returns Effect
+ */
+function effect(callback) {
+    return typeof callback === 'function'
+        ? new Effect(callback)
+        : undefined;
+}
+
 /**
  * Is the value a reactive array?
+ * @param value Value to check
+ * @returns True if value is a {@link ReactiveArray}
  */
 function isArray(value) {
-    return isMora(value, arrayName);
+    return isMora(value, NAME_ARRAY);
 }
 /**
  * Is the value a computed signal?
+ * @param value Value to check
+ * @returns True if value is a {@link Computed}
  */
 function isComputed(value) {
-    return isMora(value, computedName);
+    return isMora(value, NAME_COMPUTED);
 }
 /**
  * Is the value an effect?
+ * @param value Value to check
+ * @returns True if value is an {@link Effect}
  */
 function isEffect(value) {
-    return isMora(value, effectName);
+    return isMora(value, NAME_EFFECT);
 }
 function isMora(value, name) {
     return (typeof value === 'object' &&
         value != null &&
-        '$mora' in value &&
+        NAME_MORA in value &&
         (typeof name === 'string'
-            ? value.$mora === name
-            : name.has(value.$mora)));
+            ? value[NAME_MORA] === name
+            : name.has(value[NAME_MORA])));
 }
+/**
+ * Is the value reactive?
+ * @param value Value to check
+ * @returns True if value is a {@link Reactive}
+ */
 function isReactive(value) {
-    return isMora(value, reactiveNames);
+    return isMora(value, NAMES);
 }
 /**
  * Is the value a signal?
+ * @param value Value to check
+ * @returns True if value is a {@link Signal}
  */
 function isSignal(value) {
-    return isMora(value, signalName);
-}
-const arrayName = 'array';
-const computedName = 'computed';
-const effectName = 'effect';
-const signalName = 'signal';
-const storeName = 'store';
-const reactiveNames = new Set([arrayName, computedName, signalName, storeName]);
-
-class Effect {
-    constructor(callback) {
-        Object.defineProperty(this, '$mora', {
-            value: effectName,
-        });
-        this.state = {
-            callback,
-        };
-        runEffect(this);
-    }
-}
-function runEffect(effect) {
-    const previousEffect = activeEffect;
-    activeEffect = effect;
-    try {
-        effect.state.callback();
-    }
-    finally {
-        activeEffect = previousEffect;
-    }
-}
-/**
- * Create an effect
- */
-function effect(callback) {
-    return new Effect(callback);
+    return isMora(value, NAME_SIGNAL);
 }
-let activeEffect;
 
 function flushHandlers() {
-    while (batchDepth === 0 && batchedHandlers.size > 0) {
-        const handlers = [...batchedHandlers];
-        batchedHandlers.clear();
+    while (BATCH.depth === 0 && BATCH.handlers.size > 0) {
+        const handlers = [...BATCH.handlers];
+        BATCH.handlers.clear();
         for (const handler of handlers) {
             if (isEffect(handler)) {
                 runEffect(handler);
@@ -84,31 +130,35 @@ function flushHandlers() {
     }
 }
 /**
- * Start batching effects _(use `stopBatch` to flush and run batched effects)_
+ * Start batching effects
+ *
+ * _(Use {@link stopBatch} to flush and run batched effects)_
  */
 function startBatch() {
-    batchDepth += 1;
+    BATCH.depth += 1;
 }
 /**
  * Stop batching effects and flush _(run)_ them
  */
 function stopBatch() {
-    if (batchDepth > 0) {
-        batchDepth -= 1;
+    if (BATCH.depth > 0) {
+        BATCH.depth -= 1;
     }
     flushHandlers();
 }
-const batchedHandlers = new Set();
-let batchDepth = 0;
 
 class Subscription {
-    state;
     callback;
+    state;
     constructor(state, callback) {
         this.state = state;
         this.callback = callback;
         callback(state.value);
     }
+    destroy() {
+        this.callback = noop;
+        this.state = undefined;
+    }
 }
 function noop() { }
 function subscribe(state, callback) {
@@ -121,12 +171,8 @@ function subscribe(state, callback) {
     };
 }
 function unsubscribe(state, callback) {
-    const subscription = state.subscriptions.get(callback);
+    state.subscriptions.get(callback)?.destroy();
     state.subscriptions.delete(callback);
-    if (subscription != null) {
-        subscription.callback = noop;
-        subscription.state = undefined;
-    }
 }
 
 class Reactive {
@@ -142,83 +188,89 @@ class Reactive {
         if (typeof options === 'object' && typeof options.equal === 'function') {
             this.state.equal = options.equal;
         }
-        Object.defineProperty(this, '$mora', {
+        Object.defineProperty(this, NAME_MORA, {
             value: name,
         });
     }
     /**
      * Get the value _(without reactivity)_
+     * @return Current value
      */
     peek() {
         return this.state.value;
     }
     /**
      * Subscribe to changes
+     * @param callback Callback for changes
+     * @return Unsubscribe callback
      */
     subscribe(callback) {
         return subscribe(this.state, callback);
     }
     /**
      * JSON representation of the value
+     * @return JSON value
      */
     toJSON() {
         return this.get();
     }
     /**
      * String representation of the value
+     * @return Value as string
      */
     toString() {
         return String(this.get());
     }
     /**
      * Unsubscribe from changes
+     * @param callback Callback to unsubscribe
      */
     unsubscribe(callback) {
         unsubscribe(this.state, callback);
     }
 }
 
-let activeComputed;
 class Computed extends Reactive {
     effect = {
         dirty: true,
         instance: undefined,
     };
     constructor(callback, options) {
-        super(computedName, undefined, options);
+        super(NAME_COMPUTED, undefined, options);
         this.effect.instance = effect(() => {
-            if (this.effect.dirty) {
-                const previousComputed = activeComputed;
-                activeComputed = this;
-                const value = callback();
-                activeComputed = previousComputed;
-                if (!this.state.equal(this.state.value, value)) {
-                    this.state.value = value;
-                    for (const computed of this.state.computeds) {
-                        computed.effect.dirty = true;
-                    }
-                    for (const effect of this.state.effects) {
-                        batchedHandlers.add(effect);
-                    }
-                    for (const [, subscription] of this.state.subscriptions) {
-                        subscription.callback(value);
-                    }
+            if (!this.effect.dirty) {
+                return;
+            }
+            const previousComputed = ACTIVE.computed;
+            ACTIVE.computed = this;
+            const value = callback();
+            ACTIVE.computed = previousComputed;
+            if (!this.state.equal(this.state.value, value)) {
+                this.state.value = value;
+                for (const computed of this.state.computeds) {
+                    computed.effect.dirty = true;
+                }
+                for (const effect of this.state.effects) {
+                    BATCH.handlers.add(effect);
+                }
+                for (const [, subscription] of this.state.subscriptions) {
+                    subscription.callback(value);
                 }
-                this.effect.dirty = false;
             }
+            this.effect.dirty = false;
         });
     }
     /**
      * @inheritdoc
      */
     get() {
-        if (activeComputed != null && this !== activeComputed) {
-            this.state.computeds.add(activeComputed);
+        if (ACTIVE.computed != null && this !== ACTIVE.computed) {
+            this.state.computeds.add(ACTIVE.computed);
         }
-        if (activeEffect != null && activeEffect !== this.effect.instance) {
-            this.state.effects.add(activeEffect);
+        if (ACTIVE.effect != null && ACTIVE.effect !== this.effect.instance) {
+            this.state.effects.add(ACTIVE.effect);
         }
-        if (this.effect.dirty && batchDepth === 0) {
+        if (this.effect.dirty && BATCH.depth === 0) {
             runEffect(this.effect.instance);
         }
         return this.state.value;
@@ -236,12 +288,12 @@ function emitValue(state) {
         computed.effect.dirty = true;
     }
     for (const effect of state.effects) {
-        batchedHandlers.add(effect);
+        BATCH.handlers.add(effect);
     }
     for (const [, subscription] of state.subscriptions) {
-        batchedHandlers.add(subscription);
+        BATCH.handlers.add(subscription);
     }
-    if (batchDepth === 0) {
+    if (BATCH.depth === 0) {
         flushHandlers();
     }
 }
@@ -251,9 +303,9 @@ function equalArrays(state, first, second) {
         return false;
     }
     let offset = 0;
-    if (length >= 100) {
-        offset = Math.round(length / 10);
-        offset = offset > 25 ? 25 : offset;
+    if (length >= ARRAY_THRESHOLD) {
+        offset = Math.round(length / ARRAY_PEEK);
+        offset = offset > ARRAY_OFFSET ? ARRAY_OFFSET : offset;
         for (let index = 0; index < offset; index += 1) {
             if (!state.equal(first[index], second[index])) {
                 return false;
@@ -269,24 +321,29 @@ function equalArrays(state, first, second) {
     return true;
 }
 function getValue(state) {
-    if (activeComputed != null) {
-        state.computeds.add(activeComputed);
+    if (ACTIVE.computed != null) {
+        state.computeds.add(ACTIVE.computed);
     }
-    if (activeEffect != null) {
-        state.effects.add(activeEffect);
+    if (ACTIVE.effect != null) {
+        state.effects.add(ACTIVE.effect);
     }
     return state.value;
 }
 
+function emityProxyValues(state, mapped) {
+    const values = [...mapped.values()];
+    const { length } = values;
+    for (let index = 0; index < length; index += 1) {
+        values[index].effect.dirty = true;
+    }
+    emitValue(state);
+}
 function getReactiveValueInProxy(reactive, mapped, key, isArray) {
     let item = mapped.get(key);
     if (item == null) {
-        item = computed(() => {
-            const value = reactive.get();
-            return isArray
-                ? value.at(key)
-                : value[key];
-        });
+        item = computed(() => isArray
+            ? reactive.get().at(key)
+            : reactive.get()[key]);
         mapped.set(key, item);
     }
     return item;
@@ -312,11 +369,12 @@ function setProxyValue(proxy, value) {
     }
     stopBatch();
 }
-function setValueInProxy(target, property, value, state, isArray, length) {
+function setValueInProxy(parameters) {
+    const { isArray, length, property, state, target, value } = parameters;
     if (isArray) {
         const isIndex = !Number.isNaN(Number(property));
-        const isLength = property === 'length';
-        if (!isIndex && !isLength) {
+        const isLength = property === PROPERTY_LENGTH;
+        if (!(isIndex || isLength)) {
             return Reflect.set(target, property, value);
         }
     }
@@ -333,7 +391,7 @@ function setValueInProxy(target, property, value, state, isArray, length) {
 
 class Signal extends Reactive {
     constructor(value, options) {
-        super(signalName, value, options);
+        super(NAME_SIGNAL, value, options);
     }
     /**
      * @inheritdoc
@@ -343,6 +401,7 @@ class Signal extends Reactive {
     }
     /**
      * Set the value
+     * @param value New value
      */
     set(value) {
         if (!this.state.equal(this.state.value, value)) {
@@ -352,6 +411,7 @@ class Signal extends Reactive {
     }
     /**
      * Update the value _(based on the current value)_
+     * @param callback Callback to update the value
      */
     update(callback) {
         this.set(callback(this.state.value));
@@ -359,6 +419,9 @@ class Signal extends Reactive {
 }
 /**
  * Create a reactive value
+ * @param value Initial value
+ * @param options Optional reactivity options
+ * @returns Reactive value
  */
 function signal(value, options) {
     return new Signal(value, options);
@@ -384,11 +447,18 @@ class ReactiveArray extends Reactive {
         }
     }
     constructor(value, options) {
-        super(arrayName, new Proxy(value, {
-            get: (target, property) => updateMethods.has(property)
+        super(NAME_ARRAY, new Proxy(value, {
+            get: (target, property) => METHODS_UPDATE.has(property)
                 ? updateArray(property, target, this.state, this.#size)
                 : Reflect.get(target, property),
-            set: (target, property, value) => setValueInProxy(target, property, value, this.state, true, this.#size),
+            set: (target, property, value) => setValueInProxy({
+                property,
+                target,
+                value,
+                isArray: true,
+                state: this.state,
+                length: this.#size,
+            }),
         }), options);
         this.#size.set(value.length);
     }
@@ -398,44 +468,56 @@ class ReactiveArray extends Reactive {
     clear() {
         this.length = 0;
     }
-    get(first) {
-        if (typeof first === 'number') {
-            return getReactiveValueInProxy(this, this.#indiced, first, true).get();
-        }
-        if (first === 'length') {
-            return this.length;
-        }
-        return getValue(this.state);
-    }
     /**
      * Create a computed, filtered array
+     * @param callback Callback to evaluate each item
+     * @return Computed array of filtered items
      */
     filter(callback) {
         return computed(() => this.get().filter(callback));
     }
+    get(first) {
+        if (typeof first === 'number') {
+            return getReactiveValueInProxy(this, this.#indiced, first, true).get();
+        }
+        return first === PROPERTY_LENGTH ? this.length : getValue(this.state);
+    }
     /**
      * Create a computed, mapped array
+     * @param callback Callback to transform each item
+     * @return Computed array of mapped items
      */
     map(callback) {
         return computed(() => this.get().map(callback));
     }
+    /**
+     * Notify dependents of changes
+     *
+     * _This bypasses equality checks and will immediately notify dependents.
+     * Use this only if you're modifying nested data that would be ignored by equality checks._
+     */
+    notify() {
+        emityProxyValues(this.state, this.#indiced);
+    }
     peek(value) {
-        if (value === true) {
+        if (value === 'length') {
             return this.#size.peek();
         }
-        if (typeof value === 'number') {
-            return this.state.value.at(value);
-        }
-        return [...this.state.value];
+        return typeof value === 'number'
+            ? this.state.value.at(value)
+            : [...this.state.value];
     }
     /**
      * Remove and return the last item of the array
+     * @returns Removed item, or `undefined` if the array is empty
      */
     pop() {
         return this.state.value.pop();
     }
     /**
      * Add items to the end of the array
+     * @param items Items to add
+     * @returns New array length
      */
     push(...items) {
         return this.state.value.push(...items);
@@ -447,18 +529,23 @@ class ReactiveArray extends Reactive {
         else if (first === 'length') {
             this.length = second;
         }
-        else if (typeof first === 'number') {
-            this.state.value[first] = second;
+        else if (typeof first === 'number' && !Number.isNaN(first)) {
+            setAtIndex(this.state.value, first, second);
         }
     }
     /**
      * Remove and return the first item of the array
+     * @returns Removed item, or `undefined` if the array is empty
      */
     shift() {
         return this.state.value.shift();
     }
     /**
      * Remove and return items from the array _(and optionally add new items)_
+     * @param from Index to start removing items from
+     * @param to Index to stop removing items at _(defaults to the end of the array)_
+     * @param items Optional items to add
+     * @returns Removed items
      */
     splice(from, to, ...items) {
         return this.state.value.splice(from, to ?? this.state.value.length, ...items);
@@ -471,12 +558,15 @@ class ReactiveArray extends Reactive {
     }
     /**
      * Add items to the beginning of the array
+     * @param items Items to add
+     * @returns New array length
      */
     unshift(...items) {
         return this.state.value.unshift(...items);
     }
     /**
      * Update the value _(based on the current value)_
+     * @param callback Callback to update the value
      */
     update(callback) {
         const updated = callback(this.state.value);
@@ -487,12 +577,15 @@ class ReactiveArray extends Reactive {
 }
 /**
  * Create a reactive array
+ * @param value Initial array of items
+ * @param options Optional reactivity options
+ * @returns Reactive array
  */
 function array(value, options) {
     return new ReactiveArray(Array.isArray(value) ? value : [], options);
 }
 function updateArray(type, array, state, length) {
-    const affectsLength = lengthAffectingMethods.has(type);
+    const affectsLength = METHODS_AFFECTING_LENGTH.has(type);
     const previousArray = affectsLength ? [] : [...array];
     const previousLength = array.length;
     return (...args) => {
@@ -506,40 +599,34 @@ function updateArray(type, array, state, length) {
         return result;
     };
 }
-const lengthAffectingMethods = new Set([
-    'pop',
-    'push',
-    'shift',
-    'unshift',
-]);
-const updateMethods = new Set([
-    ...lengthAffectingMethods,
-    'copyWithin',
-    'fill',
-    'reverse',
-    'sort',
-    'splice',
-]);
+function setAtIndex(array, index, value) {
+    const actual = index < 0 ? array.length + index : index;
+    if (actual > -1) {
+        array[actual] = value;
+    }
+}
 
 function isKey(value) {
-  return typeof value === "number" || typeof value === "string";
+	return typeof value === "number" || typeof value === "string";
 }
 function isPlainObject(value) {
-  if (value === null || typeof value !== "object") {
-    return false;
-  }
-  if (Symbol.toStringTag in value || Symbol.iterator in value) {
-    return false;
-  }
-  const prototype = Object.getPrototypeOf(value);
-  return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
+	if (value === null || typeof value !== "object") return false;
+	if (Symbol.toStringTag in value || Symbol.iterator in value) return false;
+	const prototype = Object.getPrototypeOf(value);
+	return prototype === null || prototype === Object.prototype || Object.getPrototypeOf(prototype) === null;
 }
 
 class Store extends Reactive {
     #keyed = new Map();
     constructor(value, options) {
-        super(storeName, new Proxy(value, {
-            set: (target, property, value) => setValueInProxy(target, property, value, this.state, false),
+        super(NAME_STORE, new Proxy(value, {
+            set: (target, property, value) => setValueInProxy({
+                target,
+                property,
+                value,
+                isArray: false,
+                state: this.state,
+            }),
         }), options);
     }
     get(key) {
@@ -547,6 +634,15 @@ class Store extends Reactive {
             ? getReactiveValueInProxy(this, this.#keyed, key, false).get()
             : getValue(this.state);
     }
+    /**
+     * Notify dependents of changes
+     *
+     * _This bypasses equality checks and will immediately notify dependents.
+     * Use this only if you're modifying nested data that would be ignored by equality checks._
+     */
+    notify() {
+        emityProxyValues(this.state, this.#keyed);
+    }
     peek(key) {
         return isKey(key) ? this.state.value[key] : { ...this.state.value };
     }
@@ -566,6 +662,7 @@ class Store extends Reactive {
     }
     /**
      * Update the value _(based on the current value)_
+     * @param callback Callback to update the value
      */
     update(callback) {
         const updated = callback({ ...this.state.value });
@@ -576,6 +673,9 @@ class Store extends Reactive {
 }
 /**
  * Create a reactive store
+ * @param value Initial object value
+ * @param options Optional reactivity options
+ * @returns Reactive store
  */
 function store(value, options) {
     return new Store((isPlainObject(value) ? value : {}), options);