@zachhandley/ez-i18n 0.1.0 → 0.1.2

package/README.md

@@ -1,13 +1,17 @@
-# ez-i18n
+# @zachhandley/ez-i18n
 
-Cookie-based i18n for Astro + Vue. No URL prefixes, reactive language switching.
+Cookie-based i18n for Astro + Vue + React. No URL prefixes, reactive language switching.
 
 ## Installation
 
 ```bash
-pnpm add ez-i18n nanostores @nanostores/persistent
+pnpm add @zachhandley/ez-i18n nanostores @nanostores/persistent
+
 # If using Vue:
 pnpm add @nanostores/vue
+
+# If using React:
+pnpm add @nanostores/react
 ```
 
 ## Usage
@@ -18,7 +22,7 @@ pnpm add @nanostores/vue
 // astro.config.ts
 import { defineConfig } from 'astro/config';
 import vue from '@astrojs/vue';
-import ezI18n from 'ez-i18n';
+import ezI18n from '@zachhandley/ez-i18n';
 
 export default defineConfig({
   integrations: [
@@ -28,9 +32,9 @@ export default defineConfig({
       defaultLocale: 'en',
       cookieName: 'my-locale', // optional, defaults to 'ez-locale'
       translations: {
-        en: './src/i18n/en.ts',
-        es: './src/i18n/es.ts',
-        fr: './src/i18n/fr.ts',
+        en: './src/i18n/en.json',
+        es: './src/i18n/es.json',
+        fr: './src/i18n/fr.json',
       },
     }),
   ],
@@ -39,21 +43,22 @@ export default defineConfig({
 
 ### Translation Files
 
-```typescript
-// src/i18n/en.ts
-export default {
-  common: {
-    welcome: 'Welcome',
-    save: 'Save',
-    cancel: 'Cancel',
-  },
-  auth: {
-    login: 'Log in',
-    signup: 'Sign up',
+```json
+{
+  "common": {
+    "welcome": "Welcome",
+    "save": "Save",
+    "cancel": "Cancel"
   },
-};
+  "auth": {
+    "login": "Log in",
+    "signup": "Sign up"
+  }
+}
 ```
 
+Create similar files for each locale: `src/i18n/en.json`, `src/i18n/es.json`, etc.
+
 ### Layout Setup
 
 Add the `EzI18nHead` component to your layout's head for automatic hydration:
@@ -61,7 +66,7 @@ Add the `EzI18nHead` component to your layout's head for automatic hydration:
 ```astro
 ---
 // src/layouts/Layout.astro
-import { EzI18nHead } from 'ez-i18n/astro';
+import EzI18nHead from '@zachhandley/ez-i18n/astro';
 const { locale, translations } = Astro.locals;
 ---
 
@@ -93,7 +98,7 @@ const { locale, translations } = Astro.locals;
 
 ```vue
 <script setup lang="ts">
-import { useI18n } from 'ez-i18n/vue';
+import { useI18n } from '@zachhandley/ez-i18n/vue';
 import { translationLoaders } from 'ez-i18n:translations';
 
 const { t, locale, setLocale } = useI18n();
@@ -126,20 +131,46 @@ Register the Vue plugin in your entrypoint:
 ```typescript
 // src/_vueEntrypoint.ts
 import type { App } from 'vue';
-import { ezI18nVue } from 'ez-i18n/vue';
+import { ezI18nVue } from '@zachhandley/ez-i18n/vue';
 
 export default (app: App) => {
   app.use(ezI18nVue);
 };
 ```
 
+### In React Components
+
+```tsx
+import { useI18n } from '@zachhandley/ez-i18n/react';
+import { translationLoaders } from 'ez-i18n:translations';
+
+function MyComponent() {
+  const { t, locale, setLocale } = useI18n();
+
+  async function switchLocale(newLocale: string) {
+    await setLocale(newLocale, {
+      loadTranslations: translationLoaders[newLocale],
+    });
+  }
+
+  return (
+    <div>
+      <h1>{t('common.welcome')}</h1>
+      <p>{t('greeting', { name: 'World' })}</p>
+      <button onClick={() => switchLocale('es')}>Español</button>
+      <button onClick={() => switchLocale('fr')}>Français</button>
+    </div>
+  );
+}
+```
+
 ## Features
 
 - **No URL prefixes** - Locale stored in cookie, not URL path
 - **Reactive** - Language changes update immediately without page reload
 - **SSR compatible** - Proper hydration with server-rendered locale
 - **Vue integration** - Global `$t()`, `$locale`, `$setLocale` in templates
-- **Composable API** - `useI18n()` for Composition API usage
+- **React integration** - `useI18n()` hook for React components
 - **Middleware included** - Auto-detects locale from cookie, query param, or Accept-Language header
 
 ## Locale Detection Priority
@@ -194,9 +225,15 @@ setLocale('es', { loadTranslations: translationLoaders['es'] });
 
 ### `useI18n()`
 
-Vue composable for Composition API usage.
+Hook for Vue (Composition API) and React.
 
 ```typescript
+// Vue
+import { useI18n } from '@zachhandley/ez-i18n/vue';
+
+// React
+import { useI18n } from '@zachhandley/ez-i18n/react';
+
 const { t, locale, setLocale } = useI18n();
 ```
 

package/dist/runtime/react-plugin.d.ts

@@ -0,0 +1,29 @@
+import { setLocale } from './index.js';
+import { T as TranslateFunction } from '../types-DwCG8sp8.js';
+import 'nanostores';
+
+/**
+ * React hook for i18n
+ *
+ * @example
+ * import { useI18n } from '@zachhandley/ez-i18n/react';
+ *
+ * function MyComponent() {
+ *   const { t, locale, setLocale } = useI18n();
+ *
+ *   return (
+ *     <div>
+ *       <h1>{t('common.welcome')}</h1>
+ *       <p>{t('greeting', { name: 'World' })}</p>
+ *       <button onClick={() => setLocale('es')}>Español</button>
+ *     </div>
+ *   );
+ * }
+ */
+declare function useI18n(): {
+    t: TranslateFunction;
+    locale: string;
+    setLocale: typeof setLocale;
+};
+
+export { useI18n };

package/dist/runtime/react-plugin.js

@@ -0,0 +1,85 @@
+// src/runtime/react-plugin.ts
+import { useStore } from "@nanostores/react";
+
+// src/runtime/store.ts
+import { atom, computed } from "nanostores";
+import { persistentAtom } from "@nanostores/persistent";
+var serverLocale = atom(null);
+var localePreference = persistentAtom("ez-locale", "en", {
+  encode: (value) => value,
+  decode: (value) => value
+});
+var effectiveLocale = computed(
+  [serverLocale, localePreference],
+  (server, client) => server ?? client
+);
+var translations = atom({});
+var localeLoading = atom(false);
+async function setLocale(locale, options = {}) {
+  const opts = typeof options === "string" ? { cookieName: options } : options;
+  const { cookieName = "ez-locale", loadTranslations } = opts;
+  localeLoading.set(true);
+  try {
+    if (loadTranslations) {
+      const mod = await loadTranslations();
+      const trans = "default" in mod ? mod.default : mod;
+      translations.set(trans);
+    }
+    localePreference.set(locale);
+    serverLocale.set(locale);
+    if (typeof document !== "undefined") {
+      document.cookie = `${cookieName}=${locale}; path=/; max-age=31536000; samesite=lax`;
+    }
+    if (typeof document !== "undefined") {
+      document.dispatchEvent(
+        new CustomEvent("ez-i18n:locale-changed", {
+          detail: { locale },
+          bubbles: true
+        })
+      );
+    }
+  } finally {
+    localeLoading.set(false);
+  }
+}
+
+// src/runtime/react-plugin.ts
+function getNestedValue(obj, path) {
+  const keys = path.split(".");
+  let value = obj;
+  for (const key of keys) {
+    if (value == null || typeof value !== "object") {
+      return void 0;
+    }
+    value = value[key];
+  }
+  return value;
+}
+function interpolate(str, params) {
+  if (!params) return str;
+  return str.replace(/\{(\w+)\}/g, (match, key) => {
+    return key in params ? String(params[key]) : match;
+  });
+}
+function useI18n() {
+  const locale = useStore(effectiveLocale);
+  const trans = useStore(translations);
+  const t = (key, params) => {
+    const value = getNestedValue(trans, key);
+    if (typeof value !== "string") {
+      if (import.meta.env?.DEV) {
+        console.warn("[ez-i18n] Missing translation:", key);
+      }
+      return key;
+    }
+    return interpolate(value, params);
+  };
+  return {
+    t,
+    locale,
+    setLocale
+  };
+}
+export {
+  useI18n
+};

package/dist/runtime/vue-plugin.d.ts

@@ -9,7 +9,7 @@ import 'nanostores';
  *
  * @example
  * // In _vueEntrypoint.ts or main.ts
- * import { ezI18nVue } from 'ez-i18n/vue';
+ * import { ezI18nVue } from '@zachhandley/ez-i18n/vue';
  *
  * export default (app) => {
  *   app.use(ezI18nVue);
@@ -29,7 +29,7 @@ declare const ezI18nVue: Plugin;
  *
  * @example
  * <script setup>
- * import { useI18n } from 'ez-i18n/vue';
+ * import { useI18n } from '@zachhandley/ez-i18n/vue';
  *
  * const { t, locale, setLocale } = useI18n();
  * const greeting = t('welcome.greeting');

package/package.json

@@ -1,89 +1,105 @@
-{
-  "name": "@zachhandley/ez-i18n",
-  "version": "0.1.0",
-  "publishConfig": {
-    "access": "public"
-  },
-  "description": "Cookie-based i18n for Astro + Vue. No URL prefixes, reactive language switching.",
-  "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
-    },
-    "./vue": {
-      "types": "./dist/runtime/vue-plugin.d.ts",
-      "import": "./dist/runtime/vue-plugin.js"
-    },
-    "./middleware": {
-      "import": "./dist/middleware.js"
-    },
-    "./runtime": {
-      "types": "./dist/runtime/index.d.ts",
-      "import": "./dist/runtime/index.js"
-    },
-    "./astro": {
-      "import": "./src/components/EzI18nHead.astro"
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm build",
-    "release": "pnpm build && npm publish",
-    "release:dry": "pnpm build && npm publish --dry-run"
-  },
-  "keywords": [
-    "astro",
-    "astro-integration",
-    "i18n",
-    "internationalization",
-    "vue",
-    "cookie-based",
-    "no-url-prefix"
-  ],
-  "author": "Zach Handley <zachhandley@gmail.com>",
-  "license": "MIT",
-  "homepage": "https://github.com/zachhandley/ez-i18n#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/zachhandley/ez-i18n.git"
-  },
-  "bugs": {
-    "url": "https://github.com/zachhandley/ez-i18n/issues"
-  },
-  "peerDependencies": {
-    "astro": "^4.0.0 || ^5.0.0",
-    "vue": "^3.4.0",
-    "nanostores": "^0.9.0 || ^0.10.0 || ^0.11.0",
-    "@nanostores/persistent": "^0.10.0",
-    "@nanostores/vue": "^0.10.0"
-  },
-  "peerDependenciesMeta": {
-    "vue": {
-      "optional": true
-    },
-    "@nanostores/vue": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/node": "^22.0.0",
-    "astro": "^5.1.1",
-    "nanostores": "^0.11.3",
-    "@nanostores/persistent": "^0.10.2",
-    "@nanostores/vue": "^0.10.0",
-    "tsup": "^8.3.5",
-    "typescript": "^5.7.2",
-    "vue": "^3.5.13",
-    "vite": "^6.0.3"
-  },
-  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
-}
+{
+  "name": "@zachhandley/ez-i18n",
+  "version": "0.1.2",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Cookie-based i18n for Astro + Vue + React. No URL prefixes, reactive language switching.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./dist/runtime/vue-plugin.d.ts",
+      "import": "./dist/runtime/vue-plugin.js"
+    },
+    "./middleware": {
+      "import": "./dist/middleware.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime/index.d.ts",
+      "import": "./dist/runtime/index.js"
+    },
+    "./astro": {
+      "import": "./src/components/EzI18nHead.astro"
+    },
+    "./react": {
+      "types": "./dist/runtime/react-plugin.d.ts",
+      "import": "./dist/runtime/react-plugin.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm build",
+    "release": "pnpm build && npm publish",
+    "release:dry": "pnpm build && npm publish --dry-run"
+  },
+  "keywords": [
+    "astro",
+    "astro-integration",
+    "i18n",
+    "internationalization",
+    "vue",
+    "react",
+    "cookie-based",
+    "no-url-prefix"
+  ],
+  "author": "Zach Handley <zachhandley@gmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/zachhandley/ez-i18n#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zachhandley/ez-i18n.git"
+  },
+  "bugs": {
+    "url": "https://github.com/zachhandley/ez-i18n/issues"
+  },
+  "peerDependencies": {
+    "@nanostores/persistent": "^0.10.0",
+    "@nanostores/react": "^0.7.0 || ^0.8.0 || ^1.0.0",
+    "@nanostores/vue": "^0.10.0",
+    "astro": "^4.0.0 || ^5.0.0",
+    "nanostores": "^0.9.0 || ^0.10.0 || ^0.11.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "vue": {
+      "optional": true
+    },
+    "react": {
+      "optional": true
+    },
+    "@nanostores/vue": {
+      "optional": true
+    },
+    "@nanostores/react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@nanostores/persistent": "^0.10.2",
+    "@nanostores/react": "^1.0.0",
+    "@nanostores/vue": "^0.10.0",
+    "@types/node": "^22.0.0",
+    "@types/react": "^19.2.7",
+    "astro": "^5.1.1",
+    "nanostores": "^0.11.3",
+    "react": "^19.2.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.3",
+    "vue": "^3.5.13"
+  },
+  "packageManager": "pnpm@10.17.1+sha512.17c560fca4867ae9473a3899ad84a88334914f379be46d455cbf92e5cf4b39d34985d452d2583baf19967fa76cb5c17bc9e245529d0b98745721aa7200ecaf7a"
+}

package/src/components/EzI18nHead.astro

@@ -7,7 +7,7 @@
  *
  * @example
  * ---
- * import { EzI18nHead } from '@zachhandley/ez-i18n/astro';
+ * import EzI18nHead from '@zachhandley/ez-i18n/astro';
  * const { locale, translations } = Astro.locals;
  * ---
  * <html lang={locale}>

package/src/runtime/react-plugin.ts

@@ -0,0 +1,78 @@
+import { useStore } from '@nanostores/react';
+import { effectiveLocale, translations, setLocale } from './store';
+import type { TranslateFunction } from '../types';
+
+/**
+ * Get nested value from object using dot notation
+ */
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  const keys = path.split('.');
+  let value: unknown = obj;
+
+  for (const key of keys) {
+    if (value == null || typeof value !== 'object') {
+      return undefined;
+    }
+    value = (value as Record<string, unknown>)[key];
+  }
+
+  return value;
+}
+
+/**
+ * Interpolate params into string
+ */
+function interpolate(
+  str: string,
+  params?: Record<string, string | number>
+): string {
+  if (!params) return str;
+  return str.replace(/\{(\w+)\}/g, (match, key) => {
+    return key in params ? String(params[key]) : match;
+  });
+}
+
+/**
+ * React hook for i18n
+ *
+ * @example
+ * import { useI18n } from '@zachhandley/ez-i18n/react';
+ *
+ * function MyComponent() {
+ *   const { t, locale, setLocale } = useI18n();
+ *
+ *   return (
+ *     <div>
+ *       <h1>{t('common.welcome')}</h1>
+ *       <p>{t('greeting', { name: 'World' })}</p>
+ *       <button onClick={() => setLocale('es')}>Español</button>
+ *     </div>
+ *   );
+ * }
+ */
+export function useI18n() {
+  const locale = useStore(effectiveLocale);
+  const trans = useStore(translations);
+
+  const t: TranslateFunction = (
+    key: string,
+    params?: Record<string, string | number>
+  ): string => {
+    const value = getNestedValue(trans, key);
+
+    if (typeof value !== 'string') {
+      if (import.meta.env?.DEV) {
+        console.warn('[ez-i18n] Missing translation:', key);
+      }
+      return key;
+    }
+
+    return interpolate(value, params);
+  };
+
+  return {
+    t,
+    locale,
+    setLocale,
+  };
+}

package/src/runtime/vue-plugin.ts

@@ -60,7 +60,7 @@ function createTranslateFunction(
  *
  * @example
  * // In _vueEntrypoint.ts or main.ts
- * import { ezI18nVue } from 'ez-i18n/vue';
+ * import { ezI18nVue } from '@zachhandley/ez-i18n/vue';
  *
  * export default (app) => {
  *   app.use(ezI18nVue);
@@ -105,7 +105,7 @@ export const ezI18nVue: Plugin = {
  *
  * @example
  * <script setup>
- * import { useI18n } from 'ez-i18n/vue';
+ * import { useI18n } from '@zachhandley/ez-i18n/vue';
  *
  * const { t, locale, setLocale } = useI18n();
  * const greeting = t('welcome.greeting');