@translifycc/angular 0.1.3 → 0.1.4

package/src/index.d.ts

@@ -1,9 +0,0 @@
-export { TranslifySelectorComponent } from './translify-selector.component';
-export { TranslifyModule } from './translify.module';
-
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  isRTL: boolean;
-}

package/src/index.ts

@@ -1,3 +0,0 @@
-export { TranslifySelectorComponent } from './translify-selector.component';
-export { TranslifyModule } from './translify.module';
-export type { Language } from './translate';

package/src/translate.ts

@@ -1,112 +0,0 @@
-export interface Language {
-  code: string;
-  name: string;
-  nativeName: string;
-  isRTL: boolean;
-}
-
-const SKIP_TAGS = new Set([
-  'SCRIPT', 'STYLE', 'NOSCRIPT', 'IFRAME',
-  'CODE', 'PRE', 'SVG', 'MATH', 'INPUT', 'TEXTAREA',
-]);
-
-export function getSavedLang(): string | null {
-  return localStorage.getItem('translify_lang');
-}
-
-export function saveLang(lang: string): void {
-  localStorage.setItem('translify_lang', lang);
-}
-
-export function clearSavedLang(): void {
-  localStorage.removeItem('translify_lang');
-}
-
-export function loadTranslationCache(lang: string): Map<string, string> {
-  try {
-    const stored = localStorage.getItem(`translify_cache_${lang}`);
-    return stored ? new Map(Object.entries(JSON.parse(stored))) : new Map();
-  } catch {
-    return new Map();
-  }
-}
-
-export function saveTranslationCache(lang: string, cache: Map<string, string>): void {
-  try {
-    const obj: Record<string, string> = {};
-    cache.forEach((v, k) => { obj[k] = v; });
-    localStorage.setItem(`translify_cache_${lang}`, JSON.stringify(obj));
-  } catch {}
-}
-
-export function getTextNodes(root: Node): Text[] {
-  const nodes: Text[] = [];
-  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
-    acceptNode(node: Node) {
-      const text = (node as Text);
-      if (!text.textContent?.trim()) return NodeFilter.FILTER_REJECT;
-      if (SKIP_TAGS.has((text.parentElement?.tagName ?? ''))) return NodeFilter.FILTER_REJECT;
-      if ((text.textContent?.trim().length ?? 0) > 5000) return NodeFilter.FILTER_REJECT;
-      if (text.parentElement?.closest('[translate="no"]')) return NodeFilter.FILTER_REJECT;
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
-  let n: Node | null;
-  while ((n = walker.nextNode())) nodes.push(n as Text);
-  return nodes;
-}
-
-export function collectNewTextNodes(node: Node, originalTexts: Map<Node, string>): Text[] {
-  const nodes: Text[] = [];
-  if (node.nodeType === Node.TEXT_NODE) {
-    const t = node as Text;
-    if (!originalTexts.has(t) && t.textContent?.trim()) nodes.push(t);
-  } else if (node.nodeType === Node.ELEMENT_NODE) {
-    const walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT);
-    let n: Node | null;
-    while ((n = walker.nextNode())) {
-      const t = n as Text;
-      if (
-        !originalTexts.has(t) &&
-        t.textContent?.trim() &&
-        !SKIP_TAGS.has(t.parentElement?.tagName ?? '') &&
-        !t.parentElement?.closest('[translate="no"]')
-      ) {
-        nodes.push(t);
-      }
-    }
-  }
-  return nodes;
-}
-
-export async function fetchLanguages(apiBase: string): Promise<Language[]> {
-  const res = await fetch(`${apiBase}/translate/languages`);
-  const json = await res.json();
-  return json.data.languages;
-}
-
-export async function callTranslateApi(
-  apiBase: string,
-  apiKey: string,
-  domain: string,
-  texts: string[],
-  targetLang: string,
-): Promise<string[]> {
-  const results: string[] = [];
-  for (let i = 0; i < texts.length; i += 100) {
-    const chunk = texts.slice(i, i + 100);
-    const res = await fetch(`${apiBase}/translate`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'x-api-key': apiKey,
-        'x-domain': domain,
-      },
-      body: JSON.stringify({ texts: chunk, targetLanguage: targetLang, sourceLanguage: 'auto' }),
-    });
-    const json = await res.json();
-    if (!json.success) throw new Error(json.message || 'Translation failed');
-    results.push(...json.data.translations);
-  }
-  return results;
-}

package/src/translify-selector.component.ts

