diff --git a/README.md b/README.md index 278a06e7..68b14a89 100644 --- a/README.md +++ b/README.md @@ -220,7 +220,7 @@ interface UseThemeYield { ### Next.js App Router ```tsx -import { ForceTheme } from "nextjs-themes"; +import { ForceTheme } from "nextjs-themes/force-theme"; function MyPage() { return ( @@ -234,6 +234,8 @@ function MyPage() { export default MyPage; ``` +> If you are using TypeScript and have not set nodeResolution to `Bundler` or `Node16` or `NodeNext`, you need to import from `nextjs-themes/client/force-theme` + ### Next.js Pages Router For the pages router, you have two options. The first option is the same as the app router, and the second option, which is compatible with `next-themes`, involves adding the `theme` property to your page component like this: diff --git a/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx b/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx index 29046679..56332800 100644 --- a/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx +++ b/examples/app-router/src/app/forced-color-scheme/[colorScheme]/page.tsx @@ -1,5 +1,5 @@ import type { ColorSchemeType } from "nextjs-themes"; -import { ForceColorScheme } from "nextjs-themes"; +import { ForceColorScheme } from "nextjs-themes/force-color-scheme"; interface PageWithForcedColorSchemeProps { params: { colorScheme: ColorSchemeType }; diff --git a/examples/app-router/src/app/forced-color-scheme/page.tsx b/examples/app-router/src/app/forced-color-scheme/page.tsx index 1291d4b8..7b3730d5 100644 --- a/examples/app-router/src/app/forced-color-scheme/page.tsx +++ b/examples/app-router/src/app/forced-color-scheme/page.tsx @@ -1,4 +1,4 @@ -import { ForceColorScheme } from "nextjs-themes"; +import { ForceColorScheme } from "nextjs-themes/force-color-scheme"; export default function PageWithForcedColorScheme(): JSX.Element { return ( diff --git a/examples/app-router/src/app/themed-page/[theme]/page.tsx b/examples/app-router/src/app/themed-page/[theme]/page.tsx index b26fd3ed..10e72cb1 100644 --- a/examples/app-router/src/app/themed-page/[theme]/page.tsx +++ b/examples/app-router/src/app/themed-page/[theme]/page.tsx @@ -1,4 +1,4 @@ -import { ForceTheme } from "nextjs-themes"; +import { ForceTheme } from "nextjs-themes/force-theme"; interface PageProps { params: { theme: string }; diff --git a/examples/app-router/src/app/themed-page/page.tsx b/examples/app-router/src/app/themed-page/page.tsx index 1834199f..570512ad 100644 --- a/examples/app-router/src/app/themed-page/page.tsx +++ b/examples/app-router/src/app/themed-page/page.tsx @@ -1,4 +1,4 @@ -import { ForceTheme } from "nextjs-themes"; +import { ForceTheme } from "nextjs-themes/force-theme"; export default function PageWithForcedTheme(): JSX.Element { return ( diff --git a/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx b/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx index 3c7e2dc8..e5365ae9 100644 --- a/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx +++ b/examples/pages-router/src/pages/forced-color-scheme/[colorScheme].tsx @@ -1,5 +1,6 @@ import { useRouter } from "next/router"; -import { ColorSchemeType, ForceColorScheme } from "nextjs-themes"; +import { ColorSchemeType } from "nextjs-themes"; +import { ForceColorScheme } from "nextjs-themes/force-color-scheme"; export default function PageWithForcedColorScheme() { const router = useRouter(); diff --git a/examples/pages-router/src/pages/themed-page/[theme].tsx b/examples/pages-router/src/pages/themed-page/[theme].tsx index 105cff3b..07de2450 100644 --- a/examples/pages-router/src/pages/themed-page/[theme].tsx +++ b/examples/pages-router/src/pages/themed-page/[theme].tsx @@ -1,5 +1,5 @@ import { useRouter } from "next/router"; -import { ForceTheme } from "nextjs-themes"; +import { ForceTheme } from "nextjs-themes/force-theme"; export default function PageWithForcedTheme() { const router = useRouter(); diff --git a/examples/vite/src/app/forced-color-scheme-page.tsx b/examples/vite/src/app/forced-color-scheme-page.tsx index a4f7833e..84ff0e0f 100644 --- a/examples/vite/src/app/forced-color-scheme-page.tsx +++ b/examples/vite/src/app/forced-color-scheme-page.tsx @@ -1,5 +1,6 @@ import React from "react"; -import { ColorSchemeType, ForceColorScheme } from "nextjs-themes"; +import { ColorSchemeType } from "nextjs-themes"; +import { ForceColorScheme } from "nextjs-themes/force-color-scheme"; import { Link, useParams } from "react-router-dom"; import { Header } from "@repo/shared"; diff --git a/examples/vite/src/app/themed-page.tsx b/examples/vite/src/app/themed-page.tsx index 93ca27e9..07aa5fb4 100644 --- a/examples/vite/src/app/themed-page.tsx +++ b/examples/vite/src/app/themed-page.tsx @@ -1,6 +1,6 @@ import React from "react"; import { Link, useParams } from "react-router-dom"; -import { ForceTheme } from "nextjs-themes"; +import { ForceTheme } from "nextjs-themes/force-theme"; import { Header } from "@repo/shared"; export default function ThemedPage() { diff --git a/lib/CHANGELOG.md b/lib/CHANGELOG.md index c6908a47..108f2f39 100644 --- a/lib/CHANGELOG.md +++ b/lib/CHANGELOG.md @@ -1,5 +1,11 @@ # nextjs-themes +## 3.1.7 + +### Patch Changes + +- 99a0702: Update exports. + ## 3.1.6 ### Patch Changes diff --git a/lib/package.json b/lib/package.json index d7ff0a34..2974ba6f 100644 --- a/lib/package.json +++ b/lib/package.json @@ -2,7 +2,7 @@ "name": "nextjs-themes", "author": "Mayank Kumar Chaudhari ", "private": false, - "version": "3.1.6", + "version": "3.1.7", "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.", "license": "MPL-2.0", "main": "./dist/index.js", @@ -46,6 +46,26 @@ "import": "./dist/client/theme-switcher/index.mjs", "types": "./dist/client/theme-switcher/index.d.ts" }, + "./client/force-color-scheme": { + "require": "./dist/client/force-color-scheme/index.js", + "import": "./dist/client/force-color-scheme/index.mjs", + "types": "./dist/client/force-color-scheme/index.d.ts" + }, + "./force-color-scheme": { + "require": "./dist/client/force-color-scheme/index.js", + "import": "./dist/client/force-color-scheme/index.mjs", + "types": "./dist/client/force-color-scheme/index.d.ts" + }, + "./client/force-theme": { + "require": "./dist/client/force-theme/index.js", + "import": "./dist/client/force-theme/index.mjs", + "types": "./dist/client/force-theme/index.d.ts" + }, + "./force-theme": { + "require": "./dist/client/force-theme/index.js", + "import": "./dist/client/force-theme/index.mjs", + "types": "./dist/client/force-theme/index.d.ts" + }, "./server": { "require": "./dist/server/index.js", "import": "./dist/server/index.mjs", @@ -104,7 +124,7 @@ "vitest": "^1.6.0" }, "dependencies": { - "r18gs": "^1.1.3" + "r18gs": "^2.0.0-alpha.0" }, "peerDependencies": { "@types/react": "16.8 - 19", diff --git a/lib/src/client/force-theme/force-theme.test.tsx b/lib/src/client/force-theme/force-theme.test.tsx index feae7ba3..47036f64 100644 --- a/lib/src/client/force-theme/force-theme.test.tsx +++ b/lib/src/client/force-theme/force-theme.test.tsx @@ -1,6 +1,6 @@ import { cleanup, render } from "@testing-library/react"; import { afterEach, describe, test } from "vitest"; -import { DARK, DEFAULT_ID } from "../../constants"; +import { DEFAULT_ID } from "../../constants"; import { ThemeSwitcher } from "../theme-switcher"; import { noFOUCScript } from "../theme-switcher/no-fouc"; import { initialState } from "../../store"; diff --git a/packages/shared/CHANGELOG.md b/packages/shared/CHANGELOG.md index 8704b79c..f3ffbcff 100644 --- a/packages/shared/CHANGELOG.md +++ b/packages/shared/CHANGELOG.md @@ -1,5 +1,12 @@ # @repo/shared +## 0.0.5 + +### Patch Changes + +- Updated dependencies [99a0702] + - nextjs-themes@3.1.7 + ## 0.0.4 ### Patch Changes diff --git a/packages/shared/package.json b/packages/shared/package.json index 5daa05e4..ed024697 100644 --- a/packages/shared/package.json +++ b/packages/shared/package.json @@ -1,6 +1,6 @@ { "name": "@repo/shared", - "version": "0.0.4", + "version": "0.0.5", "private": true, "sideEffects": false, "main": "./dist/index.js", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 80bbe641..5ccc6941 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -184,8 +184,8 @@ importers: lib: dependencies: r18gs: - specifier: ^1.1.3 - version: 1.1.3(@types/react@18.3.3)(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.6))(react@18.3.1) + specifier: ^2.0.0-alpha.0 + version: 2.0.0-alpha.0(@types/react@18.3.3)(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.6))(react@18.3.1) devDependencies: '@repo/eslint-config': specifier: workspace:* @@ -4033,6 +4033,16 @@ packages: next: optional: true + r18gs@2.0.0-alpha.0: + resolution: {integrity: sha512-AwmgZBdctfgITHVcyYLi02zLW40vcBw32eQjHRd7RRBuFDiloDuJTgnF2rzcsj/OPRP8iCosqszQ3FcBjvzQTg==} + peerDependencies: + '@types/react': 16.8 - 19 + next: '*' + react: 16.8 - 19 + peerDependenciesMeta: + next: + optional: true + react-dom@18.3.1: resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: @@ -9848,6 +9858,13 @@ snapshots: optionalDependencies: next: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.6) + r18gs@2.0.0-alpha.0(@types/react@18.3.3)(next@14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.6))(react@18.3.1): + dependencies: + '@types/react': 18.3.3 + react: 18.3.1 + optionalDependencies: + next: 14.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sass@1.77.6) + react-dom@18.3.1(react@18.3.1): dependencies: loose-envify: 1.4.0