match: Add partial prop and Match tests

Author: thetarnav

packages/match/src/index.ts

@@ -25,18 +25,35 @@ export function Match<
 	T extends {[k in Tag]: PropertyKey},
 	Tag extends PropertyKey,
 >(props: {
-	on:   T,
+	on:   T | null | undefined,
 	tag:  Tag,
 	case: {[K in T[Tag]]: (v: Accessor<T & {[k in Tag]: K}>) => JSX.Element},
+  partial?: false,
 }): JSX.Element
 export function Match<
 	T extends {kind: PropertyKey},
 >(props: {
-	on:   T,
+	on:   T | null | undefined,
 	case: {[K in T['kind']]: (v: Accessor<T & {[k in 'kind']: K}>) => JSX.Element},
+  partial?: false,
+}): JSX.Element
+export function Match<
+	T extends {[k in Tag]: PropertyKey},
+	Tag extends PropertyKey,
+>(props: {
+	on:   T | null | undefined,
+	tag:  Tag,
+	case: {[K in T[Tag]]?: (v: Accessor<T & {[k in Tag]: K}>) => JSX.Element},
+  partial: true,
+}): JSX.Element
+export function Match<
+	T extends {kind: PropertyKey},
+>(props: {
+	on:   T | null | undefined,
+	case: {[K in T['kind']]?: (v: Accessor<T & {[k in 'kind']: K}>) => JSX.Element},
+  partial: true,
 }): JSX.Element
 export function Match(props: any): any {
-	const kind = createMemo(() => props.on[props.tag ?? 'kind'])
-	return createMemo(() => props.case[kind()](() => props.on))
+	const kind = createMemo(() => props.on?.[props.tag ?? 'kind'])
+	return createMemo(() => props.case[kind()]?.(() => props.on))
 }
-

packages/match/test/index.test.ts

@@ -0,0 +1,109 @@
+import * as v from "vitest";
+import * as s from "solid-js";
+import { Match } from "../src/index.js";
+
+v.describe("Match", () => {
+  v.test("match on kind field", () => {
+
+    type MyUnion = {
+      kind: 'foo',
+      foo:  'foo-value',
+    } | {
+      kind: 'bar',
+      bar:  'bar-value',
+    }
+
+    const [value, setValue] = s.createSignal<MyUnion>()
+
+    const data = s.createRoot(dispose => {
+      return {
+        dispose,
+        result: s.children(() => <>
+          <Match on={value()} case={{
+            foo: v => <>{v().foo}</>,
+            bar: v => <>{v().bar}</>,
+          }} />
+        </>)
+      }
+    })
+
+    v.expect(data.result()).toEqual(undefined);
+
+    setValue({kind: 'foo', foo: 'foo-value'});
+    v.expect(data.result()).toEqual(<>foo-value</>);
+
+    setValue({kind: 'bar', bar: 'bar-value'});
+    v.expect(data.result()).toEqual(<>bar-value</>);
+
+    data.dispose();
+  });
+
+  v.test("match on type field", () => {
+
+    type MyUnion = {
+      type: 'foo',
+      foo:  'foo-value',
+    } | {
+      type: 'bar',
+      bar:  'bar-value',
+    }
+
+    const [value, setValue] = s.createSignal<MyUnion>()
+
+    const data = s.createRoot(dispose => {
+      return {
+        dispose,
+        result: s.children(() => <>
+          <Match on={value()} tag='type' case={{
+            foo: v => <>{v().foo}</>,
+            bar: v => <>{v().bar}</>,
+          }} />
+        </>)
+      }
+    })
+
+    v.expect(data.result()).toEqual(undefined);
+
+    setValue({type: 'foo', foo: 'foo-value'});
+    v.expect(data.result()).toEqual(<>foo-value</>);
+
+    setValue({type: 'bar', bar: 'bar-value'});
+    v.expect(data.result()).toEqual(<>bar-value</>);
+
+    data.dispose();
+  });
+
+  v.test("partial match", () => {
+
+    type MyUnion = {
+      kind: 'foo',
+      foo:  'foo-value',
+    } | {
+      kind: 'bar',
+      bar:  'bar-value',
+    }
+
+    const [value, setValue] = s.createSignal<MyUnion>()
+
+    const data = s.createRoot(dispose => {
+      return {
+        dispose,
+        result: s.children(() => <>
+          <Match partial on={value()} case={{
+            foo: v => <>{v().foo}</>,
+          }} />
+        </>)
+      }
+    })
+
+    v.expect(data.result()).toEqual(undefined);
+
+    setValue({kind: 'foo', foo: 'foo-value'});
+    v.expect(data.result()).toEqual(<>foo-value</>);
+
+    setValue({kind: 'bar', bar: 'bar-value'});
+    v.expect(data.result()).toEqual(undefined);
+
+    data.dispose();
+  });
+});