@tanstack/pacer-devtools 1.2.1 → 1.3.0

package/dist/{components-vap4_VJT.js → components-BcUR7gcX.js}

@@ -4,7 +4,7 @@ import { createStore, produce } from "solid-js/store";
 import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
 import { getPacerDevtoolsInstance, pacerEventClient } from "@tanstack/pacer/event-client";
 import * as goober from "goober";
-import { useStore } from "@tanstack/solid-store";
+import { shallow, useSelector } from "@tanstack/solid-store";
 import clsx from "clsx";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime.js";
@@ -865,7 +865,7 @@ function UtilList(props) {
 			children: (instance) => {
 				const status = (() => {
 					try {
-						const statusAccessor = useStore(instance.store, (s) => s.status);
+						const statusAccessor = useSelector(instance.store, (s) => s.status);
 						return () => statusAccessor() ?? "unknown";
 					} catch {
 						return () => "unknown";
@@ -933,7 +933,7 @@ function ActionButtons(props) {
 	const styles = useStyles();
 	const utilInstance = props.instance;
 	const store = utilInstance?.store;
-	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(utilInstance);
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useSelector(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}, { compare: shallow }) : () => getPacerUtilStoreState(utilInstance);
 	const getState = () => stateAccessor();
 	const hasPending = () => {
 		return "isPending" in getState();
@@ -1010,7 +1010,7 @@ function StateHeaderInner(props) {
 		return dayjs(at).fromNow();
 	};
 	const store = props.entry.instance?.store;
-	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(props.entry.instance);
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useSelector(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}, { compare: shallow }) : () => getPacerUtilStoreState(props.entry.instance);
 	const reductionPercentage = () => reductionFromState(props.entry, stateAccessor());
 	return ssr(_tmpl$$2, ssrAttribute("class", escape(props.styles.stateHeader, true), false), ssrAttribute("class", escape(props.styles.stateTitle, true), false), escape(props.entry.type), ssrStyleProperty("display:", "flex") + ssrStyleProperty(";align-items:", "center") + ssrStyleProperty(";gap:", "16px"), ssrAttribute("class", escape(props.styles.infoGrid, true), false), ssrAttribute("class", escape(props.styles.infoLabel, true), false), ssrAttribute("class", escape(props.styles.infoValueMono, true), false), escape(key), ssrAttribute("class", escape(props.styles.infoLabel, true), false), ssrAttribute("class", escape(props.styles.infoValueMono, true), false), escape(new Date(updatedAt()).toLocaleTimeString()), escape(getRelativeTime()), ssrAttribute("class", escape(props.styles.infoValueMono, true), false), ssrStyleProperty("margin-left:", "auto") + ssrStyleProperty(";font-weight:", "bold"), escape(reductionPercentage()));
 }
@@ -1053,7 +1053,7 @@ function StateHeader(props) {
 function UtilStateJsonTree(props) {
 	const store = props.instance?.store;
 	if (isPacerUtilTanStackStore(store)) {
-		const snapshot = useStore(store, (s) => s);
+		const snapshot = useSelector(store, (s) => s);
 		return createComponent(JsonTree, { get value() {
 			return snapshot();
 		} });

package/dist/{components-CGEHIK6F.js → components-D9C86C9O.js}

@@ -4,7 +4,7 @@ import { createStore, produce } from "solid-js/store";
 import { For, Show, createContext, createEffect, createMemo, createSignal, onCleanup, onMount, useContext } from "solid-js";
 import { getPacerDevtoolsInstance, pacerEventClient } from "@tanstack/pacer/event-client";
 import * as goober from "goober";
-import { useStore } from "@tanstack/solid-store";
+import { shallow, useSelector } from "@tanstack/solid-store";
 import clsx from "clsx";
 import { emitChange } from "@tanstack/pacer";
 import dayjs from "dayjs";
@@ -854,7 +854,7 @@ function UtilList(props) {
 					children: (instance) => {
 						const status = (() => {
 							try {
-								const statusAccessor = useStore(instance.store, (s) => s.status);
+								const statusAccessor = useSelector(instance.store, (s) => s.status);
 								return () => statusAccessor() ?? "unknown";
 							} catch {
 								return () => "unknown";
@@ -921,7 +921,7 @@ function ActionButtons(props) {
 	const styles = useStyles();
 	const utilInstance = props.instance;
 	const store = utilInstance?.store;
-	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(utilInstance);
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useSelector(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}, { compare: shallow }) : () => getPacerUtilStoreState(utilInstance);
 	const getState = () => stateAccessor();
 	const hasPending = () => {
 		return "isPending" in getState();
@@ -1108,7 +1108,7 @@ function StateHeaderInner(props) {
 		return dayjs(at).fromNow();
 	};
 	const store = props.entry.instance?.store;
-	const stateAccessor = isPacerUtilTanStackStore(store) ? useStore(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}) : () => getPacerUtilStoreState(props.entry.instance);
+	const stateAccessor = isPacerUtilTanStackStore(store) ? useSelector(store, (s) => s !== null && s !== void 0 && typeof s === "object" ? s : {}, { compare: shallow }) : () => getPacerUtilStoreState(props.entry.instance);
 	const reductionPercentage = () => reductionFromState(props.entry, stateAccessor());
 	return (() => {
 		var _el$ = _tmpl$$2(), _el$2 = _el$.firstChild, _el$4 = _el$2.nextSibling.firstChild, _el$5 = _el$4.firstChild, _el$6 = _el$5.nextSibling, _el$7 = _el$6.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.firstChild, _el$1 = _el$9.nextSibling;
@@ -1182,7 +1182,7 @@ function StateHeader(props) {
 function UtilStateJsonTree(props) {
 	const store = props.instance?.store;
 	if (isPacerUtilTanStackStore(store)) {
-		const snapshot = useStore(store, (s) => s);
+		const snapshot = useSelector(store, (s) => s);
 		return createComponent(JsonTree, { get value() {
 			return snapshot();
 		} });

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("./components-CGEHIK6F.js"));
+const coreClasses = constructCoreClass(() => import("./components-D9C86C9O.js"));
 const PacerDevtoolsCore$1 = coreClasses[0];
 const PacerDevtoolsCoreNoOp = coreClasses[1];
 //#endregion

package/dist/production/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("../components-CGEHIK6F.js"));
+const coreClasses = constructCoreClass(() => import("../components-D9C86C9O.js"));
 const PacerDevtoolsCore = coreClasses[0];
 coreClasses[1];
 //#endregion

package/dist/production/server.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("../components-vap4_VJT.js"));
+const coreClasses = constructCoreClass(() => import("../components-BcUR7gcX.js"));
 const PacerDevtoolsCore = coreClasses[0];
 coreClasses[1];
 //#endregion

package/dist/server.js

@@ -1,7 +1,7 @@
 "use client";
 import { constructCoreClass } from "@tanstack/devtools-utils/solid";
 //#region src/core.tsx
-const coreClasses = constructCoreClass(() => import("./components-vap4_VJT.js"));
+const coreClasses = constructCoreClass(() => import("./components-BcUR7gcX.js"));
 const PacerDevtoolsCore$1 = coreClasses[0];
 const PacerDevtoolsCoreNoOp = coreClasses[1];
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/pacer-devtools",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -73,7 +73,7 @@
   "dependencies": {
     "@tanstack/devtools-ui": "0.5.1",
     "@tanstack/devtools-utils": "^0.4.0",
-    "@tanstack/solid-store": "^0.9.3",
+    "@tanstack/solid-store": "^0.11.0",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "dayjs": "^1.11.20",
@@ -82,8 +82,8 @@
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.21.7",
-    "vite-plugin-solid": "^2.11.11"
+    "tsdown": "^0.21.9",
+    "vite-plugin-solid": "^2.11.12"
   },
   "scripts": {
     "clean": "premove ./build ./dist",

package/src/components/ActionButtons.tsx

@@ -1,5 +1,5 @@
 import { emitChange } from '@tanstack/pacer'
-import { useStore } from '@tanstack/solid-store'
+import { shallow, useSelector } from '@tanstack/solid-store'
 import { useStyles } from '../styles/use-styles'
 import {
   getPacerUtilStoreState,
@@ -18,10 +18,13 @@ export function ActionButtons(props: ActionButtonsProps) {
   const store = utilInstance?.store
 
   const stateAccessor = isPacerUtilTanStackStore(store)
-    ? useStore(store as never, (s: unknown) =>
-        s !== null && s !== undefined && typeof s === 'object'
-          ? (s as Record<string, unknown>)
-          : {},
+    ? useSelector(
+        store as never,
+        (s: unknown) =>
+          s !== null && s !== undefined && typeof s === 'object'
+            ? (s as Record<string, unknown>)
+            : {},
+        { compare: shallow },
       )
     : () => getPacerUtilStoreState(utilInstance) as Record<string, unknown>
 

package/src/components/StateHeader.tsx

@@ -1,7 +1,7 @@
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime.js'
 import { Show, createSignal, onCleanup, onMount } from 'solid-js'
-import { useStore } from '@tanstack/solid-store'
+import { shallow, useSelector } from '@tanstack/solid-store'
 import { useStyles } from '../styles/use-styles'
 import {
   getPacerUtilStoreState,
@@ -73,10 +73,13 @@ function StateHeaderInner(props: {
 
   const store = props.entry.instance?.store
   const stateAccessor = isPacerUtilTanStackStore(store)
-    ? useStore(store as never, (s: unknown) =>
-        s !== null && s !== undefined && typeof s === 'object'
-          ? (s as Record<string, unknown>)
-          : {},
+    ? useSelector(
+        store as never,
+        (s: unknown) =>
+          s !== null && s !== undefined && typeof s === 'object'
+            ? (s as Record<string, unknown>)
+            : {},
+        { compare: shallow },
       )
     : () =>
         getPacerUtilStoreState(props.entry.instance) as Record<string, unknown>

package/src/components/UtilList.tsx

@@ -1,5 +1,5 @@
 import { For } from 'solid-js'
-import { useStore } from '@tanstack/solid-store'
+import { useSelector } from '@tanstack/solid-store'
 import clsx from 'clsx'
 import { useStyles } from '../styles/use-styles'
 import { UTIL_GROUPS } from './util-groups'
@@ -26,7 +26,7 @@ export function UtilList(props: UtilListProps) {
                   {(instance) => {
                     const status = (() => {
                       try {
-                        const statusAccessor = useStore(
+                        const statusAccessor = useSelector(
                           instance.store,
                           (s: any) => s.status,
                         )

package/src/components/UtilStateJsonTree.tsx

@@ -1,5 +1,5 @@
 import { JsonTree } from '@tanstack/devtools-ui'
-import { useStore } from '@tanstack/solid-store'
+import { useSelector } from '@tanstack/solid-store'
 import {
   getPacerUtilStoreState,
   isPacerUtilTanStackStore,
@@ -18,7 +18,7 @@ type UtilStateJsonTreeProps = {
 export function UtilStateJsonTree(props: UtilStateJsonTreeProps): JSX.Element {
   const store = props.instance?.store
   if (isPacerUtilTanStackStore(store)) {
-    const snapshot = useStore(store as never, (s: unknown) => s)
+    const snapshot = useSelector(store as never, (s: unknown) => s)
     return <JsonTree value={snapshot()} />
   }
   return <JsonTree value={getPacerUtilStoreState(props.instance)} />