From b90477675fe8f3c292ac8c3b08b724ae94255942 Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 14 Oct 2023 10:26:06 +0530 Subject: [PATCH 1/2] fix: example persistance do not update cookie on forced pages add gitpod badge --- README.md | 2 +- .../client/theme-switcher/theme-switcher.tsx | 18 ++++++++++++------ packages/shared-ui/src/theme-selector.tsx | 4 ++-- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 9042da52..ff3b0ded 100644 --- a/README.md +++ b/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) diff --git a/packages/react18-themes/src/client/theme-switcher/theme-switcher.tsx b/packages/react18-themes/src/client/theme-switcher/theme-switcher.tsx index 30347b29..8bdd2502 100644 --- a/packages/react18-themes/src/client/theme-switcher/theme-switcher.tsx +++ b/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"}`; } diff --git a/packages/shared-ui/src/theme-selector.tsx b/packages/shared-ui/src/theme-selector.tsx index 705fb99c..8392b077 100644 --- a/packages/shared-ui/src/theme-selector.tsx +++ b/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) => void = e => setTheme(e.target.value); From e22cf2bf8961a43320e3e2b04092d0b29765bffe Mon Sep 17 00:00:00 2001 From: Mayank Kumar Chaudhari Date: Sat, 14 Oct 2023 10:57:46 +0530 Subject: [PATCH 2/2] attempt to reduce cognitive complexity --- .../react18-themes/turbo/generators/config.ts | 50 ++++++++++++------- 1 file changed, 31 insertions(+), 19 deletions(-) diff --git a/packages/react18-themes/turbo/generators/config.ts b/packages/react18-themes/turbo/generators/config.ts index e45e5536..9e404462 100644 --- a/packages/react18-themes/turbo/generators/config.ts +++ b/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: /(? 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: /(? 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("/")}/` }; }