@solid-primitives/immutable - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

dist/index.d.ts

 import { Accessor } from 'solid-js';
 import { ReconcileOptions } from 'solid-js/store';
 
-type ImmutablePrimitive = string | number | boolean | null | undefined;
+type ImmutablePrimitive = string | number | boolean | null | undefined | object;
 type ImmutableObject = {
@@ -6,0 +6,0 @@ [key: string]: ImmutableValue;

dist/index.js

@@ -9,3 +9,3 @@ import { createMemo, untrack, $PROXY, $TRACK, runWithOwner, getOwner, onCleanup, createRoot, getListener } from 'solid-js';
 var ARRAY_EQUALS_OPTIONS = { equals: arrayEquals };
-var isObject = (v) => !!v && typeof v === "object";
+var isWrappable = (v) => !!v && (v.constructor === Object || Array.isArray(v));
 var CommonTraps = class {
@@ -68,3 +68,3 @@ constructor(s, c) {
           const v = valueAccessor();
-          if (!memo && isObject(v)) {
+          if (!memo && isWrappable(v)) {
             runWithOwner(this.o, () => valueAccessor = createMemo(valueAccessor));
@@ -83,3 +83,3 @@ memo = true;
 };
-var getArrayItemKey = (item, index, { key, merge }) => isObject(item) && key in item ? item[key] : merge ? index : item;
+var getArrayItemKey = (item, index, { key, merge }) => isWrappable(item) && key in item ? item[key] : merge ? index : item;
 var ArrayTraps = class extends CommonTraps {
@@ -140,3 +140,3 @@ #trackLength;
     const v = this.s();
-    if (!isObject(v)) {
+    if (!isWrappable(v)) {
       this.#lastId = void 0;
@@ -147,3 +147,3 @@ this.#dispose();
     const id = v[this.c.key];
-    if (id === this.#lastId && isObject(this.#prev))
+    if (id === this.#lastId && isWrappable(this.#prev))
       return this.#prev;
@@ -150,0 +150,0 @@ this.#lastId = id;

package.json

 {
   "name": "@solid-primitives/immutable",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Primitive for rectifying immutable values and dealing with immutability in Solid.",
@@ -18,3 +18,3 @@ "author": "Damian Tarnawski <[e-mail]>",
     "name": "immutable",
-    "stage": 0,
+    "stage": 1,
     "list": [
@@ -21,0 +21,0 @@ "createImmutable"

README.md

@@ -10,3 +10,3 @@ <p>
 [![version](https://img.shields.io/npm/v/@solid-primitives/immutable?style=for-the-badge)](https://www.npmjs.com/package/@solid-primitives/immutable)
-[![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)
+[![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-1.json)](https://github.com/solidjs-community/solid-primitives#contribution-process)
 
@@ -59,3 +59,3 @@ Primitive for rectifying immutable values and dealing with immutability in Solid.
 
-### Usage with immutable state management libraries
+### Usage with Redux Toolkit
 
@@ -106,2 +106,41 @@ There are many state management libraries that provide immutable data structures, such as [Immer](https://immerjs.github.io/immer/), [Redux Toolkit](https://redux-toolkit.js.org/), [XState](https://xstate.js.org/docs/), etc.
 
+### Usage with XState
+
+`createImmutable` doesn't mutate the source objects, as opposed to `createStore` with `reconcile`. This makes it a good fit for XState, which uses relies on diffing the previous and next state to determine the changes.
+
+```tsx
+import { onCleanup, createSignal } from "solid-js";
+import { createMachine, createActor } from "xstate";
+import { createImmutable } from "@solid-primitives/immutable";
+
+const toggleMachine = createMachine({
+  id: "toggle",
+  initial: "inactive",
+  states: {
+    inactive: {
+      on: { TOGGLE: "active" },
+    },
+    active: {
+      on: { TOGGLE: "inactive" },
+    },
+  },
+});
+
+export const Toggler = () => {
+  const actor = x.createActor(toggleMachine).start();
+  onCleanup(() => actor.stop());
+
+  const [snapshot, setSnapshot] = createSignal(actor.getSnapshot());
+  actor.subscribe(setSnapshot);
+
+  const state = createImmutable(snapshot);
+
+  return (
+    <button onclick={() => actor.send({ type: "TOGGLE" })}>
+      {state.value === "inactive" ? "Click to activate" : "Active! Click to deactivate"}
+    </button>
+  );
+};
+```
+
 ### Usage with `createResource`
@@ -108,0 +147,0 @@

No alert changes

Improved metrics

Total package byte prevSize

27802

increased by4.49%

Number of lines in readme file

175

increased by28.68%

No dependency changes