コンテクスト周りを整理

Author: tasuren

README.md

@@ -13,8 +13,8 @@
 - Bun
 - SolidJS
 - Tailwind CSS
-  [Preflight](https://tailwindcss.com/docs/preflight)が無効化されています。
-  開発時にはこれを留意してください。
+  （[Preflight](https://tailwindcss.com/docs/preflight)が無効化されています。
+  開発時にはこれを留意してください。）
 - GitHub Pages
 
 ## 開発

src/App.tsx

@@ -1,15 +1,12 @@
 import Layout from "@/components/Layout";
 import "./App.css";
-import { LibraryProvider } from "@/components/Context";
 import MainContent from "@/components/MainContent";
 
 function App() {
     return (
-        <LibraryProvider>
-            <Layout>
-                <MainContent />
-            </Layout>
-        </LibraryProvider>
+        <Layout>
+            <MainContent />
+        </Layout>
     );
 }
 

src/components/Context.tsx

@@ -1,54 +1,17 @@
 import { Paper } from "@/lib/paper";
-import {
-    type Theme,
-    applyThemeToDOM,
-    readTheme,
-    writeTheme,
-} from "@/lib/theme";
 import { TTS } from "@/lib/voice";
 import {
     type ParentProps,
     createContext,
-    createEffect,
     createSignal,
     useContext,
 } from "solid-js";
 
-// テーマのコンテクスト
-const ThemeContext = createContext<[() => Theme, (theme: Theme) => void]>();
-
-function ThemeProvider(props: ParentProps) {
-    const [theme, setTheme] = createSignal<Theme>(readTheme());
-
-    createEffect(() => {
-        const current = theme();
-        writeTheme(current);
-        applyThemeToDOM(current);
-    });
-
-    return (
-        <ThemeContext.Provider value={[theme, setTheme]}>
-            {props.children}
-        </ThemeContext.Provider>
-    );
-}
-
-export const useTheme = () => {
-    const value = useContext(ThemeContext);
-
-    if (!value)
-        throw new Error(
-            "テーマのコンテキストプロバイダーが使われていないようです。",
-        );
-
-    return value;
-};
-
 // VoiceControllerのコンテクスト
 const tts = new TTS();
 const TTSContext = createContext(tts);
 
-function VoiceProvider(props: ParentProps) {
+export function TTSProvider(props: ParentProps) {
     return (
         <TTSContext.Provider value={tts}>{props.children}</TTSContext.Provider>
     );
@@ -62,7 +25,7 @@ export function useTTS(): TTS {
 const PaperContext =
     createContext<[() => Paper | undefined, (paper: Paper) => void]>();
 
-function PaperProvider(props: ParentProps) {
+export function PaperProvider(props: ParentProps) {
     const [paper, setPaper] = createSignal<Paper>();
 
     return (
@@ -86,34 +49,3 @@ export function usePaper(): [() => Paper, (raw: HTMLElement) => void] {
         (raw) => setPaper(new Paper(raw)),
     ];
 }
-
-// 選択した文章に関するコンテクスト
-const SelectedContentsContext =
-    createContext<[() => string | undefined, (contents: string) => void]>();
-
-function SelectedContentsProvider(props: ParentProps) {
-    const [contents, setContents] = createSignal<string>();
-
-    return (
-        <SelectedContentsContext.Provider value={[contents, setContents]}>
-            {props.children}
-        </SelectedContentsContext.Provider>
-    );
-}
-
-export function useSelectedContents() {
-    return useContext(SelectedContentsContext);
-}
-
-// 全てのコンテクストプロバイダーを適用するコンポーネント
-export function LibraryProvider(props: ParentProps) {
-    return (
-        <SelectedContentsProvider>
-            <PaperProvider>
-                <ThemeProvider>
-                    <VoiceProvider>{props.children}</VoiceProvider>
-                </ThemeProvider>
-            </PaperProvider>
-        </SelectedContentsProvider>
-    );
-}

src/components/MainContent.tsx

@@ -2,6 +2,7 @@ import MainController from "@/components/Controller/MainController";
 import QuickController from "@/components/Controller/QuickController";
 import Paper from "@/components/Paper";
 import { type ParentProps, Show, createSignal } from "solid-js";
+import { PaperProvider, TTSProvider } from "./Context";
 import Footer from "./Footer";
 
 /** 大きいモニターの場合しか表示しないコンポーネント */
@@ -18,20 +19,22 @@ function OnlyBigMonitor(props: ParentProps) {
 
 function MainContent() {
     return (
-        <>
-            <main class="flex-1 flex flex-col justify-between">
-                <div class="space-y-4">
-                    <MainController />
-                    <Paper />
-                </div>
+        <PaperProvider>
+            <TTSProvider>
+                <main class="flex-1 flex flex-col justify-between">
+                    <div class="space-y-4">
+                        <MainController />
+                        <Paper />
+                    </div>
 
-                <Footer />
-            </main>
+                    <Footer />
+                </main>
 
-            <OnlyBigMonitor>
-                <QuickController />
-            </OnlyBigMonitor>
-        </>
+                <OnlyBigMonitor>
+                    <QuickController />
+                </OnlyBigMonitor>
+            </TTSProvider>
+        </PaperProvider>
     );
 }
 

src/components/ThemeToggleButton.tsx

@@ -1,4 +1,6 @@
-import { useTheme } from "./Context";
+import { applyThemeToDOM, writeTheme } from "@/lib/theme";
+import { readTheme } from "@/lib/theme";
+import { createEffect, createSignal } from "solid-js";
 
 const THEME_TITLES = {
     dark: "ダーク",
@@ -7,7 +9,14 @@ const THEME_TITLES = {
 };
 
 function ThemeToggleButton(props: { class: string }) {
-    const [theme, setTheme] = useTheme();
+    const [theme, setTheme] = createSignal(readTheme());
+
+    createEffect(() => {
+        const current = theme();
+
+        writeTheme(current);
+        applyThemeToDOM(current);
+    });
 
     const toggleTheme = () => {
         const current = theme();