@operato/i18n 8.0.0-beta.0 β 8.0.0-beta.2
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/CHANGELOG.md +18 -0
- package/package.json +2 -2
- package/.editorconfig +0 -29
- package/.storybook/main.js +0 -3
- package/.storybook/preview.js +0 -52
- package/.storybook/server.mjs +0 -8
- package/demo/index.html +0 -73
- package/src/config.ts +0 -44
- package/src/http-backend/index.ts +0 -167
- package/src/http-backend/request.ts +0 -53
- package/src/http-backend/utils.ts +0 -25
- package/src/index.ts +0 -8
- package/src/localize.ts +0 -42
- package/src/ox-i18n-selector.ts +0 -71
- package/src/ox-i18n.ts +0 -18
- package/tsconfig.json +0 -24
- package/web-dev-server.config.mjs +0 -27
- package/web-test-runner.config.mjs +0 -41
package/CHANGELOG.md
CHANGED
@@ -3,6 +3,24 @@
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
5
5
|
|
6
|
+
## [8.0.0-beta.2](https://github.com/hatiolab/operato/compare/v8.0.0-beta.1...v8.0.0-beta.2) (2025-01-08)
|
7
|
+
|
8
|
+
|
9
|
+
### :bug: Bug Fix
|
10
|
+
|
11
|
+
* typo .npmignore ([d9c0c8c](https://github.com/hatiolab/operato/commit/d9c0c8c79abc688c3c2cfb6c37fcb689483a5977))
|
12
|
+
|
13
|
+
|
14
|
+
|
15
|
+
## [8.0.0-beta.1](https://github.com/hatiolab/operato/compare/v8.0.0-beta.0...v8.0.0-beta.1) (2025-01-08)
|
16
|
+
|
17
|
+
|
18
|
+
### :bug: Bug Fix
|
19
|
+
|
20
|
+
* missing .npmignore ([be05985](https://github.com/hatiolab/operato/commit/be05985abfae4af53501f718dd52932099f7fbcb))
|
21
|
+
|
22
|
+
|
23
|
+
|
6
24
|
## [8.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-alpha.56...v8.0.0-beta.0) (2025-01-07)
|
7
25
|
|
8
26
|
**Note:** Version bump only for package @operato/i18n
|
package/package.json
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
"name": "@operato/i18n",
|
3
3
|
"description": "Webcomponent i18n following open-wc recommendations",
|
4
4
|
"author": "heartyoh",
|
5
|
-
"version": "8.0.0-beta.
|
5
|
+
"version": "8.0.0-beta.2",
|
6
6
|
"main": "dist/src/index.js",
|
7
7
|
"module": "dist/src/index.js",
|
8
8
|
"exports": {
|
@@ -90,5 +90,5 @@
|
|
90
90
|
"prettier --write"
|
91
91
|
]
|
92
92
|
},
|
93
|
-
"gitHead": "
|
93
|
+
"gitHead": "ee1b5124995accb99272d3b5854f3df1d8746dda"
|
94
94
|
}
|
package/.editorconfig
DELETED
@@ -1,29 +0,0 @@
|
|
1
|
-
# EditorConfig helps developers define and maintain consistent
|
2
|
-
# coding styles between different editors and IDEs
|
3
|
-
# editorconfig.org
|
4
|
-
|
5
|
-
root = true
|
6
|
-
|
7
|
-
|
8
|
-
[*]
|
9
|
-
|
10
|
-
# Change these settings to your own preference
|
11
|
-
indent_style = space
|
12
|
-
indent_size = 2
|
13
|
-
|
14
|
-
# We recommend you to keep these unchanged
|
15
|
-
end_of_line = lf
|
16
|
-
charset = utf-8
|
17
|
-
trim_trailing_whitespace = true
|
18
|
-
insert_final_newline = true
|
19
|
-
|
20
|
-
[*.md]
|
21
|
-
trim_trailing_whitespace = false
|
22
|
-
|
23
|
-
[*.json]
|
24
|
-
indent_size = 2
|
25
|
-
|
26
|
-
[*.{html,js,md}]
|
27
|
-
block_comment_start = /**
|
28
|
-
block_comment = *
|
29
|
-
block_comment_end = */
|
package/.storybook/main.js
DELETED
package/.storybook/preview.js
DELETED
@@ -1,52 +0,0 @@
|
|
1
|
-
import { i18next } from '@operato/i18n'
|
2
|
-
|
3
|
-
export const globalTypes = {
|
4
|
-
locale: {
|
5
|
-
name: 'Locale',
|
6
|
-
description: 'Internationalization locale',
|
7
|
-
toolbar: {
|
8
|
-
icon: 'globe',
|
9
|
-
items: [
|
10
|
-
{ value: 'en', right: 'πΊπΈ', title: 'English' },
|
11
|
-
{ value: 'ko', right: 'π°π·', title: 'νκ΅μ΄' },
|
12
|
-
{ value: 'zh', right: 'π¨π³', title: 'δΈζ' },
|
13
|
-
{ value: 'ja', right: 'π―π΅', title: 'ζ₯ζ¬θͺ' },
|
14
|
-
{ value: 'ms', right: 'π²πΎ', title: 'Bahasa Melayu' }
|
15
|
-
],
|
16
|
-
showName: true
|
17
|
-
}
|
18
|
-
},
|
19
|
-
theme: {
|
20
|
-
name: 'Theme',
|
21
|
-
description: 'Global theme for components',
|
22
|
-
toolbar: {
|
23
|
-
icon: 'paintbrush',
|
24
|
-
items: [
|
25
|
-
{ value: 'light', title: 'Light' },
|
26
|
-
{ value: 'dark', title: 'Dark' }
|
27
|
-
],
|
28
|
-
showName: true
|
29
|
-
}
|
30
|
-
}
|
31
|
-
}
|
32
|
-
|
33
|
-
export const decorators = [
|
34
|
-
(Story, context) => {
|
35
|
-
const { locale, theme } = context.globals
|
36
|
-
|
37
|
-
if (locale) {
|
38
|
-
i18next.changeLanguage(locale)
|
39
|
-
}
|
40
|
-
|
41
|
-
// Set the theme class for the document
|
42
|
-
if (theme === 'dark') {
|
43
|
-
document.documentElement.classList.add('dark')
|
44
|
-
document.documentElement.classList.remove('light')
|
45
|
-
} else {
|
46
|
-
document.documentElement.classList.add('light')
|
47
|
-
document.documentElement.classList.remove('dark')
|
48
|
-
}
|
49
|
-
|
50
|
-
return Story()
|
51
|
-
}
|
52
|
-
]
|
package/.storybook/server.mjs
DELETED
@@ -1,8 +0,0 @@
|
|
1
|
-
import { storybookPlugin } from '@web/dev-server-storybook';
|
2
|
-
import baseConfig from '../web-dev-server.config.mjs';
|
3
|
-
|
4
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
5
|
-
...baseConfig,
|
6
|
-
open: '/',
|
7
|
-
plugins: [storybookPlugin({ type: 'web-components' }), ...baseConfig.plugins],
|
8
|
-
});
|
package/demo/index.html
DELETED
@@ -1,73 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html lang="en-GB">
|
3
|
-
<head>
|
4
|
-
<meta charset="utf-8" />
|
5
|
-
<base href="/demo/" />
|
6
|
-
|
7
|
-
<style>
|
8
|
-
body {
|
9
|
-
background: #fafafa;
|
10
|
-
}
|
11
|
-
|
12
|
-
#demo {
|
13
|
-
position: relative;
|
14
|
-
height: 100px;
|
15
|
-
background-color: lightgray;
|
16
|
-
text-align: center;
|
17
|
-
vertical-align: middle;
|
18
|
-
}
|
19
|
-
</style>
|
20
|
-
</head>
|
21
|
-
<body>
|
22
|
-
<div id="demo"></div>
|
23
|
-
|
24
|
-
<script type="module">
|
25
|
-
import { html, render } from 'lit'
|
26
|
-
import { i18next } from '../dist/src/config.js'
|
27
|
-
import '../dist/src/ox-i18n.js'
|
28
|
-
import '../dist/src/ox-i18n-selector.js'
|
29
|
-
|
30
|
-
const languages = [
|
31
|
-
{
|
32
|
-
code: 'en',
|
33
|
-
display: 'English'
|
34
|
-
},
|
35
|
-
{
|
36
|
-
code: 'ko',
|
37
|
-
display: 'νκ΅μ΄'
|
38
|
-
},
|
39
|
-
{
|
40
|
-
code: 'zh',
|
41
|
-
display: 'δΈζ'
|
42
|
-
},
|
43
|
-
{
|
44
|
-
code: 'ja',
|
45
|
-
display: 'γ«γ»γγ'
|
46
|
-
},
|
47
|
-
{
|
48
|
-
code: 'ms',
|
49
|
-
display: 'Bahasa Malaysia'
|
50
|
-
}
|
51
|
-
]
|
52
|
-
|
53
|
-
const parent = document.querySelector('#demo')
|
54
|
-
|
55
|
-
render(
|
56
|
-
html`
|
57
|
-
Translated :
|
58
|
-
<ox-i18n msgid="text.operato"></ox-i18n>
|
59
|
-
<ox-i18n-selector
|
60
|
-
.value=${i18next.language || 'en-US'}
|
61
|
-
.languages=${languages}
|
62
|
-
@change=${e => {
|
63
|
-
var locale = e.detail
|
64
|
-
locale && i18next.changeLanguage(locale)
|
65
|
-
}}
|
66
|
-
>
|
67
|
-
</ox-i18n-selector>
|
68
|
-
`,
|
69
|
-
parent
|
70
|
-
)
|
71
|
-
</script>
|
72
|
-
</body>
|
73
|
-
</html>
|
package/src/config.ts
DELETED
@@ -1,44 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright Β© HatioLab Inc. All rights reserved.
|
3
|
-
*/
|
4
|
-
|
5
|
-
import { Backend } from './http-backend'
|
6
|
-
import LngDetector from 'i18next-browser-languagedetector'
|
7
|
-
import _i18next from 'i18next'
|
8
|
-
|
9
|
-
const subdomain = location.pathname.match(/\/domain\/([^\/]+)/)?.[1]
|
10
|
-
|
11
|
-
_i18next
|
12
|
-
.use(LngDetector)
|
13
|
-
.use(Backend)
|
14
|
-
.init({
|
15
|
-
fallbackLng: 'en',
|
16
|
-
debug: true,
|
17
|
-
ns: ['translations'],
|
18
|
-
defaultNS: 'translations',
|
19
|
-
keySeparator: false,
|
20
|
-
interpolation: {
|
21
|
-
prefix: '{',
|
22
|
-
suffix: '}'
|
23
|
-
},
|
24
|
-
load: 'languageOnly',
|
25
|
-
backend: {
|
26
|
-
loadPath: subdomain ? `/domain/${subdomain}/{ns}/{lng}.json` : `/{ns}/{lng}.json`
|
27
|
-
},
|
28
|
-
detection: {
|
29
|
-
// order and from where user language should be detected
|
30
|
-
order: ['cookie'],
|
31
|
-
|
32
|
-
// keys or params to lookup language from
|
33
|
-
lookupCookie: 'i18next',
|
34
|
-
|
35
|
-
// cache user language on
|
36
|
-
caches: ['cookie'],
|
37
|
-
excludeCacheFor: ['cimode'], // languages to not persist (cookie, localStorage)
|
38
|
-
|
39
|
-
// optional set cookie options, reference:[MDN Set-Cookie docs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie)
|
40
|
-
cookieOptions: { path: '/', sameSite: 'strict' }
|
41
|
-
}
|
42
|
-
})
|
43
|
-
|
44
|
-
export const i18next = _i18next
|
@@ -1,167 +0,0 @@
|
|
1
|
-
// migrated from https://github.com/i18next/i18next-http-backend
|
2
|
-
// due to import module problem
|
3
|
-
|
4
|
-
import { ModuleType } from 'i18next'
|
5
|
-
import { makePromise } from './utils.js'
|
6
|
-
import { request } from './request.js'
|
7
|
-
|
8
|
-
const getDefaults = () => {
|
9
|
-
return {
|
10
|
-
loadPath: '/locales/{{lng}}/{{ns}}.json',
|
11
|
-
addPath: '/locales/add/{{lng}}/{{ns}}',
|
12
|
-
allowMultiLoading: false,
|
13
|
-
parse: (data: any) => JSON.parse(data),
|
14
|
-
stringify: JSON.stringify,
|
15
|
-
parsePayload: (namespace: any, key: string, fallbackValue: any) => ({ [key]: fallbackValue || '' }),
|
16
|
-
request,
|
17
|
-
reloadInterval: typeof window !== 'undefined' ? false : 60 * 60 * 1000,
|
18
|
-
customHeaders: {},
|
19
|
-
queryStringParams: {},
|
20
|
-
crossDomain: false, // used for XmlHttpRequest
|
21
|
-
withCredentials: false, // used for XmlHttpRequest
|
22
|
-
overrideMimeType: false, // used for XmlHttpRequest
|
23
|
-
requestOptions: {
|
24
|
-
// used for fetch
|
25
|
-
mode: 'cors',
|
26
|
-
credentials: 'same-origin',
|
27
|
-
cache: 'default'
|
28
|
-
}
|
29
|
-
}
|
30
|
-
}
|
31
|
-
|
32
|
-
export class Backend {
|
33
|
-
static type: ModuleType = 'backend'
|
34
|
-
|
35
|
-
services: any
|
36
|
-
options: any
|
37
|
-
allOptions: any
|
38
|
-
type: string
|
39
|
-
|
40
|
-
constructor(services: any, options: any = {}, allOptions: any = {}) {
|
41
|
-
this.services = services
|
42
|
-
this.options = options
|
43
|
-
this.allOptions = allOptions
|
44
|
-
this.type = 'backend'
|
45
|
-
this.init(services, options, allOptions)
|
46
|
-
}
|
47
|
-
|
48
|
-
init(services: any, options: any = {}, allOptions: any = {}) {
|
49
|
-
this.services = services
|
50
|
-
this.options = {
|
51
|
-
...getDefaults(),
|
52
|
-
...this.options,
|
53
|
-
...options
|
54
|
-
}
|
55
|
-
this.allOptions = allOptions
|
56
|
-
if (this.services && this.options.reloadInterval) {
|
57
|
-
setInterval(() => this.reload(), this.options.reloadInterval)
|
58
|
-
}
|
59
|
-
}
|
60
|
-
|
61
|
-
readMulti(languages: any, namespaces: any, callback: any) {
|
62
|
-
this._readAny(languages, languages, namespaces, namespaces, callback)
|
63
|
-
}
|
64
|
-
|
65
|
-
read(language: any, namespace: any, callback: any) {
|
66
|
-
this._readAny([language], language, [namespace], namespace, callback)
|
67
|
-
}
|
68
|
-
|
69
|
-
_readAny(languages: any, loadUrlLanguages: any, namespaces: any, loadUrlNamespaces: any, callback: any) {
|
70
|
-
let loadPath = this.options.loadPath
|
71
|
-
if (typeof this.options.loadPath === 'function') {
|
72
|
-
loadPath = this.options.loadPath(languages, namespaces)
|
73
|
-
}
|
74
|
-
|
75
|
-
loadPath = makePromise(loadPath)
|
76
|
-
|
77
|
-
loadPath.then((resolvedLoadPath: any) => {
|
78
|
-
const url = this.services.interpolator.interpolate(resolvedLoadPath, {
|
79
|
-
lng: languages.join('+'),
|
80
|
-
ns: namespaces.join('+')
|
81
|
-
})
|
82
|
-
this.loadUrl(url, callback, loadUrlLanguages, loadUrlNamespaces)
|
83
|
-
})
|
84
|
-
}
|
85
|
-
|
86
|
-
loadUrl(url: string, callback: any, languages: any, namespaces: any) {
|
87
|
-
this.options.request(this.options, url, undefined, (err: any, res: any) => {
|
88
|
-
if (res && ((res.status >= 500 && res.status < 600) || !res.status))
|
89
|
-
return callback('failed loading ' + url + '; status code: ' + res.status, true /* retry */)
|
90
|
-
if (res && res.status >= 400 && res.status < 500)
|
91
|
-
return callback('failed loading ' + url + '; status code: ' + res.status, false /* no retry */)
|
92
|
-
if (!res && err && err.message && err.message.indexOf('Failed to fetch') > -1)
|
93
|
-
return callback('failed loading ' + url + ': ' + err.message, true /* retry */)
|
94
|
-
if (err) return callback(err, false)
|
95
|
-
|
96
|
-
let ret, parseErr
|
97
|
-
try {
|
98
|
-
if (typeof res.data === 'string') {
|
99
|
-
ret = this.options.parse(res.data, languages, namespaces)
|
100
|
-
} else {
|
101
|
-
// fallback, which omits calling the parse function
|
102
|
-
ret = res.data
|
103
|
-
}
|
104
|
-
} catch (e) {
|
105
|
-
parseErr = 'failed parsing ' + url + ' to json'
|
106
|
-
}
|
107
|
-
if (parseErr) return callback(parseErr, false)
|
108
|
-
callback(null, ret)
|
109
|
-
})
|
110
|
-
}
|
111
|
-
|
112
|
-
create(languages: any, namespace: any, key: any, fallbackValue: any, callback: any) {
|
113
|
-
// If there is a falsey addPath, then abort -- this has been disabled.
|
114
|
-
if (!this.options.addPath) return
|
115
|
-
if (typeof languages === 'string') languages = [languages]
|
116
|
-
const payload = this.options.parsePayload(namespace, key, fallbackValue)
|
117
|
-
let finished = 0
|
118
|
-
const dataArray: any = []
|
119
|
-
const resArray: any = []
|
120
|
-
languages.forEach((lng: any) => {
|
121
|
-
let addPath = this.options.addPath
|
122
|
-
if (typeof this.options.addPath === 'function') {
|
123
|
-
addPath = this.options.addPath(lng, namespace)
|
124
|
-
}
|
125
|
-
const url = this.services.interpolator.interpolate(addPath, { lng: lng, ns: namespace })
|
126
|
-
|
127
|
-
this.options.request(this.options, url, payload, (data: any, res: any) => {
|
128
|
-
// TODO: if res.status === 4xx do log
|
129
|
-
finished += 1
|
130
|
-
dataArray.push(data)
|
131
|
-
resArray.push(res)
|
132
|
-
if (finished === languages.length) {
|
133
|
-
if (callback) callback(dataArray, resArray)
|
134
|
-
}
|
135
|
-
})
|
136
|
-
})
|
137
|
-
}
|
138
|
-
|
139
|
-
reload() {
|
140
|
-
const { backendConnector, languageUtils, logger } = this.services
|
141
|
-
const currentLanguage = backendConnector.language
|
142
|
-
if (currentLanguage && currentLanguage.toLowerCase() === 'cimode') return // avoid loading resources for cimode
|
143
|
-
|
144
|
-
const toLoad: any = []
|
145
|
-
const append = (lng: any) => {
|
146
|
-
const lngs = languageUtils.toResolveHierarchy(lng)
|
147
|
-
lngs.forEach((l: any) => {
|
148
|
-
if (toLoad.indexOf(l) < 0) toLoad.push(l)
|
149
|
-
})
|
150
|
-
}
|
151
|
-
|
152
|
-
append(currentLanguage)
|
153
|
-
|
154
|
-
if (this.allOptions.preload) this.allOptions.preload.forEach((l: any) => append(l))
|
155
|
-
|
156
|
-
toLoad.forEach((lng: any) => {
|
157
|
-
this.allOptions.ns.forEach((ns: any) => {
|
158
|
-
backendConnector.read(lng, ns, 'read', null, null, (err: any, data: any) => {
|
159
|
-
if (err) logger.warn(`loading namespace ${ns} for language ${lng} failed`, err)
|
160
|
-
if (!err && data) logger.log(`loaded namespace ${ns} for language ${lng}`, data)
|
161
|
-
|
162
|
-
backendConnector.loaded(`${lng}|${ns}`, err, data)
|
163
|
-
})
|
164
|
-
})
|
165
|
-
})
|
166
|
-
}
|
167
|
-
}
|
@@ -1,53 +0,0 @@
|
|
1
|
-
const addQueryString = (url: string, params: any) => {
|
2
|
-
if (params && typeof params === 'object') {
|
3
|
-
let queryString = ''
|
4
|
-
// Must encode data
|
5
|
-
for (const paramName in params) {
|
6
|
-
queryString += '&' + encodeURIComponent(paramName) + '=' + encodeURIComponent(params[paramName])
|
7
|
-
}
|
8
|
-
if (!queryString) return url
|
9
|
-
url = url + (url.indexOf('?') !== -1 ? '&' : '?') + queryString.slice(1)
|
10
|
-
}
|
11
|
-
|
12
|
-
return url
|
13
|
-
}
|
14
|
-
|
15
|
-
// fetch api stuff
|
16
|
-
const requestWithFetch = (options: any, url: any, payload: any, callback: (status: any, obj?: any) => void) => {
|
17
|
-
if (options.queryStringParams) {
|
18
|
-
url = addQueryString(url, options.queryStringParams)
|
19
|
-
}
|
20
|
-
const headers = typeof options.customHeaders === 'function' ? options.customHeaders() : options.customHeaders
|
21
|
-
|
22
|
-
if (payload) headers['Content-Type'] = 'application/json'
|
23
|
-
fetch(url, {
|
24
|
-
...(typeof options.requestOptions === 'function' ? options.requestOptions(payload) : options.requestOptions),
|
25
|
-
method: payload ? 'POST' : 'GET',
|
26
|
-
body: payload ? options.stringify(payload) : undefined,
|
27
|
-
headers
|
28
|
-
})
|
29
|
-
.then(response => {
|
30
|
-
if (!response.ok) return callback(response.statusText || 'Error', { status: response.status })
|
31
|
-
response
|
32
|
-
.text()
|
33
|
-
.then(data => {
|
34
|
-
callback(null, { status: response.status, data })
|
35
|
-
})
|
36
|
-
.catch(callback)
|
37
|
-
})
|
38
|
-
.catch(callback)
|
39
|
-
}
|
40
|
-
|
41
|
-
export const request = (
|
42
|
-
options: any,
|
43
|
-
url: any,
|
44
|
-
payload: any,
|
45
|
-
callback: (status: string, obj: { status: number }) => void
|
46
|
-
) => {
|
47
|
-
if (typeof payload === 'function') {
|
48
|
-
callback = payload
|
49
|
-
payload = undefined
|
50
|
-
}
|
51
|
-
|
52
|
-
return requestWithFetch(options, url, payload, callback || (() => {}))
|
53
|
-
}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* Determine whether the given `maybePromise` is a Promise.
|
3
|
-
*
|
4
|
-
* @param {*} maybePromise
|
5
|
-
*
|
6
|
-
* @returns {Boolean}
|
7
|
-
*/
|
8
|
-
function isPromise(maybePromise: any) {
|
9
|
-
return !!maybePromise && typeof maybePromise.then === 'function'
|
10
|
-
}
|
11
|
-
|
12
|
-
/**
|
13
|
-
* Convert any value to a Promise than will resolve to this value.
|
14
|
-
*
|
15
|
-
* @param {*} maybePromise
|
16
|
-
*
|
17
|
-
* @returns {Promise}
|
18
|
-
*/
|
19
|
-
export function makePromise(maybePromise: any) {
|
20
|
-
if (isPromise(maybePromise)) {
|
21
|
-
return maybePromise
|
22
|
-
}
|
23
|
-
|
24
|
-
return Promise.resolve(maybePromise)
|
25
|
-
}
|
package/src/index.ts
DELETED
package/src/localize.ts
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright Β© HatioLab Inc. All rights reserved.
|
3
|
-
*/
|
4
|
-
|
5
|
-
import { i18n } from 'i18next'
|
6
|
-
import { LitElement } from 'lit'
|
7
|
-
|
8
|
-
type Constructor<T = {}> = new (...args: any[]) => T
|
9
|
-
|
10
|
-
export const localize =
|
11
|
-
(i18next: i18n) =>
|
12
|
-
<T extends Constructor<LitElement>>(superClass: T) => {
|
13
|
-
class LocalizedElement extends superClass {
|
14
|
-
private declare languageUpdated?: (i18next: i18n) => void
|
15
|
-
private __i18next_callback__?: () => void
|
16
|
-
|
17
|
-
connectedCallback() {
|
18
|
-
var callback = () => {
|
19
|
-
this.languageUpdated && this.languageUpdated(i18next)
|
20
|
-
this.requestUpdate()
|
21
|
-
}
|
22
|
-
|
23
|
-
i18next.on('initialized', callback)
|
24
|
-
i18next.on('languageChanged', callback)
|
25
|
-
i18next.store.on('added', callback)
|
26
|
-
|
27
|
-
this.__i18next_callback__ = callback
|
28
|
-
|
29
|
-
super.connectedCallback()
|
30
|
-
}
|
31
|
-
|
32
|
-
disconnectedCallback() {
|
33
|
-
super.connectedCallback()
|
34
|
-
|
35
|
-
i18next.off('initialized', this.__i18next_callback__)
|
36
|
-
i18next.off('languageChanged', this.__i18next_callback__)
|
37
|
-
i18next.store.off('added', this.__i18next_callback__)
|
38
|
-
}
|
39
|
-
}
|
40
|
-
|
41
|
-
return LocalizedElement as Constructor<LitElement> & T
|
42
|
-
}
|
package/src/ox-i18n-selector.ts
DELETED
@@ -1,71 +0,0 @@
|
|
1
|
-
import { css, html, LitElement } from 'lit'
|
2
|
-
import { customElement, property } from 'lit/decorators.js'
|
3
|
-
|
4
|
-
@customElement('ox-i18n-selector')
|
5
|
-
export class I18nSelector extends LitElement {
|
6
|
-
static styles = css`
|
7
|
-
* {
|
8
|
-
box-sizing: border-box;
|
9
|
-
}
|
10
|
-
*:focus {
|
11
|
-
outline: none;
|
12
|
-
}
|
13
|
-
select {
|
14
|
-
border: var(--i18n-selector-field-border, var(--input-field-border));
|
15
|
-
border-radius: var(--i18n-selector-field-border-radius, 0);
|
16
|
-
background-color: var(--i18n-selector-field-background-color, var(--md-sys-color-surface));
|
17
|
-
margin: var(--i18n-selector-field-margin, 0);
|
18
|
-
padding: var(--i18n-selector-field-padding, 0);
|
19
|
-
font: var(--i18n-selector-field-font, var(--input-field-font));
|
20
|
-
font-size: var(--i18n-selector-field-font-size, 15px);
|
21
|
-
width: var(--i18n-selector-field-width, 100%);
|
22
|
-
color: var(--i18n-selector-field-color, var(--md-sys-color-on-surface));
|
23
|
-
}
|
24
|
-
select:focus {
|
25
|
-
border: 1px solid var(--focus-background-color);
|
26
|
-
}
|
27
|
-
option {
|
28
|
-
background-color: var(--md-sys-color-on-primary-container, #585858);
|
29
|
-
color: var(--md-sys-color-surface, #fff);
|
30
|
-
}
|
31
|
-
|
32
|
-
::placeholder {
|
33
|
-
font-size: 0.8rem;
|
34
|
-
text-transform: capitalize;
|
35
|
-
}
|
36
|
-
`
|
37
|
-
|
38
|
-
@property({ type: String, attribute: true }) value: string = ''
|
39
|
-
@property({ type: Array }) languages: { code: string; display: string }[] = []
|
40
|
-
|
41
|
-
render() {
|
42
|
-
const value = this.value
|
43
|
-
|
44
|
-
return html`
|
45
|
-
<select .value=${this.value} @change=${(e: Event) => this.onLocaleChanged((e.target as HTMLSelectElement).value)}>
|
46
|
-
<option value="" ?selected=${!value}></option>
|
47
|
-
${(this.languages || []).map(
|
48
|
-
({ code, display }) => html`
|
49
|
-
<option value=${code} ?selected=${value?.startsWith(code.substring(0, 2))}>${display}</option>
|
50
|
-
`
|
51
|
-
)}
|
52
|
-
</select>
|
53
|
-
`
|
54
|
-
}
|
55
|
-
|
56
|
-
async onLocaleChanged(value: string) {
|
57
|
-
if (!value) {
|
58
|
-
return
|
59
|
-
}
|
60
|
-
|
61
|
-
this.value = value
|
62
|
-
|
63
|
-
this.dispatchEvent(
|
64
|
-
new CustomEvent('change', {
|
65
|
-
composed: true,
|
66
|
-
bubbles: true,
|
67
|
-
detail: value
|
68
|
-
})
|
69
|
-
)
|
70
|
-
}
|
71
|
-
}
|
package/src/ox-i18n.ts
DELETED
@@ -1,18 +0,0 @@
|
|
1
|
-
/**
|
2
|
-
* @license Copyright Β© HatioLab Inc. All rights reserved.
|
3
|
-
*/
|
4
|
-
|
5
|
-
import { html, LitElement, css } from 'lit'
|
6
|
-
import { customElement, property } from 'lit/decorators.js'
|
7
|
-
|
8
|
-
import { i18next } from './config'
|
9
|
-
import { localize } from './localize'
|
10
|
-
|
11
|
-
@customElement('ox-i18n')
|
12
|
-
export class OxI18n extends localize(i18next)(LitElement) {
|
13
|
-
@property({ type: String }) msgid!: string
|
14
|
-
|
15
|
-
render() {
|
16
|
-
return html`<span>${i18next.t(this.msgid)}</span>`
|
17
|
-
}
|
18
|
-
}
|
package/tsconfig.json
DELETED
@@ -1,24 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"compilerOptions": {
|
3
|
-
"target": "es2018",
|
4
|
-
"module": "esnext",
|
5
|
-
"moduleResolution": "node",
|
6
|
-
"noEmitOnError": true,
|
7
|
-
"lib": ["es2017", "dom"],
|
8
|
-
"strict": true,
|
9
|
-
"esModuleInterop": false,
|
10
|
-
"allowSyntheticDefaultImports": true,
|
11
|
-
"experimentalDecorators": true,
|
12
|
-
"useDefineForClassFields": false,
|
13
|
-
"importHelpers": true,
|
14
|
-
"outDir": "dist",
|
15
|
-
"sourceMap": true,
|
16
|
-
"inlineSources": true,
|
17
|
-
"rootDir": "./",
|
18
|
-
"declaration": true,
|
19
|
-
"incremental": true,
|
20
|
-
"skipLibCheck": true,
|
21
|
-
"types": ["node", "mocha"]
|
22
|
-
},
|
23
|
-
"include": ["**/*.ts"]
|
24
|
-
}
|
@@ -1,27 +0,0 @@
|
|
1
|
-
// import { hmrPlugin, presets } from '@open-wc/dev-server-hmr';
|
2
|
-
|
3
|
-
/** Use Hot Module replacement by adding --hmr to the start command */
|
4
|
-
const hmr = process.argv.includes('--hmr')
|
5
|
-
|
6
|
-
export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
|
7
|
-
open: '/demo/',
|
8
|
-
/** Use regular watch mode if HMR is not enabled. */
|
9
|
-
watch: !hmr,
|
10
|
-
/** Resolve bare module imports */
|
11
|
-
nodeResolve: {
|
12
|
-
exportConditions: ['browser', 'development']
|
13
|
-
},
|
14
|
-
|
15
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
16
|
-
esbuildTarget: 'auto',
|
17
|
-
|
18
|
-
/** Set appIndex to enable SPA routing */
|
19
|
-
// appIndex: 'demo/index.html',
|
20
|
-
|
21
|
-
plugins: [
|
22
|
-
/** Use Hot Module Replacement by uncommenting. Requires @open-wc/dev-server-hmr plugin */
|
23
|
-
// hmr && hmrPlugin({ exclude: ['**/*/node_modules/**/*'], presets: [presets.litElement] }),
|
24
|
-
]
|
25
|
-
|
26
|
-
// See documentation for all available options
|
27
|
-
})
|
@@ -1,41 +0,0 @@
|
|
1
|
-
// import { playwrightLauncher } from '@web/test-runner-playwright';
|
2
|
-
|
3
|
-
const filteredLogs = ['Running in dev mode', 'lit-html is in dev mode'];
|
4
|
-
|
5
|
-
export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
|
6
|
-
/** Test files to run */
|
7
|
-
files: 'dist/test/**/*.test.js',
|
8
|
-
|
9
|
-
/** Resolve bare module imports */
|
10
|
-
nodeResolve: {
|
11
|
-
exportConditions: ['browser', 'development'],
|
12
|
-
},
|
13
|
-
|
14
|
-
/** Filter out lit dev mode logs */
|
15
|
-
filterBrowserLogs(log) {
|
16
|
-
for (const arg of log.args) {
|
17
|
-
if (typeof arg === 'string' && filteredLogs.some(l => arg.includes(l))) {
|
18
|
-
return false;
|
19
|
-
}
|
20
|
-
}
|
21
|
-
return true;
|
22
|
-
},
|
23
|
-
|
24
|
-
/** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
|
25
|
-
// esbuildTarget: 'auto',
|
26
|
-
|
27
|
-
/** Amount of browsers to run concurrently */
|
28
|
-
// concurrentBrowsers: 2,
|
29
|
-
|
30
|
-
/** Amount of test files per browser to test concurrently */
|
31
|
-
// concurrency: 1,
|
32
|
-
|
33
|
-
/** Browsers to run tests on */
|
34
|
-
// browsers: [
|
35
|
-
// playwrightLauncher({ product: 'chromium' }),
|
36
|
-
// playwrightLauncher({ product: 'firefox' }),
|
37
|
-
// playwrightLauncher({ product: 'webkit' }),
|
38
|
-
// ],
|
39
|
-
|
40
|
-
// See documentation for all available options
|
41
|
-
});
|