anylang-dev 0.1.0 → 0.1.1

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>
 );
 ```
@@ -221,11 +217,51 @@ Import the generated runtime file in your app:
 
 ```tsx
 import {
-  languages,
-  setLanguage,
-  useAnyLang,
+  AnyLangProvider,
+  useLanguage,
+  useTr,
   type LanguageCode
 } from "./anylang.generated";
 ```
 
 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.1",
   "description": "Bring-your-own-key website translation JSON generator.",
   "type": "module",
   "files": [

package/src/pipeline.js

@@ -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
+}
 `;
 }