Make translations static and update electron

core/src/components/app-info.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../store.js'
 import {doPageUrl} from '../redux/app/app-actions.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../translate/index.js'
 import WebWorker from 'web-worker:./computePowWorker.js';
 import {routes} from '../plugins/routes.js';
 

core/src/components/app-view.js

@@ -3,7 +3,7 @@ import { connect } from 'pwa-helpers'
 import { store } from '../store.js'
 import { Epml } from '../epml.js'
 import { addTradeBotRoutes } from '../tradebot/addTradeBotRoutes.js'
-import { get, translate } from 'lit-translate'
+import { get, translate } from '../../translate/index.js'
 import localForage from 'localforage'
 import { decryptData, encryptData } from '../lockScreen.js'
 import { setChatLastSeen } from '../redux/app/app-actions.js'

core/src/components/check-for-update.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {translate} from 'lit-translate'
+import {translate} from '../../translate/index.js'
 import isElectron from 'is-electron'
 
 import '@polymer/paper-icon-button/paper-icon-button.js'

core/src/components/friends-view/ChatSideNavHeads.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {get} from 'lit-translate'
+import {get} from '../../../translate/index.js'
 import '@material/mwc-icon'
 import '@vaadin/tooltip';
 

core/src/components/friends-view/add-friends-modal.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit';
-import {translate,} from 'lit-translate';
+import {translate,} from '../../../translate/index.js'
 import '@material/mwc-button';
 import '@material/mwc-dialog';
 import '@material/mwc-checkbox';

core/src/components/friends-view/avatar.js

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from 'lit';
-import { get, translate } from 'lit-translate';
+import { get, translate } from '../../../translate/index.js'
 import axios from 'axios';
 import '@material/mwc-menu';
 import '@material/mwc-list/mwc-list-item.js';

core/src/components/friends-view/core-sync-status.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {store} from '../../store'
 import {connect} from 'pwa-helpers'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 class CoreSyncStatus extends connect(store)(LitElement) {
 	static get properties() {

core/src/components/friends-view/feed-item.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit';
-import {translate,} from 'lit-translate';
+import {translate,} from '../../../translate/index.js'
 import axios from 'axios'
 import '@material/mwc-menu';
 import '@material/mwc-list/mwc-list-item.js'

core/src/components/friends-view/friend-item-actions.js

@@ -2,7 +2,7 @@
 import { css, html, LitElement } from 'lit';
 import { createPopper } from '@popperjs/core';
 import '@material/mwc-icon';
-import { translate } from 'lit-translate';
+import { translate } from '../../../translate/index.js'
 import { store } from '../../store';
 import { connect } from 'pwa-helpers';
 import { setNewTab, setSideEffectAction } from '../../redux/app/app-actions';

core/src/components/friends-view/friends-feed.js

@@ -5,7 +5,7 @@ import {friendsViewStyles} from './friends-view-css';
 import {connect} from 'pwa-helpers';
 import {store} from '../../store';
 import './feed-item'
-import {translate} from 'lit-translate';
+import {translate} from '../../../translate/index.js'
 
 import '@polymer/paper-spinner/paper-spinner-lite.js'
 

core/src/components/friends-view/friends-side-panel-parent.js

@@ -1,24 +1,23 @@
-import {css, html, LitElement} from 'lit';
-import '@material/mwc-icon';
-import './friends-side-panel.js';
-import '@vaadin/tooltip';
-import {translate} from 'lit-translate';
-
+import {css, html, LitElement} from 'lit'
+import '@material/mwc-icon'
+import './friends-side-panel.js'
+import '@vaadin/tooltip'
+import {translate} from '../../../translate/index.js'
 
 class FriendsSidePanelParent extends LitElement {
 	static get properties() {
 		return {
 			isOpen: {type: Boolean},
 			hasNewFeed: {type: Boolean}
-		};
+		}
 	}
 
-
 	constructor() {
-		super();
+		super()
 		this.isOpen = false
 		this.hasNewFeed = false
 	}
+
 	static styles = css`
 		.header {
 			display: flex;
@@ -46,36 +45,39 @@ class FriendsSidePanelParent extends LitElement {
 			transform: translateX(0); /* slide in to its original position */
 
 		}
-	`;
+	`
 
 	setHasNewFeed(val){
 		this.hasNewFeed = val
 	}
+
 	render() {
 		return html`
-			<mwc-icon id="friends-icon" @click=${()=> {
-				this.isOpen = !this.isOpen
-				if(this.isOpen && this.hasNewFeed){
-					localStorage.setItem('lastSeenFeed', Date.now());
-					this.hasNewFeed = false
-					this.shadowRoot.querySelector("friends-side-panel").selected = 'feed'
-				}
-			}} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none"
-				>group</mwc-icon
+			<mwc-icon
+				id="friends-icon"
+				@click=${()=> {
+					this.isOpen = !this.isOpen
+					if(this.isOpen && this.hasNewFeed) {
+						localStorage.setItem('lastSeenFeed', Date.now())
+						this.hasNewFeed = false
+						this.shadowRoot.querySelector("friends-side-panel").selected = 'feed'
+					}
+				}} style="color: ${this.hasNewFeed ? 'green' : 'var(--black)'}; cursor:pointer;user-select:none"
 			>
+				group
+			</mwc-icon>
 			<vaadin-tooltip
-			  for="friends-icon"
-			  position="bottom"
-			  hover-delay=${400}
-			  hide-delay=${1}
-			  text=${translate('friends.friend12')}>
-		  </vaadin-tooltip>
+				for="friends-icon"
+				position="bottom"
+				hover-delay=${400}
+				hide-delay=${1}
+				text=${translate('friends.friend12')}
+			>
+			</vaadin-tooltip>
 			<friends-side-panel .setHasNewFeed=${(val)=> this.setHasNewFeed(val)} ?isOpen=${this.isOpen} .setIsOpen=${(val)=> this.isOpen = val}></friends-side-panel>
 
-		`;
+		`
 	}
-
-
 }
 
