refactor: use customElement decorator

daniel-michel · Jul 3, 2024 · 4f5f464 · 4f5f464
1 parent 76c400a
commit 4f5f464
Show file tree

Hide file tree

Showing 15 changed files with 42 additions and 54 deletions.
diff --git a/src/components/app.ts b/src/components/app.ts
@@ -1,7 +1,9 @@
 import { html, css, LitElement } from "lit";
 import "./passphrase-generation-panel.js";
 import "./panel.js";
+import { customElement } from "lit/decorators.js";
 
+@customElement("app-root")
 export class AppRoot extends LitElement {
 	static styles = css`
 		div {
@@ -25,5 +27,3 @@ export class AppRoot extends LitElement {
 		</div>`;
 	}
 }
-
-customElements.define("app-root", AppRoot);
diff --git a/src/components/note.ts b/src/components/note.ts
@@ -1,5 +1,7 @@
 import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
 
+@customElement("info-note")
 export class AppRoot extends LitElement {
 	static styles = css`
 		div {
@@ -21,5 +23,3 @@ export class AppRoot extends LitElement {
 		return html`<div><slot></slot></div>`;
 	}
 }
-
-customElements.define("info-note", AppRoot);
diff --git a/src/components/panel.ts b/src/components/panel.ts
@@ -1,5 +1,7 @@
 import { html, css, LitElement } from "lit";
+import { customElement } from "lit/decorators.js";
 
+@customElement("content-panel")
 export class Panel extends LitElement {
 	static styles = css`
 		div {
@@ -21,5 +23,3 @@ export class Panel extends LitElement {
 		return html`<div><slot></slot></div>`;
 	}
 }
-
-customElements.define("content-panel", Panel);
diff --git a/src/components/passphrase-display.ts b/src/components/passphrase-display.ts
@@ -3,7 +3,7 @@ import { createDataUrl } from "../utils/url.js";
 import { GenerationOptions, generateArray } from "../passphrase-generator.js";
 import "./utils/tooltip-toast.js";
 import "./strength-bar.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 const copyIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
 const copyIconUrl = createDataUrl(copyIconSvg, "image/svg+xml");
@@ -17,6 +17,7 @@ const hiddenIconUrl = createDataUrl(hiddenIconSvg, "image/svg+xml");
 const asteriskIconSvg = `<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 -960 960 960" width="48" fill="#47eb47"><path d="M426-136v-250L210-261l-55-93 217-126-216-125 54-93 216 125v-251h108v251l216-125 54 93-216 125 217 126-55 93-216-125v250H426Z"/></svg>`;
 const asteriskIconUrl = createDataUrl(asteriskIconSvg, "image/svg+xml");
 
+@customElement("passphrase-display")
 export class PassphraseDisplay extends LitElement {
 	static styles = css`
 		:host > * {
@@ -273,5 +274,3 @@ export class PassphraseDisplay extends LitElement {
 		}, 2000);
 	}
 }
-
-customElements.define("passphrase-display", PassphraseDisplay);
diff --git a/src/components/passphrase-generation-panel.ts b/src/components/passphrase-generation-panel.ts
@@ -10,7 +10,9 @@ import "./passphrase-generator.js";
 import "./strength-calculation.js";
 import "./utils/radio-button-group.js";
 import { CharacterSets } from "../password-character-sets.js";
+import { customElement } from "lit/decorators.js";
 
+@customElement("passphrase-generation-panel")
 export class PassphraseGenerationPanel extends LitElement {
 	static styles = css`
 		div {
@@ -97,5 +99,3 @@ export class PassphraseGenerationPanel extends LitElement {
 		this.requestUpdate();
 	}
 }
-
-customElements.define("passphrase-generation-panel", PassphraseGenerationPanel);
diff --git a/src/components/passphrase-generator.ts b/src/components/passphrase-generator.ts
@@ -7,8 +7,9 @@ import {
 	isPassphraseOptions,
 } from "../passphrase-generator.js";
 import "./passphrase-display.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("passphrase-generator")
 export class PassphraseGenerator extends LitElement {
 	static styles = css`
 		button {
@@ -106,5 +107,3 @@ export class PassphraseGenerator extends LitElement {
 		this.requestUpdate();
 	}
 }
-
-customElements.define("passphrase-generator", PassphraseGenerator);
diff --git a/src/components/passphrase-settings.ts b/src/components/passphrase-settings.ts
@@ -3,8 +3,9 @@ import { PassphraseGenerationOptions } from "../passphrase-generator.js";
 import "./note.js";
 import "./utils/option-select.js";
 import "./utils/async-loaded.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("passphrase-settings")
 export class PassphraseSettings extends LitElement {
 	static styles = css`
 		div {
@@ -147,5 +148,3 @@ export class PassphraseSettings extends LitElement {
 		);
 	}
 }
-
-customElements.define("passphrase-settings", PassphraseSettings);
diff --git a/src/components/password-settings.ts b/src/components/password-settings.ts
@@ -4,8 +4,9 @@ import "./note.js";
 import "./utils/option-select.js";
 import "./utils/async-loaded.js";
 import { CharacterSets } from "../password-character-sets.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("password-settings")
 export class PasswordSettings extends LitElement {
 	static styles = css`
 		div {
@@ -103,5 +104,3 @@ export class PasswordSettings extends LitElement {
 		);
 	}
 }
-
-customElements.define("password-settings", PasswordSettings);
diff --git a/src/components/strength-bar.ts b/src/components/strength-bar.ts
@@ -3,27 +3,22 @@ import {
 	GenerationOptions,
 	entropyForOptions,
 } from "../passphrase-generator.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("strength-bar")
 export class StrengthBar extends LitElement {
 	static styles = css`
 		.bar {
-			/*background: linear-gradient(
-        to right in lab,
-        hsl(0, 100%, 55%),
-        yellow 70%,
-        hsl(120, 80%, 60%)
-      );*/
 			background-color: hsl(0, 0%, 23%);
 			border-radius: 0.3em;
 			height: 0.5em;
 		}
 		.fill {
 			--percent: min(calc(var(--strength) * 1%), 100%);
 			background-color: color-mix(
-				in lab,
-				hsl(0, 100%, 55%),
-				hsl(120, 80%, 60%) var(--percent)
+				in oklch,
+				oklch(74.93% 0.1246 28.31),
+				oklch(74.93% 0.1246 139.41) var(--percent)
 			);
 			border-radius: 0.3em;
 			height: 100%;
@@ -48,5 +43,3 @@ export class StrengthBar extends LitElement {
 		`;
 	}
 }
-
-customElements.define("strength-bar", StrengthBar);
diff --git a/src/components/strength-calculation.ts b/src/components/strength-calculation.ts
@@ -5,8 +5,9 @@ import {
 	isPassphraseOptions,
 } from "../passphrase-generator.js";
 import "./note.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("strength-calculation")
 export class StrengthCalculation extends LitElement {
 	static styles = css`
 		.total-number {
@@ -64,5 +65,3 @@ export class StrengthCalculation extends LitElement {
 		`;
 	}
 }
-
-customElements.define("strength-calculation", StrengthCalculation);
diff --git a/src/components/utils/async-loaded.ts b/src/components/utils/async-loaded.ts
@@ -6,13 +6,14 @@ import {
 	TemplateResult,
 } from "lit";
 import "./loading-spinner.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("async-loaded")
 export class AsyncLoaded<T> extends LitElement {
 	static styles = css``;
 
 	@property({ attribute: false })
-	promise: Promise<T> = new Promise<T>(() => {});
+	promise?: Promise<T>;
 	@property()
 	renderLoaded: (value: T) => TemplateResult = () => html``;
 	#resolvedValue: T | undefined;
@@ -27,11 +28,15 @@ export class AsyncLoaded<T> extends LitElement {
 		options?: PropertyDeclaration<unknown, unknown> | undefined,
 	): void {
 		if (name === "promise") {
-			this.#resolvedValue = undefined;
-			this.requestUpdate();
-			this.promise.then((value) => {
+			try {
+				this.#resolvedValue = undefined;
+			} catch (error) {
+				return;
+			}
+			super.requestUpdate();
+			this.promise?.then((value) => {
 				this.#resolvedValue = value;
-				this.requestUpdate();
+				super.requestUpdate();
 			});
 		}
 		super.requestUpdate(name, oldValue, options);
@@ -43,5 +48,3 @@ export class AsyncLoaded<T> extends LitElement {
 			: this.renderLoaded(this.#resolvedValue);
 	}
 }
-
-customElements.define("async-loaded", AsyncLoaded);
diff --git a/src/components/utils/loading-spinner.ts b/src/components/utils/loading-spinner.ts
@@ -1,5 +1,7 @@
 import { LitElement, html, css } from "lit";
+import { customElement } from "lit/decorators.js";
 
+@customElement("loading-spinner")
 export class LoadingSpinner extends LitElement {
 	static styles = css`
 		:host {
@@ -72,5 +74,3 @@ export class LoadingSpinner extends LitElement {
 		</div>`;
 	}
 }
-
-customElements.define("loading-spinner", LoadingSpinner);
diff --git a/src/components/utils/option-select.ts b/src/components/utils/option-select.ts
@@ -1,10 +1,11 @@
 import { LitElement, html, css, TemplateResult, unsafeCSS } from "lit";
 import { createDataUrl } from "../../utils/url.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 const iconSvg = `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 5.83L15.17 9l1.41-1.41L12 3 7.41 7.59 8.83 9 12 5.83zm0 12.34L8.83 15l-1.41 1.41L12 21l4.59-4.59L15.17 15 12 18.17z"/></svg>`;
 const iconUrl = createDataUrl(iconSvg, "image/svg+xml");
 
+@customElement("option-select")
 export class OptionSelect<T> extends LitElement {
 	static styles = css`
 		:host {
@@ -161,5 +162,3 @@ export class OptionSelect<T> extends LitElement {
 		</div>`;
 	}
 }
-
-customElements.define("option-select", OptionSelect);
diff --git a/src/components/utils/radio-button-group.ts b/src/components/utils/radio-button-group.ts
@@ -1,6 +1,7 @@
 import { LitElement, html, css, TemplateResult } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("radio-button-group")
 export class RadioButtonGroup<T> extends LitElement {
 	static styles = css`
 		.container {
@@ -80,5 +81,3 @@ export class RadioButtonGroup<T> extends LitElement {
 		</div>`;
 	}
 }
-
-customElements.define("radio-button-group", RadioButtonGroup);
diff --git a/src/components/utils/tooltip-toast.ts b/src/components/utils/tooltip-toast.ts
@@ -1,6 +1,7 @@
 import { html, css, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
+@customElement("tooltip-toast")
 export class TooltipToast extends LitElement {
 	static styles = css`
 		:host {
@@ -45,5 +46,3 @@ export class TooltipToast extends LitElement {
 		`;
 	}
 }
-
-customElements.define("tooltip-toast", TooltipToast);