@uipkge/nuxt 0.1.21 → 0.1.23

package/bin/cli.mjs

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+import { execSync } from 'child_process'
+import fs from 'fs'
+import path from 'path'
+
+const PKG_DIR = path.resolve(import.meta.dirname, '..')
+const TARGET_DIR = process.cwd()
+const distDir = path.join(PKG_DIR, 'dist')
+
+const isInstalled = fs.existsSync(distDir)
+
+function run(cmd, opts = {}) {
+  console.log(`> ${cmd}`)
+  execSync(cmd, { stdio: 'inherit', ...opts })
+}
+
+function exists(file) {
+  return fs.existsSync(path.join(TARGET_DIR, file))
+}
+
+console.log('\n🚀 Setting up @uipkge/nuxt in', TARGET_DIR, '\n')
+
+if (isInstalled) {
+  console.log('📦 @uipkge/nuxt already built, skipping build step')
+} else {
+  console.log('📦 Building @uipkge/nuxt...')
+  run('npm run build', { cwd: PKG_DIR })
+}
+
+// 2. Install @nuxtjs/i18n
+console.log('\n📥 Installing @nuxtjs/i18n...')
+run('npm install @nuxtjs/i18n@latest', { cwd: TARGET_DIR })
+
+// 3. Link local @uipkge/nuxt only if not already installed
+if (!isInstalled) {
+  console.log('\n🔗 Linking @uipkge/nuxt...')
+  run('npm link', { cwd: PKG_DIR })
+  run('npm link @uipkge/nuxt', { cwd: TARGET_DIR })
+}
+
+// 4. Create i18n folder structure
+const i18nDir = path.join(TARGET_DIR, 'app/i18n/locales')
+if (!fs.existsSync(i18nDir)) {
+  console.log('\n📁 Creating i18n folders...')
+  fs.mkdirSync(i18nDir, { recursive: true })
+}
+
+// 5. Create i18n.config.ts
+const i18nConfigPath = path.join(TARGET_DIR, 'app/i18n/i18n.config.ts')
+if (!exists('app/i18n/i18n.config.ts')) {
+  console.log('📝 Creating i18n.config.ts...')
+  fs.writeFileSync(i18nConfigPath, `export default defineI18nConfig(() => ({
+  numberFormats: {
+    en: { currency: { style: 'currency', currency: 'USD' } },
+    es: { currency: { style: 'currency', currency: 'EUR' } },
+    fr: { currency: { style: 'currency', currency: 'EUR' } },
+    ar: { currency: { style: 'currency', currency: 'SAR' } },
+    he: { currency: { style: 'currency', currency: 'ILS' } },
+    de: { currency: { style: 'currency', currency: 'EUR' } },
+  },
+  datetimeFormats: {
+    en: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+    es: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+    fr: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+    ar: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+    he: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+    de: { short: { year: 'numeric', month: 'short', day: 'numeric' } },
+  },
+}))
+`)
+}
+
+// 6. Create locale files
+const locales = {
+  en: { nav_features: 'Features', nav_docs: 'Docs', nav_pricing: 'Pricing', hero_title: 'Translate faster, ship with confidence', hero_subtitle: 'i18now keeps your translations in sync as you code.', footer_tagline: 'Built for developers who ship fast.' },
+  es: { nav_features: 'Características', nav_docs: 'Docs', nav_pricing: 'Precios', hero_title: 'Traduce más rápido, envía con confianza', hero_subtitle: 'i18now mantiene tus traducciones sincronizadas.', footer_tagline: 'Construido para desarrolladores rápidos.' },
+}
+for (const [code, messages] of Object.entries(locales)) {
+  const localePath = path.join(i18nDir, `${code}.json`)
+  if (!fs.existsSync(localePath)) {
+    const data = {
+      nav: { features: messages.nav_features, docs: messages.nav_docs, pricing: messages.nav_pricing },
+      hero: { title: messages.hero_title, subtitle: messages.hero_subtitle },
+      footer: { tagline: messages.footer_tagline }
+    }
+    fs.writeFileSync(localePath, JSON.stringify(data, null, 2))
+  }
+}
+
+// 7. Update nuxt.config.ts
+const nuxtConfigPath = path.join(TARGET_DIR, 'nuxt.config.ts')
+console.log('\n⚙️  Updating nuxt.config.ts...')
+const nuxtConfigContent = `export default defineNuxtConfig({
+  compatibilityDate: '2025-07-15',
+  devtools: { enabled: true },
+  modules: ['@nuxtjs/i18n', '@uipkge/nuxt'],
+  i18n: {
+    defaultLocale: 'en',
+    locales: [
+      { code: 'en', file: 'en.json' },
+      { code: 'es', file: 'es.json' },
+      { code: 'fr', file: 'fr.json' },
+      { code: 'ar', file: 'ar.json' },
+      { code: 'he', file: 'he.json' },
+      { code: 'de', file: 'de.json' },
+    ],
+    langDir: 'app/i18n/locales/',
+    strategy: 'no_prefix',
+    detectBrowserLanguage: { useCookie: true, cookieKey: 'i18n_locale' },
+    vueI18n: './app/i18n/i18n.config.ts',
+  },
+  i18now: {
+    projectId: process.env.I18NOW_PROJECT_ID ?? '',
+    apiKey: process.env.I18NOW_API_KEY ?? '',
+    host: process.env.I18NOW_HOST ?? 'https://i18now.com',
+    cdnUrl: process.env.I18NOW_CDN_URL ?? 'https://cdn.i18now.com',
+    environment: process.env.I18NOW_ENV ?? 'dev',
+    syncIn: ['development'],
+  },
+})
+`
+fs.writeFileSync(nuxtConfigPath, nuxtConfigContent)
+
+// 8. Create test page
+const pagesDir = path.join(TARGET_DIR, 'app/pages')
+if (!fs.existsSync(pagesDir)) {
+  fs.mkdirSync(pagesDir, { recursive: true })
+}
+
+const indexPagePath = path.join(pagesDir, 'index.vue')
+if (!fs.existsSync(indexPagePath)) {
+  console.log('📄 Creating test page...')
+  fs.writeFileSync(indexPagePath, `<script setup>
+const { t, locale, setLocale, te, n, d } = useI18now()
+
+const locales = [
+  { code: 'en', label: 'English', flag: '🇬🇧' },
+  { code: 'es', label: 'Español', flag: '🇪🇸' },
+  { code: 'fr', label: 'Français', flag: '🇫🇷' },
+  { code: 'ar', label: 'العربية', flag: '🇸🇦' },
+  { code: 'he', label: 'עברית', flag: '🇮🇱' },
+  { code: 'de', label: 'Deutsch', flag: '🇩🇪' },
+]
+
+const dir = computed(() => {
+  try {
+    return new Intl.Locale(locale.value).textInfo?.direction ?? 'ltr'
+  } catch {
+    return 'ltr'
+  }
+})
+</script>
+
+<template>
+  <div :dir="dir">
+    <h1>{{ t('hero.title', 'Hello World') }}</h1>
+    <p>{{ t('hero.subtitle', 'Welcome to i18now') }}</p>
+    <select v-model="locale">
+      <option v-for="l in locales" :key="l.code" :value="l.code">
+        {{ l.flag }} {{ l.label }}
+      </option>
+    </select>
+  </div>
+</template>
+`)
+}
+
+console.log('\n✅ Setup complete!')
+console.log('Run: npm run dev\n')

