npm - create-next-pro-cli - Versions diffs - 0.1.33 → 0.1.34 - Mend

create-next-pro-cli 0.1.33 → 0.1.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "create-next-pro-cli",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "Advanced Next.js project scaffolder with i18n, Tailwind, App Router and more.",
   "repository": {
     "type": "git",

package/templates/Projects/default/src/app/[locale]/layout.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ import { setRequestLocale } from "next-intl/server";
 import { hasLocale } from "next-intl";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import Script from "next/script";
 import React from "react";
 import "@/app/styles/globals.css";
 import { routing } from "@/lib/i18n/routing";
@@ -37,18 +36,11 @@ export default async function LocaleLayout({
   setRequestLocale(locale);
   const messages = getMessages(locale);
   return (
-    <html lang={locale} className="light" suppressHydrationWarning>
+    <html lang={locale} className="light">
       <body>
         <NextIntlClientProvider locale={locale} messages={messages}>
           {children}
         </NextIntlClientProvider>
-        <Script
-          id="theme-initializer"
-          strategy="beforeInteractive"
-          dangerouslySetInnerHTML={{
-            __html: `try{var t=localStorage.getItem("theme");var d=t?t==="dark":window.matchMedia("(prefers-color-scheme: dark)").matches;document.documentElement.classList.toggle("dark",d);document.documentElement.classList.toggle("light",!d);}catch{document.documentElement.classList.add("light");}`,
-          }}
-        />
       </body>
     </html>
   );

package/templates/Projects/default/src/ui/_global/ThemeToggle.tsx CHANGED Viewed

@@ -4,30 +4,81 @@ import { Moon, Sun } from "lucide-react";
 import { Button } from "./Button";
 import { useLocale, useTranslations } from "next-intl";
+type Theme = "dark" | "light";
 const themeChangeEvent = "template-theme-change";
-function getThemeSnapshot() {
+function getThemeSnapshot(): Theme {
   return document.documentElement.classList.contains("dark") ? "dark" : "light";
 }
-function getServerThemeSnapshot() {
+function getServerThemeSnapshot(): Theme {
   return "light";
 }
+function isTheme(value: string | null): value is Theme {
+  return value === "dark" || value === "light";
+}
+function readStoredTheme(): Theme | null {
+  try {
+    const theme = localStorage.getItem("theme");
+    return isTheme(theme) ? theme : null;
+  } catch {
+    return null;
+  }
+}
+function getSystemTheme(): Theme {
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+function setDocumentTheme(theme: Theme) {
+  const isDark = theme === "dark";
+  document.documentElement.classList.toggle("dark", isDark);
+  document.documentElement.classList.toggle("light", !isDark);
+}
+function persistTheme(theme: Theme) {
+  try {
+    localStorage.setItem("theme", theme);
+  } catch {
+    // The active document theme still works when storage is unavailable.
+  }
+}
 function subscribeToThemeChange(onStoreChange: () => void) {
+  const handleStorage = (event: StorageEvent) => {
+    if (event.key !== null && event.key !== "theme") return;
+    setDocumentTheme(readStoredTheme() ?? getSystemTheme());
+    onStoreChange();
+  };
+  const colorScheme = window.matchMedia("(prefers-color-scheme: dark)");
+  const handleSystemThemeChange = (event: MediaQueryListEvent) => {
+    if (readStoredTheme() !== null) return;
+    setDocumentTheme(event.matches ? "dark" : "light");
+    onStoreChange();
+  };
   window.addEventListener(themeChangeEvent, onStoreChange);
-  window.addEventListener("storage", onStoreChange);
+  window.addEventListener("storage", handleStorage);
+  colorScheme.addEventListener("change", handleSystemThemeChange);
   return () => {
     window.removeEventListener(themeChangeEvent, onStoreChange);
-    window.removeEventListener("storage", onStoreChange);
+    window.removeEventListener("storage", handleStorage);
+    colorScheme.removeEventListener("change", handleSystemThemeChange);
   };
 }
-function applyTheme(dark: boolean) {
-  document.documentElement.classList.toggle("dark", dark);
-  document.documentElement.classList.toggle("light", !dark);
-  localStorage.setItem("theme", dark ? "dark" : "light");
+function applyTheme(theme: Theme, persist: boolean) {
+  setDocumentTheme(theme);
+  if (persist) persistTheme(theme);
   window.dispatchEvent(new Event(themeChangeEvent));
 }
@@ -42,17 +93,12 @@ export default function ThemeToggle() {
   const isDark = theme === "dark";
   useEffect(() => {
-    const storedTheme = localStorage.getItem("theme");
-    const shouldUseDark = storedTheme
-      ? storedTheme === "dark"
-      : window.matchMedia("(prefers-color-scheme: dark)").matches;
-    applyTheme(shouldUseDark);
+    applyTheme(readStoredTheme() ?? getSystemTheme(), false);
   }, [locale]);
   return (
     <Button
-      onClick={() => applyTheme(!isDark)}
+      onClick={() => applyTheme(isDark ? "light" : "dark", true)}
       className="rounded-full p-0 dark:hover:bg-white/10 light:hover:bg-black/10 transition-colors"
       aria-label={t("toggle_theme")}
       variant="ghost"

package/templates/Projects/default/tests/e2e/template-remediation.playwright.ts CHANGED Viewed

@@ -1,10 +1,14 @@
 import { expect, test } from "@playwright/test";
+import path from "node:path";
 const captureByProject: Record<string, string> = {
   desktop: "artifacts/captures/phase-2-11-template-reconciliation-desktop.png",
   mobile: "artifacts/captures/phase-2-11-template-reconciliation-mobile.png",
 };
+const themeCaptureDirectory =
+  process.env.CNP_CAPTURE_DIRECTORY ?? "artifacts/captures";
 test("public template routes render in both locales", async ({
   page,
 }, testInfo) => {
@@ -107,32 +111,108 @@ test("security headers and disabled auth are explicit", async ({ request }) => {
   });
 });
-test("theme is initialized before hydration without a React warning", async ({
+test("ThemeToggle restores and persists the active theme without scripts", async ({
   page,
-}) => {
-  const hydrationWarnings: string[] = [];
+}, testInfo) => {
+  const themeConsoleIssues: string[] = [];
   page.on("console", (message) => {
     if (
-      message.type() === "warning" &&
-      (message.text().includes("hydrated") ||
+      (message.type() === "warning" || message.type() === "error") &&
+      (message.text().toLowerCase().includes("hydrat") ||
         message.text().includes("Encountered a script tag"))
     ) {
-      hydrationWarnings.push(message.text());
+      themeConsoleIssues.push(message.text());
     }
   });
-  await page.addInitScript(() => localStorage.setItem("theme", "dark"));
+  await page.addInitScript(() => {
+    if (localStorage.getItem("theme") === null) {
+      localStorage.setItem("theme", "dark");
+    }
+  });
   await page.goto("/en", { waitUntil: "domcontentloaded" });
-  await expect(page.locator("#theme-initializer")).toHaveCount(1);
+  await expect(page.locator("#theme-initializer")).toHaveCount(0);
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBe("dark");
+  if (testInfo.project.name === "desktop") {
+    await page.screenshot({
+      path: path.join(
+        themeCaptureDirectory,
+        "phase-2-16-theme-dark-desktop.png",
+      ),
+      fullPage: true,
+    });
+  }
+  await page.getByLabel("Select language").selectOption("fr");
+  await expect(page).toHaveURL(/\/fr$/);
   await expect(page.locator("html")).toHaveClass(/dark/);
-  expect(hydrationWarnings).toEqual([]);
+  await page.getByLabel("Changer de thème").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBe("light");
+  await page.reload({ waitUntil: "domcontentloaded" });
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await page.goto("/fr/dashboard", { waitUntil: "domcontentloaded" });
+  await expect(page).toHaveURL(/\/fr\/login/);
+  await expect(page.locator("html")).toHaveClass(/light/);
+  if (testInfo.project.name === "desktop") {
+    await page.screenshot({
+      path: path.join(
+        themeCaptureDirectory,
+        "phase-2-16-theme-light-desktop.png",
+      ),
+      fullPage: true,
+    });
+  }
+  expect(themeConsoleIssues).toEqual([]);
+});
+test("ThemeToggle follows the system preference without persisting it", async ({
+  page,
+}) => {
+  await page.emulateMedia({ colorScheme: "dark" });
+  await page.addInitScript(() => localStorage.removeItem("theme"));
+  await page.goto("/en", { waitUntil: "domcontentloaded" });
+  await expect(page.locator("html")).toHaveClass(/dark/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBeNull();
+  await page.emulateMedia({ colorScheme: "light" });
+  await expect(page.locator("html")).toHaveClass(/light/);
+  await expect
+    .poll(() => page.evaluate(() => localStorage.getItem("theme")))
+    .toBeNull();
 });
-test("theme falls back to the system preference", async ({ page }) => {
+test("ThemeToggle remains usable when browser storage is unavailable", async ({
+  page,
+}) => {
   await page.emulateMedia({ colorScheme: "dark" });
+  await page.addInitScript(() => {
+    Object.defineProperty(window, "localStorage", {
+      configurable: true,
+      get() {
+        throw new DOMException("Storage is unavailable", "SecurityError");
+      },
+    });
+  });
   await page.goto("/en", { waitUntil: "domcontentloaded" });
   await expect(page.locator("html")).toHaveClass(/dark/);
+  await page.getByLabel("Toggle theme").click();
+  await expect(page.locator("html")).toHaveClass(/light/);
 });
 test("mobile navigation supports keyboard dismissal", async ({

package/templates/Projects/default/tests/unit/template-baseline.test.ts CHANGED Viewed

@@ -58,4 +58,23 @@ describe("updated template baseline", () => {
     ].filter(Boolean);
     expect(configuredAuthValues).toHaveLength(3);
   });
+  test("delegates theme initialization to ThemeToggle without inline scripts", async () => {
+    const [layout, themeToggle] = await Promise.all([
+      source("src/app/[locale]/layout.tsx"),
+      source("src/ui/_global/ThemeToggle.tsx"),
+    ]);
+    expect(layout).toContain('className="light"');
+    expect(layout).not.toContain("next/script");
+    expect(layout).not.toContain("theme-initializer");
+    expect(layout).not.toContain("dangerouslySetInnerHTML");
+    expect(layout).not.toContain("suppressHydrationWarning");
+    expect(themeToggle).toContain('localStorage.getItem("theme")');
+    expect(themeToggle).toContain('localStorage.setItem("theme", theme)');
+    expect(themeToggle).toContain("prefers-color-scheme: dark");
+    expect(themeToggle).toContain('classList.toggle("dark", isDark)');
+    expect(themeToggle).toContain('classList.toggle("light", !isDark)');
+  });
 });