@oscarpalmer/mora 0.12.0 → 0.14.0

package/dist/batch.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const effect = require("./effect.cjs");
-const is = require("./is.cjs");
+const helpers_is = require("./helpers/is.cjs");
 function flushEffects() {
   while (exports.batchDepth === 0 && batchedHandlers.size > 0) {
     const handlers = [...batchedHandlers];
     batchedHandlers.clear();
     for (const handler of handlers) {
-      if (is.isEffect(handler)) {
+      if (helpers_is.isEffect(handler)) {
         effect.runEffect(handler);
       } else {
         handler.callback(handler.state.value);

package/dist/batch.js

@@ -1,5 +1,5 @@
 import { runEffect } from "./effect.js";
-import { isEffect } from "./is.js";
+import { isEffect } from "./helpers/is.js";
 function flushEffects() {
   while (batchDepth === 0 && batchedHandlers.size > 0) {
     const handlers = [...batchedHandlers];

package/dist/effect.cjs

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const helpers_is = require("./helpers/is.cjs");
 class Effect {
   constructor(callback) {
     Object.defineProperty(this, "$mora", {
-      value: "effect"
+      value: helpers_is.effectName
     });
     this.state = {
       callback

package/dist/effect.js

@@ -1,7 +1,8 @@
+import { effectName } from "./helpers/is.js";
 class Effect {
   constructor(callback) {
     Object.defineProperty(this, "$mora", {
-      value: "effect"
+      value: effectName
     });
     this.state = {
       callback

package/dist/helpers/emit.cjs

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const batch = require("../batch.cjs");
+function emitArrayChanges(first, second) {
+  let { length } = first;
+  if (length !== second.length) {
+    return true;
+  }
+  let offset = 0;
+  if (length >= 100) {
+    offset = Math.round(length / 10);
+    offset = offset > 25 ? 25 : offset;
+    for (let index = 0; index < offset; index += 1) {
+      if (!Object.is(first[index], second[index])) {
+        return true;
+      }
+    }
+  }
+  length -= offset;
+  for (let index = offset; index < length; index += 1) {
+    if (!Object.is(first[index], second[index])) {
+      return true;
+    }
+  }
+  return false;
+}
+function emitValue(state) {
+  for (const computed of state.computeds) {
+    computed.effect.dirty = true;
+  }
+  for (const effect of state.effects) {
+    batch.batchedHandlers.add(effect);
+  }
+  for (const [, subscription] of state.subscriptions) {
+    batch.batchedHandlers.add(subscription);
+  }
+  if (batch.batchDepth === 0) {
+    batch.flushEffects();
+  }
+}
+exports.emitArrayChanges = emitArrayChanges;
+exports.emitValue = emitValue;

package/dist/helpers/emit.js

@@ -0,0 +1,42 @@
+import { batchedHandlers, batchDepth, flushEffects } from "../batch.js";
+function emitArrayChanges(first, second) {
+  let { length } = first;
+  if (length !== second.length) {
+    return true;
+  }
+  let offset = 0;
+  if (length >= 100) {
+    offset = Math.round(length / 10);
+    offset = offset > 25 ? 25 : offset;
+    for (let index = 0; index < offset; index += 1) {
+      if (!Object.is(first[index], second[index])) {
+        return true;
+      }
+    }
+  }
+  length -= offset;
+  for (let index = offset; index < length; index += 1) {
+    if (!Object.is(first[index], second[index])) {
+      return true;
+    }
+  }
+  return false;
+}
+function emitValue(state) {
+  for (const computed of state.computeds) {
+    computed.effect.dirty = true;
+  }
+  for (const effect of state.effects) {
+    batchedHandlers.add(effect);
+  }
+  for (const [, subscription] of state.subscriptions) {
+    batchedHandlers.add(subscription);
+  }
+  if (batchDepth === 0) {
+    flushEffects();
+  }
+}
+export {
+  emitArrayChanges,
+  emitValue
+};

package/dist/helpers/is.cjs

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function isArray(value) {
+  return isMora(value, arrayName);
+}
+function isComputed(value) {
+  return isMora(value, computedName);
+}
+function isEffect(value) {
+  return isMora(value, effectName);
+}
+function isMora(value, name) {
+  return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value.$mora === name : name.has(value.$mora));
+}
+function isReactive(value) {
+  return isMora(value, reactiveNames);
+}
+function isSignal(value) {
+  return isMora(value, signalName);
+}
+const arrayName = "array";
+const computedName = "computed";
+const effectName = "effect";
+const signalName = "signal";
+const reactiveNames = /* @__PURE__ */ new Set([arrayName, computedName, signalName]);
+exports.arrayName = arrayName;
+exports.computedName = computedName;
+exports.effectName = effectName;
+exports.isArray = isArray;
+exports.isComputed = isComputed;
+exports.isEffect = isEffect;
+exports.isReactive = isReactive;
+exports.isSignal = isSignal;
+exports.signalName = signalName;

package/dist/helpers/is.js

@@ -0,0 +1,34 @@
+function isArray(value) {
+  return isMora(value, arrayName);
+}
+function isComputed(value) {
+  return isMora(value, computedName);
+}
+function isEffect(value) {
+  return isMora(value, effectName);
+}
+function isMora(value, name) {
+  return typeof value === "object" && value != null && "$mora" in value && (typeof name === "string" ? value.$mora === name : name.has(value.$mora));
+}
+function isReactive(value) {
+  return isMora(value, reactiveNames);
+}
+function isSignal(value) {
+  return isMora(value, signalName);
+}
+const arrayName = "array";
+const computedName = "computed";
+const effectName = "effect";
+const signalName = "signal";
+const reactiveNames = /* @__PURE__ */ new Set([arrayName, computedName, signalName]);
+export {
+  arrayName,
+  computedName,
+  effectName,
+  isArray,
+  isComputed,
+  isEffect,
+  isReactive,
+  isSignal,
+  signalName
+};

package/dist/helpers/value.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const effect = require("../effect.cjs");
+const value_computed = require("../value/computed.cjs");
+const helpers_emit = require("./emit.cjs");
+function getValue(state) {
+  if (value_computed.activeComputed != null) {
+    state.computeds.add(value_computed.activeComputed);
+  }
+  if (effect.activeEffect != null) {
+    state.effects.add(effect.activeEffect);
+  }
+  return state.value;
+}
+function setValue(state, value) {
+  if (!Object.is(state.value, value)) {
+    state.value = value;
+    helpers_emit.emitValue(state);
+  }
+}
+exports.getValue = getValue;
+exports.setValue = setValue;

package/dist/helpers/value.js

@@ -0,0 +1,22 @@
+import { activeEffect } from "../effect.js";
+import { activeComputed } from "../value/computed.js";
+import { emitValue } from "./emit.js";
+function getValue(state) {
+  if (activeComputed != null) {
+    state.computeds.add(activeComputed);
+  }
+  if (activeEffect != null) {
+    state.effects.add(activeEffect);
+  }
+  return state.value;
+}
+function setValue(state, value) {
+  if (!Object.is(state.value, value)) {
+    state.value = value;
+    emitValue(state);
+  }
+}
+export {
+  getValue,
+  setValue
+};

package/dist/index.cjs

@@ -1,16 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const batch = require("./batch.cjs");
-const computed = require("./computed.cjs");
 const effect = require("./effect.cjs");
-const is = require("./is.cjs");
-const signal = require("./signal.cjs");
+const helpers_is = require("./helpers/is.cjs");
+const value_array = require("./value/array.cjs");
+const value_computed = require("./value/computed.cjs");
+const value_signal = require("./value/signal.cjs");
 exports.startBatch = batch.startBatch;
 exports.stopBatch = batch.stopBatch;
-exports.computed = computed.computed;
 exports.effect = effect.effect;
-exports.isComputed = is.isComputed;
-exports.isEffect = is.isEffect;
-exports.isReactive = is.isReactive;
-exports.isSignal = is.isSignal;
-exports.signal = signal.signal;
+exports.isArray = helpers_is.isArray;
+exports.isComputed = helpers_is.isComputed;
+exports.isEffect = helpers_is.isEffect;
+exports.isReactive = helpers_is.isReactive;
+exports.isSignal = helpers_is.isSignal;
+exports.array = value_array.array;
+exports.computed = value_computed.computed;
+exports.signal = value_signal.signal;

package/dist/index.js

@@ -1,11 +1,14 @@
 import { startBatch, stopBatch } from "./batch.js";
-import { computed } from "./computed.js";
 import { effect } from "./effect.js";
-import { isComputed, isEffect, isReactive, isSignal } from "./is.js";
-import { signal } from "./signal.js";
+import { isArray, isComputed, isEffect, isReactive, isSignal } from "./helpers/is.js";
+import { array } from "./value/array.js";
+import { computed } from "./value/computed.js";
+import { signal } from "./value/signal.js";
 export {
+  array,
   computed,
   effect,
+  isArray,
   isComputed,
   isEffect,
   isReactive,

package/dist/mora.full.js

@@ -1,7 +1,48 @@
+/**
+ * Is the value a reactive array?
+ */
+function isArray(value) {
+    return isMora(value, arrayName);
+}
+/**
+ * Is the value a computed signal?
+ */
+function isComputed(value) {
+    return isMora(value, computedName);
+}
+/**
+ * Is the value an effect?
+ */
+function isEffect(value) {
+    return isMora(value, effectName);
+}
+function isMora(value, name) {
+    return (typeof value === 'object' &&
+        value != null &&
+        '$mora' in value &&
+        (typeof name === 'string'
+            ? value.$mora === name
+            : name.has(value.$mora)));
+}
+function isReactive(value) {
+    return isMora(value, reactiveNames);
+}
+/**
+ * Is the value a signal?
+ */
+function isSignal(value) {
+    return isMora(value, signalName);
+}
+const arrayName = 'array';
+const computedName = 'computed';
+const effectName = 'effect';
+const signalName = 'signal';
+const reactiveNames = new Set([arrayName, computedName, signalName]);
+
 class Effect {
     constructor(callback) {
         Object.defineProperty(this, '$mora', {
-            value: 'effect',
+            value: effectName,
         });
         this.state = {
             callback,
@@ -27,34 +68,6 @@ function effect(callback) {
 }
 let activeEffect;
 
-/**
- * Is the value a computed signal?
- */
-function isComputed(value) {
-    return isMora(value, 'computed');
-}
-/**
- * Is the value an effect?
- */
-function isEffect(value) {
-    return isMora(value, 'effect');
-}
-function isMora(value, name) {
-    return (typeof value === 'object' &&
-        value != null &&
-        '$mora' in value &&
-        value.$mora === name);
-}
-function isReactive(value) {
-    return isComputed(value) || isSignal(value);
-}
-/**
- * Is the value a signal?
- */
-function isSignal(value) {
-    return isMora(value, 'signal');
-}
-
 function flushEffects() {
     while (batchDepth === 0 && batchedHandlers.size > 0) {
         const handlers = [...batchedHandlers];
@@ -87,6 +100,44 @@ function stopBatch() {
 const batchedHandlers = new Set();
 let batchDepth = 0;
 
+function emitArrayChanges(first, second) {
+    let { length } = first;
+    if (length !== second.length) {
+        return true;
+    }
+    let offset = 0;
+    if (length >= 100) {
+        offset = Math.round(length / 10);
+        offset = offset > 25 ? 25 : offset;
+        for (let index = 0; index < offset; index += 1) {
+            if (!Object.is(first[index], second[index])) {
+                return true;
+            }
+        }
+    }
+    length -= offset;
+    for (let index = offset; index < length; index += 1) {
+        if (!Object.is(first[index], second[index])) {
+            return true;
+        }
+    }
+    return false;
+}
+function emitValue(state) {
+    for (const computed of state.computeds) {
+        computed.effect.dirty = true;
+    }
+    for (const effect of state.effects) {
+        batchedHandlers.add(effect);
+    }
+    for (const [, subscription] of state.subscriptions) {
+        batchedHandlers.add(subscription);
+    }
+    if (batchDepth === 0) {
+        flushEffects();
+    }
+}
+
 class Subscription {
     state;
     callback;
@@ -140,6 +191,18 @@ class Reactive {
     subscribe(callback) {
         return subscribe(this.state, callback);
     }
+    /**
+     * JSON representation of the value
+     */
+    toJSON() {
+        return this.get();
+    }
+    /**
+     * String representation of the value
+     */
+    toString() {
+        return String(this.get());
+    }
     /**
      * Unsubscribe from changes
      */
@@ -155,7 +218,7 @@ class Computed extends Reactive {
         instance: undefined,
     };
     constructor(callback) {
-        super('computed', undefined);
+        super(computedName, undefined);
         this.effect.instance = effect(() => {
             if (this.effect.dirty) {
                 const previousComputed = activeComputed;
@@ -201,42 +264,37 @@ function computed(callback) {
     return new Computed(callback);
 }
 
+function getValue(state) {
+    if (activeComputed != null) {
+        state.computeds.add(activeComputed);
+    }
+    if (activeEffect != null) {
+        state.effects.add(activeEffect);
+    }
+    return state.value;
+}
+function setValue$1(state, value) {
+    if (!Object.is(state.value, value)) {
+        state.value = value;
+        emitValue(state);
+    }
+}
+
 class Signal extends Reactive {
     constructor(value) {
-        super('signal', value);
+        super(signalName, value);
     }
     /**
      * @inheritdoc
      */
     get() {
-        if (activeComputed != null) {
-            this.state.computeds.add(activeComputed);
-        }
-        if (activeEffect != null) {
-            this.state.effects.add(activeEffect);
-        }
-        return this.state.value;
+        return getValue(this.state);
     }
     /**
      * Set the value
      */
     set(value) {
-        if (Object.is(this.state.value, value)) {
-            return;
-        }
-        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) {
-            batchedHandlers.add(subscription);
-        }
-        if (batchDepth === 0) {
-            flushEffects();
-        }
+        setValue$1(this.state, value);
     }
     /**
      * Update the value
@@ -245,8 +303,109 @@ class Signal extends Reactive {
         this.set(callback(this.state.value));
     }
 }
+/**
+ * Create a reactive value
+ */
 function signal(value) {
     return new Signal(value);
 }
 
-export { computed, effect, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch };
+class ReactiveArray extends Reactive {
+    #size = signal(0);
+    /**
+     * The length of the array
+     */
+    get length() {
+        return this.#size.get();
+    }
+    /**
+     * Set the length of the array
+     */
+    set length(value) {
+        if (typeof value === 'number' &&
+            value >= 0 &&
+            value !== this.state.value.length) {
+            this.get().length = value;
+        }
+    }
+    constructor(value) {
+        super(arrayName, new Proxy(value, {
+            get: (target, property) => updateMethods.has(property)
+                ? updateArray(property, target, this.state, this.#size)
+                : Reflect.get(target, property),
+            set: (target, property, value) => setValue(target, property, value, this.state, this.#size),
+        }));
+        this.#size.set(value.length);
+    }
+    /**
+     * @inheritdoc
+     */
+    get() {
+        return getValue(this.state);
+    }
+    peek(length) {
+        return length === true ? this.#size.peek() : [...this.state.value];
+    }
+    set(first, second) {
+        if (Array.isArray(first)) {
+            this.state.value.splice(0, this.state.value.length, ...first);
+        }
+        else if (first === 'length') {
+            this.length = second;
+        }
+        else if (typeof first === 'number') {
+            this.state.value[first] = second;
+        }
+    }
+}
+/**
+ * Create a reactive array
+ */
+function array(value) {
+    return new ReactiveArray(Array.isArray(value) ? value : []);
+}
+function setValue(target, property, value, state, length) {
+    const isIndex = !Number.isNaN(Number(property));
+    const isLength = property === 'length';
+    if (!isIndex && !isLength) {
+        return Reflect.set(target, property, value);
+    }
+    const previous = Reflect.get(target, property);
+    if (!Object.is(previous, value)) {
+        Reflect.set(target, property, value);
+        emitValue(state);
+        length.set(target.length);
+    }
+    return true;
+}
+function updateArray(type, array, state, length) {
+    const affectsLength = lengthAffectingMethods.has(type);
+    const previousArray = affectsLength ? [] : [...array];
+    const previousLength = array.length;
+    return (...args) => {
+        const result = array[type](...args);
+        if (affectsLength
+            ? array.length !== previousLength
+            : emitArrayChanges(previousArray, array)) {
+            emitValue(state);
+            length.set(array.length);
+        }
+        return result;
+    };
+}
+const lengthAffectingMethods = new Set([
+    'pop',
+    'push',
+    'shift',
+    'unshift',
+]);
+const updateMethods = new Set([
+    ...lengthAffectingMethods,
+    'copyWithin',
+    'fill',
+    'reverse',
+    'sort',
+    'splice',
+]);
+
+export { array, computed, effect, isArray, isComputed, isEffect, isReactive, isSignal, signal, startBatch, stopBatch };