Merge pull request #20 from react18-tools/backward-compatible

Backward-compatible
react18-tools · Dec 16, 2023 · b325f8f · b325f8f
2 parents f602a06 + dee112f
commit b325f8f
Show file tree

Hide file tree

Showing 18 changed files with 80 additions and 21 deletions.
diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md
@@ -1,5 +1,13 @@
 # app-router
 
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [6de3493]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.14
 
 ### Patch Changes

diff --git a/examples/app-router/package.json b/examples/app-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "app-router",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",

diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md
@@ -1,5 +1,13 @@
 # nextjs-pages-router
 
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [6de3493]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.9
 
 ### Patch Changes

diff --git a/examples/pages-router/package.json b/examples/pages-router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pages-router",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",

diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md
@@ -1,5 +1,13 @@
 # simple-multi-theme
 
+## 1.0.10
+
+### Patch Changes
+
+- Updated dependencies [6de3493]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.9
 
 ### Patch Changes

diff --git a/examples/simple-multi-theme/package.json b/examples/simple-multi-theme/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-multi-theme",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",

diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md
@@ -1,5 +1,12 @@
 # tailwind
 
+## 0.1.4
+
+### Patch Changes
+
+- Updated dependencies [6de3493]
+  - [email protected]
+
 ## 0.1.3
 
 ### Patch Changes

diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev",

diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
@@ -1,5 +1,13 @@
 # vite-example
 
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [6de3493]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.14
 
 ### Patch Changes

diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vite-example",
   "private": true,
-  "version": "0.0.14",
+  "version": "0.0.15",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",

diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md
@@ -1,5 +1,11 @@
 # nextjs-themes
 
+## 2.0.1
+
+### Patch Changes
+
+- 6de3493: Add option to skip System colorScheme | Make forcedPage options backward compatible
+
 ## 2.0.0
 
 ### Major Changes

diff --git a/lib/nextjs-themes/package.json b/lib/nextjs-themes/package.json
@@ -2,7 +2,7 @@
   "name": "nextjs-themes",
   "author": "Mayank Kumar Chaudhari <https://mayank-chaudhari.vercel.app>",
   "private": false,
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Unleash the Power of React Server Components! Use multiple themes on your site with confidence, without losing any advantages of React Server Components.",
   "main": "./index.ts",
   "types": "./index.ts",
@@ -32,6 +32,7 @@
     "@vitejs/plugin-react": "^4.2.1",
     "@vitest/coverage-v8": "^1.0.2",
     "esbuild-plugin-ignoretests": "^0.0.7",
+    "esbuild-plugin-react18": "^0.0.6",
     "esbuild-plugin-removetestid": "^0.0.5",
     "esbuild-react18-useclient": "^1.0.7",
     "eslint-config-custom": "workspace:*",

diff --git a/lib/nextjs-themes/src/client/color-switch/color-switch.tsx b/lib/nextjs-themes/src/client/color-switch/color-switch.tsx
@@ -2,8 +2,10 @@ import * as React from "react";
 import { useTheme } from "../../store";
 
 export interface ColorSwitchProps {
-  /** Diameter of the color color switch */
+  /** Diameter of the color switch */
   size?: number;
+  /** Skip system colorScheme while toggling */
+  skipSystem?: boolean;
 }
 
 /**
@@ -14,12 +16,13 @@ export interface ColorSwitchProps {
  * <ColorSwitch />
  * ```
  *
- * custom size
+ * Custom size & skipSystem
+ *
  * ```ts
- * <ColorSwitch size={20} />
+ * <ColorSwitch size={20} skipSystem />
  * ```
  */
