Merge pull request #11 from react18-tools/fix/use-script

Fix/use script
react18-tools · Jun 15, 2024 · f0ac35d · f0ac35d
2 parents b9c1839 + dcb1ca9
commit f0ac35d
Show file tree

Hide file tree

Showing 31 changed files with 101 additions and 481 deletions.
diff --git a/.changeset/seven-parents-sniff.md b/.changeset/seven-parents-sniff.md
@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": major
+---
+
+Inject script to set mode on page load.
diff --git a/.changeset/shaggy-mirrors-trade.md b/.changeset/shaggy-mirrors-trade.md
@@ -0,0 +1,5 @@
+---
+"nextjs-darkmode": patch
+---
+
+Reuse code from script
diff --git a/README.md b/README.md
@@ -38,8 +38,6 @@ The `nextjs-themes` library was initially created to achieve a similar functiona
 
 - ✅ Manipulate theme via the `useMode` hook
 
-- ✅ No cookies when not using the corresponding `ServerTarget`
-
 - ✅ Comprehensive documentation with [Typedoc](https://react18-tools.github.io/nextjs-darkmode)
 
 Feel free to [request new features](https://github.com/react18-tools/nextjs-darkmode/issues/new?assignees=&labels=&projects=&template=feature_request.md&title=), [discuss](https://github.com/react18-tools/nextjs-darkmode/discussions), or [report bugs](https://github.com/react18-tools/nextjs-darkmode/issues/new?assignees=&labels=&projects=&template=bug_report.md&title=).
@@ -108,7 +106,7 @@ $ yarn add nextjs-darkmode-lite
 
 > Please explore `examples` and `packages/shared-ui` for more working examples. (updates coming soon...)
 
-### SPA (e.g., Vite, CRA) and Next.js pages directory (No server components)
+### SPA (e.g., Vite, CRA) and Next.js pages directory
 
 Modify `_app` to add dark mode support:
 
@@ -135,21 +133,19 @@ export default MyApp;
 
 > For `vite` or any other build tool, find a similar root component, e.g., `<App />` in `CRA` and `vite`.
 
-### With Next.js `app` router (Server Components)
+### With Next.js `app` router
 
-Update `app/layout.jsx` to add `Core` and `ServerTarget` to avoid flash of un-themed content:
+Update `app/layout.jsx` to add `Core` component.
 
 ```tsx
 // app/layout.jsx
 import { Core } from "nextjs-darkmode"; // for better tree-shaking
-import { ServerTarget } from "nextjs-darkmode/server";
 
 export default function Layout({ children }) {
   return (
     <html lang="en">
       <head />
       <body>
-        <ServerTarget />
         <Core />
         {children}
       </body>
@@ -158,26 +154,6 @@ export default function Layout({ children }) {
 }
 ```
 
-If you prefer SSR over SSG for your entire app, you can wrap entire app with `ServerTarget` as follows:
-
-```tsx
-// app/layout.jsx
-import { Core } from "nextjs-darkmode"; // for better tree-shaking
-import { ServerTarget } from "nextjs-darkmode/server";
-
-export default function Layout({ children }) {
-  return (
-    <ServerTarget tag="html" lang="en">
-      <head />
-      <body>
-        <Core />
-        {children}
-      </body>
-    </ServerTarget>
-  );
-}
-```
-
 ### Switch
 
 An elegant color switch to toggle color schemes:
@@ -188,7 +164,7 @@ An elegant color switch to toggle color schemes:
 
 ### HTML & CSS
 
-Fully support dark mode, including system preference with `prefers-color-scheme`. The dark/light mode is synced between tabs and modifies the `className` and data-attributes on the `html` or ServerTarget element:
+Fully support dark mode, including system preference with `prefers-color-scheme`. The dark/light mode is synced between tabs and modifies the `className` and data-attributes on the `html` elemnt.
 
 ```css
 :root {
@@ -206,19 +182,10 @@ Fully support dark mode, including system preference with `prefers-color-scheme`
 [data-rm="dark"] {...}
 ```
 
-When using `ServerTarget`, use the CSS general sibling combinator (~):
-
-```css
-.selector,
-.selector *,
-.selector ~ *,
-.selector ~ * * {
-  --th-variable: value;
-}
-```
-
 #### Using the data-attributes
 
+data-attributes are very helpful when you want to customize styles in a CSS module file (`styles.module.css`)
+
 `data-rm` -> Resolved Mode
 
 `data-m` -> User's preference
@@ -352,8 +319,6 @@ Now you can use dark-mode specific classes:
 <h1 className="text-black dark:text-white">
 ```
 
-> When you use Tailwind, make sure you replace `html` in `app/layout` to `<ServerTarget tag="html"...` to avoid FOUC.
-
 ## Performance
 
 `nextjs-darkmode` is designed to be fully tree-shakable, including only the code you use. For instance, if you only use the `useMode` hook, the rest of the library's code will be removed during the build process.

diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -1,6 +1,5 @@
 import "./styles.css";
 import "react18-loaders/dist/index.css";
-import { ServerTarget } from "nextjs-darkmode/server";
 import { Core } from "nextjs-darkmode";
 import { Layout } from "@repo/shared/dist/server";
 import { GlobalLoader, Header } from "@repo/shared";
@@ -13,7 +12,6 @@ export default function RootLayout({ children }: { children: React.ReactNode }):
   return (
     <html lang="en">
       <body className={inter.className}>
-        <ServerTarget />
         <Core t="all .5s" />
         <Layout>
           <Header />

diff --git a/examples/tailwind-ssg/.eslintrc.js b/examples/tailwind-ssg/.eslintrc.js
diff --git a/examples/tailwind-ssg/app/_components/card.tsx b/examples/tailwind-ssg/app/_components/card.tsx
diff --git a/examples/tailwind-ssg/app/favicon.ico b/examples/tailwind-ssg/app/favicon.ico
diff --git a/examples/tailwind-ssg/app/globals.css b/examples/tailwind-ssg/app/globals.css
diff --git a/examples/tailwind-ssg/app/layout.tsx b/examples/tailwind-ssg/app/layout.tsx
diff --git a/examples/tailwind-ssg/app/page.tsx b/examples/tailwind-ssg/app/page.tsx
diff --git a/examples/tailwind-ssg/cache/config.json b/examples/tailwind-ssg/cache/config.json
diff --git a/examples/tailwind-ssg/next-env.d.ts b/examples/tailwind-ssg/next-env.d.ts
diff --git a/examples/tailwind-ssg/next.config.js b/examples/tailwind-ssg/next.config.js
diff --git a/examples/tailwind-ssg/package.json b/examples/tailwind-ssg/package.json
diff --git a/examples/tailwind-ssg/postcss.config.js b/examples/tailwind-ssg/postcss.config.js
diff --git a/examples/tailwind-ssg/tailwind.config.ts b/examples/tailwind-ssg/tailwind.config.ts
diff --git a/examples/tailwind-ssg/tsconfig.json b/examples/tailwind-ssg/tsconfig.json
diff --git a/examples/tailwind-ssg/turbo.json b/examples/tailwind-ssg/turbo.json
diff --git a/examples/tailwind/app/layout.tsx b/examples/tailwind/app/layout.tsx
@@ -2,7 +2,6 @@ import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import { Core } from "nextjs-darkmode";
-import { ServerTarget } from "nextjs-darkmode/server";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -14,11 +13,11 @@ export const metadata: Metadata = {
 /** Root layout */
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <ServerTarget tag="html" lang="en">
+    <html lang="en">
       <body className={inter.className}>
         <Core t="background .3s" />
         {children}
       </body>
-    </ServerTarget>
+    </html>
   );
 }