refactor: add tanstack signal tanstack plugin, reorder files (@miodec)#7721
refactor: add tanstack signal tanstack plugin, reorder files (@miodec)#7721
Conversation
There was a problem hiding this comment.
Pull request overview
Refactors frontend dev tooling by moving DevTools into a dedicated components/dev area and extending TanStack devtools with a custom “Core Signals” plugin to inspect app state.
Changes:
- Export
modalStatestore and wire it into a new signals devtools plugin. - Add
components/dev/DevTools.tsxthat lazy-loads TanStack devtools + dev options modal + Solid overlay only inimport.meta.env.DEV. - Update mount to import DevTools from the new dev path and register the new plugin in TanStack devtools.
Reviewed changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/src/ts/states/modals.ts | Exports modal store tuple for external inspection (devtools). |
| frontend/src/ts/components/mount.tsx | Points DevTools import to the new components/dev location. |
| frontend/src/ts/components/dev/TanstackDevtools.tsx | Registers the new signals plugin alongside existing devtools plugins. |
| frontend/src/ts/components/dev/SignalsDevtools.tsx | Adds “Core Signals” plugin UI for browsing key app signals/stores. |
| frontend/src/ts/components/dev/DevTools.tsx | Adds DEV-only lazy-loaded dev tooling container (TanStack devtools + overlay + modal). |
frontend/src/ts/states/modals.ts
Outdated
| }; | ||
|
|
||
| const [modalState, setModalState] = createStore<ModalState>({ | ||
| export const [modalState, setModalState] = createStore<ModalState>({ |
There was a problem hiding this comment.
Exporting setModalState makes the internal modal-store mutation API public (and it's not imported anywhere else). Prefer keeping the setter module-private and export only a read-only selector (or modalState alone) for devtools to avoid widening the state API surface.
| if (typeof value === "number" || typeof value === "boolean") { | ||
| return `${value}`; | ||
| } | ||
| return JSON.stringify(value); |
There was a problem hiding this comment.
formatValue returns JSON.stringify(value) which is typed as string | undefined and can also throw (BigInt/circular refs). Under strict this won’t typecheck and can crash the panel. Ensure this branch always returns a string (e.g., try/catch + fallback to String(value) when stringify fails/returns undefined).
| return JSON.stringify(value); | |
| try { | |
| const json = JSON.stringify(value); | |
| if (typeof json === "string") return json; | |
| } catch { | |
| // ignore and fall through to String(value) | |
| } | |
| return String(value); |
| setFlashing(true); | ||
| setTimeout(() => setFlashing(false), 125); | ||
| }, |
There was a problem hiding this comment.
setTimeout in the reactive effect isn’t cleared on component cleanup, so unmounting the panel can leave pending timers and set state after unmount. Store the timeout id and cancel it in onCleanup (or use a debounced signal).
|
Continuous integration check(s) failed. Please review the failing check's logs and make the necessary changes. |
No description provided.