example: fix RSC dup render bug, next-themes

muxinc · Feb 25, 2024 · 0620b98 · 0620b98
1 parent d4def6d
commit 0620b98
Show file tree

Hide file tree

Showing 9 changed files with 80 additions and 66 deletions.
diff --git a/examples/default-provider/app/layout.tsx b/examples/default-provider/app/layout.tsx
@@ -1,19 +1,26 @@
-import type { Metadata } from "next";
-import Link from "next/link";
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import * as fs from 'node:fs/promises';
+
+import type { Metadata } from 'next';
+import Link from 'next/link';
 import { DM_Sans, JetBrains_Mono } from 'next/font/google';
-import { Providers } from './providers';
-import Nav from "./nav";
-import "./globals.css";
+import Nav from './nav';
+import './globals.css';
 
 const dmSans = DM_Sans({ subsets: ['latin'], variable: '--sans' });
 const jetBrainsMono = JetBrains_Mono({ subsets: ['latin'], variable: '--mono' });
 
 export const metadata: Metadata = {
-  title: "next-video",
-  description: "Next Video solves the hard problems with embedding, storing, streaming, and customizing video in your Next.js app.",
+  title: 'next-video',
+  description:
+    'Next Video solves the hard problems with embedding, storing, streaming, and customizing video in your Next.js app.',
 };
 
-export default function RootLayout({
+const fileDir = dirname(fileURLToPath(import.meta.url));
+const themeScript = await fs.readFile(`${fileDir}/theme-toggle.js`, 'utf-8');
+
+export default async function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
@@ -25,29 +32,27 @@ export default function RootLayout({
       className={`${dmSans.variable} ${jetBrainsMono.variable}`}
     >
       <body>
-        <Providers>
-          <header>
-            <Link className="logo" href="/">
-              <code>next-video</code>
-              <span> playground</span>
-            </Link>
-            <Nav />
-          </header>
-          <aside>
-            <nav>
-              <ul>
-                <li>
-                  <Link href="/">Basic example</Link>
-                </li>
-                <li>
-                  <Link href="/slotted-poster">Slotted Poster</Link>
-                </li>
-              </ul>
-            </nav>
-          </aside>
-
-          {children}
-        </Providers>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+        <header>
+          <Link className="logo" href="/">
+            <code>next-video</code>
+            <span> playground</span>
+          </Link>
+          <Nav />
+        </header>
+        <aside>
+          <nav>
+            <ul>
+              <li>
+                <Link href="/">Basic example</Link>
+              </li>
+              <li>
+                <Link href="/slotted-poster">Slotted Poster</Link>
+              </li>
+            </ul>
+          </nav>
+        </aside>
+        {children}
       </body>
     </html>
   );

diff --git a/examples/default-provider/app/nav.tsx b/examples/default-provider/app/nav.tsx
@@ -1,13 +1,6 @@
-'use client';
-
-import { useTheme } from 'next-themes';
-
 export default function Nav() {
-  const { theme, setTheme } = useTheme()
-
   return <nav>
     <button
-      onClick={() => setTheme(theme === "light" ? "dark" : "light")}
       className="theme-toggle"
       id="theme-toggle"
       title="Toggles light & dark"

diff --git a/examples/default-provider/app/page.tsx b/examples/default-provider/app/page.tsx
@@ -1,10 +1,10 @@
-import { Metadata } from 'next'
+import { Metadata } from 'next';
 import Video from 'next-video';
 import getStarted from '/videos/get-started.mp4';
 
 export const metadata: Metadata = {
   title: 'next-video - Basic example',
-}
+};
 
 export default function Page() {
   return (

diff --git a/examples/default-provider/app/providers.tsx b/examples/default-provider/app/providers.tsx
diff --git a/examples/default-provider/app/slotted-poster/page.tsx b/examples/default-provider/app/slotted-poster/page.tsx
@@ -6,7 +6,7 @@ import getStartedPoster from '/images/get-started-poster.jpg';
 
 export const metadata: Metadata = {
   title: 'next-video - Slotted poster image',
-}
+};
 
 export default function Page() {
   return (

diff --git a/examples/default-provider/app/theme-toggle.js b/examples/default-provider/app/theme-toggle.js
@@ -0,0 +1,39 @@
+const getColorPreference = () => {
+  if (globalThis.localStorage?.getItem('theme-preference')) {
+    return localStorage.getItem('theme-preference');
+  } else {
+    return globalThis.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+  }
+};
+
+const setPreference = () => {
+  localStorage.setItem('theme-preference', `${theme.value}`);
+  reflectPreference();
+};
+
+const reflectPreference = () => {
+  globalThis.document?.firstElementChild?.setAttribute('data-theme', `${theme.value}`);
+  globalThis.document?.querySelector('#theme-toggle')?.setAttribute('aria-label', `${theme.value}`);
+};
+
+const theme = {
+  value: getColorPreference(),
+};
+
+reflectPreference();
+
+globalThis.onload = () => {
+  reflectPreference();
+
+  document.querySelector('#theme-toggle')?.addEventListener('click', (e) => {
+    theme.value = theme.value === 'light' ? 'dark' : 'light';
+    setPreference();
+  });
+};
+
+globalThis
+  .matchMedia?.('(prefers-color-scheme: dark)')
+  .addEventListener('change', ({ matches: isDark }) => {
+    theme.value = isDark ? 'dark' : 'light';
+    setPreference();
+  });
diff --git a/examples/default-provider/next.config.mjs b/examples/default-provider/next.config.mjs
@@ -1,5 +1,5 @@
-import { withNextVideo } from "next-video/process";
+import { withNextVideo } from 'next-video/process';
 /** @type {import('next').NextConfig} */
 const nextConfig = {};
 
-export default withNextVideo(nextConfig);
+export default withNextVideo(nextConfig);
diff --git a/examples/default-provider/package-lock.json b/examples/default-provider/package-lock.json
diff --git a/examples/default-provider/package.json b/examples/default-provider/package.json
@@ -10,7 +10,6 @@
   },
   "dependencies": {
     "next": "14.1.0",
-    "next-themes": "^0.2.1",
     "next-video": "^0.15.0",
     "open-props": "^1.6.19",
     "react": "^18",