@tanstack/pacer-devtools 1.2.1 → 1.3.1

package/dist/{components-vap4_VJT.js → components-DZv7GBzY.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";
@@ -416,6 +416,10 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		/**
+		* Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
+		* gets a real flex height budget (not just height: 100% without a flex chain).
+		*/
 		shellRoot: css`
       display: flex;
       flex-direction: column;
@@ -425,6 +429,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       overflow: hidden;
     `,
+		/** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
 		mainPanelShell: css`
       display: flex;
       flex-direction: column;
@@ -865,7 +870,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 +938,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 +1015,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 +1058,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-hqYwCNDx.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";
@@ -417,6 +417,10 @@ const stylesFactory = (theme) => {
 	const css = goober.css;
 	const t = (light, dark) => theme === "light" ? light : dark;
 	return {
+		/**
+		* Fills the devtools-utils portal div (height: 100%) and is a flex parent so MainPanel
+		* gets a real flex height budget (not just height: 100% without a flex chain).
+		*/
 		shellRoot: css`
       display: flex;
       flex-direction: column;
@@ -426,6 +430,7 @@ const stylesFactory = (theme) => {
       min-height: 0;
       overflow: hidden;
     `,
+		/** Overrides devtools-ui MainPanel overflow-y: auto so inner columns own scrolling */
 		mainPanelShell: css`
       display: flex;
       flex-direction: column;
@@ -854,7 +859,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 +926,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 +1113,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 +1187,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-hqYwCNDx.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-hqYwCNDx.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-DZv7GBzY.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-DZv7GBzY.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.1",
   "description": "Devtools for Pacer.",
   "author": "Tanner Linsley",
   "license": "MIT",
@@ -71,19 +71,19 @@
     "@tanstack/pacer": ">=0.16.4"
   },
   "dependencies": {
-    "@tanstack/devtools-ui": "0.5.1",
-    "@tanstack/devtools-utils": "^0.4.0",
-    "@tanstack/solid-store": "^0.9.3",
+    "@tanstack/devtools-ui": "0.5.2",
+    "@tanstack/devtools-utils": "^0.5.0",
+    "@tanstack/solid-store": "^0.11.0",
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "dayjs": "^1.11.20",
-    "goober": "^2.1.18",
+    "goober": "^2.1.19",
     "solid-js": "^1.9.12"
   },
   "devDependencies": {
     "rolldown-plugin-solid": "^0.2.1",
-    "tsdown": "^0.21.7",
-    "vite-plugin-solid": "^2.11.11"
+    "tsdown": "^0.22.0",
+    "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)} />