solid-js 1.3.17 → 1.4.0-beta.2

package/dist/solid.js

@@ -127,6 +127,7 @@ function nextHydrateContext() {
 
 const equalFn = (a, b) => a === b;
 const $PROXY = Symbol("solid-proxy");
+const $TRACK = Symbol("solid-track");
 const $DEVCOMP = Symbol("solid-dev-component");
 const signalOptions = {
   equals: equalFn
@@ -201,7 +202,7 @@ function createEffect(fn, value, options) {
         s = SuspenseContext && lookup(Owner, SuspenseContext.id);
   if (s) c.suspense = s;
   c.user = true;
-  Effects ? Effects.push(c) : queueMicrotask(() => updateComputation(c));
+  Effects ? Effects.push(c) : updateComputation(c);
 }
 function createReaction(onInvalidate, options) {
   let fn;
@@ -242,13 +243,8 @@ function createResource(source, fetcher, options) {
     source = true;
   }
   options || (options = {});
-  if (options.globalRefetch !== false) {
-    Resources || (Resources = new Set());
-    Resources.add(load);
-    Owner && onCleanup(() => Resources.delete(load));
-  }
   const contexts = new Set(),
-        [s, set] = createSignal(options.initialValue),
+        [value, setValue] = createSignal(options.initialValue),
         [track, trigger] = createSignal(undefined, {
     equals: false
   }),
@@ -260,7 +256,8 @@ function createResource(source, fetcher, options) {
       id = null,
       loadedUnderTransition = false,
       scheduled = false,
-      dynamic = typeof source === "function";
+      resolved = ("initialValue" in options),
+      dynamic = typeof source === "function" && createMemo(source);
   if (sharedConfig.context) {
     id = `${sharedConfig.context.id}${sharedConfig.context.count++}`;
     if (sharedConfig.load) initP = sharedConfig.load(id);
@@ -268,6 +265,7 @@ function createResource(source, fetcher, options) {
   function loadEnd(p, v, e, key) {
     if (pr === p) {
       pr = null;
+      resolved = true;
       if (initP && p === initP && options.onHydrated) options.onHydrated(key, {
         value: v
       });
@@ -290,7 +288,7 @@ function createResource(source, fetcher, options) {
   }
   function completeLoad(v) {
     batch(() => {
-      set(() => v);
+      setValue(() => v);
       setLoading(false);
       for (const c of contexts.keys()) c.decrement();
       contexts.clear();
@@ -298,7 +296,7 @@ function createResource(source, fetcher, options) {
   }
   function read() {
     const c = SuspenseContext && lookup(Owner, SuspenseContext.id),
-          v = s();
+          v = value();
     if (err) throw err;
     if (Listener && !Listener.user && c) {
       createComputed(() => {
@@ -317,15 +315,15 @@ function createResource(source, fetcher, options) {
     if (refetching && scheduled) return;
     scheduled = false;
     setError(err = undefined);
-    const lookup = dynamic ? source() : source;
+    const lookup = dynamic ? dynamic() : source;
     loadedUnderTransition = Transition && Transition.running;
     if (lookup == null || lookup === false) {
-      loadEnd(pr, untrack(s));
+      loadEnd(pr, untrack(value));
       return;
     }
     if (Transition && pr) Transition.promises.delete(pr);
     const p = initP || untrack(() => fetcher(lookup, {
-      value: s(),
+      value: value(),
       refetching
     }));
     if (typeof p !== "object" || !("then" in p)) {
@@ -351,18 +349,21 @@ function createResource(source, fetcher, options) {
       get() {
         return error();
       }
+    },
+    latest: {
+      get() {
+        if (!resolved) return read();
+        if (err) throw err;
+        return value();
+      }
     }
   });
   if (dynamic) createComputed(() => load(false));else load(false);
   return [read, {
     refetch: load,
-    mutate: set
+    mutate: setValue
   }];
 }
-let Resources;
-function refetchResources(info) {
-  return Resources && Promise.all([...Resources].map(fn => fn(info)));
-}
 function createDeferred(source, options) {
   let t,
       timeout = options ? options.timeoutMs : undefined;
@@ -736,11 +737,14 @@ function runUpdates(fn, init) {
   if (Effects) wait = true;else Effects = [];
   ExecCount++;
   try {
-    return fn();
+    const res = fn();
+    completeUpdates(wait);
+    return res;
   } catch (err) {
     handleError(err);
   } finally {
-    completeUpdates(wait);
+    Updates = null;
+    if (!wait) Effects = null;
   }
 }
 function completeUpdates(wait) {
@@ -981,6 +985,7 @@ function mapArray(list, mapFn, options = {}) {
     let newItems = list() || [],
         i,
         j;
+    newItems[$TRACK];
     return untrack(() => {
       let newLen = newItems.length,
           newIndices,
@@ -1082,6 +1087,7 @@ function indexArray(list, mapFn, options = {}) {
   onCleanup(() => dispose(disposers));
   return () => {
     const newItems = list() || [];
+    newItems[$TRACK];
     return untrack(() => {
       if (newItems.length === 0) {
         if (len !== 0) {
@@ -1141,12 +1147,12 @@ function createComponent(Comp, props) {
     if (sharedConfig.context) {
       const c = sharedConfig.context;
       setHydrateContext(nextHydrateContext());
-      const r = untrack(() => Comp(props));
+      const r = untrack(() => Comp(props || {}));
       setHydrateContext(c);
       return r;
     }
   }
-  return untrack(() => Comp(props));
+  return untrack(() => Comp(props || {}));
 }
 function trueFn() {
   return true;
@@ -1177,7 +1183,7 @@ const propTraps = {
   }
 };
 function resolveSource(s) {
-  return typeof s === "function" ? s() : s;
+  return (s = typeof s === "function" ? s() : s) == null ? {} : s;
 }
 function mergeProps(...sources) {
   return new Proxy({
@@ -1245,9 +1251,7 @@ function lazy(fn) {
       });
       comp = s;
     } else if (!comp) {
-      const [s] = createResource(() => (p || (p = fn())).then(mod => mod.default), {
-        globalRefetch: false
-      });
+      const [s] = createResource(() => (p || (p = fn())).then(mod => mod.default));
       comp = s;
     } else {
       const c = comp();
@@ -1499,4 +1503,4 @@ function Suspense(props) {
 
 let DEV;
 
-export { $DEVCOMP, $PROXY, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, refetchResources, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };
+export { $DEVCOMP, $PROXY, $TRACK, DEV, ErrorBoundary, For, Index, Match, Show, Suspense, SuspenseList, Switch, batch, cancelCallback, children, createComponent, createComputed, createContext, createDeferred, createEffect, createMemo, createReaction, createRenderEffect, createResource, createRoot, createSelector, createSignal, createUniqueId, enableExternalSource, enableHydration, enableScheduling, equalFn, from, getListener, getOwner, indexArray, lazy, mapArray, mergeProps, observable, on, onCleanup, onError, onMount, requestCallback, resetErrorBoundaries, runWithOwner, sharedConfig, splitProps, startTransition, untrack, useContext, useTransition };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "1.3.17",
+  "version": "1.4.0-beta.2",
   "author": "Ryan Carniato",
   "license": "MIT",
   "homepage": "https://solidjs.com",
@@ -144,5 +144,5 @@
     "compiler",
     "performance"
   ],
-  "gitHead": "88ce357264a4966d38d143143a3efe8a394e57c0"
+  "gitHead": "40902779866f8006cc5460c6ff82dbadf85d3f0f"
 }

package/store/dist/dev.cjs

@@ -71,11 +71,14 @@ function proxyDescriptor(target, property) {
   desc.get = () => target[solidJs.$PROXY][property];
   return desc;
 }
-function ownKeys(target) {
+function trackSelf(target) {
   if (solidJs.getListener()) {
     const nodes = getDataNodes(target);
     (nodes._ || (nodes._ = createDataNode()))();
   }
+}
+function ownKeys(target) {
+  trackSelf(target);
   return Reflect.ownKeys(target);
 }
 function createDataNode() {
@@ -92,18 +95,12 @@ const proxyTraps$1 = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
     }
-    return wrappable ? wrap$1(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
+    return isWrappable(value) ? wrap$1(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
   set() {
     console.warn("Cannot mutate a Store directly");
@@ -120,16 +117,14 @@ function setProperty(state, property, value) {
   if (state[property] === value) return;
   const array = Array.isArray(state);
   const len = state.length;
-  const isUndefined = value === undefined;
-  const notify = array || isUndefined === property in state;
-  if (isUndefined) {
+  if (value === undefined) {
     delete state[property];
   } else state[property] = value;
   let nodes = getDataNodes(state),
       node;
   (node = nodes[property]) && node.$();
   if (array && state.length !== len) (node = nodes.length) && node.$();
-  notify && (node = nodes._) && node.$();
+  (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {
   const keys = Object.keys(value);
@@ -138,6 +133,18 @@ function mergeStoreNode(state, value) {
     setProperty(state, key, value[key]);
   }
 }
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
+  let i = 0,
+      len = next.length;
+  for (; i < len; i++) {
+    const value = next[i];
+    if (current[i] !== value) setProperty(current, i, value);
+  }
+  setProperty(current, "length", len);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       prev = current;
@@ -185,6 +192,7 @@ function updatePath(current, path, traversed = []) {
 }
 function createStore(store, options) {
   const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
   if (typeof unwrappedStore !== "object" && typeof unwrappedStore !== "function") throw new Error(`Unexpected type ${typeof unwrappedStore} received when initializing 'createStore'. Expected an object.`);
   const wrappedStore = wrap$1(unwrappedStore, (options && options.name || solidJs.DEV.hashValue(unwrappedStore)));
   {
@@ -194,7 +202,9 @@ function createStore(store, options) {
     });
   }
   function setStore(...args) {
-    solidJs.batch(() => updatePath(unwrappedStore, args));
+    solidJs.batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+    });
   }
   return [wrappedStore, setStore];
 }
@@ -205,18 +215,14 @@ const proxyTraps = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
-    return wrappable ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
+    return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
   set(target, property, value) {
     setProperty(target, property, unwrap(value));
@@ -271,6 +277,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -348,9 +357,9 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    applyState(v, {
+    solidJs.batch(() => applyState(v, {
       state
-    }, "state", merge, key);
+    }, "state", merge, key));
     return state;
   };
 }
@@ -379,6 +388,7 @@ function produce(fn) {
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
 exports.unwrap = unwrap;

package/store/dist/dev.js

@@ -1,4 +1,4 @@
-import { $PROXY, DEV, getListener, batch, createSignal } from 'solid-js';
+import { $PROXY, DEV, $TRACK, getListener, batch, createSignal } from 'solid-js';
 
 const $RAW = Symbol("store-raw"),
       $NODE = Symbol("store-node"),
@@ -67,11 +67,14 @@ function proxyDescriptor(target, property) {
   desc.get = () => target[$PROXY][property];
   return desc;
 }
-function ownKeys(target) {
+function trackSelf(target) {
   if (getListener()) {
     const nodes = getDataNodes(target);
     (nodes._ || (nodes._ = createDataNode()))();
   }
+}
+function ownKeys(target) {
+  trackSelf(target);
   return Reflect.ownKeys(target);
 }
 function createDataNode() {
@@ -88,18 +91,12 @@ const proxyTraps$1 = {
     if (property === $PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === $TRACK) return trackSelf(target);
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
     }
-    return wrappable ? wrap$1(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
+    return isWrappable(value) ? wrap$1(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
   set() {
     console.warn("Cannot mutate a Store directly");
@@ -116,16 +113,14 @@ function setProperty(state, property, value) {
   if (state[property] === value) return;
   const array = Array.isArray(state);
   const len = state.length;
-  const isUndefined = value === undefined;
-  const notify = array || isUndefined === property in state;
-  if (isUndefined) {
+  if (value === undefined) {
     delete state[property];
   } else state[property] = value;
   let nodes = getDataNodes(state),
       node;
   (node = nodes[property]) && node.$();
   if (array && state.length !== len) (node = nodes.length) && node.$();
-  notify && (node = nodes._) && node.$();
+  (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {
   const keys = Object.keys(value);
@@ -134,6 +129,18 @@ function mergeStoreNode(state, value) {
     setProperty(state, key, value[key]);
   }
 }
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
+  let i = 0,
+      len = next.length;
+  for (; i < len; i++) {
+    const value = next[i];
+    if (current[i] !== value) setProperty(current, i, value);
+  }
+  setProperty(current, "length", len);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       prev = current;
@@ -181,6 +188,7 @@ function updatePath(current, path, traversed = []) {
 }
 function createStore(store, options) {
   const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
   if (typeof unwrappedStore !== "object" && typeof unwrappedStore !== "function") throw new Error(`Unexpected type ${typeof unwrappedStore} received when initializing 'createStore'. Expected an object.`);
   const wrappedStore = wrap$1(unwrappedStore, (options && options.name || DEV.hashValue(unwrappedStore)));
   {
@@ -190,7 +198,9 @@ function createStore(store, options) {
     });
   }
   function setStore(...args) {
-    batch(() => updatePath(unwrappedStore, args));
+    batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+    });
   }
   return [wrappedStore, setStore];
 }
@@ -201,18 +211,14 @@ const proxyTraps = {
     if (property === $PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === $TRACK) return trackSelf(target);
     if (getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => batch(() => Array.prototype[property].apply(receiver, args));
     }
-    return wrappable ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
+    return isWrappable(value) ? wrap(value, target[$NAME] && `${target[$NAME]}:${property.toString()}`) : value;
   },
   set(target, property, value) {
     setProperty(target, property, unwrap(value));
@@ -267,6 +273,9 @@ function createMutable(state, options) {
   }
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -344,9 +353,9 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    applyState(v, {
+    batch(() => applyState(v, {
       state
-    }, "state", merge, key);
+    }, "state", merge, key));
     return state;
   };
 }
@@ -372,4 +381,4 @@ function produce(fn) {
   };
 }
 
-export { $RAW, createMutable, createStore, produce, reconcile, unwrap };
+export { $RAW, createMutable, createStore, modifyMutable, produce, reconcile, unwrap };

package/store/dist/store.cjs

@@ -68,11 +68,14 @@ function proxyDescriptor(target, property) {
   desc.get = () => target[solidJs.$PROXY][property];
   return desc;
 }
-function ownKeys(target) {
+function trackSelf(target) {
   if (solidJs.getListener()) {
     const nodes = getDataNodes(target);
     (nodes._ || (nodes._ = createDataNode()))();
   }
+}
+function ownKeys(target) {
+  trackSelf(target);
   return Reflect.ownKeys(target);
 }
 function createDataNode() {
@@ -89,18 +92,12 @@ const proxyTraps$1 = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
     }
-    return wrappable ? wrap$1(value) : value;
+    return isWrappable(value) ? wrap$1(value) : value;
   },
   set() {
     return true;
@@ -115,16 +112,14 @@ function setProperty(state, property, value) {
   if (state[property] === value) return;
   const array = Array.isArray(state);
   const len = state.length;
-  const isUndefined = value === undefined;
-  const notify = array || isUndefined === property in state;
-  if (isUndefined) {
+  if (value === undefined) {
     delete state[property];
   } else state[property] = value;
   let nodes = getDataNodes(state),
       node;
   (node = nodes[property]) && node.$();
   if (array && state.length !== len) (node = nodes.length) && node.$();
-  notify && (node = nodes._) && node.$();
+  (node = nodes._) && node.$();
 }
 function mergeStoreNode(state, value) {
   const keys = Object.keys(value);
@@ -133,6 +128,18 @@ function mergeStoreNode(state, value) {
     setProperty(state, key, value[key]);
   }
 }
+function updateArray(current, next) {
+  if (typeof next === "function") next = next(current);
+  next = unwrap(next);
+  if (current === next) return;
+  let i = 0,
+      len = next.length;
+  for (; i < len; i++) {
+    const value = next[i];
+    if (current[i] !== value) setProperty(current, i, value);
+  }
+  setProperty(current, "length", len);
+}
 function updatePath(current, path, traversed = []) {
   let part,
       prev = current;
@@ -180,9 +187,12 @@ function updatePath(current, path, traversed = []) {
 }
 function createStore(store, options) {
   const unwrappedStore = unwrap(store || {});
+  const isArray = Array.isArray(unwrappedStore);
   const wrappedStore = wrap$1(unwrappedStore);
   function setStore(...args) {
-    solidJs.batch(() => updatePath(unwrappedStore, args));
+    solidJs.batch(() => {
+      isArray && args.length === 1 ? updateArray(unwrappedStore, args[0]) : updatePath(unwrappedStore, args);
+    });
   }
   return [wrappedStore, setStore];
 }
@@ -193,18 +203,14 @@ const proxyTraps = {
     if (property === solidJs.$PROXY) return receiver;
     const value = target[property];
     if (property === $NODE || property === "__proto__") return value;
-    const wrappable = isWrappable(value);
+    if (property === solidJs.$TRACK) return trackSelf(target);
     if (solidJs.getListener() && (typeof value !== "function" || target.hasOwnProperty(property))) {
-      let nodes, node;
-      if (wrappable && (nodes = getDataNodes(value))) {
-        node = nodes._ || (nodes._ = createDataNode());
-        node();
-      }
-      nodes = getDataNodes(target);
-      node = nodes[property] || (nodes[property] = createDataNode());
-      node();
+      const nodes = getDataNodes(target);
+      (nodes[property] || (nodes[property] = createDataNode()))();
+    } else if (value != null && typeof value === "function" && value === Array.prototype[property]) {
+      return (...args) => solidJs.batch(() => Array.prototype[property].apply(receiver, args));
     }
-    return wrappable ? wrap(value) : value;
+    return isWrappable(value) ? wrap(value) : value;
   },
   set(target, property, value) {
     setProperty(target, property, unwrap(value));
@@ -249,6 +255,9 @@ function createMutable(state, options) {
   const wrappedStore = wrap(unwrappedStore);
   return wrappedStore;
 }
+function modifyMutable(state, modifier) {
+  solidJs.batch(() => modifier(unwrap(state)));
+}
 
 function applyState(target, parent, property, merge, key) {
   const previous = parent[property];
@@ -326,9 +335,9 @@ function reconcile(value, options = {}) {
         v = unwrap(value);
   return state => {
     if (!isWrappable(state) || !isWrappable(v)) return v;
-    applyState(v, {
+    solidJs.batch(() => applyState(v, {
       state
-    }, "state", merge, key);
+    }, "state", merge, key));
     return state;
   };
 }
@@ -357,6 +366,7 @@ function produce(fn) {
 exports.$RAW = $RAW;
 exports.createMutable = createMutable;
 exports.createStore = createStore;
+exports.modifyMutable = modifyMutable;
 exports.produce = produce;
 exports.reconcile = reconcile;
 exports.unwrap = unwrap;