createGrid + createObjectGrid

packages/solid-signals/src/signals/composable/createArray/createArray.ts

@@ -41,7 +41,7 @@ function createArray<T>(value: T[], options?: createSignal.Options<T[]>) {
 }
 
 createArray.wrap = <Sig extends Signal<any[]>>(signal: Sig) => {
-  type T = Sig extends Signal<infer T extends any[]> ? T[number] : never;
+  type T = Sig extends Signal<(infer T)[]> ? T : never;
 
   return signalExtender(signal).extend<createArray.Extensions<T>>(
     ([state, setState]) => [

packages/solid-signals/src/signals/composable/createGrid/README.md

@@ -0,0 +1,107 @@
+# Composable signal: createObject
+
+Extends signal setter with `update` method. See [Reference](#reference) for more details.
+
+- [Composable signal: createObject](#composable-signal-createobject)
+  - [Usage](#usage)
+    - [Basic](#basic)
+      - [Result](#result)
+    - [Composition](#composition)
+      - [Result](#result-1)
+  - [Reference](#reference)
+    - [`setState.update(updates: Partial<T>): void`](#setstateupdateupdates-partialt-void)
+
+## Usage
+
+### Basic
+
+```tsx
+import { createObject } from "solid-signals";
+
+function ExampleComponent {
+  const [object, setObject] = createObject({ prop1: "value1", prop2: "value2" });
+
+  return (
+    <div>
+      <button onClick={() => {
+        setObject.update({ prop1: "updated" });
+      }}>
+        Update prop1
+      </button>
+      <button onClick={() => {
+        setObject.update({ prop2: "updated" });
+      }}>
+        Update prop2
+      </button>
+      object: {JSON.stringify(object())}
+    </div>
+  );
+}
+```
+
+#### Result
+
+```
+object: { "prop1": "value1", "prop2": "value2" }
+
+[Click: Update prop1]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Update prop2]
+object: { "prop1": "updated", "prop2": "updated" }
+```
+
+### Composition
+
+```tsx
+import { createHistory, createObject } from "solid-signals";
+
+function ExampleComponent {
+  const [object, setObject] = createObject.wrap(createHistory({ prop1: "value1", prop2: "value2" }));
+
+  return (
+    <div>
+      <button onClick={() => {
+        setObject.update({ prop1: "updated" });
+      }}>
+        Update prop1
+      </button>
+      <button onClick={() => {
+        setObject.update({ prop2: "updated" });
+      }}>
+        Update prop2
+      </button>
+      <button onClick={() => {
+        setObject.history.back();
+      }}>
+        Back
+      </button>
+      object: {JSON.stringify(object())}
+    </div>
+  );
+}
+```
+
+#### Result
+
+```
+object: { "prop1": "value1", "prop2": "value2" }
+
+[Click: Update prop1]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Update prop2]
+object: { "prop1": "updated", "prop2": "updated" }
+
+[Click: Back]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Back]
+object: { "prop1": "value1", "prop2": "value2" }
+```
+
+## Reference
+
+### `setState.update(updates: Partial<T>): void`
+
+Merges given object with current state. Allows for specific property updates without affecting other properties

packages/solid-signals/src/signals/composable/createGrid/createGrid.test.ts

@@ -0,0 +1,25 @@
+import { createRoot } from "solid-js";
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+import createHistory from "../createHistory";
+import createGrid from "./createGrid";
+
+const test = suite("createGrid");
+
+test("Creates grid signal", () => {
+  createRoot((dispose) => {
+    const [grid, setGrid] = createGrid([
+      [1, 2],
+      [3, 4],
+    ]);
+
+    assert.equal(grid(), [
+      [1, 2],
+      [3, 4],
+    ]);
+
+    dispose();
+  });
+});
+
+test.run();

packages/solid-signals/src/signals/composable/createGrid/createGrid.ts

@@ -0,0 +1,58 @@
+import { Accessor, createSignal, Signal } from "solid-js";
+import { signalExtender } from "../../../utils/signal.js";
+
+declare namespace createGrid {
+  export type Extensions<T> = [
+    {
+      values: Accessor<IterableIterator<T>>;
+    },
+    {
+      cell<Value extends T>(row: number, col: number, value: Value): Value;
+    }
+  ];
+  export type Type<T, Base extends [{}, {}] = [{}, {}]> = createSignal.Extended<
+    T[][],
+    Base & Extensions<T>
+  >;
+
+  export type Result<T, Base extends [{}, {}] = [{}, {}]> = ReturnType<
+    Type<T, Base>
+  >;
+}
+
+function createGrid<T>(value: T[][], options?: createSignal.Options<T[][]>) {
+  return createGrid.wrap(createSignal(value, options));
+}
+
+createGrid.wrap = <Sig extends Signal<any[][]>>(signal: Sig) => {
+  type T = Sig extends Signal<(infer T)[][]> ? T : never;
+
+  return signalExtender(signal).extend<createGrid.Extensions<T>>(
+    ([state, setState]) => {
+      const makeCopy = () => state().map((row) => [...row]);
+      return [
+        {
+          values: function* () {
+            for (const row of state()) {
+              for (const cell of row) {
+                yield cell;
+              }
+            }
+          },
+        },
+        {
+          cell(row, col, value) {
+            const copy = makeCopy();
+            copy[row][col] = value;
+
+            setState(copy);
+
+            return value;
+          },
+        },
+      ];
+    }
+  );
+};
+
+export default createGrid;

packages/solid-signals/src/signals/composable/createGrid/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./createGrid.js";
+export * from "./createGrid.js";

packages/solid-signals/src/signals/composable/createObjectGrid/README.md

@@ -0,0 +1,107 @@
+# Composable signal: createObject
+
+Extends signal setter with `update` method. See [Reference](#reference) for more details.
+
+- [Composable signal: createObject](#composable-signal-createobject)
+  - [Usage](#usage)
+    - [Basic](#basic)
+      - [Result](#result)
+    - [Composition](#composition)
+      - [Result](#result-1)
+  - [Reference](#reference)
+    - [`setState.update(updates: Partial<T>): void`](#setstateupdateupdates-partialt-void)
+
+## Usage
+
+### Basic
+
+```tsx
+import { createObject } from "solid-signals";
+
+function ExampleComponent {
+  const [object, setObject] = createObject({ prop1: "value1", prop2: "value2" });
+
+  return (
+    <div>
+      <button onClick={() => {
+        setObject.update({ prop1: "updated" });
+      }}>
+        Update prop1
+      </button>
+      <button onClick={() => {
+        setObject.update({ prop2: "updated" });
+      }}>
+        Update prop2
+      </button>
+      object: {JSON.stringify(object())}
+    </div>
+  );
+}
+```
+
+#### Result
+
+```
+object: { "prop1": "value1", "prop2": "value2" }
+
+[Click: Update prop1]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Update prop2]
+object: { "prop1": "updated", "prop2": "updated" }
+```
+
+### Composition
+
+```tsx
+import { createHistory, createObject } from "solid-signals";
+
+function ExampleComponent {
+  const [object, setObject] = createObject.wrap(createHistory({ prop1: "value1", prop2: "value2" }));
+
+  return (
+    <div>
+      <button onClick={() => {
+        setObject.update({ prop1: "updated" });
+      }}>
+        Update prop1
+      </button>
+      <button onClick={() => {
+        setObject.update({ prop2: "updated" });
+      }}>
+        Update prop2
+      </button>
+      <button onClick={() => {
+        setObject.history.back();
+      }}>
+        Back
+      </button>
+      object: {JSON.stringify(object())}
+    </div>
+  );
+}
+```
+
+#### Result
+
+```
+object: { "prop1": "value1", "prop2": "value2" }
+
+[Click: Update prop1]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Update prop2]
+object: { "prop1": "updated", "prop2": "updated" }
+
+[Click: Back]
+object: { "prop1": "updated", "prop2": "value2" }
+
+[Click: Back]
+object: { "prop1": "value1", "prop2": "value2" }
+```
+
+## Reference
+
+### `setState.update(updates: Partial<T>): void`
+
+Merges given object with current state. Allows for specific property updates without affecting other properties

packages/solid-signals/src/signals/composable/createObjectGrid/createObjectGrid.test.ts

@@ -0,0 +1,25 @@
+import { createRoot } from "solid-js";
+import { suite } from "uvu";
+import * as assert from "uvu/assert";
+import createHistory from "../createHistory";
+import createObjectGrid from "./createObjectGrid";
+
+const test = suite("createObjectGrid");
+
+test("Creates object grid signal", () => {
+  createRoot((dispose) => {
+    const [objectGrid, setObjectGrid] = createObjectGrid([
+      [1, 2],
+      [3, 4],
+    ]);
+
+    assert.equal(objectGrid(), [
+      [1, 2],
+      [3, 4],
+    ]);
+
+    dispose();
+  });
+});
+
+test.run();

packages/solid-signals/src/signals/composable/createObjectGrid/createObjectGrid.ts

@@ -0,0 +1,52 @@
+import { Accessor, createSignal, Signal } from "solid-js";
+import { signalExtender } from "../../../utils/signal.js";
+
+declare namespace createGrid {
+  export type Extensions<T> = [
+    {},
+    {
+      update<Updates extends T>(
+        row: number,
+        col: number,
+        updates: Updates
+      ): T & Updates;
+    }
+  ];
+  export type Type<T, Base extends [{}, {}] = [{}, {}]> = createSignal.Extended<
+    T[][],
+    Base & Extensions<T>
+  >;
+
+  export type Result<T, Base extends [{}, {}] = [{}, {}]> = ReturnType<
+    Type<T, Base>
+  >;
+}
+
+function createGrid<T>(value: T[][], options?: createSignal.Options<T[][]>) {
+  return createGrid.wrap(createSignal(value, options));
+}
+
+createGrid.wrap = <Sig extends Signal<any[][]>>(signal: Sig) => {
+  type T = Sig extends Signal<(infer T)[][]> ? T : never;
+
+  return signalExtender(signal).extend<createGrid.Extensions<T>>(
+    ([state, setState]) => {
+      const makeCopy = () => state().map((row) => [...row]);
+      return [
+        {},
+        {
+          update(row, col, value) {
+            const copy = makeCopy();
+            copy[row][col] = { ...copy[row][col], ...value };
+
+            setState(copy);
+
+            return copy[row][col];
+          },
+        },
+      ];
+    }
+  );
+};
+
+export default createGrid;

packages/solid-signals/src/signals/composable/createObjectGrid/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./createObjectGrid.js";
+export * from "./createObjectGrid.js";