solidjs-pages

SolidJS Page Patterns

Thesis: Route UI uses flat Switch/Match, signal modals, and auth gates — never nested Show or early returns.

Signal-Driven Modals

Detail views within list pages use a signal, not a sub-route:

const [activeItem, setActiveItem] = createSignal<Item | null>(null);
// Open: setActiveItem(item)
// Close: setActiveItem(null)

<Show when={activeItem()}>
  {(item) => <DetailModal item={item()} onClose={() => setActiveItem(null)} />}
</Show>

Destructive Actions

Never window.confirm(). Always use DestructiveModal:

const [deleteTarget, setDeleteTarget] = createSignal(false);
// ...
<DestructiveModal
  open={deleteTarget()}
  onOpenChange={(open) => {
    if (!open) setDeleteTarget(false);
  }}
  onConfirm={handleDelete}
  title="Delete item?"
  message="This action cannot be undone."
  confirmText="Delete"
/>;

Page Titles

Never put reactive expressions directly inside <Title>. The @solidjs/meta <Title> component creates an internal computation to track children. During route transitions, this computation is re-evaluated outside the component's reactive root, causing "computations created outside createRoot" warnings.

// BAD — reactive ternary inside <Title> leaks during route transition
<Title>{userType() === "admin" ? "Manage Items" : "Items"} | My App</Title>

// GOOD — pre-compute as a memo, pass resolved string (static strings are fine when no reactive expression is needed)
const pageTitle = createMemo(() =>
  `${userType() === "admin" ? "Manage Items" : "Items"} | My App`
);
// ...
<Title>{pageTitle()}</Title>

Auth & Routing

• Add every new private route to PRIVATE_ROUTES in frontend/src/lib/constants.ts.
• Do not early-return from route components before reactive setup. Put auth/access redirects in an effect and gate JSX with <Show> so async auth.user updates can re-render the page.

createEffect(
  on(
    () => auth.user?.type,
    (type) => {
      if (type && type !== "admin") navigate("/dashboard", { replace: true });
    },
  ),
);

return (
  <Show when={auth.user?.type === "admin"} fallback={<Spinner />}>
    <AdminPageContent />
  </Show>
);