major: React Router v7 support (#49)

* feat: React Router v7 support

BREAKING CHANGE: React Router migration

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,4 +1,4 @@
-name: '🐛 Bug report'
+name: "🐛 Bug report"
 description: Create a report to help us improve
 body:
   - type: markdown
@@ -55,8 +55,7 @@ body:
     id: expected
     attributes:
       label: Expected behavior
-      description:
-        Provide a clear and concise description of what you expected to happen.
+      description: Provide a clear and concise description of what you expected to happen.
       placeholder: |
         As a user, I expected ___ behavior but i am seeing ___
     validations:

.github/workflows/validate.yml

@@ -2,13 +2,13 @@ name: validate
 on:
   push:
     branches:
-      - '+([0-9])?(.{+([0-9]),x}).x'
-      - 'main'
-      - 'next'
-      - 'next-major'
-      - 'beta'
-      - 'alpha'
-      - '!all-contributors/**'
+      - "+([0-9])?(.{+([0-9]),x}).x"
+      - "main"
+      - "next"
+      - "next-major"
+      - "beta"
+      - "alpha"
+      - "!all-contributors/**"
   pull_request: {}
 jobs:
   main:
@@ -17,30 +17,30 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
+        uses: styfle/cancel-workflow-action@0.12.1
 
       - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "npm"
 
       - name: 📥 Install deps
-        run: yarn --frozen-lockfile
+        run: npm install
 
       - name: ▶️ Run validate script
-        run: yarn validate
+        run: npm run validate
 
       - name: 📥 Install Playwright Browsers
         id: playwright-version
         run: |
-          echo "PLAYWRIGHT_VERSION=$(node -e "console.log(JSON.parse(require('child_process').execSync('yarn info @playwright/test version --json')).data.trim())")" >> $GITHUB_ENV
+          echo "PLAYWRIGHT_VERSION=$(node -e "console.log(JSON.parse(require('child_process').execSync('npm info @playwright/test version --json')).trim())")" >> $GITHUB_ENV
       - name: 🏎️ Cache playwright binaries
-        uses: actions/cache@v3
-        id: playwright-cache
+        uses: actions/cache@v4
+        id: planwright-cache
         with:
           path: |
             ~/.cache/ms-playwright
@@ -54,7 +54,7 @@ jobs:
         run: npx playwright test
 
       - name: 📊 Upload report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: always()
         with:
           name: playwright-report
@@ -64,36 +64,35 @@ jobs:
   release:
     needs: main
     runs-on: ubuntu-latest
-    if:
-      ${{ github.repository == 'abereghici/remix-themes' &&
+    if: ${{ github.repository == 'abereghici/remix-themes' &&
       contains('refs/heads/main,refs/heads/beta,refs/heads/next,refs/heads/alpha',
       github.ref) && github.event_name == 'push' }}
     steps:
       - name: 🛑 Cancel Previous Runs
-        uses: styfle/cancel-workflow-action@0.11.0
+        uses: styfle/cancel-workflow-action@0.12.1
 
       - name: ⬇️ Checkout repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: ⎔ Setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version-file: '.nvmrc'
-          cache: 'yarn'
+          node-version-file: ".nvmrc"
+          cache: "npm"
 
       - name: 📥 Install deps
         run: |
-          cp README.md packages/remix-themes
-          node -e "let pkg=require('./package.json');pkg.workspaces=['packages/remix-themes'];require('fs').writeFileSync('./package.json',JSON.stringify(pkg),'utf8')"
-          yarn --frozen-lockfile
+          # cp README.md packages/remix-themes
+          # node -e "let pkg=require('./package.json');pkg.workspaces=['packages/remix-themes'];require('fs').writeFileSync('./package.json',JSON.stringify(pkg),'utf8')"
+          npm install
 
       - name: 🏗 Run build script
-        run: yarn build
+        run: npm run build
 
       - name: 🚀 Release
-        uses: cycjimmy/semantic-release-action@v3
+        uses: cycjimmy/semantic-release-action@v4
         with:
-          working_directory: ./packages/remix-themes
+          working_directory: .
           semantic_version: 17
           branches: |
             [

.nvmrc

@@ -1 +1 @@
-18
+20

README.md

@@ -1,6 +1,6 @@
 # Remix Themes
 
-### An abstraction for themes in your [Remix](https://remix.run/) app.
+### An abstraction for themes in your React router v7 / [Remix](https://remix.run/) app.
 
 ## Features
 
@@ -15,6 +15,8 @@ Check out the
 [Example](https://github.com/abereghici/remix-themes/tree/main/packages/remix-themes-app)
 to see it in action.
 
+If you are using Remix.run you can use v1.5.1 of this library or lower. V2 onwards is only react-router v7 compatible.
+
 ## Install
 
 ```bash
@@ -30,22 +32,22 @@ $ yarn add remix-themes
 ```ts
 // sessions.server.tsx
 
-import {createThemeSessionResolver} from 'remix-themes'
-import { createCookieSessionStorage } from "@remix-run/node"
+import { createThemeSessionResolver } from "remix-themes";
+import { createCookieSessionStorage } from "react-router";
 
 const sessionStorage = createCookieSessionStorage({
   cookie: {
-    name: '__remix-themes',
+    name: "__remix-themes",
     // domain: 'remix.run',
-    path: '/',
+    path: "/",
     httpOnly: true,
-    sameSite: 'lax',
-    secrets: ['s3cr3t'],
+    sameSite: "lax",
+    secrets: ["s3cr3t"],
     // secure: true,
   },
-})
+});
 
-export const themeSessionResolver = createThemeSessionResolver(sessionStorage)
+export const themeSessionResolver = createThemeSessionResolver(sessionStorage);
 ```
 
 Note: make sure you have `domain` and `secure` parameters set only for your
@@ -100,7 +102,6 @@ function App() {
         <Outlet />
         <ScrollRestoration />
         <Scripts />
-        {process.env.NODE_ENV === 'development' && <LiveReload />}
       </body>
     </html>
   )
@@ -123,10 +124,10 @@ This route is used to store the preferred theme in the session storage when
 the user changes it.
 
 ```ts
-import {createThemeAction} from 'remix-themes'
-import {themeSessionResolver} from './sessions.server'
+import { createThemeAction } from "remix-themes";
+import { themeSessionResolver } from "./sessions.server";
 
-export const action = createThemeAction(themeSessionResolver)
+export const action = createThemeAction(themeSessionResolver);
 ```
 
 ## API

biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "formatter": {
+    "indentStyle": "tab",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "formatWithErrors": true
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "jsxRuntime": "transparent",
+    "formatter": {
+      "trailingCommas": "all",
+      "semicolons": "always"
+    }
+  },
+  "vcs": {
+    "clientKind": "git",
+    "enabled": true,
+    "useIgnoreFile": true
+  }
+}

e2e/e2e.spec.ts

@@ -0,0 +1,46 @@
+import { type Page, expect, test } from "@playwright/test";
+
+test("toggling the theme", async ({ page }) => {
+  await page.goto("/");
+
+  const html = () => page.locator("html");
+
+  const themeAttribute = "data-theme";
+  const initialTheme = await html().getAttribute(themeAttribute);
+  const oppositeTheme = initialTheme === "light" ? "dark" : "light";
+
+  await page.locator("select").selectOption({
+    value: oppositeTheme,
+  });
+
+  await page.waitForTimeout(1000);
+
+  expect(html()).toHaveAttribute(themeAttribute, oppositeTheme);
+
+  await page.reload();
+
+  await expect(page.locator("select")).toBeVisible();
+
+  await expect(html()).toHaveAttribute(themeAttribute, oppositeTheme);
+});
+
+test("sync between tabs when theme change", async ({ context }) => {
+  const pageOne = await context.newPage();
+  const pageTwo = await context.newPage();
+
+  await pageOne.goto("/");
+  await pageTwo.goto("/");
+
+  const html = (page: Page) => page.locator("html");
+
+  const themeAttribute = "data-theme";
+  const initialTheme = await html(pageOne).getAttribute(themeAttribute);
+  const oppositeTheme = initialTheme === "light" ? "dark" : "light";
+
+  await pageOne.locator("select").selectOption({ value: oppositeTheme });
+
+  await pageOne.waitForTimeout(1000);
+
+  await expect(html(pageOne)).toHaveAttribute(themeAttribute, oppositeTheme);
+  await expect(html(pageTwo)).toHaveAttribute(themeAttribute, oppositeTheme);
+});