@lokascript/i18n 1.0.0

package/src/test-setup.ts

@@ -0,0 +1,195 @@
+// packages/i18n/src/test-setup.ts
+
+import { vi } from 'vitest';
+
+/**
+ * Test setup for HyperFixi i18n package
+ */
+
+// Mock browser APIs for Node.js environment
+Object.defineProperty(globalThis, 'navigator', {
+  value: {
+    language: 'en-US',
+    languages: ['en-US', 'en', 'fr'],
+    userLanguage: 'en-US',
+  },
+  writable: true,
+});
+
+Object.defineProperty(globalThis, 'window', {
+  value: {
+    location: {
+      href: 'http://localhost:3000',
+      search: '',
+    },
+    history: {
+      replaceState: vi.fn(),
+    },
+    localStorage: {
+      getItem: vi.fn(),
+      setItem: vi.fn(),
+      removeItem: vi.fn(),
+    },
+    addEventListener: vi.fn(),
+    removeEventListener: vi.fn(),
+  },
+  writable: true,
+});
+
+Object.defineProperty(globalThis, 'document', {
+  value: {
+    documentElement: {
+      lang: 'en',
+      dir: 'ltr',
+    },
+    title: 'Test Page',
+    cookie: '',
+    querySelectorAll: vi.fn(() => []),
+    createElement: vi.fn((tag: string) => ({
+      tagName: tag.toUpperCase(),
+      className: '',
+      dataset: {},
+      getAttribute: vi.fn(),
+      setAttribute: vi.fn(),
+      appendChild: vi.fn(),
+      addEventListener: vi.fn(),
+      textContent: '',
+      value: '',
+      selected: false,
+    })),
+  },
+  writable: true,
+});
+
+// Mock performance API
+Object.defineProperty(globalThis, 'performance', {
+  value: {
+    now: () => Date.now(),
+  },
+  writable: true,
+});
+
+// Mock Intl APIs for consistent testing
+// These need to work as constructors (called with `new`)
+class MockNumberFormat {
+  private options: Intl.NumberFormatOptions;
+
+  constructor(_locale?: string, options?: Intl.NumberFormatOptions) {
+    this.options = options || {};
+  }
+
+  format(value: number): string {
+    const { style, currency, minimumFractionDigits, maximumFractionDigits } = this.options;
+
+    if (style === 'currency' && currency) {
+      const symbols: Record<string, string> = { USD: '$', EUR: '€', GBP: '£' };
+      const symbol = symbols[currency] || currency;
+      return `${symbol}${value.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`;
+    }
+
+    if (style === 'percent') {
+      return `${(value * 100).toFixed(0)}%`;
+    }
+
+    // Default decimal formatting with proper grouping
+    const minFrac = minimumFractionDigits ?? 0;
+    const maxFrac = maximumFractionDigits ?? 3;
+    let formatted = value.toFixed(Math.max(minFrac, Math.min(maxFrac, 2)));
+    // Remove trailing zeros if not required
+    if (minFrac === 0 && formatted.includes('.')) {
+      formatted = formatted.replace(/\.?0+$/, '');
+    }
+    // Add thousand separators
+    const parts = formatted.split('.');
+    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+    return parts.join('.');
+  }
+}
+
+class MockDateTimeFormat {
+  private options: Intl.DateTimeFormatOptions;
+
+  constructor(_locale?: string, options?: Intl.DateTimeFormatOptions) {
+    this.options = options || {};
+  }
+
+  format(date: Date | number): string {
+    const d = new Date(date);
+    const month = String(d.getMonth() + 1).padStart(2, '0');
+    const day = String(d.getDate()).padStart(2, '0');
+    const year = d.getFullYear();
+    const hours = String(d.getHours()).padStart(2, '0');
+    const minutes = String(d.getMinutes()).padStart(2, '0');
+
+    if (this.options.timeStyle && this.options.dateStyle) {
+      return `${month}/${day}/${year}, ${hours}:${minutes}`;
+    }
+    if (this.options.timeStyle) {
+      return `${hours}:${minutes}`;
+    }
+    return `${month}/${day}/${year}`;
+  }
+}
+
+class MockRelativeTimeFormat {
+  constructor(_locale?: string, _options?: Intl.RelativeTimeFormatOptions) {
+    // Parameters unused in mock - kept for API compatibility
+  }
+
+  format(value: number, unit: Intl.RelativeTimeFormatUnit): string {
+    const absValue = Math.abs(value);
+    const unitStr = absValue === 1 ? unit : `${unit}s`;
+    if (value < 0) {
+      return `${absValue} ${unitStr} ago`;
+    }
+    return `in ${absValue} ${unitStr}`;
+  }
+}
+
+class MockListFormat {
+  constructor(_locale?: string, _options?: { style?: string; type?: string }) {}
+
+  format(items: string[]): string {
+    if (items.length <= 1) return items[0] || '';
+    if (items.length === 2) return `${items[0]} and ${items[1]}`;
+    return `${items.slice(0, -1).join(', ')}, and ${items[items.length - 1]}`;
+  }
+}
+
+Object.defineProperty(globalThis, 'Intl', {
+  value: {
+    NumberFormat: MockNumberFormat,
+    DateTimeFormat: MockDateTimeFormat,
+    RelativeTimeFormat: MockRelativeTimeFormat,
+    ListFormat: MockListFormat,
+  },
+  writable: true,
+});
+
+// Helper function to reset mocks between tests
+export function resetMocks() {
+  vi.clearAllMocks();
+
+  // Reset DOM state
+  if (typeof document !== 'undefined') {
+    document.documentElement.lang = 'en';
+    document.documentElement.dir = 'ltr';
+    document.title = 'Test Page';
+    document.cookie = '';
+  }
+
+  // Reset localStorage
+  if (typeof window !== 'undefined' && window.localStorage) {
+    window.localStorage.getItem = vi.fn();
+    window.localStorage.setItem = vi.fn();
+    window.localStorage.removeItem = vi.fn();
+  }
+}
+
+// Mock node-html-parser for plugin tests
+vi.mock('node-html-parser', () => ({
+  parse: vi.fn((html: string) => ({
+    toString: () => html,
+    querySelectorAll: vi.fn(() => []),
+  })),
+}));

