feat: add theme switch, fix error catch only first time is work

Author: json-q

src/App.tsx

@@ -6,33 +6,36 @@ import RootHeader from "@/layout/root-header";
 import { PlaygroundProvider } from "@/core/context/PlaygroundProvider";
 import LazyLoading from "@/components/lazy-loading";
 import { Toaster } from "./components/ui/sonner";
+import { ThemeProvider } from "./core/context/ThemeProvider";
 
 const RootEditor = lazy(() => import("@/layout/root-editor"));
 const RootPreview = lazy(() => import("@/layout/root-preview"));
 
 function App() {
   return (
-    <div className='flex h-screen flex-col'>
-      <RootHeader />
-      <Toaster richColors position='top-right' />
+    <ThemeProvider defaultTheme='light'>
+      <div className='flex h-screen flex-col'>
+        <RootHeader />
+        <Toaster richColors position='top-right' />
 
-      <section className='flex-1'>
-        <PlaygroundProvider>
-          <Allotment defaultSizes={[100, 100]}>
-            <Allotment.Pane minSize={250}>
-              <Suspense fallback={<LazyLoading text='RootEditor Loading...' />}>
-                <RootEditor />
-              </Suspense>
-            </Allotment.Pane>
-            <Allotment.Pane minSize={0}>
-              <Suspense fallback={<LazyLoading text='RootPreview Loading...' />}>
-                <RootPreview />
-              </Suspense>
-            </Allotment.Pane>
-          </Allotment>
-        </PlaygroundProvider>
-      </section>
-    </div>
+        <section className='flex-1'>
+          <PlaygroundProvider>
+            <Allotment defaultSizes={[100, 100]}>
+              <Allotment.Pane minSize={250}>
+                <Suspense fallback={<LazyLoading text='RootEditor Loading...' />}>
+                  <RootEditor />
+                </Suspense>
+              </Allotment.Pane>
+              <Allotment.Pane minSize={0}>
+                <Suspense fallback={<LazyLoading text='RootPreview Loading...' />}>
+                  <RootPreview />
+                </Suspense>
+              </Allotment.Pane>
+            </Allotment>
+          </PlaygroundProvider>
+        </section>
+      </div>
+    </ThemeProvider>
   );
 }
 

src/components/code-container/index.tsx

@@ -1,5 +1,6 @@
 import { Editor, type EditorProps, type OnMount, loader } from "@monaco-editor/react";
 import { createATA } from "./ata";
