solid-ctrl-flow 1.0.63 → 2.0.1

package/dist/index.d.ts

@@ -10,22 +10,6 @@ export declare function Case(props: ParentProps<{
     value: unknown;
 }>): JSX.Element;
 
-export declare function Case(props: ParentProps<{
-    pred(x: any): unknown;
-}>): JSX.Element;
-
-export declare function Case<T>(props: {
-    pred(x: any): T;
-    keyed?: false;
-    children(x: Accessor<NonNullable<T>>): JSX.Element;
-}): JSX.Element;
-
-export declare function Case<T>(props: {
-    pred(x: any): T;
-    keyed: true;
-    children(x: NonNullable<T>): JSX.Element;
-}): JSX.Element;
-
 /**
  * Creates a slot that allows you to show a component outside of its parent.
  * It works with arbitrary nesting.
@@ -44,7 +28,7 @@ export declare function Case<T>(props: {
  *          </e.Source>
  *      </div>
  *  </e.Joint>
- * <>
+ * </>
  * ```
  * @param name Name to give to the context of the extractor
  */
@@ -110,32 +94,27 @@ export declare function memoProps<T, K extends readonly (keyof T)[]>(obj: T, key
  * return <>
  *  <Switch>
  *      <Match when={SOMETHING}>
- *          RANDOM_CONDITION
+ *          Random condition
  *      </Match>
- *      <On value={1}>
- *          <Case value={1}>
- *              TRUE
- *          </Case>
- *          <Case pred={x => x === 2}>
- *              FALSE_WITH_PREDICATE
+ *      <On value={1} onCompare={(a, b) => a == b}>
+ *          <Case value="1">
+ *              True because the comparator has been overridden
  *          </Case>
- *          <Case pred={x => x.innerValue}>
- *              {x => <>THRUTHY VALUE {x()}</>}
- *          </Case>
- *          <Case keyed pred={x => x.innerValue}>
- *              {x => <>THRUTHY KEYED VALUE {x}</>}
+ *          <Case value={2}>
+ *              False
  *          </Case>
  *      </On>
  *      <Match when>
- *          DEFAULT
+ *          Default
  *      </Match>
  *  </Switch>
- * <>
+ * </>
  * ```
  */
-export declare const On: (props: ParentProps<{
-    value: any;
-}>) => JSX.Element;
+export declare function On<T>(props: ParentProps<{
+    value: T;
+    onCompare?(a: unknown, b: T): boolean;
+}>): JSX.Element;
 
 /**
  * Executes {@link f} with the provided value for the specified {@link Context}.

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, onCleanup, For, Match, mergeProps } from "solid-js";
+import { createMemo, splitProps, untrack, createRoot, getOwner, createComponent, Show, createContext, useContext, onCleanup, For, createSelector, equalFn, Match } from "solid-js";
 import { createMutable } from "solid-js/store";
 function memoProps(obj, keys = Reflect.ownKeys(obj), equals = false) {
   const out = {};
@@ -159,21 +159,26 @@ function createInfo(props) {
 const ctx = createContext(void 0, {
   name: "on-case"
 });
-const On = (props) => createComponent(ctx.Provider, {
-  value: () => props.value,
-  get children() {
-    return props.children;
-  }
-});
+function On(props) {
+  const memo = memoProps(props);
+  const selector = createSelector(() => memo.value, (a, b) => (memo.onCompare ?? equalFn)(a, b));
+  return createComponent(ctx.Provider, {
+    value: selector,
+    get children() {
+      return props.children;
+    }
+  });
+}
 function Case(props) {
-  const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-  const get = useContext(ctx);
-  const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
-  return createComponent(Match, mergeProps({
+  const selector = useContext(ctx);
+  return createComponent(Match, {
     get when() {
-      return pred(get());
+      return selector(props.value);
+    },
+    get children() {
+      return props.children;
     }
-  }, other));
+  });
 }
 function SameContext(props) {
   return createMemo(() => {

package/dist/index.umd.js

@@ -161,21 +161,26 @@
   const ctx = solidJs.createContext(void 0, {
     name: "on-case"
   });
-  const On = (props) => solidJs.createComponent(ctx.Provider, {
-    value: () => props.value,
-    get children() {
-      return props.children;
-    }
-  });
+  function On(props) {
+    const memo = memoProps(props);
+    const selector = solidJs.createSelector(() => memo.value, (a, b) => (memo.onCompare ?? solidJs.equalFn)(a, b));
+    return solidJs.createComponent(ctx.Provider, {
+      value: selector,
+      get children() {
+        return props.children;
+      }
+    });
+  }
   function Case(props) {
-    const [mine, other] = splitAndMemoProps(props, ["value", "pred"]);
-    const get = solidJs.useContext(ctx);
-    const pred = (x) => mine.pred ? mine.pred(x) : x === mine.value;
-    return solidJs.createComponent(solidJs.Match, solidJs.mergeProps({
+    const selector = solidJs.useContext(ctx);
+    return solidJs.createComponent(solidJs.Match, {
       get when() {
-        return pred(get());
+        return selector(props.value);
+      },
+      get children() {
+        return props.children;
       }
-    }, other));
+    });
   }
   function SameContext(props) {
     return solidJs.createMemo(() => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solid-ctrl-flow",
-  "version": "1.0.63",
+  "version": "2.0.1",
   "description": "Control flow components for solid-js",
   "author": "AFatNiBBa",
   "license": "ISC",

package/readMe.md

@@ -59,7 +59,6 @@ return <>
     <On value={value}>
       <Case value={1}>One</Case>
       <Case value={2}>Two</Case>
-      <Case pred={x => `${x}`.length === 3}>Long</Case>
     </On>
     <Match when>Default</Match>
   </Switch>
@@ -72,7 +71,6 @@ return <>
   <Switch>
     <Match when={value === 1}>One</Match>
     <Match when={value === 2}>Two</Match>
-    <Match when={`${value}`.length === 3}>Long</Match>
     <Match when>Default</Match>
   </Switch>
 </>