Merge pull request #58 from rolandbernard/devel

Dependency update and small improvements

package.json

@@ -1,6 +1,6 @@
 {
     "name": "marvin",
-    "version": "0.4.2",
+    "version": "0.4.3",
     "description": "This is a keystroke launcher for Linux",
     "repository": "https://github.com/rolandbernard/marvin/",
     "author": "Roland Bernard",
@@ -21,16 +21,15 @@
     "dependencies": {
         "algebrite": "^1.4.0",
         "electron-updater": "^4.3.9",
-        "lit-element": "^2.5.1",
-        "lit-html": "^1.4.1",
-        "mathjs": "^9.4.4",
+        "lit": "^2.2.0",
+        "mathjs": "^10.1.1",
         "node-fetch": "^3.1.1"
     },
     "devDependencies": {
         "@types/node-fetch": "^2.5.12",
         "@types/webpack-env": "^1.16.2",
         "css-loader": "^5.2.6",
-        "electron": "^13.1.6",
+        "electron": "^17.0.1",
         "electron-builder": "^22.11.7",
         "file-loader": "^6.2.0",
         "html-webpack-plugin": "^5.3.2",

src/common/themes.ts

@@ -36,18 +36,18 @@ export const THEMES = {
     default: {
         border_radius: 5,
         input: {
-            background_color: '#1f252a',
-            text_color: '#ffffff',
-            accent_color: '#f0f0f0',
-            shadow_color: '#00000000',
+            background_color: "#1a1e22",
+            text_color: "#ffffff",
+            accent_color: "#f0f0f0",
+            shadow_color: "#00000000"
         },
         output: {
-            background_color: '#262c33',
-            text_color: '#f0f0f0',
-            accent_color: '#f0f0f0',
-            select_color: '#313943',
-            select_text_color: '#f0f0f0',
-            shadow_color: '#00000020',
+            background_color: "#1f2327",
+            text_color: "#f0f0f0",
+            accent_color: "#f0f0f0",
+            select_color: "#313943",
+            select_text_color: "#f0f0f0",
+            shadow_color: "#00000020"
         },
         settings: {
             background_color: '#ffffff',
@@ -62,28 +62,28 @@ export const THEMES = {
     all_dark: {
         border_radius: 5,
         input: {
-            background_color: '#1f252a',
-            text_color: '#ffffff',
-            accent_color: '#f0f0f0',
-            shadow_color: '#00000000',
+            background_color: "#1a1e22",
+            text_color: "#ffffff",
+            accent_color: "#f0f0f0",
+            shadow_color: "#00000000"
         },
         output: {
-            background_color: '#262c33',
-            text_color: '#f0f0f0',
-            accent_color: '#f0f0f0',
-            select_color: '#313943',
-            select_text_color: '#f0f0f0',
-            shadow_color: '#00000020',
+            background_color: "#1f2327",
+            text_color: "#f0f0f0",
+            accent_color: "#f0f0f0",
+            select_color: "#313943",
+            select_text_color: "#f0f0f0",
+            shadow_color: "#00000020"
         },
         settings: {
-            background_color: '#262c33',
-            text_color: '#f0f0f0',
-            accent_color: '#b0b0b0',
-            select_color: '#313943',
-            select_text_color: '#f0f0f0',
-            active_color: '#1ca54c',
-            shadow_color: '#00000020',
-        },
+            background_color: "#171a1e",
+            text_color: "#f0f0f0",
+            accent_color: "#b0b0b0",
+            select_color: "#313943",
+            select_text_color: "#f0f0f0",
+            active_color: "#1ca54c",
+            shadow_color: "#00000020"
+        }
     },
     black: {
         border_radius: 0,

src/common/util.ts

@@ -94,3 +94,14 @@ export function indexObject(object: any, index: DeepIndex = []): any {
 export function unique<Type, Key>(array: Type[], key: (elem: Type) => Key): Type[] {
     return array.filter((elem, index) => array.findIndex(e => key(e) === key(elem)) === index);
 }
+
+export interface Constructor<T> {
+    new (): T;
+}
+
+export function fakeTemplateArray(array: String[]): TemplateStringsArray {
+    const res = array as any;
+    res.raw = res;
+    return res;
+}
+

src/main/modules.ts

@@ -1,10 +1,8 @@
 
-import { Constructor } from 'lit-element';
-
 import { Result } from 'common/result';
 import { ModuleId, Module } from 'common/module'
 import { Translatable } from 'common/local/locale';
-import { importAll } from 'common/util';
+import { importAll, Constructor } from 'common/util';
 import { Platform, getPlatform } from 'common/platform';
 
 import { config } from 'main/config';

src/main/modules/currency-converter.ts

@@ -83,7 +83,7 @@ export class CurrencyConverterModule implements Module<SimpleResult> {
         if (!this.last_rate || !this.rates || Date.now() - this.last_rate > this.config.refresh_interval_min) {
             this.last_rate = Date.now();
             const response = await fetch(`${API_ROOT}/latest`);
-            const json = await response.json();
+            const json: any = await response.json();
             this.rates = json.rates;
         }
     }

src/main/modules/dictionary.ts

@@ -97,7 +97,7 @@ export class DictionaryModule implements Module<DictionaryResult> {
     async queryApi(query: Query, word: string, lang: string): Promise<DictionaryResult[]> {
         try {
             const response = await fetch(`${API_ROOT}/entries/${lang}/${encodeURIComponent(word)}`);
-            const data: DictionaryApiBody = await response.json();
+            const data: DictionaryApiBody = (await response.json()) as any;
             if (data instanceof Array) {
                 return data.flatMap(word =>
                     (word.phonetics && word.phonetics.length > 0 ? [{

src/main/modules/duckduckgo.ts

@@ -93,7 +93,7 @@ export class DuckDuckGoModule implements Module<DuckDuckGoResult> {
     async queryApi(query: Query): Promise<DuckDuckGoResult[]> {
         try {
             const response = await fetch(`${API_ROOT}/?q=${encodeURIComponent(query.text)}&format=json&no_redirect=1`);
-            const data: DuckDuckGoApiBody = await response.json();
+            const data: DuckDuckGoApiBody = (await response.json()) as any;
             const results: DuckDuckGoResult[] = [];
             if (data.Redirect) {
                 results.push({

src/main/modules/main.ts

@@ -19,11 +19,6 @@ import Logo from 'logo.png';
 
 const MODULE_ID = 'main';
 
-if (getPlatform() === Platform.LINUX) {
-    // Transparency will not work without this
-    app.commandLine.appendSwitch('use-gl', 'desktop');
-}
-
 // Remove animation when showing the window
 app.commandLine.appendSwitch('wm-window-animations-disabled');
 
@@ -168,11 +163,8 @@ export class MainModule implements Module<SimpleResult> {
         this.updateTrayIcon();
         this.registerShortcut();
         this.updateLoginItem();
-        setTimeout(() => {
-            // This has to be delayed, because otherwise transparency will not work on linux
-            this.createWindow();
-            this.updateWindow();
-        }, 500)
+        this.createWindow();
+        this.updateWindow();
     }
 
     async update() {

src/main/modules/translate.ts

@@ -126,7 +126,7 @@ export class TranslateModule implements Module<TranslateResult> {
     async queryApi(query: Query, word: string, from: string, to: string): Promise<TranslateResult[]> {
         try {
             const response = await fetch(`${API_ROOT}/${from}-${to}/search?query=${encodeURIComponent(word)}&ajax=1`);
-            const data = this.decodeBuffer(await response.buffer());
+            const data = this.decodeBuffer(Buffer.from(await response.arrayBuffer()));
             return this.parseHtmlResult(data).map(translation => ({
                 module: MODULE_ID,
                 query: query.text,

src/renderer/common/executor.ts

@@ -1,6 +1,7 @@
 
 import { ipcRenderer } from 'electron';
-import { LitElement, property } from 'lit-element';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 
 import { GlobalConfig } from 'common/config';
 import { Result } from 'common/result';

src/renderer/common/highlighter.ts

@@ -1,5 +1,5 @@
 
-import { html } from 'lit-html';
+import { html } from 'lit';
 
 import { Query } from 'common/query';
 

src/renderer/common/icon-display.ts

@@ -1,5 +1,6 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
 import { Icon } from 'common/result';
 

src/renderer/common/output-list.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property, query } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { GlobalConfig } from 'common/config';
 import { HtmlResult, Result, SimpleResult, TextResult } from 'common/result';

src/renderer/common/results/html-result.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 
 import { GlobalConfig } from 'common/config';
 import { HtmlResult } from 'common/result';

src/renderer/common/results/simple-result.ts

@@ -1,5 +1,6 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
 import { GlobalConfig } from 'common/config';
 import { SimpleResult } from 'common/result';

src/renderer/common/results/text-result.ts

@@ -1,5 +1,6 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
 import { GlobalConfig } from 'common/config';
 import { TextResult } from 'common/result';

src/renderer/common/theme.ts

@@ -1,5 +1,5 @@
 
-import { styleMap } from 'lit-html/directives/style-map';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { GlobalConfig } from 'common/config';
 import { parseColor, multiplyColor, colorAsHex } from 'common/color';

src/renderer/common/ui/button-like.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property, query } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement('button-like')
 export class ButtonLike extends LitElement {

src/renderer/common/ui/code-area.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 @customElement('code-area')
 export class CodeArea extends LitElement {

src/renderer/common/ui/color-button.ts

@@ -1,7 +1,8 @@
 
-import { css, customElement, html, LitElement, property, query } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import { Color, colorAsHex, hsvToRgb, parseColor, rgbToHsv } from 'common/color';
 

src/renderer/common/ui/color-picker.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property, query } from 'lit-element';
-import { styleMap } from 'lit-html/directives/style-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import { Color, colorAsHex, hsvToRgb } from 'common/color';
 

src/renderer/common/ui/material-icon.ts

@@ -1,5 +1,6 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 
 @customElement('material-icon')
 export class MaterialIcon extends LitElement {

src/renderer/common/ui/select-field.ts

@@ -1,7 +1,8 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import { styleMap } from 'lit-html/directives/style-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { styleMap } from 'lit/directives/style-map.js';
 
 import 'renderer/common/ui/material-icon';
 import 'renderer/common/ui/button-like';
@@ -21,6 +22,9 @@ export class SelectField<Type> extends LitElement {
     @property({ attribute: false })
     disabled?: boolean;
 
+    @property({ attribute: false })
+    noborder?: boolean;
+
     @property({ attribute: false })
     open = false;
 
@@ -64,22 +68,24 @@ export class SelectField<Type> extends LitElement {
             .disabled, .placeholder {
                 color: var(--settings-border-hover-color);
             }
+            .border .value {
+                border: 1px solid var(--settings-border-color);
+            }
             .value {
                 padding: 0.75rem;
                 background: var(--settings-background);
                 border-radius: var(--settings-input-border-radius);
-                border: 1px solid var(--settings-border-color);
                 position: relative;
                 transition: var(--transition);
                 transition-property: border, box-shadow; 
             }
             .disabled .value, .open .value {
                 pointer-events: none;
             }
-            .enabled:hover .value {
+            .border.enabled:hover .value {
                 border: 1px solid var(--settings-border-hover-color);
             }
-            .enabled:focus-within .value {
+            .border.enabled:focus-within .value {
                 border-color: var(--settings-active-color);
                 box-shadow: 0 0 0 1px var(--settings-active-color);
             }
@@ -126,6 +132,7 @@ export class SelectField<Type> extends LitElement {
             'enabled': !this.disabled,
             'disabled': this.disabled ? true : false,
             'open': this.open,
+            'border': !this.noborder,
         });
         const styles = styleMap({
             '--position': (this.options?.findIndex(option => option.value === this.value) ?? 0).toString(),

src/renderer/common/ui/text-button.ts

@@ -1,6 +1,7 @@
 
-import { css, customElement, html, LitElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 
 import 'renderer/common/ui/button-like';