package/src/translation-validation.test.ts

@@ -0,0 +1,171 @@
+/**
+ * Translation Validation Tests
+ *
+ * Verifies that all dictionaries have complete translations
+ * with no TODO placeholders remaining.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { dictionaries } from './dictionaries';
+import type { Dictionary } from './types';
+
+// Focus on when/where which were the main TODO items we fixed
+const REQUIRED_LOGICAL_KEYWORDS = ['when', 'where', 'and', 'or', 'not'] as const;
+
+// Languages that are fully implemented (not placeholder stubs)
+const COMPLETE_LANGUAGES = [
+  'en',
+  'es',
+  'ja',
+  'ko',
+  'ar',
+  'id',
+  'pt',
+  'it',
+  'vi',
+  'qu',
+  'sw',
+  'pl',
+  'ru',
+  'zh',
+  'hi',
+  'bn',
+  'de',
+  'th',
+  'fr',
+  'uk',
+  'tl',
+  'ms',
+] as const;
+
+// Languages with placeholder translations (none currently)
+const INCOMPLETE_LANGUAGES = [] as const;
+
+describe('Translation Validation', () => {
+  describe('Logical keywords completeness', () => {
+    COMPLETE_LANGUAGES.forEach(code => {
+      const dict = dictionaries[code] as Dictionary | undefined;
+      if (!dict) return;
+
+      it(`${code}: all logical keywords are translated (no TODO)`, () => {
+        REQUIRED_LOGICAL_KEYWORDS.forEach(keyword => {
+          const value = dict.logical?.[keyword];
+          expect(value, `Missing logical keyword: ${keyword}`).toBeDefined();
+          expect(value, `${keyword} is still TODO`).not.toBe('TODO');
+          expect(typeof value === 'string' && value.length > 0, `${keyword} is empty`).toBe(true);
+        });
+      });
+    });
+  });
+
+  describe('No TODO placeholders in complete languages', () => {
+    COMPLETE_LANGUAGES.forEach(code => {
+      const dict = dictionaries[code] as Dictionary | undefined;
+      if (!dict) return;
+
+      it(`${code}: dictionary has no TODO values in core categories`, () => {
+        const coreCategories = ['commands', 'modifiers', 'logical', 'values'] as const;
+        const todos: string[] = [];
+
+        coreCategories.forEach(category => {
+          const section = dict[category];
+          if (section && typeof section === 'object') {
+            Object.entries(section).forEach(([key, value]) => {
+              if (value === 'TODO') {
+                todos.push(`${category}.${key}`);
+              }
+            });
+          }
+        });
+
+        expect(todos.length, `Found TODO values: ${todos.join(', ')}`).toBe(0);
+      });
+    });
+  });
+
+  describe('when/where linguistic validation', () => {
+    it('when keywords are temporal/conditional words (not interrogatives)', () => {
+      // These patterns verify the translations are temporal markers, not questions
+      const temporalPatterns: Record<string, RegExp> = {
+        es: /cuando/i, // Spanish: "cuando" (when as temporal)
+        pt: /quando/i, // Portuguese: "quando"
+        it: /quando/i, // Italian: "quando"
+        fr: /quand/i, // French: "quand"
+        ja: /とき|時/, // Japanese: "toki" (time/when)
+        ko: /때/, // Korean: "ttae" (time/when)
+        de: /wenn|wann/i, // German: "wenn" (conditional when)
+        ru: /когда/i, // Russian: "kogda"
+        uk: /коли/i, // Ukrainian: "koly"
+        pl: /kiedy/i, // Polish: "kiedy"
+        ar: /عندما/, // Arabic: "endama"
+        zh: /当|當/, // Chinese: "dang" (when)
+      };
+
+      Object.entries(temporalPatterns).forEach(([code, pattern]) => {
+        const dict = dictionaries[code] as Dictionary | undefined;
+        if (dict?.logical?.when && dict.logical.when !== 'TODO') {
+          expect(dict.logical.when, `${code}: 'when' should match temporal pattern`).toMatch(
+            pattern
+          );
+        }
+      });
+    });
+
+    it('where keywords are locative words', () => {
+      // These patterns verify the translations are locative, not interrogatives
+      const locativePatterns: Record<string, RegExp> = {
+        es: /donde|dónde/i, // Spanish: "donde"
+        pt: /onde/i, // Portuguese: "onde"
+        it: /dove/i, // Italian: "dove"
+        fr: /où/i, // French: "où"
+        de: /wo/i, // German: "wo"
+        ru: /где/i, // Russian: "gde"
+        uk: /де/i, // Ukrainian: "de"
+        pl: /gdzie/i, // Polish: "gdzie"
+        ar: /أين/, // Arabic: "ayna"
+        zh: /哪里|哪裡/, // Chinese: "nali"
+      };
+
+      Object.entries(locativePatterns).forEach(([code, pattern]) => {
+        const dict = dictionaries[code] as Dictionary | undefined;
+        if (dict?.logical?.where && dict.logical.where !== 'TODO') {
+          expect(dict.logical.where, `${code}: 'where' should match locative pattern`).toMatch(
+            pattern
+          );
+        }
+      });
+    });
+  });
+
+  describe('Dictionary structure validation', () => {
+    Object.entries(dictionaries).forEach(([code, dict]) => {
+      it(`${code}: has required top-level categories`, () => {
+        const requiredCategories = ['commands', 'modifiers', 'logical'];
+        requiredCategories.forEach(category => {
+          expect(dict, `Missing category: ${category}`).toHaveProperty(category);
+        });
+      });
+    });
+  });
+
+  describe('All languages are complete', () => {
+    it('no incomplete languages remain', () => {
+      expect(INCOMPLETE_LANGUAGES.length).toBe(0);
+    });
+
+    // Verify tl and ms are now complete
+    ['tl', 'ms'].forEach(code => {
+      const dict = dictionaries[code] as Dictionary | undefined;
+      if (!dict) return;
+
+      it(`${code}: is now fully translated (no TODO placeholders in core)`, () => {
+        const coreValues = [
+          ...Object.values(dict.commands || {}),
+          ...Object.values(dict.logical || {}),
+        ];
+        const todos = coreValues.filter(v => v === 'TODO');
+        expect(todos.length, `${code} still has TODO values`).toBe(0);
+      });
+    });
+  });
+});

package/src/translator.test.ts

@@ -0,0 +1,252 @@
+// packages/i18n/src/translator.test.ts
+
+import { describe, it, expect, beforeEach } from 'vitest';
+import { HyperscriptTranslator } from './translator';
+import { Dictionary } from './types';
+
+describe('HyperscriptTranslator', () => {
+  let translator: HyperscriptTranslator;
+
+  const testDictionary: Dictionary = {
+    commands: {
+      on: 'sur',
+      click: 'cliquer',
+      set: 'définir',
+      get: 'obtenir',
+    },
+    modifiers: {
+      to: 'à',
+      from: 'de',
+    },
+    events: {
+      click: 'clic',
+    },
+    logical: {
+      and: 'et',
+      or: 'ou',
+    },
+    temporal: {
+      seconds: 'secondes',
+    },
+    values: {
+      true: 'vrai',
+      false: 'faux',
+    },
+    attributes: {
+      class: 'classe',
+    },
+  };
+
+  beforeEach(() => {
+    translator = new HyperscriptTranslator({
+      locale: 'en',
+      dictionaries: {
+        fr: testDictionary,
+      },
+    });
+  });
+
+  describe('basic translation', () => {
+    it('should translate simple commands', () => {
+      const result = translator.translate('on click set #value', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('sur clic définir #value');
+    });
+
+    it('should handle mixed content', () => {
+      const result = translator.translate('on click get .className and set #result', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('sur clic obtenir .className et définir #result');
+    });
+
+    it('should preserve identifiers and literals', () => {
+      const result = translator.translate('on click set #myId to "hello world"', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('sur clic définir #myId à "hello world"');
+    });
+
+    it('should handle boolean values', () => {
+      const result = translator.translate('set #visible to true', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('définir #visible à vrai');
+    });
+  });
+
+  describe('translation with details', () => {
+    it('should return detailed translation result', () => {
+      const result = translator.translateWithDetails('on click set #value', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result.translated).toBe('sur clic définir #value');
+      expect(result.locale.from).toBe('en');
+      expect(result.locale.to).toBe('fr');
+      expect(result.tokens).toBeDefined();
+      expect(result.tokens.length).toBeGreaterThan(0);
+    });
+
+    it('should preserve original when requested', () => {
+      const result = translator.translateWithDetails('on click', {
+        from: 'en',
+        to: 'fr',
+        preserveOriginal: true,
+      });
+
+      expect(result.original).toBe('on click');
+    });
+  });
+
+  describe('language detection', () => {
+    it('should detect language from content', () => {
+      const detected = translator.detectLanguage('sur clic définir');
+      expect(detected).toBe('fr');
+    });
+
+    it('should fallback to default when detection disabled', () => {
+      const translator2 = new HyperscriptTranslator({
+        locale: 'en',
+        detectLocale: false,
+      });
+
+      const detected = translator2.detectLanguage('sur clic définir');
+      expect(detected).toBe('en');
+    });
+  });
+
+  describe('dictionary management', () => {
+    it('should add new dictionaries', () => {
+      const newDict: Dictionary = {
+        commands: { test: 'prueba' },
+        modifiers: {},
+        events: {},
+        logical: {},
+        temporal: {},
+        values: {},
+        attributes: {},
+      };
+
+      translator.addDictionary('es', newDict);
+      expect(translator.getSupportedLocales()).toContain('es');
+    });
+
+    it('should validate dictionaries', () => {
+      const validation = translator.validateDictionary('fr');
+      expect(validation).toBeDefined();
+      expect(typeof validation.valid).toBe('boolean');
+    });
+  });
+
+  describe('RTL support', () => {
+    it('should identify RTL locales', () => {
+      expect(translator.isRTL('ar')).toBe(true);
+      expect(translator.isRTL('he')).toBe(true);
+      expect(translator.isRTL('en')).toBe(false);
+      expect(translator.isRTL('fr')).toBe(false);
+    });
+  });
+
+  describe('completions', () => {
+    it('should provide completions for partial input', () => {
+      const completions = translator.getCompletions({
+        text: 'on cl',
+        position: 5,
+        locale: 'fr',
+      });
+
+      expect(completions).toContain('cliquer');
+    });
+
+    it('should handle empty partial input', () => {
+      const completions = translator.getCompletions({
+        text: 'on ',
+        position: 3,
+        locale: 'fr',
+      });
+
+      expect(completions.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle same source and target locale', () => {
+      const result = translator.translate('on click', {
+        from: 'en',
+        to: 'en',
+      });
+
+      expect(result).toBe('on click');
+    });
+
+    it('should handle missing dictionary gracefully', () => {
+      expect(() => {
+        translator.translate('on click', {
+          from: 'en',
+          to: 'nonexistent',
+        });
+      }).toThrow();
+    });
+
+    it('should handle empty input', () => {
+      const result = translator.translate('', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('');
+    });
+
+    it('should handle complex hyperscript expressions', () => {
+      const input = 'on click if #myInput.value then set .result to true else set .result to false';
+      const result = translator.translate(input, {
+        from: 'en',
+        to: 'fr',
+      });
+
+      // Should translate keywords but preserve selectors and structure
+      expect(result).toContain('sur');
+      expect(result).toContain('clic');
+      expect(result).toContain('définir');
+      expect(result).toContain('#myInput.value');
+      expect(result).toContain('.result');
+    });
+  });
+
+  describe('whitespace and formatting preservation', () => {
+    it('should preserve whitespace', () => {
+      const result = translator.translate('on  click   set #value', {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toBe('sur  clic   définir #value');
+    });
+
+    it('should preserve line breaks', () => {
+      const input = `on click
+        set #value
+        to true`;
+
+      const result = translator.translate(input, {
+        from: 'en',
+        to: 'fr',
+      });
+
+      expect(result).toContain('\n');
+      expect(result).toContain('sur');
+      expect(result).toContain('définir');
+    });
+  });
+});