package/dist/module.d.mts

@@ -15,6 +15,18 @@ interface ModuleOptions {
      * Default: 'en'
      */
     locale?: string;
+    /**
+     * Controls which features are active:
+     * - 'full' (default): key sync in dev + CDN translation loading
+     * - 'sync-only': key sync in dev only — you manage translation loading yourself
+     * - 'cdn-only': CDN translation loading only — no key sync
+     */
+    mode?: "full" | "sync-only" | "cdn-only";
+    /**
+     * Shorthand for mode: when false, equivalent to mode: 'sync-only'.
+     * Ignored if `mode` is explicitly set.
+     */
+    fetchTranslations?: boolean;
 }
 declare const _default: nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": ">=3.0.0"
   },
-  "version": "0.1.21",
+  "version": "0.1.23",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -11,25 +11,43 @@ const module$1 = defineNuxtModule({
     cdnUrl: "https://cdn.i18now.com",
     environment: "dev",
     syncIn: ["development"],
-    locale: "en"
+    locale: "en",
+    mode: "full",
+    fetchTranslations: true
   },
   async setup(options, nuxt) {
     const resolver = createResolver(import.meta.url);
+    const mode = options.mode ?? (options.fetchTranslations === false ? "sync-only" : "full");
+    const enableSync = mode === "full" || mode === "sync-only";
+    const enableFetch = mode === "full" || mode === "cdn-only";
     if (!options.projectId) {
-      console.warn("[i18now] projectId is required. The module will not work until it is set.");
+      console.warn(
+        "[i18now] projectId is required. The module will not work until it is set."
+      );
     }
-    if (!options.apiKey) {
-      console.warn("[i18now] apiKey is required. The module will not work until it is set.");
+    if (enableSync && !options.apiKey) {
+      console.warn(
+        "[i18now] apiKey is required for key sync. Sync will not work until it is set."
+      );
     }
-    if (options.cdnUrl && !options.cdnUrl.startsWith("http")) {
-      console.warn("[i18now] cdnUrl should be a valid HTTP(S) URL. Got: " + options.cdnUrl);
+    if (enableFetch && options.cdnUrl && !options.cdnUrl.startsWith("http")) {
+      console.warn(
+        "[i18now] cdnUrl should be a valid HTTP(S) URL. Got: " + options.cdnUrl
+      );
     }
-    const dangerousEnvs = (options.syncIn ?? []).filter(
-      (e) => ["production", "staging", "prod", "stage"].includes(e.toLowerCase())
-    );
-    if (dangerousEnvs.length > 0) {
-      console.error(
-        `[i18now] DANGER: syncIn includes "${dangerousEnvs.join('", "')}" \u2014 key sync is enabled in a production-like environment. This will expose your API key to users and flood i18now with production traffic. syncIn should only contain "development".`
+    if (enableSync) {
+      const dangerousEnvs = (options.syncIn ?? []).filter(
+        (e) => ["production", "staging", "prod", "stage"].includes(e.toLowerCase())
+      );
+      if (dangerousEnvs.length > 0) {
+        console.error(
+          `[i18now] DANGER: syncIn includes "${dangerousEnvs.join('", "')}" \u2014 key sync is enabled in a production-like environment. This will expose your API key to users and flood i18now with production traffic. syncIn should only contain "development".`
+        );
+      }
+    }
+    if (import.meta.dev) {
+      console.log(
+        `[i18now] mode: ${mode} (sync: ${enableSync}, fetch: ${enableFetch})`
       );
     }
     nuxt.options.runtimeConfig.public.i18now = {
@@ -39,16 +57,18 @@ const module$1 = defineNuxtModule({
       locale: options.locale,
       // Dev-only fields — only included when the sync client plugin is active.
       // In production builds these are undefined and the client plugin is not registered.
-      ...nuxt.options.dev ? {
+      ...nuxt.options.dev && enableSync ? {
         apiKey: options.apiKey,
         host: options.host,
         syncIn: options.syncIn
       } : {}
     };
-    addPlugin({
-      src: resolver.resolve("./runtime/plugin"),
-      mode: "server"
-    });
+    if (enableFetch) {
+      addPlugin({
+        src: resolver.resolve("./runtime/plugin"),
+        mode: "server"
+      });
+    }
     addImports([
       {
         name: "useI18now",
@@ -62,18 +82,34 @@ const module$1 = defineNuxtModule({
       }
     ]);
     if (nuxt.options.dev) {
-      addPlugin({
-        src: resolver.resolve("./runtime/plugin.client"),
-        mode: "client"
-      });
-      addPlugin({
-        src: resolver.resolve("./runtime/plugin.suppress-warnings")
-      });
+      if (enableSync && enableFetch) {
+        addPlugin({
+          src: resolver.resolve("./runtime/plugin.client"),
+          mode: "client"
+        });
+      } else if (enableSync) {
+        addPlugin({
+          src: resolver.resolve("./runtime/plugin.sync-only.client"),
+          mode: "client"
+        });
+      } else if (enableFetch) {
+        addPlugin({
+          src: resolver.resolve("./runtime/plugin.cdn.client"),
+          mode: "client"
+        });
+      }
+      if (enableSync) {
+        addPlugin({
+          src: resolver.resolve("./runtime/plugin.suppress-warnings")
+        });
+      }
     } else {
-      addPlugin({
-        src: resolver.resolve("./runtime/plugin.cdn.client"),
-        mode: "client"
-      });
+      if (enableFetch) {
+        addPlugin({
+          src: resolver.resolve("./runtime/plugin.cdn.client"),
+          mode: "client"
+        });
+      }
     }
   }
 });

package/dist/runtime/composables/useI18nowLocales.d.ts

@@ -26,8 +26,8 @@ export interface I18nowLocale {
  * ```
  */
 export declare function useI18nowLocales(): {
-    locales: import("vue").ComputedRef<any>;
-    sourceLocale: import("vue").ComputedRef<any>;
+    locales: any;
+    sourceLocale: any;
     pending: any;
     error: any;
     refresh: any;

package/dist/runtime/plugin.client.js

@@ -1,6 +1,6 @@
 import { defineNuxtPlugin, useRuntimeConfig } from "#app";
 function createI18nowSyncer(options) {
-  const { endpoint, apiKey, debug = false, maxTracked = 2e3, maxRetries = 3 } = options;
+  const { endpoint, extraBody, debug = false, maxTracked = 2e3, maxRetries = 3 } = options;
   const existingKeys = /* @__PURE__ */ new Set();
   const synced = /* @__PURE__ */ new Set();
   const retries = /* @__PURE__ */ new Map();
@@ -14,7 +14,7 @@ function createI18nowSyncer(options) {
     fetch(endpoint, {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ apiKey, keys })
+      body: JSON.stringify({ keys, ...extraBody })
     }).then((res) => {
       if (!res.ok) {
         if (debug) {
@@ -47,6 +47,14 @@ function createI18nowSyncer(options) {
       console.error(`[i18now] Invalid key skipped: "${key}" \u2014 keys must be dotted paths (e.g. "common.save")`);
       return;
     }
+    if (key.length > 100) {
+      console.error(`[i18now] Key "${key.slice(0, 20)}..." exceeds 100 character limit. Skipped.`);
+      return;
+    }
+    if (value.length > 1e3) {
+      console.error(`[i18now] Value for key "${key}" exceeds 1,000 character limit (${value.length} chars). Skipped.`);
+      return;
+    }
     synced.add(key);
     pending.set(key, value);
     if (!flushTimer) flushTimer = setTimeout(flush, 0);
@@ -67,7 +75,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
   const i18nGlobal = nuxtApp.$i18n ?? nuxtApp.vueApp.config.globalProperties.$i18n;
   const syncer = createI18nowSyncer({
     endpoint: `${host}/api/v1/projects/${projectId}/sync`,
-    apiKey,
+    extraBody: { apiKey },
     debug: import.meta.dev
   });
   const locale = i18nGlobal?.locale?.value ?? i18nGlobal?.locale ?? configLocale;

package/dist/runtime/plugin.js

@@ -22,9 +22,7 @@ export default defineNuxtPlugin(async (nuxtApp) => {
         }
         return;
       }
-      const messages = data;
-      if (i18n) i18n.mergeLocaleMessage(locale, messages);
-      nuxtApp.payload.i18nowCdnKeys = Object.keys(messages);
+      if (i18n) i18n.mergeLocaleMessage(locale, data);
     } catch (err) {
       if (import.meta.dev) {
         console.warn(`[i18now] Failed to load locale '${locale}' from CDN:`, err);

package/dist/runtime/plugin.sync-only.client.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Sync-only client plugin — key sync + $t patching, but NO mergeLocaleMessage.
+ *
+ * CDN is fetched only to populate existingKeys (for smart deduplication).
+ * Translations are NOT merged into vue-i18n — the user manages loading themselves.
+ */
+declare const _default: (nuxtApp: unknown) => Promise<{
+    provide: {
+        i18nowSync: {
+            syncKey: (key: string, value: string) => void;
+            existingKeys: Set<string>;
+        };
+    };
+} | undefined>;
+export default _default;

package/dist/runtime/plugin.sync-only.client.js

@@ -0,0 +1,124 @@
+import { defineNuxtPlugin, useRuntimeConfig } from "#app";
+function createI18nowSyncer(options) {
+  const { endpoint, extraBody, debug = false, maxTracked = 2e3, maxRetries = 3 } = options;
+  const existingKeys = /* @__PURE__ */ new Set();
+  const synced = /* @__PURE__ */ new Set();
+  const retries = /* @__PURE__ */ new Map();
+  const pending = /* @__PURE__ */ new Map();
+  let flushTimer = null;
+  function flush() {
+    flushTimer = null;
+    if (pending.size === 0) return;
+    const keys = Array.from(pending.entries()).map(([key, value]) => ({ key, value }));
+    pending.clear();
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ keys, ...extraBody })
+    }).then((res) => {
+      if (!res.ok) {
+        if (debug) {
+          res.json().then((data) => console.warn(`[i18now] Sync failed (${res.status}):`, data?.error ?? data?.statusMessage ?? data)).catch(() => console.warn(`[i18now] Sync failed with status ${res.status}`));
+        }
+        throw Object.assign(new Error(`${res.status}`), { status: res.status });
+      }
+    }).catch((err) => {
+      const status = err.status ?? 0;
+      const retryable = status === 0 || status === 429 || status >= 500;
+      for (const { key } of keys) {
+        if (!retryable) {
+          retries.delete(key);
+          continue;
+        }
+        const attempts = (retries.get(key) ?? 0) + 1;
+        if (attempts < maxRetries) {
+          retries.set(key, attempts);
+          synced.delete(key);
+        } else {
+          retries.delete(key);
+          if (debug) console.warn(`[i18now] Gave up syncing "${key}" after ${maxRetries} attempts.`);
+        }
+      }
+    });
+  }
+  function syncKey(key, value) {
+    if (synced.has(key) || synced.size >= maxTracked) return;
+    if (!value || !/^[\w-]+(?:\.[\w-]+)*$/.test(key)) {
+      console.error(`[i18now] Invalid key skipped: "${key}" \u2014 keys must be dotted paths (e.g. "common.save")`);
+      return;
+    }
+    if (key.length > 100) {
+      console.error(`[i18now] Key "${key.slice(0, 20)}..." exceeds 100 character limit. Skipped.`);
+      return;
+    }
+    if (value.length > 1e3) {
+      console.error(`[i18now] Value for key "${key}" exceeds 1,000 character limit (${value.length} chars). Skipped.`);
+      return;
+    }
+    synced.add(key);
+    pending.set(key, value);
+    if (!flushTimer) flushTimer = setTimeout(flush, 0);
+  }
+  function setExistingKeys(keys) {
+    existingKeys.clear();
+    for (const key of keys) existingKeys.add(key);
+  }
+  return { syncKey, existingKeys, setExistingKeys };
+}
+export default defineNuxtPlugin(async (nuxtApp) => {
+  const { projectId, apiKey, host, cdnUrl, environment, syncIn, locale: configLocale } = useRuntimeConfig().public.i18now;
+  if (!syncIn.includes(process.env.NODE_ENV ?? "production")) return;
+  if (!projectId) {
+    console.warn("[i18now] projectId is not set \u2014 key sync disabled.");
+    return;
+  }
+  const i18nGlobal = nuxtApp.$i18n ?? nuxtApp.vueApp.config.globalProperties.$i18n;
+  const syncer = createI18nowSyncer({
+    endpoint: `${host}/api/v1/projects/${projectId}/sync`,
+    extraBody: { apiKey },
+    debug: import.meta.dev
+  });
+  const locale = i18nGlobal?.locale?.value ?? i18nGlobal?.locale ?? configLocale;
+  async function loadExistingKeys(targetLocale) {
+    try {
+      const url = `${cdnUrl}/${projectId}/publish/${environment}/${targetLocale}.json`;
+      const res = await fetch(url, { signal: AbortSignal.timeout(5e3) });
+      if (res.ok) {
+        const data = await res.json();
+        if (typeof data === "object" && data !== null && !Array.isArray(data)) {
+          syncer.setExistingKeys(Object.keys(data));
+          return;
+        }
+      }
+      syncer.setExistingKeys([]);
+    } catch {
+      syncer.setExistingKeys([]);
+      if (import.meta.dev) {
+        console.warn("[i18now] Could not fetch existing keys from CDN \u2014 all keys will be synced (backend deduplicates).");
+      }
+    }
+  }
+  let currentLocale = locale;
+  await loadExistingKeys(locale);
+  const originalGlobalT = nuxtApp.vueApp.config.globalProperties.$t;
+  if (originalGlobalT) {
+    nuxtApp.vueApp.config.globalProperties.$t = function(key, defaultValue, ...rest) {
+      const result = defaultValue !== void 0 ? originalGlobalT.call(this, key, defaultValue) : originalGlobalT.call(this, key);
+      const defaultStr = typeof defaultValue === "string" ? defaultValue : typeof rest[0] === "string" ? rest[0] : void 0;
+      if (!syncer.existingKeys.has(key) && defaultStr !== void 0) {
+        syncer.syncKey(key, defaultStr);
+      }
+      return result;
+    };
+  }
+  nuxtApp.hook("i18n:beforeLocaleSwitch", async ({ newLocale }) => {
+    if (newLocale === currentLocale) return;
+    currentLocale = newLocale;
+    await loadExistingKeys(newLocale);
+  });
+  return {
+    provide: {
+      i18nowSync: { syncKey: syncer.syncKey, existingKeys: syncer.existingKeys }
+    }
+  };
+});

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@uipkge/nuxt",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "license": "MIT",
   "type": "module",
+  "bin": {
+    "@uipkge/nuxt": "./bin/cli.mjs"
+  },
   "exports": {
     ".": {
       "types": "./dist/module.d.mts",
@@ -11,11 +14,9 @@
   },
   "main": "./dist/module.mjs",
   "types": "./dist/module.d.mts",
-  "engines": {
-    "node": ">=18.0.0"
-  },
   "files": [
-    "dist"
+    "dist",
+    "bin"
   ],
   "dependencies": {
     "@nuxt/kit": "^3.0.0"
@@ -36,8 +37,7 @@
     "@nuxt/module-builder": "^1.0.0",
     "happy-dom": "^17.0.0",
     "nuxt": "^3.0.0",
-    "vitest": "^4.0.0",
-    "@uipkge/core": "0.1.1"
+    "vitest": "^4.0.0"
   },
   "scripts": {
     "build": "nuxt-module-build build",