bug: fix mobile hydration bug

src/default-theme/Layout.module.css

@@ -49,6 +49,10 @@ main {
 		grid-template-columns: 1fr;
 	}
 
+	aside.sidenav {
+		display: none;
+	}
+
 	.sidenav {
 		position: fixed;
 		left: 0;

src/default-theme/Layout.tsx

@@ -29,7 +29,6 @@ import {
 	useDefaultThemeState,
 } from "./context.jsx";
 import { defaultThemeComponents } from "./default-components.js";
-import { mobileLayout } from "./globals.js";
 import { usePace } from "./pace.js";
 import { useRouteConfig } from "./utils.js";
 
@@ -60,7 +59,8 @@ export default (props: ParentProps) => {
 function Layout(props: ParentProps) {
 	const { Header, Article, Link, ProjectSelector } =
 		useDefaultThemeComponents();
-	const { sidebarOpen, setSidebarOpen, frontmatter } = useDefaultThemeState();
+	const { sidebarOpen, setSidebarOpen, frontmatter, mobileLayout } =
+		useDefaultThemeState();
 	const config = useRouteConfig();
 
 	const sidebar = useSidebar<DefaultThemeSidebarItemOptions>();

src/default-theme/components/Article.module.css

@@ -45,6 +45,10 @@
 	.article {
 		margin: 2rem 1.25rem;
 	}
+
+	.aside {
+		display: none;
+	}
 }
 
 .info {

src/default-theme/components/Article.tsx

@@ -10,15 +10,14 @@ import {
 	useDefaultThemeState,
 } from "../context.jsx";
 import type { RelativePageConfig } from "../frontmatter.js";
-import { mobileLayout } from "../globals.js";
 import { useSolidBaseContext, useThemeText } from "../utils.js";
 
 import styles from "./Article.module.css";
 
 export default function Article(props: ParentProps) {
 	const { config } = useSolidBaseContext();
 	const text = useThemeText();
-	const { frontmatter } = useDefaultThemeState();
+	const { frontmatter, mobileLayout } = useDefaultThemeState();
 
 	const { TableOfContents, Link, LastUpdated, Footer, Hero, Features } =
 		useDefaultThemeComponents();

src/default-theme/context.tsx

@@ -1,4 +1,5 @@
 import { createContextProvider } from "@solid-primitives/context";
+import { createMediaQuery } from "@solid-primitives/media";
 import { createSignal } from "solid-js";
 
 import type { ThemeComponents } from "./default-components.js";
@@ -38,12 +39,14 @@ export function useDefaultThemeComponents() {
 
 const [DefaultThemeStateProvider, useDefaultThemeStateContext] =
 	createContextProvider(() => {
+		const mobileLayout = createMediaQuery("(max-width: 1100px)", false);
 		const [sidebarOpen, setSidebarOpen] = createSignal(false);
 		const [tocOpen, setTocOpen] = createSignal(false);
 		const [navOpen, setNavOpen] = createSignal(false);
 		const frontmatter = useDefaultThemeFrontmatter();
 
 		return {
+			mobileLayout,
 			sidebarOpen,
 			setSidebarOpen,
 			tocOpen,

src/default-theme/globals.ts

@@ -1,16 +1,3 @@
-import { createMediaQuery } from "@solid-primitives/media";
-import { createEffect, createRoot, createSignal, on, onMount } from "solid-js";
+import { useDefaultThemeState } from "./context.jsx";
 
-const [_mobileLayout, setMobileLayout] = createSignal(false);
-
-onMount(() => {
-	const query = createMediaQuery("(max-width: 1100px)");
-
-	createRoot(() => {
-		createEffect(on(query, (q) => setMobileLayout(q), { defer: true }));
-	});
-
-	setTimeout(() => setMobileLayout(query()));
-});
-
-export const mobileLayout = _mobileLayout;
+export const mobileLayout = () => useDefaultThemeState().mobileLayout();

tests/default-theme/context.test.ts

@@ -0,0 +1,66 @@
+import { createComponent, createRoot, getOwner } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+const createMediaQuery = vi.fn(() => {
+	expect(getOwner()).not.toBeNull();
+	return () => false;
+});
+
+vi.mock("@solid-primitives/media", () => ({ createMediaQuery }));
+
+vi.mock("../../src/default-theme/frontmatter.js", () => ({
+	useDefaultThemeFrontmatter: () => () => undefined,
+}));
+
+describe("DefaultThemeStateProvider", () => {
+	afterEach(() => {
+		createMediaQuery.mockClear();
+	});
+
+	it("owns responsive layout state with a desktop hydration fallback", async () => {
+		const { DefaultThemeStateProvider, useDefaultThemeState } = await import(
+			"../../src/default-theme/context.tsx"
+		);
+
+		createRoot((dispose) => {
+			let state: ReturnType<typeof useDefaultThemeState> | undefined;
+
+			createComponent(DefaultThemeStateProvider, {
+				get children() {
+					state = useDefaultThemeState();
+					return null;
+				},
+			});
+
+			expect(createMediaQuery).toHaveBeenCalledWith(
+				"(max-width: 1100px)",
+				false,
+			);
+			expect(state?.mobileLayout()).toBe(false);
+			dispose();
+		});
+	});
+
+	it("keeps the mobile layout deep import connected to provider state", async () => {
+		const [{ DefaultThemeStateProvider }, { mobileLayout }] = await Promise.all(
+			[
+				import("../../src/default-theme/context.tsx"),
+				import("../../src/default-theme/globals.ts"),
+			],
+		);
+
+		createRoot((dispose) => {
+			let isMobile: boolean | undefined;
+
+			createComponent(DefaultThemeStateProvider, {
+				get children() {
+					isMobile = mobileLayout();
+					return null;
+				},
+			});
+
+			expect(isMobile).toBe(false);
+			dispose();
+		});
+	});
+});