Add Match component and package

packages/match/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Solid Primitives Working Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/match/README.md

@@ -0,0 +1,71 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=match" alt="Solid Primitives match">
+</p>
+
+# @solid-primitives/match
+
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/match?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/match)
+[![version](https://img.shields.io/npm/v/@solid-primitives/match?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/match)
+[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
+
+Control-flow component for matching discriminated union (tagged union) members.
+
+## Installation
+
+```bash
+npm install @solid-primitives/match
+# or
+yarn add @solid-primitives/match
+# or
+pnpm add @solid-primitives/match
+```
+
+## `Match`
+
+Control-flow component for matching discriminated union (tagged union) members.
+
+### How to use it
+
+```tsx
+type MyUnion = {
+  kind: "foo",
+  foo:  "foo-value",
+} | {
+  kind: "bar",
+  bar:  "bar-value",
+}
+
+const [value, setValue] = createSignal<MyUnion>({kind: "foo", foo: "foo-value"})
+
+<Match on={value()} case={{
+  foo: v => <>{v().foo}</>,
+  bar: v => <>{v().bar}</>,
+}} />
+```
+
+### Changing the tag key
+
+The default tag key is `"kind"`, but it can be changed with the `tag` prop:
+
+```tsx
+type MyUnion = {
+  type: "foo",
+  foo:  "foo-value",
+} | {
+  type: "bar",
+  bar:  "bar-value",
+}
+
+<Match on={value()} tag="type" case={{
+  foo: v => <>{v().foo}</>,
+  bar: v => <>{v().bar}</>,
+}} />
+```
+
+## Demo
+
+[Deployed example](https://primitives.solidjs.community/playground/match) | [Source code](https://github.com/solidjs-community/solid-primitives/tree/main/packages/match/dev)
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

packages/match/dev/index.tsx

@@ -0,0 +1,20 @@
+import { Component, createSignal } from "solid-js";
+
+const App: Component = () => {
+  const [count, setCount] = createSignal(0);
+  const increment = () => setCount(count() + 1);
+
+  return (
+    <div class="box-border flex min-h-screen w-full flex-col items-center justify-center space-y-4 bg-gray-800 p-24 text-white">
+      <div class="wrapper-v">
+        <h4>Counter component</h4>
+        <p class="caption">it's very important...</p>
+        <button class="btn" onClick={increment}>
+          {count()}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default App;

packages/match/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@solid-primitives/match",
+  "version": "0.0.100",
+  "description": "A template primitive example.",
+  "author": "Damian Tarnawski <[email protected]>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://primitives.solidjs.community/package/match",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/solidjs-community/solid-primitives.git"
+  },
+  "bugs": {
+    "url": "https://github.com/solidjs-community/solid-primitives/issues"
+  },
+  "primitive": {
+    "name": "match",
+    "stage": 0,
+    "list": [
+      "Match"
+    ],
+    "category": "Control Flow"
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "union"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "exports": {
+    "@solid-primitives/source": "./src/index.ts",
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "typesVersions": {},
+  "scripts": {
+    "dev": "tsx ../../scripts/dev.ts",
+    "vitest": "vitest -c ../../configs/vitest.config.ts",
+    "test": "pnpm run vitest",
+    "test:ssr": "pnpm run vitest --mode ssr"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.6.12"
+  }
+}

packages/match/src/index.ts

@@ -0,0 +1,42 @@
+import { type Accessor, type JSX, createMemo } from "solid-js"
+
+/**
+ * Control-flow component for matching discriminated union (tagged union) members.
+ * 
+ * @example
+ * ```tsx
+ * type MyUnion = {
+ *   kind: 'foo',
+ *   foo:  'foo-value',
+ * } | {
+ *   kind: 'bar',
+ *   bar:  'bar-value',
+ * }
+ * 
+ * const [value, setValue] = createSignal<MyUnion>({kind: 'foo', foo: 'foo-value'})
+ * 
+ * <Match on={value()} case={{
+ *   foo: v => <>{v().foo}</>,
+ *   bar: v => <>{v().bar}</>,
+ * }} />
+ * ```
+ */
+export function Match<
+	T extends {[k in Tag]: PropertyKey},
+	Tag extends PropertyKey,
+>(props: {
+	on:   T,
+	tag:  Tag,
+	case: {[K in T[Tag]]: (v: Accessor<T & {[k in Tag]: K}>) => JSX.Element},
+}): JSX.Element
+export function Match<
+	T extends {kind: PropertyKey},
+>(props: {
+	on:   T,
+	case: {[K in T['kind']]: (v: Accessor<T & {[k in 'kind']: K}>) => JSX.Element},
+}): JSX.Element
+export function Match(props: any): any {
+	const kind = createMemo(() => props.on[props.tag ?? 'kind'])
+	return createMemo(() => props.case[kind()](() => props.on))
+}
+

packages/match/test/index.test.ts

@@ -0,0 +1,19 @@
+import { describe, test, expect } from "vitest";
+import { createRoot } from "solid-js";
+import { createPrimitiveTemplate } from "../src/index.js";
+
+describe("createPrimitiveTemplate", () => {
+  test("createPrimitiveTemplate return values", () => {
+    const { value, setValue, dispose } = createRoot(dispose => {
+      const [value, setValue] = createPrimitiveTemplate(true);
+      expect(value(), "initial value should be true").toBe(true);
+
+      return { value, setValue, dispose };
+    });
+
+    setValue(false);
+    expect(value(), "value after change should be false").toBe(false);
+
+    dispose();
+  });
+});

packages/match/test/server.test.ts

@@ -0,0 +1,9 @@
+import { describe, test, expect } from "vitest";
+import { createPrimitiveTemplate } from "../src/index.js";
+
+describe("createPrimitiveTemplate", () => {
+  test("doesn't break in SSR", () => {
+    const [value, setValue] = createPrimitiveTemplate(true);
+    expect(value(), "initial value should be true").toBe(true);
+  });
+});

packages/match/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "references": [],
+  "include": [
+    "src"
+  ]
+}