solid-translate 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,239 @@
+import { JSX } from 'solid-js';
+import { LanguageModelV1 } from 'ai';
+
+/** Configuration for the solid-translate Vite plugin */
+interface SolidTranslatePluginConfig {
+    /** Source locale code (default: "en") */
+    sourceLocale?: string;
+    /** Target locale codes to translate into */
+    targetLocales: string[];
+    /** Directory containing locale JSON files, relative to project root (default: "./src/locales") */
+    localesDir?: string;
+    /** AI model to use for translations (any Vercel AI SDK LanguageModelV1) */
+    model: LanguageModelV1;
+    /** Custom system prompt for the AI translator */
+    systemPrompt?: string;
+    /** Max keys per API call (default: 50) */
+    batchSize?: number;
+    /**
+     * Automatically extract translatable strings from source files.
+     * Scans for `<T>` components and `msg()` calls, then writes
+     * discovered strings into the source locale JSON file.
+     */
+    autoExtract?: boolean;
+    /**
+     * Glob patterns for files to scan during auto-extraction.
+     * Default: `["src/**\/*.tsx", "src/**\/*.ts", "src/**\/*.jsx"]`
+     */
+    include?: string[];
+}
+/** A flat dictionary mapping keys to translated strings */
+type TranslationDictionary = Record<string, string>;
+/** All translations keyed by locale code */
+type Translations = Record<string, TranslationDictionary>;
+
+interface TranslationContextValue {
+    /** Current locale as a reactive signal */
+    locale: () => string;
+    /** Switch to a different locale */
+    setLocale: (locale: string) => void;
+    /** Translate a key with optional interpolation params */
+    t: (key: string, params?: Record<string, string | number>) => string;
+    /** The source locale code */
+    sourceLocale: string;
+    /** All available locale codes (reactive) */
+    availableLocales: () => string[];
+    /** Raw translations object */
+    translations: Translations;
+}
+
+interface VarProps {
+    /** Optional name for the variable (used as placeholder in templates) */
+    name?: string;
+    children: JSX.Element;
+}
+/**
+ * Marks content as untranslatable. When used inside `<T>`, the content
+ * is preserved as-is while surrounding text is translated.
+ *
+ * ```tsx
+ * <T>Hello <Var>{userName()}</Var>, welcome!</T>
+ * ```
+ */
+declare function Var(props: VarProps): JSX.Element;
+interface NumProps {
+    /** The number to format */
+    children: number;
+    /** Intl.NumberFormat options */
+    options?: Intl.NumberFormatOptions;
+}
+/**
+ * Formats a number according to the current locale using `Intl.NumberFormat`.
+ *
+ * ```tsx
+ * <Num>{1000000}</Num>          // "1,000,000" in en, "1.000.000" in de
+ * <Num options={{ style: "percent" }}>{0.42}</Num>  // "42%"
+ * ```
+ */
+declare function Num(props: NumProps): JSX.Element;
+interface CurrencyProps {
+    /** The numeric value */
+    children: number;
+    /** ISO 4217 currency code (e.g. "USD", "EUR") */
+    currency: string;
+    /** Additional Intl.NumberFormat options */
+    options?: Intl.NumberFormatOptions;
+}
+/**
+ * Formats a number as currency according to the current locale.
+ *
+ * ```tsx
+ * <Currency currency="USD">{29.99}</Currency>    // "$29.99" in en-US
+ * <Currency currency="EUR">{29.99}</Currency>    // "29,99 €" in de
+ * ```
+ */
+declare function Currency(props: CurrencyProps): JSX.Element;
+interface DateTimeProps {
+    /** The date to format (Date object, timestamp, or ISO string) */
+    children: Date | number | string;
+    /** Intl.DateTimeFormat options */
+    options?: Intl.DateTimeFormatOptions;
+}
+/**
+ * Formats a date/time according to the current locale using `Intl.DateTimeFormat`.
+ *
+ * ```tsx
+ * <DateTime>{new Date()}</DateTime>
+ * <DateTime options={{ dateStyle: "long" }}>{new Date()}</DateTime>
+ * ```
+ */
+declare function DateTime(props: DateTimeProps): JSX.Element;
+interface PluralProps {
+    /** The count value to determine which plural form to use */
+    n: number;
+    /** Form for zero items */
+    zero?: JSX.Element;
+    /** Form for exactly one item */
+    one?: JSX.Element;
+    /** Form for exactly two items */
+    two?: JSX.Element;
+    /** Form for "few" items (language-dependent) */
+    few?: JSX.Element;
+    /** Form for "many" items (language-dependent) */
+    many?: JSX.Element;
+    /** Default/fallback form */
+    other: JSX.Element;
+}
+/**
+ * Renders the appropriate plural form based on CLDR plural rules for the current locale.
+ *
+ * ```tsx
+ * <Plural n={count()}
+ *   zero="No items"
+ *   one="1 item"
+ *   other={`${count()} items`}
+ * />
+ * ```
+ */
+declare function Plural(props: PluralProps): JSX.Element;
+interface LocaleSelectorProps {
+    /** Override which locales to show (defaults to all available) */
+    locales?: string[];
+    /** Map locale codes to display names, e.g. { en: "English", es: "Español" } */
+    labels?: Record<string, string>;
+    /** Additional CSS class */
+    class?: string;
+}
+/**
+ * A ready-to-use locale selector dropdown.
+ *
+ * ```tsx
+ * <LocaleSelector labels={{ en: "English", es: "Español", fr: "Français" }} />
+ * ```
+ */
+declare function LocaleSelector(props: LocaleSelectorProps): JSX.Element;
+
+/**
+ * Mark a string for translation extraction.
+ *
+ * At build time, the Vite plugin and CLI scan for `msg()` calls and add
+ * the strings to the source locale file for AI translation.
+ *
+ * At runtime, `msg()` is a no-op — it returns the source text as-is.
+ * Use `t()` from `useTranslation()` for runtime translation.
+ *
+ * ```ts
+ * // Marks "Save changes" for extraction
+ * const label = msg("Save changes");
+ *
+ * // With interpolation template
+ * const greeting = msg("Hello {{name}}", { name: "World" });
+ *
+ * // In a component, translate at runtime:
+ * const { t } = useTranslation();
+ * <button>{t(label)}</button>
+ * ```
+ */
+declare function msg(text: string, _params?: Record<string, string | number>): string;
+
+/**
+ * Detect the user's preferred locale from browser settings.
+ *
+ * Checks `navigator.languages` (and falls back to `navigator.language`)
+ * then matches against the list of available locales. Tries exact match
+ * first, then language-only match (e.g. "en-US" → "en").
+ */
+declare function detectLocale(availableLocales?: string[]): string;
+
+interface TranslationProviderProps {
+    /**
+     * Initial locale. If omitted, auto-detects from the browser's
+     * `navigator.languages` header, falling back to `sourceLocale`.
+     */
+    locale?: string;
+    /** Source locale code (default: "en") */
+    sourceLocale?: string;
+    /** Translation dictionaries keyed by locale */
+    translations: Translations;
+    children: JSX.Element;
+}
+declare function TranslationProvider(props: TranslationProviderProps): JSX.Element;
+/** Access the full translation context. Must be inside a TranslationProvider. */
+declare function useTranslation(): TranslationContextValue;
+/** Access just the current locale and setter. */
+declare function useLocale(): {
+    locale: () => string;
+    setLocale: (locale: string) => void;
+    sourceLocale: string;
+    availableLocales: () => string[];
+};
+interface TProps {
+    /** Explicit translation key. If omitted, children text is used as the key. */
+    id?: string;
+    /** Interpolation parameters */
+    params?: Record<string, string | number>;
+    /**
+     * AI context hint — tells the AI translator about the meaning of this text.
+     * Only used at build time for disambiguation; has no runtime effect.
+     *
+     * ```tsx
+     * <T context="Button to save a document, not save money">Save</T>
+     * ```
+     */
+    context?: string;
+    /** Source text / JSX content */
+    children?: JSX.Element;
+}
+/**
+ * Translatable content component.
+ *
+ * ```tsx
+ * <T>Hello world</T>
+ * <T id="greeting" params={{ name: "Alice" }}>Hello {{name}}</T>
+ * <T context="the physical bank">Bank</T>
+ * <T>Welcome <Var>{userName()}</Var>, you have <Num>{count()}</Num> items</T>
+ * ```
+ */
+declare function T(props: TProps): JSX.Element;
+
+export { Currency, type CurrencyProps, DateTime, type DateTimeProps, LocaleSelector, type LocaleSelectorProps, Num, type NumProps, Plural, type PluralProps, type SolidTranslatePluginConfig, T, type TProps, type TranslationContextValue, type TranslationDictionary, TranslationProvider, type TranslationProviderProps, type Translations, Var, type VarProps, detectLocale, msg, useLocale, useTranslation };

