anylang-dev 0.1.0 → 0.1.2

package/README.md

@@ -11,7 +11,7 @@ It works in JSX and TSX when the text is wrapped in a JavaScript expression:
 
 ```tsx
 export function Hero() {
-  const $tr = useAnyLang(language);
+  const $tr = useTr();
 
   return (
     <section>
@@ -32,22 +32,18 @@ By default, `anylang` scans `.js`, `.jsx`, `.ts`, `.tsx`, `.vue`, and `.html` fi
 `anylang` does not require a built-in selector. Build any selector UI you want and pass the selected locale to `setLanguage`.
 
 ```tsx
-const [language, setSelectedLanguage] = useState<LanguageCode>("en");
-const $tr = useAnyLang(language);
-
-function handleLanguageChange(nextLanguage: LanguageCode) {
-  setLanguage(nextLanguage);
-  setSelectedLanguage(nextLanguage);
-}
+const { language, languages, setLanguage } = useLanguage();
 
 return (
   <select
     value={language}
-    onChange={(event) => handleLanguageChange(event.target.value as LanguageCode)}
+    onChange={(event) => setLanguage(event.target.value as LanguageCode)}
   >
-    <option value="en">English</option>
-    <option value="hi">हिन्दी</option>
-    <option value="ja">日本語</option>
+    {languages.map((language) => (
+      <option key={language.code} value={language.code}>
+        {language.nativeLabel}
+      </option>
+    ))}
   </select>
 );
 ```
@@ -90,7 +86,7 @@ anylang translate
   "exclude": ["node_modules", ".git", "dist", "build", ".next"],
   "outDir": "locales",
   "runtime": {
-    "output": "src/anylang.generated.ts",
+    "output": "anylang.ts",
     "importFrom": "anylang-dev/runtime"
   },
   "functionName": "$tr",
@@ -155,8 +151,7 @@ locales/
   en.json
   hi.json
   anylang.lock.json
-src/
-  anylang.generated.ts
+anylang.ts
 ```
 
 The lock file stores SHA-256 fingerprints so unchanged strings are skipped on later runs.
@@ -176,7 +171,7 @@ anylang scan
 ```
 
 This writes keyed source entries to `locales/en.json` and creates placeholder entries in each target locale.
-It also generates `src/anylang.generated.ts`, which imports all locale JSON files and exports runtime helpers.
+It also generates `anylang.ts`, which imports all locale JSON files and exports runtime helpers.
 
 3. Translate with Gemini:
 
@@ -221,11 +216,51 @@ Import the generated runtime file in your app:
 
 ```tsx
 import {
-  languages,
-  setLanguage,
-  useAnyLang,
+  AnyLangProvider,
+  useLanguage,
+  useTr,
   type LanguageCode
-} from "./anylang.generated";
+} from "./anylang";
 ```
 
 You do not manually import `en.json`, `hi.json`, `ja.json`, etc. The generated file does that for you based on `sourceLocale` and `targetLocales`.
+
+Wrap your app once:
+
+```tsx
+root.render(
+  <AnyLangProvider>
+    <App />
+  </AnyLangProvider>
+);
+```
+
+Then use translations in any component:
+
+```tsx
+function Hero() {
+  const $tr = useTr();
+  return <h1>{$tr("hero.title", "Translate your website with anylang")}</h1>;
+}
+```
+
+And build any selector with `useLanguage`:
+
+```tsx
+function LanguageSelector() {
+  const { language, languages, setLanguage } = useLanguage();
+
+  return (
+    <select
+      value={language}
+      onChange={(event) => setLanguage(event.target.value as LanguageCode)}
+    >
+      {languages.map((language) => (
+        <option key={language.code} value={language.code}>
+          {language.nativeLabel}
+        </option>
+      ))}
+    </select>
+  );
+}
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anylang-dev",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Bring-your-own-key website translation JSON generator.",
   "type": "module",
   "files": [

package/src/config.js

@@ -8,7 +8,7 @@ export const DEFAULT_CONFIG = {
   exclude: ["node_modules", ".git", "dist", "build", ".next"],
   outDir: "locales",
   runtime: {
-    output: "src/anylang.generated.ts",
+    output: "anylang.ts",
     importFrom: "anylang-dev/runtime"
   },
   functionName: "$tr",

package/src/pipeline.js

@@ -131,7 +131,7 @@ function normalizeTargetEntry(entry) {
 async function writeGeneratedRuntime(config) {
   if (config.runtime === false) return;
 
-  const output = path.resolve(config.runtime?.output || "src/anylang.generated.ts");
+  const output = path.resolve(config.runtime?.output || "anylang.ts");
   const outDir = path.resolve(config.outDir);
   const locales = [config.sourceLocale, ...config.targetLocales.filter((locale) => locale !== config.sourceLocale)];
   const importFrom = config.runtime?.importFrom || "anylang-dev/runtime";
@@ -159,7 +159,7 @@ function generatedRuntimeSource({ importFrom, localeImports, sourceLocale }) {
     .join(",\n");
 
   return `/* This file is generated by anylang. Do not edit by hand. */
-import { useCallback } from 'react'
+import { createContext, createElement, useCallback, useContext, useMemo, useState, type ReactNode } from 'react'
 import { $tr as translate, configureAnyLang, setAnyLangLocale } from '${importFrom}'
 ${imports}
 
@@ -185,6 +185,54 @@ export function useAnyLang(locale: LanguageCode) {
 export function setLanguage(locale: LanguageCode) {
   setAnyLangLocale(locale)
 }
+
+type AnyLangContextValue = {
+  language: LanguageCode
+  languages: typeof languages
+  setLanguage: (locale: LanguageCode) => void
+  $tr: (key: string, source?: string) => string
+}
+
+const AnyLangContext = createContext<AnyLangContextValue | null>(null)
+
+export function AnyLangProvider({
+  children,
+  defaultLanguage = '${sourceLocale}' as LanguageCode,
+}: {
+  children: ReactNode
+  defaultLanguage?: LanguageCode
+}) {
+  const [language, setSelectedLanguage] = useState<LanguageCode>(defaultLanguage)
+  const $tr = useAnyLang(language)
+
+  const value = useMemo(() => ({
+    language,
+    languages,
+    setLanguage(nextLanguage: LanguageCode) {
+      setAnyLangLocale(nextLanguage)
+      setSelectedLanguage(nextLanguage)
+    },
+    $tr,
+  }), [language, $tr])
+
+  return createElement(AnyLangContext.Provider, { value }, children)
+}
+
+export function useLanguage() {
+  const context = useContext(AnyLangContext)
+  if (!context) throw new Error('useLanguage must be used inside AnyLangProvider')
+  return {
+    language: context.language,
+    languages: context.languages,
+    setLanguage: context.setLanguage,
+  }
+}
+
+export function useTr() {
+  const context = useContext(AnyLangContext)
+  if (!context) throw new Error('useTr must be used inside AnyLangProvider')
+  return context.$tr
+}
 `;
 }