@@ -1,463 +0,0 @@
-import {
-  Component,
-  Input,
-  OnInit,
-  OnDestroy,
-  NgZone,
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-} from '@angular/core';
-import { NgIf, NgFor, NgClass } from '@angular/common';
-import {
-  Language,
-  getSavedLang,
-  saveLang,
-  clearSavedLang,
-  loadTranslationCache,
-  saveTranslationCache,
-  getTextNodes,
-  collectNewTextNodes,
-  fetchLanguages,
-  callTranslateApi,
-} from './translate';
-
-@Component({
-  selector: 'translify-selector',
-  standalone: true,
-  imports: [NgIf, NgFor, NgClass],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`
-    .translify-selector { position: relative; display: inline-block; }
-    .translify-trigger {
-      display: inline-flex; align-items: center; gap: 6px;
-      padding: 8px 14px; border-radius: 8px; border: 1px solid #e5e7eb;
-      background: #fff; cursor: pointer; font-size: 14px; color: #374151;
-      transition: border-color 0.15s;
-    }
-    .translify-trigger:hover { border-color: #9ca3af; }
-    .translify-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
-    .translify-trigger-chevron { font-size: 10px; transition: transform 0.2s; }
-    .translify-trigger-chevron.open { transform: rotate(180deg); }
-    .translify-dropdown {
-      position: absolute; top: calc(100% + 6px); left: 0; z-index: 9999;
-      background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
-      min-width: 220px; max-height: 320px; overflow-y: auto;
-      box-shadow: 0 8px 24px rgba(0,0,0,0.12); display: flex; flex-direction: column;
-    }
-    .translify-dropdown-header {
-      padding: 10px 14px; font-size: 11px; font-weight: 700;
-      color: #6b7280; text-transform: uppercase; letter-spacing: 0.06em;
-      border-bottom: 1px solid #f3f4f6; flex-shrink: 0;
-    }
-    .translify-option {
-      display: flex; align-items: center; gap: 8px;
-      padding: 10px 14px; cursor: pointer; font-size: 14px;
-      color: #111827; border: none; background: none; width: 100%; text-align: left;
-      transition: background 0.1s;
-    }
-    .translify-option:hover { background: #f9fafb; }
-    .translify-option.active { background: #eff6ff; color: #2563eb; font-weight: 600; }
-    .translify-option-name { font-size: 12px; color: #9ca3af; margin-left: auto; }
-    .translify-option-rtl {
-      font-size: 10px; color: #9ca3af;
-      background: #f3f4f6; padding: 2px 5px; border-radius: 4px;
-    }
-    .translify-restore {
-      display: flex; align-items: center; gap: 6px;
-      padding: 10px 14px; cursor: pointer; font-size: 13px; color: #ef4444;
-      border: none; background: none; width: 100%; text-align: left;
-      border-top: 1px solid #f3f4f6; flex-shrink: 0; transition: background 0.1s;
-    }
-    .translify-restore:hover { background: #fff5f5; }
-    .translify-toast {
-      position: fixed; bottom: 84px; right: 24px; z-index: 2147483647;
-      background: #1e293b; color: #fff; padding: 10px 16px;
-      border-radius: 10px; font-size: 13px; pointer-events: none;
-      transition: opacity 0.3s ease, transform 0.3s ease;
-    }
-    .translify-overlay {
-      position: fixed; inset: 0; z-index: 2147483646;
-      background: rgba(255,255,255,0.85); backdrop-filter: blur(3px);
-      display: flex; flex-direction: column;
-      align-items: center; justify-content: center; gap: 14px;
-      transition: opacity 0.35s ease;
-    }
-    .translify-overlay-spinner {
-      width: 40px; height: 40px; border-radius: 50%;
-      border: 3px solid #e5e7eb; border-top-color: #2563eb;
-      animation: tlfy-spin 0.7s linear infinite;
-    }
-    @keyframes tlfy-spin { to { transform: rotate(360deg); } }
-    .translify-overlay-title { font-size: 15px; font-weight: 600; color: #111827; text-align: center; }
-    .translify-overlay-sub { font-size: 12px; color: #6b7280; margin-top: 4px; text-align: center; }
-  `],
-  template: `
-    <div class="translify-selector" (clickOutside)="isOpen = false">
-      <button
-        class="translify-trigger"
-        [class]="classNames.trigger || ''"
-        (click)="isOpen = !isOpen"
-        [disabled]="loadingState !== 'idle' || languages.length === 0"
-        [attr.aria-expanded]="isOpen"
-      >
-        <span>🌐</span>
-        <span>{{ activeLangObj ? activeLangObj.nativeName : (labels.trigger || 'Translate') }}</span>
-        <span class="translify-trigger-chevron" [class.open]="isOpen">▾</span>
-      </button>
-
-      <div *ngIf="isOpen" class="translify-dropdown" [class]="classNames.dropdown || ''">
-        <div class="translify-dropdown-header">{{ labels.dropdownHeader || 'Select Language' }}</div>
-
-        <button
-          *ngFor="let lang of languages"
-          class="translify-option"
-          [class.active]="activeLang === lang.code"
-          (click)="handleSelect(lang.code)"
-        >
-          <span>{{ lang.nativeName }}</span>
-          <span class="translify-option-name">{{ lang.name }}</span>
-          <span *ngIf="lang.isRTL" class="translify-option-rtl">RTL</span>
-        </button>
-
-        <button *ngIf="activeLang" class="translify-restore" (click)="restore()">
-          ↩ {{ labels.restore || 'Show original' }}
-        </button>
-      </div>
-    </div>
-
-    <div
-      *ngIf="loadingState === 'overlay'"
-      class="translify-overlay"
-      [style.opacity]="overlayVisible ? '1' : '0'"
-    >
-      <div class="translify-overlay-spinner"></div>
-      <div>
-        <div class="translify-overlay-title">{{ labels.overlayTitle || 'Translating page…' }}</div>
-        <div class="translify-overlay-sub">{{ labels.overlaySub || 'First time only — instant on next visit.' }}</div>
-      </div>
-    </div>
-
-    <div
-      *ngIf="loadingState === 'toast'"
-      class="translify-toast"
-      [style.opacity]="toastVisible ? '1' : '0'"
-      [style.transform]="toastVisible ? 'translateY(0)' : 'translateY(8px)'"
-    >
-      ⏳ Translating…
-    </div>
-  `,
-})
-export class TranslifySelectorComponent implements OnInit, OnDestroy {
-  @Input() apiKey!: string;
-  @Input() apiBase = 'https://translify.cc';
-  @Input() domain = window.location.hostname || 'localhost';
-  @Input() classNames: {
-    trigger?: string; dropdown?: string; dropdownHeader?: string;
-    option?: string; optionActive?: string; optionNative?: string;
-    optionName?: string; optionRtl?: string; restore?: string;
-    overlay?: string; overlaySpinner?: string; overlayTitle?: string;
-    overlaySub?: string; toast?: string;
-  } = {};
-  @Input() labels: {
-    trigger?: string; dropdownHeader?: string; restore?: string;
-    overlayTitle?: string; overlaySub?: string;
-  } = {};
-
-  languages: Language[] = [];
-  activeLang: string | null = getSavedLang();
-  isOpen = false;
-  loadingState: 'idle' | 'overlay' | 'toast' = 'idle';
-  overlayVisible = false;
-  toastVisible = false;
-
-  // All mutable translation state — no change detection needed
-  private originalTexts = new Map<Node, string>();
-  private translationCache = new Map<string, string>();
-  private currentCacheLang: string | null = null;
-  private isTranslating = false;
-  private pendingNodes: Text[] = [];
-  private observer: MutationObserver | null = null;
-  private debounceTimer: any = null;
-  private overlayTimer: any = null;
-
-  constructor(private ngZone: NgZone, private cdr: ChangeDetectorRef) {}
-
-  get activeLangObj(): Language | undefined {
-    return this.languages.find((l) => l.code === this.activeLang);
-  }
-
-  async ngOnInit() {
-    if (!this.apiKey) { console.error('[Translify] apiKey is required.'); return; }
-
-    try {
-      this.languages = await fetchLanguages(this.apiBase);
-      this.cdr.markForCheck();
-    } catch (e) {
-      console.error('[Translify] Failed to fetch languages', e);
-      return;
-    }
-
-    this.ngZone.runOutsideAngular(() => {
-      this.startObserver();
-      this.patchHistory();
-    });
-
-    if (this.activeLang && this.languages.length > 0) {
-      await this.translate(this.activeLang);
-    }
-  }
-
-  ngOnDestroy() {
-    this.stopObserver();
-    clearTimeout(this.overlayTimer);
-  }
-
-  // ── Cache helpers ───────────────────────────────────────────────────────────
-
-  private ensureCacheLoaded(lang: string) {
-    if (this.currentCacheLang === lang) return;
-    this.translationCache = loadTranslationCache(lang);
-    this.currentCacheLang = lang;
-  }
-
-  private applyCache(nodes: Text[]): Text[] {
-    const uncached: Text[] = [];
-    nodes.forEach((node) => {
-      const src = this.originalTexts.get(node) ?? node.textContent ?? '';
-      const hit = this.translationCache.get(src);
-      if (hit !== undefined) {
-        node.textContent = hit;
-      } else {
-        uncached.push(node);
-      }
-    });
-    return uncached;
-  }
-
-  // ── Overlay / toast ─────────────────────────────────────────────────────────
-
-  private showOverlay() {
-    clearTimeout(this.overlayTimer);
-    this.ngZone.run(() => {
-      this.overlayVisible = false;
-      this.loadingState = 'overlay';
-      requestAnimationFrame(() => { this.overlayVisible = true; this.cdr.markForCheck(); });
-      this.cdr.markForCheck();
-    });
-  }
-
-  private hideOverlay() {
-    this.overlayTimer = setTimeout(() => {
-      this.ngZone.run(() => { this.overlayVisible = false; this.cdr.markForCheck(); });
-      this.overlayTimer = setTimeout(() => {
-        this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
-      }, 400);
-    }, 600);
-  }
-
-  private showToast() {
-    clearTimeout(this.overlayTimer);
-    this.ngZone.run(() => {
-      this.loadingState = 'toast';
-      requestAnimationFrame(() => { this.toastVisible = true; this.cdr.markForCheck(); });
-      this.cdr.markForCheck();
-    });
-  }
-
-  private hideToast() {
-    this.ngZone.run(() => {
-      this.toastVisible = false;
-      this.overlayTimer = setTimeout(() => {
-        this.ngZone.run(() => { this.loadingState = 'idle'; this.cdr.markForCheck(); });
-      }, 350);
-      this.cdr.markForCheck();
-    });
-  }
-
-  // ── flushNodes ──────────────────────────────────────────────────────────────
-
-  private async flushNodes(nodes: Text[], targetLang: string) {
-    if (!nodes.length) return;
-    if (this.isTranslating) { this.pendingNodes.push(...nodes); return; }
-    this.isTranslating = true;
-
-    try {
-      nodes.forEach((n) => {
-        if (!this.originalTexts.has(n)) this.originalTexts.set(n, n.textContent ?? '');
-      });
-      const uncached = this.applyCache(nodes);
-      if (uncached.length > 0) {
-        const texts = uncached.map((n) => this.originalTexts.get(n)!);
-        const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
-        uncached.forEach((node, i) => {
-          if (translations[i] !== undefined) {
-            this.translationCache.set(this.originalTexts.get(node)!, translations[i]);
-            node.textContent = translations[i];
-          }
-        });
-        saveTranslationCache(targetLang, this.translationCache);
-      }
-    } catch (e) {
-      console.error('[Translify] Dynamic translation error', e);
-    } finally {
-      this.isTranslating = false;
-      if (this.pendingNodes.length > 0) {
-        const next = this.pendingNodes.splice(0);
-        this.flushNodes(next, targetLang);
-      }
-    }
-  }
-
-  // ── MutationObserver ────────────────────────────────────────────────────────
-
-  private startObserver() {
-    if (this.observer) return;
-
-    this.observer = new MutationObserver((mutations) => {
-      if (!this.activeLang) return;
-      const targetLang = this.activeLang;
-
-      const newNodes: Text[] = [];
-      mutations.forEach((mutation) => {
-        if (mutation.type !== 'childList') return;
-        mutation.addedNodes.forEach((node) => {
-          newNodes.push(...collectNewTextNodes(node, this.originalTexts));
-        });
-      });
-      if (!newNodes.length) return;
-
-      const uncached: Text[] = [];
-      newNodes.forEach((node) => {
-        const src = node.textContent ?? '';
-        const hit = this.translationCache.get(src);
-        if (hit !== undefined) {
-          this.originalTexts.set(node, src);
-          node.textContent = hit;
-        } else {
-          uncached.push(node);
-        }
-      });
-      if (!uncached.length) return;
-
-      this.pendingNodes.push(...uncached);
-      if (!this.isTranslating) {
-        clearTimeout(this.debounceTimer);
-        this.debounceTimer = setTimeout(() => {
-          const toFlush = this.pendingNodes.splice(0);
-          this.flushNodes(toFlush, targetLang);
-        }, 50);
-      }
-    });
-
-    this.observer.observe(document.body, { childList: true, subtree: true });
-  }
-
-  private stopObserver() {
-    if (this.observer) { this.observer.disconnect(); this.observer = null; }
-    clearTimeout(this.debounceTimer);
-  }
-
-  // ── SPA route change detection ──────────────────────────────────────────────
-
-  private patchHistory() {
-    const orig = history.pushState.bind(history);
-    const self = this;
-    history.pushState = function(state: unknown, unused: string, url?: string | URL | null) {
-      orig(state, unused, url);
-      self.onRouteChange();
-    };
-    window.addEventListener('popstate', () => this.onRouteChange());
-  }
-
-  private onRouteChange() {
-    if (!this.activeLang) return;
-    const targetLang = this.activeLang;
-    setTimeout(() => {
-      const nodes = getTextNodes(document.body).filter((n) => !this.originalTexts.has(n));
-      if (!nodes.length) return;
-      this.pendingNodes.push(...nodes);
-      if (!this.isTranslating) {
-        const toFlush = this.pendingNodes.splice(0);
-        this.flushNodes(toFlush, targetLang);
-      }
-    }, 100);
-  }
-
-  // ── Main translate ──────────────────────────────────────────────────────────
-
-  async translate(targetLang: string) {
-    if (this.isTranslating) return;
-    this.isTranslating = true;
-
-    try {
-      this.ensureCacheLoaded(targetLang);
-      const isFirstEver = this.translationCache.size === 0;
-
-      if (this.originalTexts.size > 0) {
-        this.originalTexts.forEach((text, node) => { node.textContent = text; });
-      }
-
-      const nodes = getTextNodes(document.body);
-      if (!nodes.length) return;
-
-      nodes.forEach((node) => {
-        if (!this.originalTexts.has(node)) this.originalTexts.set(node, node.textContent ?? '');
-      });
-
-      const uncached = this.applyCache(nodes);
-
-      const lang = this.languages.find((l) => l.code === targetLang);
-      document.documentElement.setAttribute('dir', lang?.isRTL ? 'rtl' : 'ltr');
-
-      saveLang(targetLang);
-      this.ngZone.run(() => { this.activeLang = targetLang; this.cdr.markForCheck(); });
-
-      if (uncached.length > 0) {
-        if (isFirstEver) this.showOverlay(); else this.showToast();
-
-        const texts = uncached.map((n) => this.originalTexts.get(n)!);
-        const translations = await callTranslateApi(this.apiBase, this.apiKey, this.domain, texts, targetLang);
-
-        uncached.forEach((node, i) => {
-          if (translations[i] !== undefined) {
-            this.translationCache.set(this.originalTexts.get(node)!, translations[i]);
-            node.textContent = translations[i];
-          }
-        });
-
-        saveTranslationCache(targetLang, this.translationCache);
-        if (isFirstEver) this.hideOverlay(); else this.hideToast();
-      }
-    } catch (e) {
-      console.error('[Translify] Translation error', e);
-      this.hideOverlay(); this.hideToast();
-    } finally {
-      this.isTranslating = false;
-      if (this.pendingNodes.length > 0) {
-        const next = this.pendingNodes.splice(0);
-        this.flushNodes(next, this.activeLang!);
-      }
-    }
-  }
-
-  // ── Restore ─────────────────────────────────────────────────────────────────
-
-  restore() {
-    this.stopObserver();
-    this.originalTexts.forEach((text, node) => { node.textContent = text; });
-    this.originalTexts.clear();
-    document.documentElement.setAttribute('dir', 'ltr');
-    clearSavedLang();
-    this.activeLang = null;
-    this.isOpen = false;
-    this.cdr.markForCheck();
-    this.ngZone.runOutsideAngular(() => this.startObserver());
-  }
-
-  // ── UI handlers ─────────────────────────────────────────────────────────────
-
-  handleSelect(langCode: string) {
-    this.isOpen = false;
-    this.translate(langCode);
-  }
-}

package/src/translify.module.ts

@@ -1,10 +0,0 @@
-import { NgModule } from '@angular/core';
-import { TranslifySelectorComponent } from './translify-selector.component';
-
-// For NgModule-based apps (Angular 15+)
-// Standalone component apps can import TranslifySelectorComponent directly
-@NgModule({
-  imports: [TranslifySelectorComponent],
-  exports: [TranslifySelectorComponent],
-})
-export class TranslifyModule {}

package/tsconfig.json

@@ -1,18 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2017",
-    "module": "ES2020",
-    "moduleResolution": "node",
-    "declaration": true,
-    "declarationMap": false,
-    "sourceMap": false,
-    "outDir": "./dist",
-    "strict": false,
-    "experimentalDecorators": true,
-    "emitDecoratorMetadata": true,
-    "skipLibCheck": true,
-    "lib": ["ES2017", "DOM"]
-  },
-  "include": ["src/**/*.ts"],
-  "exclude": ["node_modules"]
-}