package/dist/index.js

@@ -0,0 +1,238 @@
+// src/index.ts
+import {
+  createComponent,
+  useContext as useContext2,
+  createSignal,
+  createMemo as createMemo2,
+  children as resolveChildren
+} from "solid-js";
+
+// src/context.ts
+import { createContext } from "solid-js";
+var TranslationContext = createContext();
+
+// src/locale-detect.ts
+function detectLocale(availableLocales) {
+  if (typeof navigator === "undefined") return "en";
+  const browserLocales = navigator.languages ? [...navigator.languages] : [navigator.language || "en"];
+  if (!availableLocales || availableLocales.length === 0) {
+    return normalizeLocale(browserLocales[0] || "en");
+  }
+  for (const bl of browserLocales) {
+    const normalized = normalizeLocale(bl);
+    if (availableLocales.includes(normalized)) return normalized;
+  }
+  for (const bl of browserLocales) {
+    const lang = bl.split("-")[0].toLowerCase();
+    if (availableLocales.includes(lang)) return lang;
+  }
+  return availableLocales[0] || "en";
+}
+function normalizeLocale(locale) {
+  return locale.toLowerCase().replace("_", "-");
+}
+
+// src/components.tsx
+import { useContext, For, createMemo } from "solid-js";
+function Var(props) {
+  return (() => props.children);
+}
+Var.__st_var = true;
+function Num(props) {
+  const ctx = useContext(TranslationContext);
+  return createMemo(() => {
+    const locale = ctx?.locale() || "en";
+    return new Intl.NumberFormat(locale, props.options).format(props.children);
+  });
+}
+function Currency(props) {
+  const ctx = useContext(TranslationContext);
+  return createMemo(() => {
+    const locale = ctx?.locale() || "en";
+    return new Intl.NumberFormat(locale, {
+      style: "currency",
+      currency: props.currency,
+      ...props.options
+    }).format(props.children);
+  });
+}
+function DateTime(props) {
+  const ctx = useContext(TranslationContext);
+  return createMemo(() => {
+    const locale = ctx?.locale() || "en";
+    const date = props.children instanceof Date ? props.children : new Date(props.children);
+    return new Intl.DateTimeFormat(locale, props.options).format(date);
+  });
+}
+function Plural(props) {
+  const ctx = useContext(TranslationContext);
+  return createMemo(() => {
+    const locale = ctx?.locale() || "en";
+    const rules = new Intl.PluralRules(locale);
+    const category = rules.select(props.n);
+    const forms = {
+      zero: props.zero,
+      one: props.one,
+      two: props.two,
+      few: props.few,
+      many: props.many,
+      other: props.other
+    };
+    return forms[category] ?? props.other;
+  });
+}
+function LocaleSelector(props) {
+  const ctx = useContext(TranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "<LocaleSelector> must be used within a <TranslationProvider>"
+    );
+  }
+  const locales = createMemo(() => props.locales || ctx.availableLocales());
+  const displayName = (code) => {
+    if (props.labels?.[code]) return props.labels[code];
+    try {
+      const dn = new Intl.DisplayNames([code], { type: "language" });
+      return dn.of(code) || code;
+    } catch {
+      return code;
+    }
+  };
+  return <select
+    class={props.class}
+    value={ctx.locale()}
+    onChange={(e) => ctx.setLocale(e.currentTarget.value)}
+  >
+      <For each={locales()}>
+        {(code) => <option value={code}>{displayName(code)}</option>}
+      </For>
+    </select>;
+}
+
+// src/msg.ts
+function msg(text, _params) {
+  return text;
+}
+
+// src/index.ts
+function TranslationProvider(props) {
+  const sourceLocale = props.sourceLocale || "en";
+  const availableLocales = createMemo2(() => Object.keys(props.translations));
+  const initialLocale = props.locale || detectLocale(availableLocales()) || sourceLocale;
+  const [locale, setLocale] = createSignal(initialLocale);
+  const t = (key, params) => {
+    const cur = locale();
+    let text = key;
+    const dict = props.translations[cur];
+    if (dict && key in dict) {
+      text = dict[key];
+    }
+    if (params) {
+      for (const [k, v] of Object.entries(params)) {
+        text = text.replace(
+          new RegExp(`\\{\\{${k}\\}\\}|\\{${k}\\}`, "g"),
+          String(v)
+        );
+      }
+    }
+    return text;
+  };
+  const value = {
+    locale,
+    setLocale,
+    t,
+    sourceLocale,
+    availableLocales,
+    translations: props.translations
+  };
+  return createComponent(TranslationContext.Provider, {
+    value,
+    get children() {
+      return props.children;
+    }
+  });
+}
+function useTranslation() {
+  const ctx = useContext2(TranslationContext);
+  if (!ctx) {
+    throw new Error(
+      "useTranslation() must be used within a <TranslationProvider>"
+    );
+  }
+  return ctx;
+}
+function useLocale() {
+  const ctx = useTranslation();
+  return {
+    locale: ctx.locale,
+    setLocale: ctx.setLocale,
+    sourceLocale: ctx.sourceLocale,
+    availableLocales: ctx.availableLocales
+  };
+}
+function T(props) {
+  const ctx = useContext2(TranslationContext);
+  const resolved = resolveChildren(() => props.children);
+  return createMemo2(() => {
+    const kids = resolved.toArray();
+    if (!ctx) return kids.length === 1 ? kids[0] : kids;
+    if (kids.length === 1 && typeof kids[0] === "string") {
+      const key = props.id || kids[0];
+      return ctx.t(key, props.params);
+    }
+    if (props.id) {
+      const translated2 = ctx.t(props.id, props.params);
+      if (!/{(\d+)}/.test(translated2)) return translated2;
+      const slots2 = [];
+      for (const kid of kids) {
+        if (typeof kid !== "string" && typeof kid !== "number") {
+          slots2.push(kid);
+        }
+      }
+      return interpolateSlots(translated2, slots2);
+    }
+    const slots = [];
+    let template = "";
+    for (const kid of kids) {
+      if (typeof kid === "string") {
+        template += kid;
+      } else if (typeof kid === "number") {
+        template += String(kid);
+      } else {
+        template += `{${slots.length}}`;
+        slots.push(kid);
+      }
+    }
+    const translated = ctx.t(template, props.params);
+    if (slots.length === 0) return translated;
+    return interpolateSlots(translated, slots);
+  });
+}
+function interpolateSlots(text, slots) {
+  const parts = text.split(/\{(\d+)\}/);
+  const result = [];
+  for (let i = 0; i < parts.length; i++) {
+    if (i % 2 === 0) {
+      if (parts[i]) result.push(parts[i]);
+    } else {
+      const idx = parseInt(parts[i], 10);
+      if (slots[idx] !== void 0) result.push(slots[idx]);
+    }
+  }
+  return result;
+}
+export {
+  Currency,
+  DateTime,
+  LocaleSelector,
+  Num,
+  Plural,
+  T,
+  TranslationProvider,
+  Var,
+  detectLocale,
+  msg,
+  useLocale,
+  useTranslation
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/context.ts","../src/locale-detect.ts","../src/components.tsx","../src/msg.ts"],"sourcesContent":["import {\n  createComponent,\n  useContext,\n  createSignal,\n  createMemo,\n  children as resolveChildren,\n  type JSX,\n} from \"solid-js\";\nimport {\n  TranslationContext,\n  type TranslationContextValue,\n} from \"./context.js\";\nimport { detectLocale } from \"./locale-detect.js\";\nimport type { TranslationDictionary, Translations } from \"./types.js\";\n\n// ---------------------------------------------------------------------------\n// Re-exports\n// ---------------------------------------------------------------------------\n\nexport type { TranslationContextValue } from \"./context.js\";\nexport type { TranslationDictionary, Translations } from \"./types.js\";\nexport type { SolidTranslatePluginConfig } from \"./types.js\";\nexport { Var, Num, Currency, DateTime, Plural, LocaleSelector } from \"./components.js\";\nexport type {\n  VarProps,\n  NumProps,\n  CurrencyProps,\n  DateTimeProps,\n  PluralProps,\n  LocaleSelectorProps,\n} from \"./components.js\";\nexport { msg } from \"./msg.js\";\nexport { detectLocale } from \"./locale-detect.js\";\n\n// ---------------------------------------------------------------------------\n// Provider\n// ---------------------------------------------------------------------------\n\nexport interface TranslationProviderProps {\n  /**\n   * Initial locale. If omitted, auto-detects from the browser's\n   * `navigator.languages` header, falling back to `sourceLocale`.\n   */\n  locale?: string;\n  /** Source locale code (default: \"en\") */\n  sourceLocale?: string;\n  /** Translation dictionaries keyed by locale */\n  translations: Translations;\n  children: JSX.Element;\n}\n\nexport function TranslationProvider(props: TranslationProviderProps) {\n  const sourceLocale = props.sourceLocale || \"en\";\n  const availableLocales = createMemo(() => Object.keys(props.translations));\n\n  // Auto-detect locale from browser if not explicitly provided\n  const initialLocale =\n    props.locale || detectLocale(availableLocales()) || sourceLocale;\n  const [locale, setLocale] = createSignal(initialLocale);\n\n  const t = (\n    key: string,\n    params?: Record<string, string | number>,\n  ): string => {\n    const cur = locale();\n    let text = key;\n\n    // Look up in translation dictionary (works for both source and target locales)\n    const dict = props.translations[cur];\n    if (dict && key in dict) {\n      text = dict[key]!;\n    }\n\n    // Interpolate {{variable}} and {variable} placeholders\n    if (params) {\n      for (const [k, v] of Object.entries(params)) {\n        text = text.replace(\n          new RegExp(`\\\\{\\\\{${k}\\\\}\\\\}|\\\\{${k}\\\\}`, \"g\"),\n          String(v),\n        );\n      }\n    }\n\n    return text;\n  };\n\n  const value: TranslationContextValue = {\n    locale,\n    setLocale,\n    t,\n    sourceLocale,\n    availableLocales,\n    translations: props.translations,\n  };\n\n  return createComponent(TranslationContext.Provider, {\n    value,\n    get children() {\n      return props.children;\n    },\n  });\n}\n\n// ---------------------------------------------------------------------------\n// Hooks\n// ---------------------------------------------------------------------------\n\n/** Access the full translation context. Must be inside a TranslationProvider. */\nexport function useTranslation(): TranslationContextValue {\n  const ctx = useContext(TranslationContext);\n  if (!ctx) {\n    throw new Error(\n      \"useTranslation() must be used within a <TranslationProvider>\",\n    );\n  }\n  return ctx;\n}\n\n/** Access just the current locale and setter. */\nexport function useLocale(): {\n  locale: () => string;\n  setLocale: (locale: string) => void;\n  sourceLocale: string;\n  availableLocales: () => string[];\n} {\n  const ctx = useTranslation();\n  return {\n    locale: ctx.locale,\n    setLocale: ctx.setLocale,\n    sourceLocale: ctx.sourceLocale,\n    availableLocales: ctx.availableLocales,\n  };\n}\n\n// ---------------------------------------------------------------------------\n// <T> Component\n// ---------------------------------------------------------------------------\n\nexport interface TProps {\n  /** Explicit translation key. If omitted, children text is used as the key. */\n  id?: string;\n  /** Interpolation parameters */\n  params?: Record<string, string | number>;\n  /**\n   * AI context hint — tells the AI translator about the meaning of this text.\n   * Only used at build time for disambiguation; has no runtime effect.\n   *\n   * ```tsx\n   * <T context=\"Button to save a document, not save money\">Save</T>\n   * ```\n   */\n  context?: string;\n  /** Source text / JSX content */\n  children?: JSX.Element;\n}\n\n/**\n * Translatable content component.\n *\n * ```tsx\n * <T>Hello world</T>\n * <T id=\"greeting\" params={{ name: \"Alice\" }}>Hello {{name}}</T>\n * <T context=\"the physical bank\">Bank</T>\n * <T>Welcome <Var>{userName()}</Var>, you have <Num>{count()}</Num> items</T>\n * ```\n */\nexport function T(props: TProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n  const resolved = resolveChildren(() => props.children);\n\n  return createMemo(() => {\n    const kids = resolved.toArray();\n\n    // No context — just render children\n    if (!ctx) return kids.length === 1 ? kids[0] : kids;\n\n    // Simple case: single text child\n    if (kids.length === 1 && typeof kids[0] === \"string\") {\n      const key = props.id || (kids[0] as string);\n      return ctx.t(key, props.params);\n    }\n\n    // Explicit id with non-text children — translate via id\n    if (props.id) {\n      const translated = ctx.t(props.id, props.params);\n\n      // If translation is just text (no slot placeholders), return it\n      if (!/{(\\d+)}/.test(translated)) return translated;\n\n      // Collect non-text children (Var, Num, etc.) as ordered slots\n      const slots: JSX.Element[] = [];\n      for (const kid of kids) {\n        if (typeof kid !== \"string\" && typeof kid !== \"number\") {\n          slots.push(kid as JSX.Element);\n        }\n      }\n\n      return interpolateSlots(translated, slots);\n    }\n\n    // Mixed children without explicit id — build a template key\n    const slots: JSX.Element[] = [];\n    let template = \"\";\n    for (const kid of kids) {\n      if (typeof kid === \"string\") {\n        template += kid;\n      } else if (typeof kid === \"number\") {\n        template += String(kid);\n      } else {\n        template += `{${slots.length}}`;\n        slots.push(kid as JSX.Element);\n      }\n    }\n\n    const translated = ctx.t(template, props.params);\n    if (slots.length === 0) return translated;\n    return interpolateSlots(translated, slots);\n  }) as unknown as JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// Helpers\n// ---------------------------------------------------------------------------\n\n/** Split a translated string by `{0}`, `{1}`, etc. and interleave with slots */\nfunction interpolateSlots(\n  text: string,\n  slots: JSX.Element[],\n): (string | JSX.Element)[] {\n  const parts = text.split(/\\{(\\d+)\\}/);\n  const result: (string | JSX.Element)[] = [];\n  for (let i = 0; i < parts.length; i++) {\n    if (i % 2 === 0) {\n      if (parts[i]) result.push(parts[i]!);\n    } else {\n      const idx = parseInt(parts[i]!, 10);\n      if (slots[idx] !== undefined) result.push(slots[idx]!);\n    }\n  }\n  return result;\n}\n","import { createContext } from \"solid-js\";\nimport type { Translations } from \"./types.js\";\n\n// ---------------------------------------------------------------------------\n// Context value type\n// ---------------------------------------------------------------------------\n\nexport interface TranslationContextValue {\n  /** Current locale as a reactive signal */\n  locale: () => string;\n  /** Switch to a different locale */\n  setLocale: (locale: string) => void;\n  /** Translate a key with optional interpolation params */\n  t: (key: string, params?: Record<string, string | number>) => string;\n  /** The source locale code */\n  sourceLocale: string;\n  /** All available locale codes (reactive) */\n  availableLocales: () => string[];\n  /** Raw translations object */\n  translations: Translations;\n}\n\n// ---------------------------------------------------------------------------\n// Shared context instance\n// ---------------------------------------------------------------------------\n\nexport const TranslationContext = createContext<TranslationContextValue>();\n","/**\n * Detect the user's preferred locale from browser settings.\n *\n * Checks `navigator.languages` (and falls back to `navigator.language`)\n * then matches against the list of available locales. Tries exact match\n * first, then language-only match (e.g. \"en-US\" → \"en\").\n */\nexport function detectLocale(availableLocales?: string[]): string {\n  if (typeof navigator === \"undefined\") return \"en\";\n\n  const browserLocales = navigator.languages\n    ? [...navigator.languages]\n    : [navigator.language || \"en\"];\n\n  if (!availableLocales || availableLocales.length === 0) {\n    return normalizeLocale(browserLocales[0] || \"en\");\n  }\n\n  // Exact match\n  for (const bl of browserLocales) {\n    const normalized = normalizeLocale(bl);\n    if (availableLocales.includes(normalized)) return normalized;\n  }\n\n  // Language-only match (e.g. \"en-US\" → \"en\")\n  for (const bl of browserLocales) {\n    const lang = bl.split(\"-\")[0]!.toLowerCase();\n    if (availableLocales.includes(lang)) return lang;\n  }\n\n  return availableLocales[0] || \"en\";\n}\n\nfunction normalizeLocale(locale: string): string {\n  return locale.toLowerCase().replace(\"_\", \"-\");\n}\n","import { useContext, type JSX, For, createMemo } from \"solid-js\";\nimport { TranslationContext } from \"./context.js\";\n\n// ---------------------------------------------------------------------------\n// <Var> — protect dynamic content from translation\n// ---------------------------------------------------------------------------\n\nexport interface VarProps {\n  /** Optional name for the variable (used as placeholder in templates) */\n  name?: string;\n  children: JSX.Element;\n}\n\n/**\n * Marks content as untranslatable. When used inside `<T>`, the content\n * is preserved as-is while surrounding text is translated.\n *\n * ```tsx\n * <T>Hello <Var>{userName()}</Var>, welcome!</T>\n * ```\n */\nexport function Var(props: VarProps): JSX.Element {\n  return (() => props.children) as unknown as JSX.Element;\n}\n\n// Mark Var for identification by T component\n(Var as any).__st_var = true;\n\n// ---------------------------------------------------------------------------\n// <Num> — locale-aware number formatting\n// ---------------------------------------------------------------------------\n\nexport interface NumProps {\n  /** The number to format */\n  children: number;\n  /** Intl.NumberFormat options */\n  options?: Intl.NumberFormatOptions;\n}\n\n/**\n * Formats a number according to the current locale using `Intl.NumberFormat`.\n *\n * ```tsx\n * <Num>{1000000}</Num>          // \"1,000,000\" in en, \"1.000.000\" in de\n * <Num options={{ style: \"percent\" }}>{0.42}</Num>  // \"42%\"\n * ```\n */\nexport function Num(props: NumProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n\n  return createMemo(() => {\n    const locale = ctx?.locale() || \"en\";\n    return new Intl.NumberFormat(locale, props.options).format(props.children);\n  }) as unknown as JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// <Currency> — locale-aware currency formatting\n// ---------------------------------------------------------------------------\n\nexport interface CurrencyProps {\n  /** The numeric value */\n  children: number;\n  /** ISO 4217 currency code (e.g. \"USD\", \"EUR\") */\n  currency: string;\n  /** Additional Intl.NumberFormat options */\n  options?: Intl.NumberFormatOptions;\n}\n\n/**\n * Formats a number as currency according to the current locale.\n *\n * ```tsx\n * <Currency currency=\"USD\">{29.99}</Currency>    // \"$29.99\" in en-US\n * <Currency currency=\"EUR\">{29.99}</Currency>    // \"29,99 €\" in de\n * ```\n */\nexport function Currency(props: CurrencyProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n\n  return createMemo(() => {\n    const locale = ctx?.locale() || \"en\";\n    return new Intl.NumberFormat(locale, {\n      style: \"currency\",\n      currency: props.currency,\n      ...props.options,\n    }).format(props.children);\n  }) as unknown as JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// <DateTime> — locale-aware date/time formatting\n// ---------------------------------------------------------------------------\n\nexport interface DateTimeProps {\n  /** The date to format (Date object, timestamp, or ISO string) */\n  children: Date | number | string;\n  /** Intl.DateTimeFormat options */\n  options?: Intl.DateTimeFormatOptions;\n}\n\n/**\n * Formats a date/time according to the current locale using `Intl.DateTimeFormat`.\n *\n * ```tsx\n * <DateTime>{new Date()}</DateTime>\n * <DateTime options={{ dateStyle: \"long\" }}>{new Date()}</DateTime>\n * ```\n */\nexport function DateTime(props: DateTimeProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n\n  return createMemo(() => {\n    const locale = ctx?.locale() || \"en\";\n    const date =\n      props.children instanceof Date\n        ? props.children\n        : new Date(props.children);\n    return new Intl.DateTimeFormat(locale, props.options).format(date);\n  }) as unknown as JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// <Plural> — CLDR plural rules\n// ---------------------------------------------------------------------------\n\nexport interface PluralProps {\n  /** The count value to determine which plural form to use */\n  n: number;\n  /** Form for zero items */\n  zero?: JSX.Element;\n  /** Form for exactly one item */\n  one?: JSX.Element;\n  /** Form for exactly two items */\n  two?: JSX.Element;\n  /** Form for \"few\" items (language-dependent) */\n  few?: JSX.Element;\n  /** Form for \"many\" items (language-dependent) */\n  many?: JSX.Element;\n  /** Default/fallback form */\n  other: JSX.Element;\n}\n\n/**\n * Renders the appropriate plural form based on CLDR plural rules for the current locale.\n *\n * ```tsx\n * <Plural n={count()}\n *   zero=\"No items\"\n *   one=\"1 item\"\n *   other={`${count()} items`}\n * />\n * ```\n */\nexport function Plural(props: PluralProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n\n  return createMemo(() => {\n    const locale = ctx?.locale() || \"en\";\n    const rules = new Intl.PluralRules(locale);\n    const category = rules.select(props.n);\n\n    const forms: Record<string, JSX.Element | undefined> = {\n      zero: props.zero,\n      one: props.one,\n      two: props.two,\n      few: props.few,\n      many: props.many,\n      other: props.other,\n    };\n\n    return forms[category] ?? props.other;\n  }) as unknown as JSX.Element;\n}\n\n// ---------------------------------------------------------------------------\n// <LocaleSelector> — drop-in locale picker\n// ---------------------------------------------------------------------------\n\nexport interface LocaleSelectorProps {\n  /** Override which locales to show (defaults to all available) */\n  locales?: string[];\n  /** Map locale codes to display names, e.g. { en: \"English\", es: \"Español\" } */\n  labels?: Record<string, string>;\n  /** Additional CSS class */\n  class?: string;\n}\n\n/**\n * A ready-to-use locale selector dropdown.\n *\n * ```tsx\n * <LocaleSelector labels={{ en: \"English\", es: \"Español\", fr: \"Français\" }} />\n * ```\n */\nexport function LocaleSelector(props: LocaleSelectorProps): JSX.Element {\n  const ctx = useContext(TranslationContext);\n  if (!ctx) {\n    throw new Error(\n      \"<LocaleSelector> must be used within a <TranslationProvider>\",\n    );\n  }\n\n  const locales = createMemo(() => props.locales || ctx.availableLocales());\n\n  const displayName = (code: string): string => {\n    if (props.labels?.[code]) return props.labels[code]!;\n    try {\n      const dn = new Intl.DisplayNames([code], { type: \"language\" });\n      return dn.of(code) || code;\n    } catch {\n      return code;\n    }\n  };\n\n  return (\n    <select\n      class={props.class}\n      value={ctx.locale()}\n      onChange={(e) => ctx.setLocale(e.currentTarget.value)}\n    >\n      <For each={locales()}>\n        {(code) => <option value={code}>{displayName(code)}</option>}\n      </For>\n    </select>\n  ) as JSX.Element;\n}\n","/**\n * Mark a string for translation extraction.\n *\n * At build time, the Vite plugin and CLI scan for `msg()` calls and add\n * the strings to the source locale file for AI translation.\n *\n * At runtime, `msg()` is a no-op — it returns the source text as-is.\n * Use `t()` from `useTranslation()` for runtime translation.\n *\n * ```ts\n * // Marks \"Save changes\" for extraction\n * const label = msg(\"Save changes\");\n *\n * // With interpolation template\n * const greeting = msg(\"Hello {{name}}\", { name: \"World\" });\n *\n * // In a component, translate at runtime:\n * const { t } = useTranslation();\n * <button>{t(label)}</button>\n * ```\n */\nexport function msg(\n  text: string,\n  _params?: Record<string, string | number>,\n): string {\n  return text;\n}\n"],"mappings":"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","names":["useContext","createMemo","createMemo","useContext","translated","slots"]}

