Make translations static and update electron

core/translate/directives/lang-changed-base.js

@@ -0,0 +1,40 @@
+import { AsyncDirective } from 'lit/async-directive.js'
+import { listenForLangChanged } from '../util.js'
+
+export class LangChangedDirectiveBase extends AsyncDirective {
+    constructor() {
+        super(...arguments)
+        this.langChangedSubscription = null
+        this.getValue = (() => "")
+    }
+
+    renderValue(getValue) {
+        this.getValue = getValue
+        this.subscribe()
+        return this.getValue()
+    }
+
+    langChanged(e) {
+        this.setValue(this.getValue(e))
+    }
+
+    subscribe() {
+        if (this.langChangedSubscription == null) {
+            this.langChangedSubscription = listenForLangChanged(this.langChanged.bind(this))
+        }
+    }
+
+    unsubscribe() {
+        if (this.langChangedSubscription != null) {
+            this.langChangedSubscription()
+        }
+    }
+
+    disconnected() {
+        this.unsubscribe()
+    }
+
+    reconnected() {
+        this.subscribe()
+    }
+}

core/translate/directives/lang-changed.js

@@ -0,0 +1,9 @@
+import { directive } from 'lit/directive.js'
+import { LangChangedDirectiveBase } from './lang-changed-base.js'
+
+export class LangChangedDirective extends LangChangedDirectiveBase {
+    render(getValue) {
+        return this.renderValue(getValue)
+    }
+}
+export const langChanged = directive(LangChangedDirective)

core/translate/directives/translate-unsafe-html.js

@@ -0,0 +1,12 @@
+import { directive } from 'lit/directive.js'
+import { unsafeHTML } from 'lit/directives/unsafe-html.js'
+import { TranslateDirective } from './translate.js'
+import { get } from '../util.js'
+
+export class TranslateUnsafeHTMLDirective extends TranslateDirective {
+    render(key, values, config) {
+        return this.renderValue(() => unsafeHTML(get(key, values, config)))
+    }
+}
+
+export const translateUnsafeHTML = directive(TranslateUnsafeHTMLDirective)

core/translate/directives/translate.js

@@ -0,0 +1,11 @@
+import { directive } from 'lit/directive.js'
+import { get } from '../util.js'
+import { LangChangedDirectiveBase } from './lang-changed-base.js'
+
+export class TranslateDirective extends LangChangedDirectiveBase {
+    render(key, values, config) {
+        return this.renderValue(() => get(key, values, config))
+    }
+}
+
+export const translate = directive(TranslateDirective)