react18-tools · mayank1513 · Feb 25, 2024 · Feb 24, 2024 · Feb 24, 2024 · Feb 24, 2024
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
@@ -13,11 +13,11 @@ jobs:
       packages: write
       contents: write
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org
           node-version: 20

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -20,11 +20,11 @@ jobs:
         working-directory: ./lib/nextjs-themes
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
 
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
           registry-url: https://registry.npmjs.org
           node-version: 20
@@ -45,3 +45,10 @@ jobs:
       - run: node lite.js && pnpm build && pnpm publish-package && node scope.js && pnpm publish-package
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
+
+      - name: Mark scoped package as deprecated
+        run: |
+          npm deprecate @mayank1513/nextjs-themes "Please use https://www.npmjs.com/package/nextjs-themes instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist."
+          npm deprecate @mayank1513/nextjs-themes-lite "Please use https://www.npmjs.com/package/nextjs-themes-lite instead. We initially created scoped packages to have similarities with the GitHub Public Repository (which requires packages to be scoped). We are no longer using GPR and thus deprecating all scoped packages for which corresponding un-scoped packages exist."
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -14,8 +14,8 @@ jobs:
       run:
         working-directory: ./lib/nextjs-themes
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
           node-version: 20
           registry-url: https://registry.npmjs.org
@@ -24,7 +24,7 @@ jobs:
       - name: Test
         run: npm test
       - name: Upload coverage reports to Codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
         env:
           CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
       - uses: paambaati/[email protected]

diff --git a/.prettierignore b/.prettierignore
@@ -1 +1,2 @@
-*lock.*
+*lock.*
+docs
diff --git a/.prettierrc b/.prettierrc
@@ -3,5 +3,6 @@
   "printWidth": 120,
   "tabWidth": 2,
   "arrowParens": "avoid",
-  "jsxBracketSameLine": true
+  "jsxBracketSameLine": true,
+  "bracketSameLine": true
 }
