I'm currently using lit-translate to localize my "Elmish" TypeScript website into different languages. My setup includes webpack and dotnet.
Within my index.ts file, I configure the translation like this:
registerTranslateConfig({
lookup: (key, config) => config.strings != null ? config.strings[key] : key,
empty: key => key,
loader: lang => {
return new Promise((resolve, reject) => {
resolve({"title": "Der Titel"});
})}
});
use("en");
(The loader being hardcoded is a temporary solution as fetching the localization file didn't work, but it's not crucial at the moment).
In my HTML, I utilize get("title") or translate("title") to fetch the translations.
However, instead of getting the translation, I get either [title] or
(part) => { partCache.set(part, cb); updatePart(part, cb); }If I store the result of translate() in a variable, I encounter the following error within the Object:
TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at Function.r (<anonymous>:1:83)
at Module../src/index.ts (http://localhost:8080/app.bundle.js:9800:10)
at __webpack_require__ (http://localhost:8080/app.bundle.js:12476:33)
at http://localhost:8080/app.bundle.js:13494:11
at http://localhost:8080/app.bundle.js:13497:12
I have attempted disabling webpack strict mode without success.
The complete class structure is shown below:
export class App extends Application<Model, Message, {}> {
@property({type: Boolean})
hasLoadedStrings = false;
init(): [Model, Cmd] {
const initModel: Model = {
openPage: [{title: "Home"}, home]
}
return [initModel, Cmd.none]
}
constructor() {
super();
this.hasLoadedStrings = false;
}
shouldUpdate (changedProperties: Map<string | number | symbol, unknown>) {
return this.hasLoadedStrings && super.shouldUpdate(changedProperties);
}
async connectedCallback () {
super.connectedCallback();
await use("en");
this.hasLoadedStrings = true;
}
}
customElements.define('my-element', App);