Add selectors

packages/selectors/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/selectors/README.md

@@ -0,0 +1,44 @@
+<p>
+  <img width="100%" src="https://assets.solidjs.com/banner?type=Primitives&background=tiles&project=selectors" alt="Solid Primitives selectors">
+</p>
+
+# @solid-primitives/selectors
+
+[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
+[![size](https://img.shields.io/bundlephobia/minzip/@solid-primitives/selectors?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-primitives/selectors)
+[![version](https://img.shields.io/npm/v/@solid-primitives/selectors?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/selectors)
+[![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)
+
+A sample primitive that is made up for templating with the following options:
+
+`createArraySelcetor` - Provides a getter and setter for the primitive.
+
+## Installation
+
+```bash
+npm install @solid-primitives/selectors
+# or
+yarn add @solid-primitives/selectors
+# or
+pnpm add @solid-primitives/selectors
+```
+
+## How to use it
+
+```tsx
+const list: string[] = ["apple", "pear", "orange"]
+const [selectedItems] = createSignal<string[]>(["apple"])
+const isSelected = createArraySelector(selectedItems)
+
+<For each={list}>
+  {(item) => <li classList={{ active: isSelected(item) }}>{item}</li>}
+</For>
+```
+
+## Demo
+
+You can use this template for publishing your demo on CodeSandbox: https://codesandbox.io/s/solid-primitives-demo-template-sz95h
+
+## Changelog
+
+See [CHANGELOG.md](./CHANGELOG.md)

packages/selectors/dev/index.tsx

@@ -0,0 +1,37 @@
+import { Component, For, createSignal } from "solid-js";
+import { createArraySelector } from "../src/index.js";
+
+const items = [1, 2, 3];
+
+const App: Component = () => {
+  const [selectedItems, setSelectedItems] = createSignal<number[]>([]);
+  const isSelected = createArraySelector(selectedItems);
+
+  return (
+    <>
+      <For each={items}>
+        {item => (
+          <div>
+            <input
+              type="checkbox"
+              checked={isSelected(item)}
+              onChange={e => {
+                const filtered = selectedItems().filter(i => i === item);
+                if (e.currentTarget.checked) {
+                  if (filtered.length === 0) {
+                    setSelectedItems([...selectedItems(), item]);
+                  }
+                } else {
+                  setSelectedItems(filtered);
+                }
+              }}
+            />
+            {item}
+          </div>
+        )}
+      </For>
+    </>
+  );
+};
+
+export default App;

packages/selectors/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@solid-primitives/selectors",
+  "version": "0.0.1",
+  "description": "Primitives that support creating selectors.",
+  "author": "Ryan Conceicao <[email protected]>",
+  "contributors": [],
+  "license": "MIT",
+  "homepage": "https://github.com/solidjs-community/solid-primitives/tree/main/packages/selectors#readme",
+  "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": "selectors",
+    "stage": 0,
+    "list": [
+      "createArraySelector"
+    ],
+    "category": "Reactivity"
+  },
+  "keywords": [
+    "solid",
+    "primitives",
+    "selector"
+  ],
+  "private": false,
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "require": "./dist/index.cjs"
+  },
+  "typesVersions": {},
+  "scripts": {
+    "dev": "tsx ../../scripts/dev.ts",
+    "build": "tsx ../../scripts/build.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/selectors/src/index.ts

@@ -0,0 +1,35 @@
+import { createSelector } from "solid-js";
+
+/**
+ * Wrapper around `createSelector` to create a selector for an array.
+ *
+ * @param source - source array signal to create the selector from
+ * @param options - set computation name for debugging purposes
+ * @returns selector for the array
+ *
+ * @see https://github.com/solidjs-community/solid-primitives/tree/main/packages/selectors#createArraySelector
+ *
+ * @example
+ * const list: string[] = [...]
+ * const [selectedItems] = createSignal<string[]>([])
+ * const isSelected = createArraySelector(selectedItems)
+ * <For each={list}>
+ *   {(item) => 
+ *    <li classList={{ active: isSelected(item) }}>
+ *      {item}
+ *    </li>}
+ * </For>
+ */
+export function createArraySelector<T>(
+  source: () => Array<T>,
+  options?: { name?: string },
+): (k: T) => boolean {
+  const selector = createSelector<Array<T>, T>(
+    source,
+    (a, b) => {
+      return b.includes(a);
+    },
+    options,
+  );
+  return selector;
+}

packages/selectors/test/index.test.ts

@@ -0,0 +1,44 @@
+import { describe, test, expect } from "vitest";
+import { createRoot, createSignal } from "solid-js";
+import { createArraySelector } from "../src/index.js";
+
+describe("createArraySelector", () => {
+  test("createArraySelector select single item", () =>
+    createRoot(dispose => {
+      const [selected, setSelected] = createSignal<string[]>(["a"]);
+      const isSelected = createArraySelector(selected);
+
+      expect(isSelected("a"), "initial value selected for 'a' should be true").toBe(true);
+      expect(isSelected("b"), "initial value selected for 'b' should be false").toBe(false);
+      setSelected(["c"]);
+      expect(isSelected("a"), "value after change for 'a' should be false").toBe(false);
+      expect(isSelected("b"), "value after change for 'b' should be false").toBe(false);
+      setSelected(["b"]);
+      expect(isSelected("a"), "value after change for 'a' should be false").toBe(false);
+      expect(isSelected("b"), "value after change for 'b' should be true").toBe(true);
+      dispose();
+    }));
+
+  test("createArraySelector select multiple items", () =>
+    createRoot(dispose => {
+      const [selected, setSelected] = createSignal<string[]>(["a", "b"]);
+      const isSelected = createArraySelector(selected);
+
+      expect(isSelected("a"), "initial value selected for 'a' should be true").toBe(true);
+      expect(isSelected("b"), "initial value selected for 'b' should be true").toBe(true);
+      expect(isSelected("c"), "initial value selected for 'c' should be false").toBe(false);
+      setSelected(["c", "b"]);
+      expect(isSelected("a"), "value after change for 'a' should be false").toBe(false);
+      expect(isSelected("b"), "value after change for 'b' should be true").toBe(true);
+      expect(isSelected("c"), "value after change for 'c' should be true").toBe(true);
+      setSelected(["c", "a"]);
+      expect(isSelected("a"), "value after change for 'a' should be true").toBe(true);
+      expect(isSelected("b"), "value after change for 'b' should be false").toBe(false);
+      expect(isSelected("c"), "value after change for 'c' should be true").toBe(true);
+      setSelected([]);
+      expect(isSelected("a"), "value after change empty for 'a' should be false").toBe(false);
+      expect(isSelected("b"), "value after change empty for 'b' should be false").toBe(false);
+      expect(isSelected("c"), "value after change empty for 'c' should be false").toBe(false);
+      dispose();
+    }));
+});

packages/selectors/test/server.test.ts

@@ -0,0 +1,19 @@
+import { describe, test, expect } from "vitest";
+import { createSignal } from "solid-js";
+import { createArraySelector } from "../src/index.js";
+
+describe("createArraySelector", () => {
+  test("doesn't break in SSR", () => {
+    const [selected, setSelected] = createSignal<string[]>(["a"]);
+    const isSelected = createArraySelector(selected);
+
+    expect(isSelected("a"), "initial value selected for 'a' should be true").toBe(true);
+    expect(isSelected("b"), "initial value selected for 'b' should be false").toBe(false);
+    setSelected(["c"]);
+    expect(isSelected("a"), "value after change for 'a' should be false").toBe(false);
+    expect(isSelected("b"), "value after change for 'b' should be false").toBe(false);
+    setSelected(["b"]);
+    expect(isSelected("a"), "value after change for 'a' should be false").toBe(false);
+    expect(isSelected("b"), "value after change for 'b' should be true").toBe(true);
+  });
+});

packages/selectors/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json"
+}