Add fallback prop

Author: thetarnav

packages/match/src/index.ts

@@ -28,13 +28,15 @@ export function Match<
 	on:   T | null | undefined,
 	tag:  Tag,
 	case: {[K in T[Tag]]: (v: Accessor<T & {[k in Tag]: K}>) => JSX.Element},
+  fallback?: JSX.Element,
   partial?: false,
 }): 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},
+  fallback?: JSX.Element,
   partial?: false,
 }): JSX.Element
 export function Match<
@@ -44,16 +46,18 @@ export function Match<
 	on:   T | null | undefined,
 	tag:  Tag,
 	case: {[K in T[Tag]]?: (v: Accessor<T & {[k in Tag]: K}>) => JSX.Element},
+  fallback?: 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},
+  fallback?: 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))
+	return createMemo(() => props.case[kind()]?.(() => props.on) ?? props.fallback)
 }

packages/match/test/index.test.tsx

@@ -106,4 +106,39 @@ v.describe("Match", () => {
 
     data.dispose();
   });
+
+  v.test("fallback", () => {
+
+    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}</>,
+          }} fallback={<>fallback</>} />
+        </>)
+      }
+    })
+
+    v.expect(data.result()).toEqual(<>fallback</>);
+
+    setValue({kind: 'foo', foo: 'foo-value'});
+    v.expect(data.result()).toEqual(<>foo-value</>);
+
+    setValue(undefined);
+    v.expect(data.result()).toEqual(<>fallback</>);
+
+    data.dispose();
+  });
 });