merge new setup into v1 branch (#208)

* add license file (#119)

* Fix README hydration ThemeSwitcher example (#120)

Using `resolvedTheme` will cause the select to show `light` or `dark` when `system` is selected rather than `system` as expected.

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>

* Update documentation around `defaultTheme` (#130)

The previous documentation referred to using `<ThemeProvider defaultTheme="system">`, but this is no longer necessary

* Memoize ThemeContext.Provider value (#135)

Every time <Theme /> renders a new object is constructed and passed to ThemeContext.Provider. This guarantees that regardless of what inputs changed the Context will be propagated. This is particularly harmful when React is doing hydration because if an unhydrated Suspense boudnary exists in the sub-tree of the Provider it will fall back to client rendering regardless of whether the context is an actual dependency for that Suspense boundary.

This commit adds memoization so the value only changes if one of it's inputs change
To make this memoization effective the default argument for `themes` needed to be statically extracted (it constructs a new array on each function invocation otherwise)

* docs: link npm-version badge to npm package-site (#136)

* Update README with instructions for Next.js 13 appDir (#168)

Update README.md

* make `next-themes` react agnostic (#186)

* tooling: add monorepo and update playwright tests (#196)

* chore: add .nvmrc

* chore: convert intor a turbo based monorepo (yarn workspaces)

* chore: start refactoring playwright tests

* chore: add missing scripts to 'example' package and update playwright config accordingly

* fix(example/tailwind): use class-attribute

* chore(actions): update node version and bump setup-node to v2

* chore: move license to repository-root

* Update README with note for HTML class attribute (#192)

* Port #178 (#200)

* port pr 178

* fix up logic

* fix: add explicit undefined type to support exactOptionalPropertyTypes option (Port #177) (#201)

add explicit undefined

* Convert to pnpm monorepo, fix Vercel builds, improve test caching, lint (#202)

* cleanup package.json files

* prettier

* move tests to test/

* empty commit for vercel build

* empty commit for vercel build

* rename root package.json

* upgrade next.js and react in examples

* switch to pnpm monorepo, upgrade deps

* update github actions to use pnpm, add to packageManager

* use workspace dep

* update workflows to install pnpm

* back to npx

* many changes…

* empty commit for vercel build

* empty commit for vercel build

* empty commit for vercel build

* idk

* revert link changes, ready to merge

* chore: add @types/node & @types/jest to root to ensure IDE correctly lints jest globals

* chore: fix remaining merge-issues

* chore(types): improve comend for UseThemeProps.theme

* chore: fix merge-issue that caused forcedTheme to not be returned as resolvedTheme

* chore: cleanup README

---------

Co-authored-by: Paco <34928425+pacocoursey@users.noreply.github.com>
Co-authored-by: Max Leiter <mleiter@usc.edu>
Co-authored-by: Bruno Crosier <bruno.crosier@gmail.com>
Co-authored-by: Josh Story <josh.c.story@gmail.com>
Co-authored-by: Ian Jones <witspr@gmail.com>
Co-authored-by: Dimitri POSTOLOV <en3m@ya.ru>
Co-authored-by: Amr Hassaballah <hassaballah.amr@gmail.com>

.github/workflows/e2e.yml

@@ -3,31 +3,42 @@ name: E2E - Test
 on: push
 
 jobs:
-  setup:
-    runs-on: ubuntu-latest
-    outputs:
-      preview_url: ${{ steps.waitForVercelPreviewDeployment.outputs.url }}
-    steps:
-      - name: Wait for Vercel preview deployment to be ready
-        uses: patrickedqvist/wait-for-vercel-preview@v1.2.0
-        id: waitForVercelPreviewDeployment
-        with:
-          token: ${{ secrets.GITHUB_TOKEN }}
-          max_timeout: 600
   test:
-    needs: setup
     name: Run Playwright tests
     timeout-minutes: 5
     runs-on: ubuntu-latest
     steps:
-      - name: Prepare Playwright
-        uses: actions/checkout@v2
+      - uses: actions/checkout@v3
+
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - uses: actions/setup-node@v2
         with:
-          node-version: "14"
-      - run: yarn
-      - run: npx playwright install --with-deps
-      - name: Run tests
-        run: yarn test:e2e
+          node-version: 18.x
+          cache: 'pnpm'
+
+      - run: pnpm install
         env:
-          BASE_URL: ${{ needs.setup.outputs.preview_url }}
+          CI: true
+
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(pnpm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v3
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
+        run: npx playwright install --with-deps
+
+      - name: Run tests
+        run: pnpm test:e2e

.github/workflows/test.yml

@@ -4,29 +4,23 @@ on: push
 
 jobs:
   test:
+    name: Run Unit Tests
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - name: Get yarn cache
-        id: yarn-cache
-        run: echo "::set-output name=dir::$(yarn cache dir)"
-
-      - uses: actions/cache@v1
+      - uses: pnpm/action-setup@v2
         with:
-          path: ${{ steps.yarn-cache.outputs.dir }}
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
+          version: 8
 
-      - uses: actions/setup-node@v1
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
+          node-version: 18.x
+          cache: 'pnpm'
 
-      - name: yarn install
-        run: yarn
+      - run: pnpm install
         env:
           CI: true
 
-      - name: Run test
-        run: yarn test
+      - name: Run tests
+        run: pnpm test

.gitignore

@@ -4,3 +4,5 @@ dist/
 .next/
 .yalc/
 yalc.lock
+.idea/
+.turbo

.prettierignore

@@ -0,0 +1,3 @@
+.next
+dist
+build

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "arrowParens": "avoid",
+  "printWidth": 100
+}

README.md

@@ -1,10 +1,11 @@
-# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes/beta) ![Version](https://img.shields.io/npm/v/next-themes/beta.svg?colorB=green)
+# next-themes ![next-themes minzip package size](https://img.shields.io/bundlephobia/minzip/next-themes) [![Version](https://img.shields.io/npm/v/next-themes.svg?colorB=green)](https://www.npmjs.com/package/next-themes)
 
 An abstraction for themes in your Next.js app.
 
 - ✅ Perfect dark mode in 2 lines of code
 - ✅ System setting with prefers-color-scheme
 - ✅ Themed browser UI with color-scheme
+- ✅ Support for Next.js 13 `appDir`
 - ✅ No flash on load (both SSR and SSG)
 - ✅ Sync theme across tabs and windows
 - ✅ Disable flashing when changing themes
@@ -24,6 +25,8 @@ $ yarn add next-themes
 
 ## Use
 
+### With pages/
+
 You'll need a [Custom `App`](https://nextjs.org/docs/advanced-features/custom-app) to use next-themes. The simplest `_app` looks like this:
 
 ```js
@@ -52,6 +55,60 @@ function MyApp({ Component, pageProps }) {
 export default MyApp
 ```
 
+### With app/
+
+You'll need to update your `app/layout.jsx` to use next-themes. The simplest `layout` looks like this:
+
+```js
+// app/layout.jsx
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+Adding dark mode support still only takes a few lines of code. Start by creating a new [providers component](https://beta.nextjs.org/docs/rendering/server-and-client-components#rendering-third-party-context-providers-in-server-components) in its own file:
+
+```js
+// app/providers.jsx
+
+'use client'
+
+import { ThemeProvider } from 'next-themes'
+
+export function Providers({ children }) {
+  return <ThemeProvider>{children}</ThemeProvider>
+}
+```
+
+Then add the `<Providers>` component to your layout _inside_ of the `<body>`.
+
+```js
+// app/layout.jsx
+
+import { Providers } from './providers'
+
+export default function Layout({ children }) {
+  return (
+    <html suppressHydrationWarning>
+      <head />
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+> **Note!** If you do not add [suppressHydrationWarning](https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning:~:text=It%20only%20works%20one%20level%20deep) to your `<html>` you will get warnings because `next-themes` updates that element. This property only applies one level deep, so it won't block hydration warnings on other elements.
+
+### HTML & CSS
+
 That's it, your Next.js app fully supports dark mode, including System preference with `prefers-color-scheme`. The theme is also immediately synced between tabs. By default, next-themes modifies the `data-theme` attribute on the `html` element, which you can easily use to style your app:
 
 ```css
@@ -67,6 +124,8 @@ That's it, your Next.js app fully supports dark mode, including System preferenc
 }
 ```
 
+> **Note!** If you set the attribute of your Theme Provider to class for Tailwind next-themes will modify the `class` attribute on the `html` element. See [With Tailwind](###with-tailwind).
+
 ### useTheme
 
 Your UI will need to know the current theme and be able to change it. The `useTheme` hook provides theme information:
@@ -118,12 +177,12 @@ useTheme takes no parameters, but returns:
 
 - `theme`: Active theme name
 - `setTheme(name)`: Function to update the theme
-- `forcedTheme`: Forced page theme or falsy. If `forcedTheme` is set, you should disable any theme switching UI
 - `resolvedTheme`: Returns the effective theme color of the page.
   - If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light".
   - If `forcedTheme` is set, the name of the forced theme is returned.
   - Otherwise identical to `theme`.
 - `systemTheme`: If `enableSystem` is true, represents the System theme preference ("dark" or "light"), regardless what the active theme is
+- `forcedTheme`: Forced page theme or falsy. If `forcedTheme` is set, you should disable any theme switching UI
 - `themes`: The list of themes passed to `ThemeProvider` (with "system" appended, if `enableSystem` is true)
 
 Not too bad, right? Let's see how to use these properties with examples:
@@ -134,10 +193,10 @@ The [Live Example](https://next-themes-example.vercel.app/) shows next-themes in
 
 ### Use System preference by default
 
-The `defaultTheme` is "light". If you want to respect the System preference instead, set it to "system":
+For versions above v0.0.12, the `defaultTheme` is automatically set to "system", so to use System preference you can simply use:
 
 ```js
-<ThemeProvider defaultTheme="system">
+<ThemeProvider>
 ```
 
 ### Ignore System preference
@@ -301,10 +360,10 @@ import { useTheme } from 'next-themes'
 
 // Do NOT use this! It will throw a hydration mismatch error.
 const ThemeSwitch = () => {
-  const { resolvedTheme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
 
   return (
-    <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+    <select value={theme} onChange={e => setTheme(e.target.value)}>
       <option value="system">System</option>
       <option value="dark">Dark</option>
       <option value="light">Light</option>
@@ -323,7 +382,7 @@ import { useTheme } from 'next-themes'
 
 const ThemeSwitch = () => {
   const [mounted, setMounted] = useState(false)
-  const { resolvedTheme, setTheme } = useTheme()
+  const { theme, setTheme } = useTheme()
 
   // useEffect only runs on the client, so now we can safely show the UI
   useEffect(() => {
@@ -335,7 +394,7 @@ const ThemeSwitch = () => {
   }
 
   return (
-    <select value={resolvedTheme} onChange={e => setTheme(e.target.value)}>
+    <select value={theme} onChange={e => setTheme(e.target.value)}>
       <option value="system">System</option>
       <option value="dark">Dark</option>
       <option value="light">Light</option>