+import { useTheme } from "@/hooks/useTheme";
 
 loader.config({
   paths: {
@@ -23,6 +24,7 @@ interface CodeContainerProps {
 
 export default function CodeContainer(props: CodeContainerProps) {
   const { file = {} as CodeContainerFileInfo, onChange, options } = props;
+  const { theme } = useTheme();
 
   const handleEditorDidMount: OnMount = (editor, monaco) => {
     // 无法识别 jsx 的问题（设置 tsconfig）
@@ -53,6 +55,7 @@ export default function CodeContainer(props: CodeContainerProps) {
       onChange={onChange}
       loading='Feching monaco source'
       options={{
+        theme: theme === "system" ? undefined : `vs-${theme}`,
         scrollBeyondLastLine: false,
         minimap: {
           enabled: false,

src/components/error-alert.tsx

@@ -1,6 +1,6 @@
 import { AlertCircle, X } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
 
@@ -13,7 +13,11 @@ export default function ErrorAlert(props: ErrorAlertProps) {
   const { errMsg, className } = props;
   const [visible, setVisible] = useState(true);
 
-  if (!visible || !errMsg) return null;
+  useEffect(() => {
+    setVisible(true);
+  }, [errMsg]);
+
+  if (!visible) return null;
 
   const closeError = () => {
     setVisible(false);

src/core/context/PlaygroundProvider.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useState } from "react";
 import { type MultipleFiles, PlaygroundContext } from ".";
 import { fileName2Language } from "../util";
-import { defaultFiles } from "../files";
+import { defaultFiles, ENTRY_FILE_NAME } from "../files";
 
 interface PlaygroundProviderProps {
   children: React.ReactNode;
 }
 export const PlaygroundProvider = (props: PlaygroundProviderProps) => {
   const { children } = props;
   const [files, setFiles] = useState<MultipleFiles>(defaultFiles);
-  const [selectedFileName, setSelectedFileName] = useState("main.tsx");
+  const [selectedFileName, setSelectedFileName] = useState(ENTRY_FILE_NAME);
 
   const addFile = useCallback(
     (name: string) => {

src/core/context/ThemeProvider.tsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+import { type Theme, ThemeContext } from ".";
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+export function ThemeProvider(props: ThemeProviderProps) {
+  const { children, defaultTheme = "light", storageKey = "play-ui-theme" } = props;
+
+  const [theme, _setTheme] = useState<Theme>(
+    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
+  );
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    const applyTheme = (theme: Theme) => {
+      root.classList.remove("light", "dark");
+      const systemTheme = mediaQuery.matches ? "dark" : "light";
+      const effectiveTheme = theme === "system" ? systemTheme : theme;
+      root.classList.add(effectiveTheme);
+    };
+
+    const handleChange = () => {
+      if (theme === "system") applyTheme("system");
+    };
+
+    applyTheme(theme);
+
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme]);
+
+  const setTheme = (theme: Theme) => {
+    localStorage.setItem(storageKey, theme);
+    _setTheme(theme);
+  };
+
+  const value = {
+    theme,
+    setTheme,
+  };
+
+  return (
+    <ThemeContext {...props} value={value}>
+      {children}
+    </ThemeContext>
+  );
+}

src/core/context/index.ts

@@ -1,6 +1,8 @@
-import type { CodeContainerFileInfo } from "@/components/code-container";
 import { createContext } from "react";
+import type { CodeContainerFileInfo } from "@/components/code-container";
+import { ENTRY_FILE_NAME } from "../files";
 
+// CodeFile Context
 export interface MultipleFiles {
   [key: string]: CodeContainerFileInfo;
 }
@@ -16,5 +18,17 @@ export interface PlaygroundContextProps {
 }
 
 export const PlaygroundContext = createContext<PlaygroundContextProps>({
-  selectedFileName: "App.tsx",
+  selectedFileName: ENTRY_FILE_NAME,
 } as PlaygroundContextProps);
+
+// Theme Context
+export type Theme = "dark" | "light" | "system";
+
+export type ThemeContextProps = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextProps>({
+  theme: "system",
+} as ThemeContextProps);

src/hooks/useTheme.ts

@@ -0,0 +1,8 @@
+import { useContext } from "react";
+import { ThemeContext } from "@/core/context";
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  return context;
+};

src/layout/root-header/index.tsx

@@ -1,9 +1,30 @@
+import { useCallback } from "react";
+import { MoonIcon, SunIcon } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
 import ReactLogo from "@/icons/react-logo";
+import { useTheme } from "@/hooks/useTheme";
+
 export default function RootHeader() {
+  const { theme, setTheme } = useTheme();
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  }, [theme, setTheme]);
+
   return (
-    <header className='flex items-center border-b p-2'>
-      <ReactLogo className='h-8 w-8' style={{ color: "#61DAFB" }} />
-      <span className='ml-2'>React Mini Playground</span>
+    <header className='flex items-center justify-between border-b p-2'>
+      <div className='flex items-center'>
+        <ReactLogo className='h-8 w-8' style={{ color: "#61DAFB" }} />
+        <span className='ml-2'>React Mini Playground</span>
+      </div>
+      <div className='flex items-center'>
+        <Button variant='ghost' className='size-8 cursor-pointer px-0' onClick={toggleTheme}>
+          <SunIcon className='hidden [html.dark_&]:block' />
+          <MoonIcon className='hidden [html.light_&]:block' />
+          <span className='sr-only'>Toggle theme</span>
+        </Button>
+      </div>
     </header>
   );
 }

src/layout/root-preview/index.tsx

@@ -53,8 +53,6 @@ export default function RootPreview() {
   const [errMsg, setErrMsg] = useState<string>();
 
   const handleMessage = (event: MessageEvent<MessageData>) => {
-    console.log(event);
-
     if (event.data.type === "ERROR") {
       setErrMsg(event.data.message);
     }
@@ -67,7 +65,9 @@ export default function RootPreview() {
     };
   }, []);
 
-  console.log("iframe render-----", iframeUrl);
+  useEffect(() => {
+    console.log("iframe render-----", iframeUrl);
+  }, [iframeUrl]);
 
   return (
     <div className='box-border h-full w-full overflow-auto'>
@@ -79,7 +79,7 @@ export default function RootPreview() {
         })}
       />
 
-      <ErrorAlert className='mx-12 mt-12' errMsg={errMsg} />
+      {errMsg && <ErrorAlert className='mx-12 mt-12' errMsg={errMsg} />}
     </div>
   );
 }