fix: resolve yarn install peer dependency warnings

package.json

@@ -27,7 +27,6 @@
     "@eslint/js": "^9.17.0",
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^6.7.0",
-    "@testing-library/react": "^16.3.0",
     "@types/node": "^20.10.6",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
@@ -46,5 +45,6 @@
   "engines": {
     "node": ">=18.0.0",
     "yarn": ">=1.22.0"
-  }
+  },
+  "dependencies": {}
 }

packages/extension/package.json

@@ -62,6 +62,7 @@
   "devDependencies": {
     "@crxjs/vite-plugin": "^2.0.0-beta.30",
     "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.3.0",
     "@types/chrome": "^0.1.36",
     "@types/jest": "^29.5.11",
     "@types/platform": "^1.3.6",
@@ -78,7 +79,6 @@
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-macro": "^0.2.0",
     "webextension-polyfill": "^0.10.0"
   },
   "browserslist": {

packages/extension/src/lib/vite-plugin-import-if.ts

@@ -0,0 +1,51 @@
+import type { Plugin } from "vite"
+
+const VIRTUAL_MODULE_ID = "@import-if"
+const RESOLVED_VIRTUAL_MODULE_ID = `\0${VIRTUAL_MODULE_ID}`
+
+type ImportIfOptions = {
+  mode: string
+}
+
+// Custom vite plugin to provide compile-time conditional import based on build mode.
+// Replaces vite-plugin-macro's importIf functionality.
+export function importIfPlugin({ mode }: ImportIfOptions): Plugin[] {
+  return [
+    {
+      name: "vite-plugin-import-if",
+      enforce: "pre",
+      resolveId(id) {
+        if (id === VIRTUAL_MODULE_ID) {
+          return RESOLVED_VIRTUAL_MODULE_ID
+        }
+      },
+      load(id) {
+        if (id === RESOLVED_VIRTUAL_MODULE_ID) {
+          // Provide a stub; the actual transformation is done in the transform hook
+          return `export function importIf(_targetMode, _path) {}`
+        }
+      },
+      transform(code, id) {
+        if (id.includes("node_modules") || !code.includes("importIf")) {
+          return null
+        }
+
+        let transformed = code
+
+        // Replace importIf("mode", "path") calls with actual import or remove them
+        // Pattern: optional indent, importIf("targetMode", "importPath"), optional semicolon/newline
+        transformed = transformed.replace(
+          /^(?<indent>[ \t]*)importIf\s*\(\s*["'](?<targetMode>[^"']+)["']\s*,\s*["'](?<importPath>[^"']+)["']\s*\)\s*;?\n?/gm,
+          (_, _indent, targetMode, importPath) => {
+            return mode === targetMode ? `import "${importPath}"\n` : ""
+          },
+        )
+
+        if (transformed !== code) {
+          return { code: transformed, map: null }
+        }
+        return null
+      },
+    },
+  ]
+}

packages/extension/vite.config.ts

@@ -9,8 +9,7 @@ import viteTouchCss from "./src/lib/vite-plugin-touch-css"
 import removeCssFromContentScript from "./src/lib/vite-plugin-manifest"
 import refreshLocales from "./src/lib/vite-plugin-refresh-locales"
 import packageJson from "./package.json"
-import { vitePluginMacro } from "vite-plugin-macro"
-import { provideImportIf } from "./macros/importIfProvider"
+import { importIfPlugin } from "./src/lib/vite-plugin-import-if"
 
 const shouldUploadSourcemaps = process.env.UPLOAD_SOURCEMAP_TO_SENTRY === "true"
 
@@ -22,11 +21,7 @@ export default defineConfig(({ mode }) => {
   const plugins = [
     react(),
     crx({ manifest }),
-    vitePluginMacro({
-      typesPath: path.resolve(__dirname, "./src/types/macros.d.ts"),
-    })
-      .use(provideImportIf({ mode }))
-      .toPlugin(),
+    ...importIfPlugin({ mode }),
     viteTouchCss({
       cssFilePaths: [path.resolve(__dirname, "src/components/App.css")],
       watchRegexp: /src/,

packages/hub/package.json

@@ -32,13 +32,13 @@
     "@radix-ui/react-toggle": "^1.1.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "1.0.0",
+    "cmdk": "^1.1.1",
     "dompurify": "^3.2.3",
     "lucide-react": "^0.468.0",
-    "next": "15.0.0",
+    "next": "^15.1.0",
     "quill": "^2.0.3",
-    "react": "19.0.0-rc-65a56d0e-20241020",
-    "react-dom": "19.0.0-rc-65a56d0e-20241020",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.0",
     "react-markdown": "^9.0.3",
     "tailwind-merge": "^2.5.5",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@google-analytics/data": "^5.2.0",
-    "@next/eslint-plugin-next": "15.0.0",
+    "@next/eslint-plugin-next": "^15.1.0",
     "@tailwindcss/typography": "^0.5.16",
     "@testing-library/jest-dom": "^6.7.0",
     "@testing-library/react": "^16.3.0",
@@ -58,17 +58,18 @@
     "@types/quill": "^2.0.14",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@vitejs/plugin-react": "^5.0.0",
+    "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
-    "eslint-config-next": "15.0.0",
+    "eslint-config-next": "^15.1.0",
     "jsdom": "^26.1.0",
     "next-sitemap": "^4.2.3",
     "postcss": "^8",
     "pretty-quick": "^4.2.2",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
-    "typescript-eslint": "^8.18.2"
+    "typescript-eslint": "^8.18.2",
+    "vite": "^6.0.0"
   },
   "prettier": {
     "semi": false,

packages/hub/src/app/[lang]/layout.tsx

@@ -1,6 +1,10 @@
 import { Footer } from "@/components/layout/Footer"
-import { isSupportedLang, DefaultLanguage, Languages } from "@/features/locale"
-import { LangProps } from "@/types"
+import {
+  isSupportedLang,
+  DefaultLanguage,
+  Languages,
+  type LanguageType,
+} from "@/features/locale"
 import { Header } from "@/components/layout/Header"
 import { CookieConsent } from "@/components/CookieConsent"
 
@@ -12,15 +16,15 @@ export function generateStaticParams() {
 
 type Props = {
   children: React.ReactNode
-  params: Promise<LangProps>
+  params: Promise<{ lang: string }>
 }
 
 export default async function LangLayout(props: Props) {
   const { children, params } = props
-  let { lang } = await params
-  if (!isSupportedLang(lang)) {
-    lang = DefaultLanguage
-  }
+  const { lang: langParam } = await params
+  const lang: LanguageType = isSupportedLang(langParam)
+    ? langParam
+    : DefaultLanguage
   return (
     <div className={css.container}>
       <Header lang={lang} />

packages/hub/src/app/[lang]/page.tsx

@@ -1,11 +1,22 @@
 import { CommandList } from "@/components/layout/CommandList"
 import { CommandShare } from "@/components/CommandShare"
-import { LangProps } from "@/types"
+import {
+  isSupportedLang,
+  DefaultLanguage,
+  type LanguageType,
+} from "@/features/locale"
 
 import css from "@/app/page.module.css"
 
-export default async function Page({ params }: { params: Promise<LangProps> }) {
-  const { lang } = await params
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: string }>
+}) {
+  const { lang: langParam } = await params
+  const lang: LanguageType = isSupportedLang(langParam)
+    ? langParam
+    : DefaultLanguage
   return (
     <main className={css.main}>
       <div className={css.menu}>