-export function ColorSwitch({ size = 25 }: ColorSwitchProps) {
+export function ColorSwitch({ size = 25, skipSystem }: ColorSwitchProps) {
   const [colorSchemePref, setColorSchemePref] = useTheme(state => [state.colorSchemePref, state.setColorSchemePref]);
   const toggleColorScheme = () => {
     switch (colorSchemePref) {
@@ -31,7 +34,7 @@ export function ColorSwitch({ size = 25 }: ColorSwitchProps) {
         setColorSchemePref("light");
         break;
       case "light":
-        setColorSchemePref("system");
+        setColorSchemePref(skipSystem ? "dark" : "system");
     }
   };
   return (

diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.test.tsx
@@ -79,6 +79,11 @@ describe("server-side-target", () => {
     );
     expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("yellow");
   });
+  test("force disable color scheme -- legacy input format", ({ expect }) => {
+    globalThis.path = "/forced-color-scheme";
+    render(<NextJsSSGThemeSwitcher forcedPages={[[/forced-color-scheme$/, { colorScheme: "" }]]} />);
+    expect(screen.getByTestId("server-side-target").getAttribute("data-theme")).toBe("yellow");
+  });
   /** forced page but no cookies */
   test("force disable color scheme - no cookies", ({ expect }) => {
     globalThis.cookies = {};

diff --git a/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx b/lib/nextjs-themes/src/server/nextjs/server-side-wrapper/server-side-wrapper.tsx
@@ -1,11 +1,13 @@
 import * as React from "react";
 import type { HTMLProps, ReactNode } from "react";
 import { cookies, headers } from "next/headers";
-import type { ThemeStoreType } from "../../../store";
+import type { ColorSchemeType, ThemeStoreType } from "../../../store";
 import { resolveTheme } from "../../../utils";
-import { DataProps, ThemeSwitcherProps, UpdateProps } from "../../../client";
+import { DataProps, UpdateProps } from "../../../client";
 
-export type ForcedPage = { pathMatcher: RegExp | string; props: ThemeSwitcherProps };
+export type ForcedPage =
+  | { pathMatcher: RegExp | string; props: { forcedTheme?: string; forcedColorScheme?: ColorSchemeType } }
+  | [pathMatcher: RegExp | string, themes: { theme?: string; colorScheme?: ColorSchemeType }];
 
 export interface NextJsSSRThemeSwitcherProps extends HTMLProps<HTMLElement> {
   children?: ReactNode;
@@ -22,8 +24,12 @@ function sharedServerComponentRenderer(
   const state = cookies().get("nextjs-themes")?.value;
 
   const path = headers().get("referer");
-  const forcedPageProps = forcedPages?.find(forcedPage => path?.match(forcedPage.pathMatcher))?.props;
-
+  const forcedPage = forcedPages?.find(
+    forcedPage => path?.match(Array.isArray(forcedPage) ? forcedPage[0] : forcedPage.pathMatcher),
+  );
+  const forcedPageProps = Array.isArray(forcedPage)
+    ? { forcedTheme: forcedPage[1].theme, forcedColorScheme: forcedPage[1].colorScheme }
+    : forcedPage?.props;
   const themeState = state ? (JSON.parse(state) as ThemeStoreType) : undefined;
   const isSystemDark = cookies().get("data-color-scheme-system")?.value === "dark";
   const resolvedData = resolveTheme(isSystemDark, themeState, forcedPageProps);

diff --git a/lib/nextjs-themes/src/styles.css b/lib/nextjs-themes/src/styles.css
@@ -9,6 +9,7 @@
   --size: 25px;
   height: var(--size);
   width: var(--size);
+  transition: all 0.3s ease-in-out 0s !important;
 }
 
 [data-csp="system"] .nextjs-themes--color-switch::after,

diff --git a/lib/nextjs-themes/tsup.config.ts b/lib/nextjs-themes/tsup.config.ts
@@ -1,7 +1,5 @@
 import { defineConfig } from "tsup";
-import reactUseClientPlugin from "esbuild-react18-useclient";
-import ignoretestsPlugin from "esbuild-plugin-ignoretests";
-import removeTestidPluging from "esbuild-plugin-removetestid";
+import react18Plugin from "esbuild-plugin-react18";
 
 // eslint-disable-next-line import/no-default-export -- export default is required for config files
 export default defineConfig(options => ({
@@ -10,6 +8,6 @@ export default defineConfig(options => ({
   sourcemap: false,
   clean: true,
   minify: !options.watch,
-  esbuildPlugins: [reactUseClientPlugin, ignoretestsPlugin(), removeTestidPluging()],
+  esbuildPlugins: [react18Plugin()],
   legacyOutput: true,
 }));
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@turbo/gen": "^1.11.2",
-    "eslint": "^8.55.0",
+    "eslint": "^8.56.0",
     "eslint-config-custom": "workspace:*",
     "prettier": "^3.1.1",
     "turbo": "^1.11.2"