https://github.com/abstractn/abs-translate
Simple Angular-like runtime translation system
https://github.com/abstractn/abs-translate
frontend i18n internazionalization translation
Last synced: about 2 months ago
JSON representation
Simple Angular-like runtime translation system
- Host: GitHub
- URL: https://github.com/abstractn/abs-translate
- Owner: Abstractn
- License: mit
- Created: 2023-11-09T22:58:02.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-22T09:12:23.000Z (about 1 year ago)
- Last Synced: 2025-03-07T06:34:25.127Z (3 months ago)
- Topics: frontend, i18n, internazionalization, translation
- Language: TypeScript
- Homepage:
- Size: 14.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Abs-Translate
## Introduction:
This module offers a quick translation system using local dictionaries.
## CDN:
Typescript:
```https://abstractn.github.io/lib/abs-translate.ts```
Javascript (with export):
```https://abstractn.github.io/lib/abs-translate.js```
Javascript (without export):
```https://abstractn.github.io/lib/abs-translate.nx.js```
Browser iclusion:
``````
## Dictionaries
You can have your dictionaries from dedicated JSON files or defined directly from code as objects.
This is what one would look like:
```typescript
@import { AbsTranslateLanguage } from 'abs-translate';
const myEnglishDictionary: AbsTranslateLanguage = {
languageId: 'english',
content: {
'example-text-1': 'Example text #1',
'example-text-2': 'Example text #2',
}
}
const myItalianDictionary: AbsTranslateLanguage = {
languageId: 'italian',
content: {
'example-text-1': 'Testo di esempio #1',
'example-text-2': 'Testo di esempio #2',
}
}
```
Note how the keys inside `content` ("translation keys") are the same for all languages.
These translation keys are going to be what the HTML page references instead of directly printing text.
```html
```
Now you can have a custom language selector that calls `.setLanguage(languageId: string)` and all translatable nodes will automatically switch language without needing to reload the page.
> NOTE: this module has not been tested with pages containing high amount of content so this system may result in poor performance.