Preparations for v0.10.0 release

documentation/state.md

@@ -119,6 +119,19 @@ setState(
 // }
 ```
 
+## Modifiers
+This library also provides of state setter modifiers which can optionally be included to provide different behavior when setting state.
+
+### `force(changes)`
+### `force(...path, changes)`
+### `force([...path, changes], [...path, changes])`
+
+By default state only updates on value change. To get typical signal like behavior on a change you can force update using the force modifier.
+
+```js
+setState(force({name: 'John'}));
+```
+
 ### `reconcile(...path, value)`
 
 This can be used to do deep diffs by applying the changes from a new State value. This is useful when pulling in immutable data trees from stores to ensure the least amount of mutations to your state. It can also be used to replace the all keys on the base state object if no path is provided as it does both positive and negative diff.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "solid-js",
   "description": "A declarative JavaScript library for building user interfaces.",
-  "version": "0.9.8",
+  "version": "0.10.0-beta.0",
   "author": "Ryan Carniato",
   "license": "MIT",
   "repository": {
@@ -31,10 +31,10 @@
     "dom-expressions": "0.11.1",
     "hyper-dom-expressions": "~0.11.1",
     "jest": "~24.8.0",
-    "lit-dom-expressions": "~0.11.2",
+    "lit-dom-expressions": "~0.11.3",
     "npm-run-all": "^4.1.5",
     "rimraf": "^2.6.3",
-    "rollup": "^1.19.3",
+    "rollup": "^1.19.4",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-node-resolve": "^5.2.0",
     "typescript": "^3.5.3"

src/dom/index.ts

@@ -7,9 +7,12 @@ import {
   onCleanup,
   sample,
   map,
+  afterEffects,
   useContext
 } from "../index";
 
+const equalFn = <T>(a: T, b: T) => a === b;
+
 export function render(code: () => any, element: Node): () => void {
   let disposer: () => void;
   createRoot(dispose => {
@@ -25,10 +28,12 @@ export function For<T, U>(props: {
   transform?: (mapped: () => U[], source: () => T[]) => () => U[];
   children: (item: T, index: number) => U;
 }) {
-  const mapped = createMemo(map<T, U>(
-    props.children,
-    "fallback" in props ? () => props.fallback : undefined
-  )(() => props.each));
+  const mapped = createMemo(
+    map<T, U>(
+      props.children,
+      "fallback" in props ? () => props.fallback : undefined
+    )(() => props.each)
+  );
   return props.transform ? props.transform(mapped, () => props.each) : mapped;
 }
 
@@ -41,56 +46,37 @@ export function Show<T>(props: {
   ) => () => T | undefined;
   children: T;
 }) {
-  let dispose: () => void, cached: T | undefined, prev: Boolean;
-  onCleanup(() => dispose && dispose());
   const useFallback = "fallback" in props,
-    mapped = createMemo(() => {
-      const v = props.when;
-      if (v === prev) return cached;
-      prev = v;
-      dispose && dispose();
-      return createRoot(disposer => {
-        dispose = disposer;
-        return (cached = v
-          ? props.children
-          : useFallback
-          ? props.fallback
-          : undefined);
-      });
-    });
-  return props.transform ? props.transform(mapped, () => props.when) : mapped;
+    condition = createMemo(() => props.when, undefined, equalFn),
+    mapped = createMemo(() =>
+      condition() ? props.children : useFallback ? props.fallback : undefined
+    );
+  return props.transform ? props.transform(mapped, condition) : mapped;
 }
 
 export function Switch<T>(props: {
   fallback?: T;
   transform?: (mapped: () => T, source: () => number) => () => T;
   children: any;
 }) {
-  let conditions = props.children,
-    dispose: () => void,
-    cached: T | undefined,
-    prev: number;
+  let conditions = props.children;
   Array.isArray(conditions) || (conditions = [conditions]);
-  onCleanup(() => dispose && dispose());
   const useFallback = "fallback" in props,
-    evalConditions = () => {
-      for (let i = 0; i < conditions.length; i++) {
-        if (conditions[i].when) return i;
-      }
-      return -1;
-    },
+    evalConditions = createMemo(
+      () => {
+        for (let i = 0; i < conditions.length; i++) {
+          if (conditions[i].when) return i;
+        }
+        return -1;
+      },
+      undefined,
+      equalFn
+    ),
     mapped = createMemo(() => {
       const index = evalConditions();
-      if (index === prev) return cached;
-      prev = index;
-      dispose && dispose();
-      return createRoot(disposer => {
-        dispose = disposer;
-        return (cached =
-          index < 0
-            ? useFallback && props.fallback
-            : conditions[index].children);
-      });
+      return index < 0
+        ? useFallback && props.fallback
+        : conditions[index].children;
     });
   return props.transform ? props.transform(mapped, evalConditions) : mapped;
 }
@@ -110,6 +96,7 @@ export function Suspense(props: {
     {
       value: props.delayMs,
       children: () => {
+        let dispose: () => void;
         const c = useContext(SuspenseContext),
           rendered = sample(() => props.children),
           marker = document.createTextNode(""),
@@ -124,8 +111,14 @@ export function Suspense(props: {
         return createMemo(() => {
           const value = c.suspended();
           if (c.initializing) c.initializing = false;
+          dispose && dispose();
           if (!value) return [marker, rendered];
-          setTimeout(() => insert(doc.body, rendered));
+          afterEffects(() =>
+            createRoot(disposer => {
+              dispose = disposer;
+              insert(doc.body, rendered)
+            })
+          );
           return [marker, props.fallback];
         });
       }

src/index.ts

@@ -14,7 +14,7 @@ export {
   getContextOwner
 } from "./signal";
 
-export { createState, unwrap } from "./state";
+export { createState, unwrap, force } from "./state";
 
 export { reconcile } from "./reconcile";