Merge pull request #10 from mayank1513:touchup

Touchup

README.md

@@ -1,6 +1,6 @@
 # React 18 Themes
 
-[![test](https://github.com/mayank1513/react18-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/react18-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/19169c3e7d35a02a3dec/maintainability)](https://codeclimate.com/github/mayank1513/react18-themes/maintainability) [![codecov](https://codecov.io/gh/mayank1513/react18-themes/graph/badge.svg)](https://codecov.io/gh/mayank1513/react18-themes) [![Version](https://img.shields.io/npm/v/react18-themes.svg?colorB=green)](https://www.npmjs.com/package/react18-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/react18-themes.svg)](https://www.npmjs.com/package/react18-themes) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-themes) [![Get help](codementor.svg)](https://www.codementor.io/@mayank1513?refer=badge)
+[![test](https://github.com/mayank1513/react18-themes/actions/workflows/test.yml/badge.svg)](https://github.com/mayank1513/react18-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/19169c3e7d35a02a3dec/maintainability)](https://codeclimate.com/github/mayank1513/react18-themes/maintainability) [![codecov](https://codecov.io/gh/mayank1513/react18-themes/graph/badge.svg)](https://codecov.io/gh/mayank1513/react18-themes) [![Version](https://img.shields.io/npm/v/react18-themes.svg?colorB=green)](https://www.npmjs.com/package/react18-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/react18-themes.svg)](https://www.npmjs.com/package/react18-themes) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react18-themes) [![Get help](codementor.svg)](https://www.codementor.io/@mayank1513?refer=badge) [![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
 🤟 👉 [Unleash the Power of React Server Components](https://medium.com/javascript-in-plain-english/unleash-the-power-of-react-server-components-eb3fe7201231)
 

packages/react18-themes/src/client/theme-switcher/theme-switcher.tsx

@@ -29,7 +29,10 @@ export function useThemeSwitcher(props: ThemeSwitcherProps) {
 				resolvedForcedTheme !== undefined
 					? resolvedForcedTheme
 					: resolveThemeFromColorScheme({ media, colorScheme, darkTheme, lightTheme }) || theme;
-			updateDOM({ newTheme, colorScheme, darkTheme, lightTheme, media, colorSchemePref });
+
+			const isForced = Boolean(resolvedForcedColorScheme) || resolvedForcedTheme !== undefined;
+			updateDOM({ newTheme, colorScheme, darkTheme, lightTheme, media, isForced });
+
 			restoreTransitions();
 		};
 		media.addEventListener("change", updateTheme);
@@ -62,17 +65,20 @@ function resolveThemeFromColorScheme({ media, colorScheme, darkTheme, lightTheme
 
 interface UpdateDOMProps extends ResolveThemeFromColorSchemeProps {
 	newTheme: string;
-	colorSchemePref: ColorSchemeType;
+	isForced: boolean /** Do not set cookies for forced pages -  */;
 }
 
-function updateDOM({ newTheme, colorScheme, darkTheme, lightTheme, media, colorSchemePref }: UpdateDOMProps) {
+function updateDOM({ newTheme, colorScheme, darkTheme, lightTheme, media, isForced }: UpdateDOMProps) {
 	document.documentElement.setAttribute("data-theme", newTheme);
 	document.documentElement.setAttribute("data-color-scheme", colorScheme);
-	/** Set cookies for server side rendering */
-	document.cookie = `data-theme=${newTheme}`;
+
+	/** update derived values only for non-forced pages */
+	if (!isForced) {
+		document.cookie = `data-theme=${newTheme}`;
+		document.cookie = `data-color-scheme-pref=${colorScheme}`;
+	}
 	document.cookie = `data-theme-dark=${darkTheme}`;
 	document.cookie = `data-theme-light=${lightTheme}`;
-	document.cookie = `data-color-scheme-pref=${colorSchemePref}`;
 	document.cookie = `data-color-scheme=${media.matches ? "dark" : "light"}`;
 }
 

packages/react18-themes/turbo/generators/config.ts

@@ -72,24 +72,36 @@ function getNestedRouteActions(data: InquirerDataType) {
 	/** following is required to make sure appropreate name is used while creating components */
 	data.name = name.slice(lastSlashInd + 1);
 
-	const dir = name.slice(0, lastSlashInd).split(/\/|\\/);
-	const r1 = root.split(/\/|\\/);
-	for (let i = 1; i <= dir.length; i++) {
-		const p = path.resolve(process.cwd(), "..", "..", ...r1, ...dir.slice(0, i), "index.ts");
-		if (!fs.existsSync(p)) {
-			const content = `${isClient ? '"use client";\n' : ""}// ${dir.slice(0, i).join("/")} component exports\n`;
-			nestedRouteActions.push({
-				type: "add",
-				path: `${root + dir.slice(0, i).join("/")}/index.ts`,
-				template: content,
-			});
-			nestedRouteActions.push({
-				type: "append",
-				pattern: /(?<insertion> component exports)/g,
-				path: `${root + (i === 1 ? "" : `${dir.slice(0, i - 1).join("/")}/`)}index.ts`,
-				template: `export * from "./${dir[i - 1]}"`,
-			});
-		}
+	const directories = name.slice(0, lastSlashInd).split(/\/|\\/);
+	const baseDir = path.resolve(process.cwd(), "..", "..", ...root.split(/\/|\\/));
+
+	for (let i = 1; i <= directories.length; i++)
+		updateIndexFilesIfNeeded(nestedRouteActions, root, baseDir, directories.slice(0, i), isClient);
+
+	return { nestedRouteActions, root: `${root + directories.join("/")}/` };
+}
+
+function updateIndexFilesIfNeeded(
+	nestedRouteActions: PlopTypes.ActionType[],
+	root: string,
+	baseDir: string,
+	currentDirSegments: string[],
+	isClient: boolean,
+) {
+	const indexFilePath = path.resolve(baseDir, ...currentDirSegments, "index.ts");
+	if (!fs.existsSync(indexFilePath)) {
+		const content = `${isClient ? '"use client";\n' : ""}// ${currentDirSegments.join("/")} component exports\n`;
+		nestedRouteActions.push({
+			type: "add",
+			path: `${root + currentDirSegments.join("/")}/index.ts`,
+			template: content,
+		});
+		const length = currentDirSegments.length;
+		nestedRouteActions.push({
+			type: "append",
+			pattern: /(?<insertion> component exports)/g,
+			path: `${root + (length === 1 ? "" : `${currentDirSegments.slice(0, length - 1).join("/")}/`)}index.ts`,
+			template: `export * from "./${currentDirSegments[length - 1]}"`,
+		});
 	}
-	return { nestedRouteActions, root: `${root + dir.join("/")}/` };
 }

packages/shared-ui/src/theme-selector.tsx

@@ -25,8 +25,8 @@ export function ThemeSelector({ scope }: ThemeSelectorProps) {
 	}, [scope]);
 
 	useEffect(() => {
-		setTheme(themes[0]);
-	}, [setTheme, themes]);
+		if (!theme) setTheme(themes[0]);
+	}, [setTheme, themes, theme]);
 
 	const handleChange: (e: ChangeEvent<HTMLSelectElement>) => void = e => setTheme(e.target.value);