package/dist/vite.d.ts

@@ -0,0 +1,42 @@
+import { Plugin } from 'vite';
+import { LanguageModelV1 } from 'ai';
+
+/** Configuration for the solid-translate Vite plugin */
+interface SolidTranslatePluginConfig {
+    /** Source locale code (default: "en") */
+    sourceLocale?: string;
+    /** Target locale codes to translate into */
+    targetLocales: string[];
+    /** Directory containing locale JSON files, relative to project root (default: "./src/locales") */
+    localesDir?: string;
+    /** AI model to use for translations (any Vercel AI SDK LanguageModelV1) */
+    model: LanguageModelV1;
+    /** Custom system prompt for the AI translator */
+    systemPrompt?: string;
+    /** Max keys per API call (default: 50) */
+    batchSize?: number;
+    /**
+     * Automatically extract translatable strings from source files.
+     * Scans for `<T>` components and `msg()` calls, then writes
+     * discovered strings into the source locale JSON file.
+     */
+    autoExtract?: boolean;
+    /**
+     * Glob patterns for files to scan during auto-extraction.
+     * Default: `["src/**\/*.tsx", "src/**\/*.ts", "src/**\/*.jsx"]`
+     */
+    include?: string[];
+}
+
+/**
+ * Vite plugin for solid-translate.
+ *
+ * Handles:
+ * 1. Optional extraction of <T>, msg() strings from source files
+ * 2. AI translation of source locale to target locales (with context support)
+ * 3. Lock file management for efficient re-translation
+ * 4. Virtual module serving translations at runtime
+ */
+declare function solidTranslate(config: SolidTranslatePluginConfig): Plugin;
+
+export { type SolidTranslatePluginConfig, solidTranslate as default, solidTranslate };