-customElements.define('friends-side-panel-parent', FriendsSidePanelParent);
+customElements.define('friends-side-panel-parent', FriendsSidePanelParent)

core/src/components/friends-view/friends-side-panel.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit';
 import '@material/mwc-icon';
 import './friends-view'
 import './friends-feed'
-import {translate} from 'lit-translate';
+import {translate} from '../../../translate/index.js'
 
 class FriendsSidePanel extends LitElement {
     static get properties() {

core/src/components/friends-view/friends-view.js

@@ -13,7 +13,7 @@ import './ChatSideNavHeads';
 import '../../../../plugins/plugins/core/components/ChatSearchResults'
 import './add-friends-modal'
 
-import {translate,} from 'lit-translate';
+import {translate,} from '../../../translate/index.js'
 import {store} from '../../store';
 import {friendsViewStyles} from './friends-view-css';
 import {parentEpml} from '../show-plugin';

core/src/components/friends-view/profile-modal-update.js

@@ -1,12 +1,6 @@
 import { LitElement, html, css } from 'lit';
 import { render } from 'lit/html.js';
-import {
-	use,
-	get,
-	translate,
-	translateUnsafeHTML,
-	registerTranslateConfig,
-} from 'lit-translate';
+import { use, get, translate, translateUnsafeHTML, registerTranslateConfig } from '../../../translate/index.js'
 import '@material/mwc-button';
 import '@material/mwc-icon';
 import '@vaadin/tooltip';

core/src/components/friends-view/profile.js

@@ -6,7 +6,7 @@ import { store } from '../../store.js';
 import WebWorker2 from '../WebWorkerFile.js';
 import '@polymer/paper-spinner/paper-spinner-lite.js';
 import '@vaadin/tooltip';
-import { get, translate } from 'lit-translate';
+import { get, translate } from '../../../translate/index.js'
 import ShortUniqueId from 'short-unique-id';
 import '@polymer/paper-dialog/paper-dialog.js';
 

core/src/components/friends-view/save-settings-qdn.js

@@ -6,7 +6,7 @@ import { store } from '../../store.js';
 import WebWorker from '../WebWorkerFile.js';
 import '@polymer/paper-spinner/paper-spinner-lite.js';
 import '@vaadin/tooltip';
-import { get, translate } from 'lit-translate';
+import { get, translate } from '../../../translate/index.js'
 import ShortUniqueId from 'short-unique-id';
 
 import {

core/src/components/language-selector.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {registerTranslateConfig, translate, use} from 'lit-translate'
+import {registerTranslateConfig, translate, use} from '../../translate/index.js'
 
 registerTranslateConfig({
   loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())

core/src/components/login-view/create-account-section.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../../translate/index.js'
 
 import {createWallet} from '../../../../crypto/api/createWallet.js'
 import {doLogin, doLogout, doSelectAddress} from '../../redux/app/app-actions.js'

core/src/components/login-view/login-section.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
 import {checkApiKey} from '../../apiKeyUtils.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 import '@material/mwc-button'
 import '@material/mwc-checkbox'

core/src/components/login-view/login-view.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
 import {stateAwait} from '../../stateAwait.js'
-import {get} from 'lit-translate'
+import {get} from '../../../translate/index.js'
 
 import '@material/mwc-button'
 import '@material/mwc-icon'

core/src/components/login-view/welcome-page.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 import '@material/mwc-button'
 

core/src/components/logout-view/logout-view.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
 import {doLogout} from '../../redux/app/app-actions.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 import '@polymer/paper-dialog/paper-dialog.js'
 import '@material/mwc-button'

core/src/components/new-selector.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {registerTranslateConfig, translate, use} from 'lit-translate'
+import {registerTranslateConfig, translate, use} from '../../translate/index.js'
 
 registerTranslateConfig({
   loader: lang => fetch(`/language/${lang}.json`).then(res => res.json())

core/src/components/notification-view/notification-bell-general.js

@@ -8,7 +8,7 @@ import '@polymer/iron-icons/iron-icons.js';
 import {store} from '../../store.js';
 import {setNewNotification} from '../../redux/app/app-actions.js';
 import '@material/mwc-icon';
-import {get, translate} from 'lit-translate';
+import {get, translate} from '../../../translate/index.js'
 import {repeat} from 'lit/directives/repeat.js';
 import '../../../../plugins/plugins/core/components/TimeAgo.js';
 import './popover.js';

core/src/components/search-modal.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../translate/index.js'
 import snackbar from '../functional-components/snackbar.js'
 
 import '@polymer/paper-icon-button/paper-icon-button.js'

core/src/components/settings-view/account-view.js

@@ -1,7 +1,7 @@
 import { LitElement, html, css } from 'lit'
 import { connect } from 'pwa-helpers'
 import { store } from '../../store.js'
-import { get, translate } from 'lit-translate'
+import { get, translate } from '../../../translate/index.js'
 
 class AccountView extends connect(store)(LitElement) {
     static get properties() {

core/src/components/settings-view/export-keys.js

@@ -3,7 +3,7 @@ import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
 import { Epml } from '../../epml.js'
 import { addTradeBotRoutes } from '../../tradebot/addTradeBotRoutes.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../../translate/index.js'
 import snackbar from '../../functional-components/snackbar.js'
 import FileSaver from 'file-saver'
 

core/src/components/settings-view/notifications-view.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
 import {doSetQChatNotificationConfig} from '../../redux/user/user-actions.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 import isElectron from 'is-electron'
 
 import '@material/mwc-checkbox'

core/src/components/settings-view/qr-login-view.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 import '@material/mwc-textfield'
 import '@material/mwc-icon'

core/src/components/settings-view/security-view.js

@@ -10,7 +10,7 @@ import {
 	removeQAPPAutoLists,
 	setIsOpenDevDialog
 } from '../../redux/app/app-actions.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../../translate/index.js'
 import snackbar from '../../functional-components/snackbar.js'
 import FileSaver from 'file-saver'
 

core/src/components/settings-view/user-settings.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../../translate/index.js'
 
 import '@polymer/paper-dialog/paper-dialog.js'
 import '@material/mwc-button'

core/src/components/show-plugin.js

@@ -8,7 +8,7 @@ import {repeat} from 'lit/directives/repeat.js';
 import ShortUniqueId from 'short-unique-id';
 import {setIsOpenDevDialog, setNewTab} from '../redux/app/app-actions.js'
 import FileSaver from 'file-saver'
-import {get, registerTranslateConfig, translate, use} from 'lit-translate'
+import {get, registerTranslateConfig, translate, use} from '../../translate/index.js'
 import '@material/mwc-button'
 import '@material/mwc-dialog'
 import '@material/mwc-icon'

core/src/components/start-minting.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit';
 import {connect} from 'pwa-helpers';
 import {store} from '../store.js';
-import {get, translate} from 'lit-translate';
+import {get, translate} from '../../translate/index.js'
 import {asyncReplace} from 'lit/directives/async-replace.js';
 
 import '../functional-components/my-button.js';

core/src/components/theme-toggle.js

@@ -1,5 +1,5 @@
 import {css, html, LitElement} from 'lit'
-import {translate} from 'lit-translate'
+import {translate} from '../../translate/index.js'
 import '@polymer/paper-icon-button/paper-icon-button.js'
 import '@polymer/iron-icons/image-icons.js'
 import '@polymer/iron-icons/iron-icons.js'

core/src/components/user-info-view/user-info-view.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {render} from 'lit/html.js'
 import {connect} from 'pwa-helpers'
 import {store} from '../../store.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../../translate/index.js'
 
 import '@polymer/paper-dialog/paper-dialog.js'
 import '@material/mwc-button'

core/src/components/wallet-profile.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../store.js'
-import {translate} from 'lit-translate'
+import {translate} from '../../translate/index.js'
 
 import '@polymer/paper-toast'
 import '@material/mwc-icon-button'

core/src/custom-elements/frag-file-input.js

@@ -3,7 +3,7 @@ import {css, html, LitElement} from 'lit'
 import '@material/mwc-button'
 import '@material/mwc-icon'
 
-import {translate} from 'lit-translate'
+import {translate} from '../../translate/index.js'
 
 class FragFileInput extends LitElement {
     static get properties () {

core/src/functional-components/confirm-transaction-dialog.js

@@ -1,7 +1,7 @@
 import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../store.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../translate/index.js'
 
 import {listenForRequest} from '../transactionRequest.js'
 

core/src/functional-components/mykey-page.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../store.js'
 import {testApiKey} from '../apiKeyUtils.js'
-import {get, translate} from 'lit-translate'
+import {get, translate} from '../../translate/index.js'
 
 import '@material/mwc-dialog'
 import '@material/mwc-button'

core/src/functional-components/settings-page.js

@@ -2,7 +2,7 @@ import {css, html, LitElement} from 'lit'
 import {connect} from 'pwa-helpers'
 import {store} from '../store.js'
 import {doAddNode, doEditNode, doLoadNodeConfig, doRemoveNode, doSetNode} from '../redux/app/app-actions.js'
-import {get, registerTranslateConfig, translate, use} from 'lit-translate'
+import {get, registerTranslateConfig, translate, use} from '../../translate/index.js'
 import snackbar from './snackbar.js'
 import '../components/language-selector.js'
 import '../custom-elements/frag-file-input.js'

core/translate/config.js

@@ -0,0 +1 @@
+export const LANG_CHANGED_EVENT = 'langChanged'

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)

core/translate/helpers.js

@@ -0,0 +1,16 @@
+export function interpolate(text, values, config) {
+    return Object.entries(extract(values || {})).reduce((text, [key, value]) => text.replace(new RegExp(`{{[  ]*${key}[  ]*}}`, `gm`), String(extract(value))), text)
+}
+
+export function lookup(key, config) {
+    const parts = key.split(".")
+    let string = config.strings
+    while (string != null && parts.length > 0) {
+        string = string[parts.shift()]
+    }
+    return string != null ? string.toString() : null
+}
+
+export function extract(obj) {
+    return (typeof obj === "function") ? obj() : obj
+}

core/translate/index.js

@@ -0,0 +1,7 @@
+export * from './model.js'
+export * from './util.js'
+export * from './helpers.js'
+export * from './directives/translate.js'
+export * from './directives/translate-unsafe-html.js'
+export * from './directives/lang-changed.js'
+export * from './directives/lang-changed-base.js'

core/translate/model.js

@@ -0,0 +1 @@
+export {}

core/translate/util.js

@@ -0,0 +1,49 @@
+import { LANG_CHANGED_EVENT } from './config.js'
+import { extract, interpolate, lookup } from './helpers.js'
+
+export const defaultTranslateConfig = () => {
+    return {
+        loader: () => Promise.resolve({}),
+        empty: key => `[${key}]`,
+        lookup: lookup,
+        interpolate: interpolate,
+        translationCache: {}
+    }
+}
+
+export let translateConfig = defaultTranslateConfig()
+
+export function registerTranslateConfig(config) {
+    return (translateConfig = Object.assign(Object.assign({}, translateConfig), config))
+}
+
+export function dispatchLangChanged(detail) {
+    window.dispatchEvent(new CustomEvent(LANG_CHANGED_EVENT, { detail }))
+}
+
+export function updateLang(newLang, newStrings, config = translateConfig) {
+    dispatchLangChanged({
+        previousStrings: config.strings,
+        previousLang: config.lang,
+        lang: (config.lang = newLang),
+        strings: (config.strings = newStrings)
+    })
+}
+
+export function listenForLangChanged(callback, options) {
+    const handler = (e) => callback(e.detail)
+    window.addEventListener(LANG_CHANGED_EVENT, handler, options)
+    return () => window.removeEventListener(LANG_CHANGED_EVENT, handler)
+}
+
+export async function use(lang, config = translateConfig) {
+    const strings = await config.loader(lang, config)
+    config.translationCache = {}
+    updateLang(lang, strings, config)
+}
+
+export function get(key, values, config = translateConfig) {
+    let translation = config.translationCache[key] || (config.translationCache[key] = config.lookup(key, config) || config.empty(key, config))
+    values = values != null ? extract(values) : null
+    return values != null ? config.interpolate(translation, values, config) : translation
+}