imba-localization 0.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +86 -0
- package/index.imba +49 -0
- package/package.json +16 -0
package/README.md
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
|
|
2
|
+
# Localization Loader for Imba
|
|
3
|
+
|
|
4
|
+
A lightweight Imba module for loading and handling JSON-based localization files in web applications. This utility fetches a localization file, selects the appropriate language based on the user's browser settings (or falls back to a default), and allows you to easily access localized strings throughout your application.
|
|
5
|
+
|
|
6
|
+
## β¨ Features
|
|
7
|
+
|
|
8
|
+
- Automatically detects the user's preferred language
|
|
9
|
+
- Falls back to a default language if needed
|
|
10
|
+
- Proxy-based access to translation strings
|
|
11
|
+
- Supports `onready`, `onchange` and `onerror` events
|
|
12
|
+
- Simple to use in any Imba-based web application
|
|
13
|
+
|
|
14
|
+
## π¦ Installation
|
|
15
|
+
|
|
16
|
+
Just include the module in your project or copy the class directly into your codebase.
|
|
17
|
+
```bash
|
|
18
|
+
npm install imba-localization-loader
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
## π Usage
|
|
22
|
+
|
|
23
|
+
First of all, preload the localization file in HTML head, so it is loaded simultaniously with the application itself:
|
|
24
|
+
```html
|
|
25
|
+
<!DOCTYPE html>
|
|
26
|
+
<html lang="en">
|
|
27
|
+
<head>
|
|
28
|
+
...
|
|
29
|
+
<link rel="preload" href="ADDRESS_TO_JSON" as="fetch" type="application/json" crossorigin="anonymous"/>
|
|
30
|
+
...
|
|
31
|
+
</head>
|
|
32
|
+
<body>
|
|
33
|
+
</body>
|
|
34
|
+
</html>
|
|
35
|
+
```
|
|
36
|
+
Such localization file can be placed on any static hosting. In my experience Github Pages works perfectly for that purpose. Moreover, it also allows to update localization by just pushing updated file to the repository.
|
|
37
|
+
|
|
38
|
+
Hereβs an example of how to use it in an Imba app:
|
|
39
|
+
|
|
40
|
+
```imba
|
|
41
|
+
# app.imba
|
|
42
|
+
|
|
43
|
+
import Localization from 'imba-localization-loader'
|
|
44
|
+
|
|
45
|
+
# To create an instance pass the address to the JSON and (optionally) default language
|
|
46
|
+
const loc = new Localization("ADDRESS_TO_JSON", "en")
|
|
47
|
+
|
|
48
|
+
loc.onready = do
|
|
49
|
+
console.log loc['hello'] # Output: "Hello" (or translated value)
|
|
50
|
+
console.log loc['goodbye'] # Output: "Goodbye" (or translated value)
|
|
51
|
+
|
|
52
|
+
loc.onerror = do(msg, err)
|
|
53
|
+
console.error "Localization load error:", msg, err
|
|
54
|
+
|
|
55
|
+
loc.change = do(language)
|
|
56
|
+
console.error "Language changed:", language
|
|
57
|
+
|
|
58
|
+
# Later in your app, you can switch the language:
|
|
59
|
+
loc.active = "fr" # Sets the active language to French (if available)
|
|
60
|
+
|
|
61
|
+
# The language file can be structured and accessed as usual:
|
|
62
|
+
console.log loc['forms']['login']['buttons']['enter']
|
|
63
|
+
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
## π JSON File Format
|
|
67
|
+
|
|
68
|
+
The localization file (`/lang.json`) should look like this:
|
|
69
|
+
|
|
70
|
+
```json
|
|
71
|
+
{
|
|
72
|
+
"en": {
|
|
73
|
+
"hello": "Hello",
|
|
74
|
+
"goodbye": "Goodbye"
|
|
75
|
+
},
|
|
76
|
+
"fr": {
|
|
77
|
+
"hello": "Bonjour",
|
|
78
|
+
"goodbye": "Au revoir"
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
## π Notes
|
|
84
|
+
|
|
85
|
+
- The module attempts to detect the language from `window.navigator.language`, using the first two characters (e.g., `en` from `en-US`).
|
|
86
|
+
- If the preferred language isn't available, it uses `'en'` by default.
|
package/index.imba
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
export default class Localization
|
|
2
|
+
onready
|
|
3
|
+
onerror
|
|
4
|
+
onchange
|
|
5
|
+
languages = {}
|
|
6
|
+
preferred = (window..navigator..language || 'en-US').slice(0, 2)
|
|
7
|
+
#active
|
|
8
|
+
default
|
|
9
|
+
|
|
10
|
+
def constructor url, dft = 'en'
|
|
11
|
+
default = dft
|
|
12
|
+
window.fetch(url)
|
|
13
|
+
.then(do(response) response.json!)
|
|
14
|
+
.then(do(data) _finalize(data, undefined))
|
|
15
|
+
.catch(do(error) _finalize(undefined, error))
|
|
16
|
+
|
|
17
|
+
return new Proxy self, {
|
|
18
|
+
get: do(target, p, receiver)
|
|
19
|
+
return Reflect.get(target, p, receiver) if self[p]
|
|
20
|
+
return target.languages[active][p] if target.languages[active] and target.languages[active][p]
|
|
21
|
+
return ''
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
def _finalize data, error
|
|
25
|
+
if error
|
|
26
|
+
if onerror isa Function
|
|
27
|
+
onerror('no_localization_file',error)
|
|
28
|
+
else
|
|
29
|
+
console.log('Localization file was not loaded', error)
|
|
30
|
+
return
|
|
31
|
+
languages = data if data
|
|
32
|
+
if !languages[default]
|
|
33
|
+
if onerror isa Function
|
|
34
|
+
onerror('no_default_localization')
|
|
35
|
+
else
|
|
36
|
+
console.log('There is no Localization for the default language', default)
|
|
37
|
+
return
|
|
38
|
+
#active = languages[preferred] ? preferred : default
|
|
39
|
+
onready! if onready isa Function
|
|
40
|
+
|
|
41
|
+
get active
|
|
42
|
+
return languages[#active] ? #active : default
|
|
43
|
+
|
|
44
|
+
set active name
|
|
45
|
+
if languages[name]
|
|
46
|
+
#active = name
|
|
47
|
+
onchange(name) if onchange isa Function
|
|
48
|
+
else
|
|
49
|
+
console.log('Localization for the language not found', name)
|
package/package.json
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "imba-localization",
|
|
3
|
+
"version": "0.0.8",
|
|
4
|
+
"repository": {
|
|
5
|
+
"type": "git",
|
|
6
|
+
"url": "git+https://github.com/HeapVoid/imba-localization.git"
|
|
7
|
+
},
|
|
8
|
+
"main": "./index.imba",
|
|
9
|
+
"devDependencies": {
|
|
10
|
+
"imba": "latest"
|
|
11
|
+
},
|
|
12
|
+
"description": "A class to make using language localizations in Imba easier.",
|
|
13
|
+
"keywords": ["imba", "theme", "localization"],
|
|
14
|
+
"license": "MIT",
|
|
15
|
+
"type": "module"
|
|
16
|
+
}
|