diff --git a/.tkb b/.tkb
@@ -0,0 +1,36 @@
+{
+  "scope": "Workspace",
+  "tasks": {
+    "task-hlCkRvoudoMFloe9AQamt": {
+      "id": "task-hlCkRvoudoMFloe9AQamt",
+      "description": "Add persistence and cookies\n",
+      "columnId": "column-done"
+    },
+    "Ls_zB0mgomuqP75XrrxOe": {
+      "id": "Ls_zB0mgomuqP75XrrxOe",
+      "description": "Add support for CSS modules / scoped styles -- v3.1",
+      "columnId": "column-todo"
+    }
+  },
+  "columns": [
+    {
+      "id": "column-todo",
+      "title": "To do",
+      "tasksIds": [
+        "Ls_zB0mgomuqP75XrrxOe"
+      ]
+    },
+    {
+      "id": "column-doing",
+      "title": "Doing",
+      "tasksIds": []
+    },
+    {
+      "id": "column-done",
+      "title": "Done",
+      "tasksIds": [
+        "task-hlCkRvoudoMFloe9AQamt"
+      ]
+    }
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,4 +1,5 @@
 {
     "editor.formatOnSave": true,
-    "editor.formatOnPaste": true
+    "editor.formatOnPaste": true,
+    "mayank1513.trello-kanban.Workspace.filePath": ".tkb"
 }
diff --git a/README.md b/README.md
@@ -2,7 +2,9 @@
 
 [![test](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml/badge.svg)](https://github.com/react18-tools/nextjs-themes/actions/workflows/test.yml) [![Maintainability](https://api.codeclimate.com/v1/badges/149263e95a1388369bb9/maintainability)](https://codeclimate.com/github/react18-tools/nextjs-themes/maintainability) [![codecov](https://codecov.io/gh/mayank1513/nextjs-themes/branch/main/graph/badge.svg?token=SUTY0GHPHV)](https://codecov.io/gh/mayank1513/nextjs-themes) [![Version](https://img.shields.io/npm/v/nextjs-themes.svg?colorB=green)](https://www.npmjs.com/package/nextjs-themes) [![Downloads](https://img.jsdelivr.com/img.shields.io/npm/dt/nextjs-themes.svg)](https://www.npmjs.com/package/nextjs-themes) [![npm bundle size](https://img.shields.io/bundlephobia/minzip/nextjs-themes)](https://www.npmjs.com/package/nextjs-themes) [![Contact me on Codementor](https://www.codementor.io/m-badges/mayank1513/get-help.svg)](https://www.codementor.io/@mayank1513?refer=badge)
 
-> This is a sister package of [react18-themes](https://github.com/react18-tools/react18-themes/). Initially we targeted only Next.js and thus this package was named `nextjs-themes`. However, we have expanded support for `Vite` and `Remix` as well. And thus published a package with more generic name, `react18-themes`.
+> We are launching version 3.0 with minor API changes and major performance improvement and fixes.
+> We have tried our best to ensure minimum changes to existing APIs.
+> For most users we recommend using [nthul](https://github.com/react18-tools/nextjs-themes-ultralight) package.
 
 > We recommend using [react18-themes](https://github.com/react18-tools/react18-themes/) for Remix. This package is maintained with specific focus on Next.js and Vite. Most of the functionality of this package along with extended support for other build tools is available in [react18-themes](https://github.com/react18-tools/react18-themes/)
 
@@ -221,9 +223,6 @@ In case your components need to know the current theme and be able to change it.
 import { useTheme } from "nextjs-themes";
 
 const ThemeChanger = () => {
-  /* you can also improve performance by using selectors
-   * const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
-   */
   const { theme, setTheme } = useTheme();
 
   return (

diff --git a/examples/app-router/CHANGELOG.md b/examples/app-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # app-router
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.18
 
 ### 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.18",
+  "version": "0.0.19",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3002",
@@ -18,8 +18,8 @@
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.0",
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",

diff --git a/examples/pages-router/CHANGELOG.md b/examples/pages-router/CHANGELOG.md
@@ -1,5 +1,14 @@
 # nextjs-pages-router
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.13
 
 ### 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.13",
+  "version": "1.0.14",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3003",
@@ -16,8 +16,8 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",

diff --git a/examples/simple-multi-theme/CHANGELOG.md b/examples/simple-multi-theme/CHANGELOG.md
@@ -1,5 +1,14 @@
 # simple-multi-theme
 
+## 1.0.14
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - [email protected]
+  - [email protected]
+
 ## 1.0.13
 
 ### Patch Changes

diff --git a/examples/simple-multi-theme/app/ThemeSelector.tsx b/examples/simple-multi-theme/app/ThemeSelector.tsx
@@ -4,7 +4,7 @@ import { darkThemes, lightThemes } from "shared-ui";
 import styles from "shared-ui/src/root-layout.module.css";
 
 export default function ThemeSelector() {
-  const [theme, setTheme] = useTheme(state => [state.theme, state.setTheme]);
+  const { theme, setTheme } = useTheme();
   return (
     <p className={styles.center}>
       <select value={theme} onChange={e => setTheme(e.target.value)}>

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.13",
+  "version": "1.0.14",
   "private": true,
   "scripts": {
     "dev": "next dev --port 3001",
@@ -16,8 +16,8 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "eslint-config-custom": "workspace:*",
     "tsconfig": "workspace:*",

diff --git a/examples/tailwind/CHANGELOG.md b/examples/tailwind/CHANGELOG.md
@@ -1,5 +1,13 @@
 # tailwind
 
+## 0.1.8
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - [email protected]
+
 ## 0.1.7
 
 ### Patch Changes

diff --git a/examples/tailwind/package.json b/examples/tailwind/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tailwind",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -16,11 +16,11 @@
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.19",
-    "@types/react": "^18.2.56",
+    "@types/node": "^20.11.20",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.17",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-config-custom": "workspace:*",
     "postcss": "^8.4.35",
     "tailwindcss": "^3.4.1",

diff --git a/examples/vite/CHANGELOG.md b/examples/vite/CHANGELOG.md
@@ -1,5 +1,14 @@
 # vite-example
 
+## 0.0.19
+
+### Patch Changes
+
+- Updated dependencies [9f30638]
+- Updated dependencies [9f30638]
+  - [email protected]
+  - [email protected]
+
 ## 0.0.18
 
 ### 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.18",
+  "version": "0.0.19",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",
@@ -18,15 +18,15 @@
     "shared-ui": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.2.56",
+    "@types/react": "^18.2.58",
     "@types/react-dom": "^18.2.19",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
+    "@typescript-eslint/eslint-plugin": "^7.0.2",
+    "@typescript-eslint/parser": "^7.0.2",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "typescript": "^5.3.3",
-    "vite": "^5.1.3"
+    "vite": "^5.1.4"
   }
 }
diff --git a/lib/nextjs-themes/CHANGELOG.md b/lib/nextjs-themes/CHANGELOG.md
@@ -1,5 +1,20 @@
 # nextjs-themes
 
+## 3.0.0
+
+### Major Changes
+
+- 9f30638: Replaced Zustand with r18gs. Added more functionality and perfomance improvements. Minor changes to existing APIs.
+
+  better support for tree-shaking
+  reduced package size
+  improved performance
+  Ability to create localized themes
+
+### Patch Changes
+
+- 9f30638: Create cookies only if ServerTarget is used.
+
 ## 2.1.2
 
 ### Patch Changes

diff --git a/lib/nextjs-themes/__mocks__/vitest-env.d.ts b/lib/nextjs-themes/__mocks__/vitest-env.d.ts