{"_rev":"4-fdc9201efc595d4de6ac8ce4a3bee243","time":{"created":"2025-12-30T17:23:56.693Z","modified":"2025-12-30T17:23:57.265Z","1.0.0":"2025-12-30T10:49:40.087Z","2.0.0":"2025-12-30T17:23:56.924Z"},"_id":"@dysporium/polyglot-dom","name":"@dysporium/polyglot-dom","dist-tags":{"latest":"2.0.0"},"versions":{"2.0.0":{"name":"@dysporium/polyglot-dom","version":"2.0.0","description":"DOM integration for Dysporium Polyglot","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"}},"keywords":["i18n","dom","translation","polyglot"],"license":"MIT","dependencies":{"@dysporium/polyglot-core":"2.0.0"},"devDependencies":{"tsup":"^8.0.1","typescript":"^5.3.3"},"scripts":{"build":"tsup","dev":"tsup --watch","typecheck":"tsc --noEmit"},"_id":"@dysporium/polyglot-dom@2.0.0","_integrity":"sha512-zYTpQDqctwMVGWCaFJzV2Q0Y03/mQjIpi3rT9KUVL1ArpOvI4zz92pd02DUxp8srw0yr+SkNOZxhWOegcPqlGQ==","_resolved":"/tmp/a0dbc3d4049becdb0599cd5a3f1094d9/dysporium-polyglot-dom-2.0.0.tgz","_from":"file:dysporium-polyglot-dom-2.0.0.tgz","_nodeVersion":"20.19.6","_npmVersion":"10.8.2","dist":{"integrity":"sha512-zYTpQDqctwMVGWCaFJzV2Q0Y03/mQjIpi3rT9KUVL1ArpOvI4zz92pd02DUxp8srw0yr+SkNOZxhWOegcPqlGQ==","shasum":"c937faba4768d8705b5441b12495997fe8529444","tarball":"https://registry.npmjs.org/@dysporium/polyglot-dom/-/polyglot-dom-2.0.0.tgz","fileCount":9,"unpackedSize":31379,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIF1sqZplYMt5IVSBsN/spweDKlDqdISUsonX+nk11BwoAiEA1W039oMmkwlFmPJKY/V0qOAXBqolxh1iY1HjjeWkzNg="}]},"_npmUser":{"name":"paulmothapo","email":"paulmothapo.personal@gmail.com"},"directories":{},"maintainers":[{"name":"paulmothapo","email":"paulmothapo.personal@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/polyglot-dom_2.0.0_1767115436800_0.5588678843286992"},"_hasShrinkwrap":false}},"maintainers":[{"name":"paulmothapo","email":"paulmothapo.personal@gmail.com"}],"description":"DOM integration for Dysporium Polyglot","keywords":["i18n","dom","translation","polyglot"],"license":"MIT","readme":"# @dysporium/polyglot-dom\n\nDeclarative DOM translation for vanilla JavaScript applications. This package automatically translates HTML elements using data attributes, with no framework required.\n\n## Overview\n\nThe DOM package bridges the Dysporium Polyglot core engine with the browser DOM. It scans your HTML for specially-marked elements and applies translations based on the current locale. When the locale changes, all translated elements update automatically.\n\nThis package is designed for projects that do not use React or other UI frameworks. For React applications, use `@dysporium/polyglot-react` instead.\n\n## Features\n\n### Attribute-Based Translation\n\nElements are marked for translation using data attributes. The primary attribute holds the translation key, while optional attributes provide pluralization counts, interpolation values, and context.\n\nDefault attributes:\n\n- `data-i18n` - The translation key to look up\n- `data-i18n-count` - A number for plural form selection\n- `data-i18n-values` - JSON object containing interpolation variables\n- `data-i18n-context` - Contextual hint for translation disambiguation\n- `data-i18n-default` - Fallback text when translation is missing\n- `data-i18n-attr` - Target attribute name instead of text content\n\n### Automatic DOM Observation\n\nA MutationObserver watches for changes to the DOM tree. When new elements with translation attributes are added, they are translated immediately without manual intervention. This works seamlessly with dynamically generated content and single-page application navigation.\n\n### Reactive Locale Changes\n\nThe translator subscribes to locale change events from the core engine. When a user switches languages, every translated element on the page updates to reflect the new locale.\n\n### Attribute Translation\n\nBeyond text content, translations can target element attributes. This is useful for translating placeholder text in inputs, title attributes for tooltips, aria-label values for accessibility, and other attribute-based content.\n\n### Scoped Translation\n\nTranslations can be scoped to a specific root element rather than the entire document body. This allows multiple independent translation contexts on a single page or limits the observation scope for performance optimization.\n\n## Installation\n\n**npm**\n\n    npm install @dysporium/polyglot-dom\n\n**pnpm**\n\n    pnpm add @dysporium/polyglot-dom\n\n**yarn**\n\n    yarn add @dysporium/polyglot-dom\n\n## Package Exports\n\n- `DOMTranslator` - Main class for DOM translation management\n- `createDOMTranslator` - Factory function that creates and initializes a translator\n- `translateDOM` - Convenience function that returns a cleanup callback\n- `DOMTranslatorConfig` - TypeScript interface for configuration options\n\n## Configuration Options\n\n| Option | Type | Default | Description |\n|--------|------|---------|-------------|\n| attribute | string | `data-i18n` | Primary attribute for translation keys |\n| countAttribute | string | `data-i18n-count` | Attribute for plural count values |\n| valuesAttribute | string | `data-i18n-values` | Attribute for interpolation variables |\n| root | Element | document.body | Root element to observe and translate |\n| observe | boolean | true | Whether to watch for DOM mutations |\n\n## Dependencies\n\nThis package includes `@dysporium/polyglot-core` as a dependency. The core package provides the translation engine, locale management, and formatting capabilities. You do not need to install it separately.\n\n## Related Packages\n\n- `@dysporium/polyglot-core` - Core translation engine\n- `@dysporium/polyglot-react` - React hooks and components\n- `@dysporium/polyglot-ai` - AI-powered translation with LLM providers\n\n## Browser Support\n\nRequires browsers with MutationObserver support. All modern browsers are supported. Internet Explorer is not supported.\n\n## License\n\nMIT\n\n","readmeFilename":"README.md"}