update first half of custom elements to be defined at their class dfns

frontend/src/components/account-settings.ts

@@ -1,5 +1,5 @@
 import { LitElement } from "lit";
-import { state, queryAsync, property } from "lit/decorators.js";
+import { state, queryAsync, property, customElement } from "lit/decorators.js";
 import { msg, str, localized } from "@lit/localize";
 import debounce from "lodash/fp/debounce";
 import { when } from "lit/directives/when.js";
@@ -91,6 +91,7 @@ customElements.define("btrix-request-verify", RequestVerify);
 
 @needLogin
 @localized()
+@customElement("btrix-account-settings")
 export class AccountSettings extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;

frontend/src/components/alert.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { property, customElement } from "lit/decorators.js";
 
 /**
  * Alert used inline, e.g. for form server errors
@@ -10,6 +10,7 @@ import { property } from "lit/decorators.js";
  * <btrix-alert id="error_message>${errorMessage}</btrix-alert>
  * ```
  */
+@customElement("btrix-alert")
 export class Alert extends LitElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "info" = "info";

frontend/src/components/badge.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 /**
  * Show numeric value in a label
@@ -9,6 +9,7 @@ import { property } from "lit/decorators.js";
  * <btrix-badge aria-describedby="text">10</btrix-badge>
  * ```
  */
+@customElement("btrix-badge")
 export class Badge extends LitElement {
   @property({ type: String })
   variant: "success" | "warning" | "danger" | "neutral" = "neutral";

frontend/src/components/button.ts

@@ -2,7 +2,7 @@
 /* eslint-disable lit/no-invalid-html */
 import { LitElement, css } from "lit";
 import { html, literal } from "lit/static-html.js";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
@@ -14,6 +14,7 @@ import { ifDefined } from "lit/directives/if-defined.js";
  * <btrix-button>Click me</btrix-button>
  * ```
  */
+@customElement("btrix-button")
 export class Button extends LitElement {
   @property({ type: String })
   type: "submit" | "button" = "button";

frontend/src/components/checkbox-list.ts

@@ -1,6 +1,7 @@
 import { SlCheckbox } from "@shoelace-style/shoelace";
 import { LitElement, html, css } from "lit";
 import {
+  customElement,
   property,
   query,
   queryAssignedElements,
@@ -21,6 +22,7 @@ const hostVars = css`
 /**
  * @event on-change CheckboxChangeEvent
  */
+@customElement("btrix-checkbox-list-item")
 export class CheckboxListItem extends LitElement {
   static styles = [
     hostVars,
@@ -129,6 +131,7 @@ export class CheckboxListItem extends LitElement {
   }
 }
 
+@customElement("btrix-checkbox-group-list")
 export class CheckboxGroupList extends LitElement {
   static styles = [
     hostVars,
@@ -173,6 +176,7 @@ export class CheckboxGroupList extends LitElement {
   }
 }
 
+@customElement("btrix-checkbox-list")
 export class CheckboxList extends LitElement {
   static styles = [
     hostVars,

frontend/src/components/code.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
 import hljs from "highlight.js/lib/core";
 import javascript from "highlight.js/lib/languages/javascript";
@@ -8,6 +8,7 @@ import xml from "highlight.js/lib/languages/xml";
 /**
  * Syntax highlighting for javascript and HTML (XML)
  */
+@customElement("btrix-code")
 export class Code extends LitElement {
   static styles = [
     css`

frontend/src/components/collections-add.ts

@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
@@ -39,6 +39,7 @@ export type CollectionsChangeEvent = CustomEvent<{
  * @events collections-change
  */
 @localized()
+@customElement("btrix-collections-add")
 export class CollectionsAdd extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;

frontend/src/components/combobox.ts

@@ -4,6 +4,7 @@ import {
   property,
   query,
   queryAssignedElements,
+  customElement,
 } from "lit/decorators.js";
 import {
   SlInput,
@@ -24,6 +25,7 @@ import { dropdown } from "../utils/css";
  *
  * @event request-close
  */
+@customElement("btrix-combobox")
 export class Combobox extends LitElement {
   static styles = [
     dropdown,

frontend/src/components/config-details.ts

@@ -1,5 +1,5 @@
 import { html as staticHtml, unsafeStatic } from "lit/static-html.js";
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 import RegexColorize from "regex-colorize";
@@ -22,6 +22,7 @@ import { RelativeDuration } from "./relative-duration";
  * ```
  */
 @localized()
+@customElement("btrix-config-details")
 export class ConfigDetails extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;

frontend/src/components/config-editor.ts

@@ -1,4 +1,4 @@
-import { property, state, query } from "lit/decorators.js";
+import { property, state, query, customElement } from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";
 import {
   parse as yamlToJson,
@@ -21,6 +21,7 @@ import LiteElement, { html } from "../utils/LiteElement";
  * @event on-change
  */
 @localized()
+@customElement("btrix-config-editor")
 export class ConfigEditor extends LiteElement {
   @property({ type: String })
   value = "";

frontend/src/components/copy-button.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from "lit";
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { msg, localized } from "@lit/localize";
 
 /**
@@ -17,6 +17,7 @@ import { msg, localized } from "@lit/localize";
  * @event on-copied
  */
 @localized()
+@customElement("btrix-copy-button")
 export class CopyButton extends LitElement {
   @property({ type: String })
   value?: string;

frontend/src/components/crawl-list.ts

@@ -13,6 +13,7 @@
  */
 import { LitElement, html, css } from "lit";
 import {
+  customElement,
   property,
   query,
   queryAssignedElements,
@@ -72,6 +73,7 @@ const hostVars = css`
 `;
 
 @localized()
+@customElement("btrix-crawl-list-item")
 export class CrawlListItem extends LitElement {
   static styles = [
     truncate,
@@ -458,6 +460,7 @@ export class CrawlListItem extends LitElement {
 }
 
 @localized()
+@customElement("btrix-crawl-list")
 export class CrawlList extends LitElement {
   static styles = [
     srOnly,

frontend/src/components/crawl-logs.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css } from "lit";
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 
@@ -15,6 +15,7 @@ type CrawlLog = {
 };
 
 @localized()
+@customElement("btrix-crawl-logs")
 export class CrawlLogs extends LitElement {
   static styles = [
     truncate,

frontend/src/components/crawl-metadata-editor.ts

@@ -1,4 +1,4 @@
-import { state, property } from "lit/decorators.js";
+import { state, property, customElement } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js";
 import Fuse from "fuse.js";
@@ -25,6 +25,7 @@ import type { Crawl } from "../types/crawler";
  * @event updated
  */
 @localized()
+@customElement("btrix-crawl-metadata-editor")
 export class CrawlMetadataEditor extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;

frontend/src/components/crawl-pending-exclusions.ts

@@ -1,4 +1,4 @@
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 
 import LiteElement, { html } from "../utils/LiteElement";
@@ -16,6 +16,7 @@ type URLs = string[];
  * ```
  */
 @localized()
+@customElement("btrix-crawl-pending-exclusions")
 export class CrawlPendingExclusions extends LiteElement {
   @property({ type: Array })
   matchedURLs: URLs | null = null;

frontend/src/components/crawl-queue.ts

@@ -1,4 +1,4 @@
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 import { when } from "lit/directives/when.js";
 import throttle from "lodash/fp/throttle";
@@ -30,6 +30,7 @@ const POLL_INTERVAL_SECONDS = 5;
  * ```
  */
 @localized()
+@customElement("btrix-crawl-queue")
 export class CrawlQueue extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;

frontend/src/components/crawl-status.ts

@@ -1,5 +1,9 @@
 import { LitElement, html, css, TemplateResult } from "lit";
-import { property, queryAssignedElements } from "lit/decorators.js";
+import {
+  customElement,
+  property,
+  queryAssignedElements,
+} from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 import { msg, localized, str } from "@lit/localize";
 import startCase from "lodash/fp/startCase";
@@ -8,6 +12,7 @@ import type { CrawlState } from "../types/crawler";
 import { animatePulse } from "../utils/css";
 
 @localized()
+@customElement("btrix-crawl-status")
 export class CrawlStatus extends LitElement {
   @property({ type: String })
   state?: CrawlState;

frontend/src/components/data-table.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, TemplateResult } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 
 type CellContent = string | TemplateResult;
 
@@ -19,6 +19,7 @@ type CellContent = string | TemplateResult;
  * </btrix-data-table>
  * ```
  */
+@customElement("btrix-data-table")
 export class DataTable extends LitElement {
   static styles = css`
     :host {

frontend/src/components/desc-list.ts

@@ -15,9 +15,10 @@
  * ```
  */
 import { LitElement, html, css } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 
+@customElement("btrix-desc-list-item")
 export class DescListItem extends LitElement {
   static styles = css`
     :host {
@@ -65,6 +66,7 @@ export class DescListItem extends LitElement {
   }
 }
 
+@customElement("btrix-desc-list")
 export class DescList extends LitElement {
   static styles = css`
     dl {

frontend/src/components/details.ts

@@ -1,5 +1,5 @@
 import { LitElement, html, css, unsafeCSS } from "lit";
-import { property } from "lit/decorators.js";
+import { customElement, property } from "lit/decorators.js";
 import caretDownFillSvg from "../assets/images/caret-down-fill.svg";
 import caretRightFillSvg from "../assets/images/caret-right-fill.svg";
 
@@ -17,6 +17,7 @@ import caretRightFillSvg from "../assets/images/caret-right-fill.svg";
  *
  * @event on-toggle { open: boolean; }
  */
+@customElement("btrix-details")
 export class Details extends LitElement {
   @property({ type: Boolean })
   open? = false;

frontend/src/components/dialog.ts

@@ -1,12 +1,14 @@
 import { css } from "lit";
 import SLDialog from "@shoelace-style/shoelace/dist/components/dialog/dialog.js";
 import dialogStyles from "@shoelace-style/shoelace/dist/components/dialog/dialog.styles.js";
+import { customElement } from "lit/decorators";
 
 /**
  * Customized <sl-dialog>
  *
  * Usage: see https://shoelace.style/components/dialog
  */
+@customElement("btrix-dialog")
 export class Dialog extends SLDialog {
   static styles = css`
     ${dialogStyles} .dialog__panel {

frontend/src/components/exclusion-editor.ts

@@ -1,4 +1,4 @@
-import { property, state } from "lit/decorators.js";
+import { customElement, property, state } from "lit/decorators.js";
 import { msg, localized, str } from "@lit/localize";
 
 import type { ExclusionRemoveEvent } from "./queue-exclusion-table";
@@ -34,6 +34,7 @@ type ResponseData = {
  * @event on-success On successful edit
  */
 @localized()
+@customElement("btrix-exclusion-editor")
 export class ExclusionEditor extends LiteElement {
   @property({ type: Object })
   authState?: AuthState;

frontend/src/components/file-list.ts

@@ -1,5 +1,6 @@
 import { LitElement, html, css } from "lit";
 import {
+  customElement,
   property,
   query,
   queryAssignedElements,
@@ -15,6 +16,7 @@ export type FileRemoveEvent = CustomEvent<{
 /**
  * @event on-remove FileRemoveEvent
  */
+@customElement("btrix-file-list-item")
 export class FileListItem extends LitElement {
   static styles = [
     truncate,
@@ -119,6 +121,7 @@ export class FileListItem extends LitElement {
   };
 }
 
+@customElement("btrix-file-list")
 export class FileList extends LitElement {
   static styles = [
     css`

frontend/src/components/index.ts

@@ -1,24 +1,16 @@
-import { Alert } from "./alert";
+import "./alert";
 import { Input } from "./input/input";
 import { TimeInput } from "./time-input";
-import("./details").then(({ Details }) => {
+import("./details");
-  customElements.define("btrix-details", Details);
-});
 import("./locale-picker").then(({ LocalePicker }) => {
   customElements.define("btrix-locale-picker", LocalePicker);
 });
-import("./account-settings").then(({ AccountSettings }) => {
+import("./account-settings");
-  customElements.define("btrix-account-settings", AccountSettings);
+import("./config-editor");
-});
-import("./config-editor").then(({ ConfigEditor }) => {
-  customElements.define("btrix-config-editor", ConfigEditor);
-});
 import("./orgs-list").then(({ OrgsList }) => {
   customElements.define("btrix-orgs-list", OrgsList);
 });
-import("./copy-button").then(({ CopyButton }) => {
+import("./copy-button");
-  customElements.define("btrix-copy-button", CopyButton);
-});
 import("./invite-form").then(({ InviteForm }) => {
   customElements.define("btrix-invite-form", InviteForm);
 });
@@ -56,24 +48,11 @@ import("./numbered-list").then(
 import("./pagination").then(({ Pagination }) => {
   customElements.define("btrix-pagination", Pagination);
 });
-import("./crawl-queue").then(({ CrawlQueue }) => {
+import("./crawl-queue");
-  customElements.define("btrix-crawl-queue", CrawlQueue);
+import("./exclusion-editor");
-});
+import("./crawl-pending-exclusions");
-import("./exclusion-editor").then(({ ExclusionEditor }) => {
+import("./badge");
-  customElements.define("btrix-exclusion-editor", ExclusionEditor);
+import("./button");
-});
-import("./crawl-pending-exclusions").then(({ CrawlPendingExclusions }) => {
-  customElements.define(
-    "btrix-crawl-pending-exclusions",
-    CrawlPendingExclusions
-  );
-});
-import("./badge").then(({ Badge }) => {
-  customElements.define("btrix-badge", Badge);
-});
-import("./button").then(({ Button }) => {
-  customElements.define("btrix-button", Button);
-});
 import("./language-select").then(({ LanguageSelect }) => {
   customElements.define("btrix-language-select", LanguageSelect);
 });
@@ -82,74 +61,41 @@ import("./tab-list").then(({ Tab, TabList, TabPanel }) => {
   customElements.define("btrix-tab-list", TabList);
   customElements.define("btrix-tab-panel", TabPanel);
 });
-import("./desc-list").then(({ DescListItem, DescList }) => {
+import("./desc-list");
-  customElements.define("btrix-desc-list-item", DescListItem);
+import("./checkbox-list");
-  customElements.define("btrix-desc-list", DescList);
+import("./crawl-list");
-});
-import("./checkbox-list").then(
-  ({ CheckboxListItem, CheckboxGroupList, CheckboxList }) => {
-    customElements.define("btrix-checkbox-list-item", CheckboxListItem);
-    customElements.define("btrix-checkbox-group-list", CheckboxGroupList);
-    customElements.define("btrix-checkbox-list", CheckboxList);
-  }
-);
-import("./crawl-list").then(({ CrawlListItem, CrawlList }) => {
-  customElements.define("btrix-crawl-list-item", CrawlListItem);
-  customElements.define("btrix-crawl-list", CrawlList);
-});
 import("./workflow-list").then(({ WorkflowListItem, WorkflowList }) => {
   customElements.define("btrix-workflow-list-item", WorkflowListItem);
   customElements.define("btrix-workflow-list", WorkflowList);
 });
-import("./crawl-logs").then(({ CrawlLogs }) => {
+import("./crawl-logs");
-  customElements.define("btrix-crawl-logs", CrawlLogs);
-});
 import("./section-heading").then(({ SectionHeading }) => {
   customElements.define("btrix-section-heading", SectionHeading);
 });
-import("./config-details").then(({ ConfigDetails }) => {
+import("./config-details");
-  customElements.define("btrix-config-details", ConfigDetails);
-});
 import("./tag-input").then(({ TagInput }) => {
   customElements.define("btrix-tag-input", TagInput);
 });
 import("./tag").then(({ Tag }) => {
   customElements.define("btrix-tag", Tag);
 });
-import("./dialog").then(({ Dialog }) => {
+import("./dialog");
-  customElements.define("btrix-dialog", Dialog);
+import("./data-table");
-});
+import("./crawl-status");
-import("./data-table").then(({ DataTable }) => {
+import("./crawl-metadata-editor");
-  customElements.define("btrix-data-table", DataTable);
-});
-import("./crawl-status").then(({ CrawlStatus }) => {
-  customElements.define("btrix-crawl-status", CrawlStatus);
-});
-import("./crawl-metadata-editor").then(({ CrawlMetadataEditor }) => {
-  customElements.define("btrix-crawl-metadata-editor", CrawlMetadataEditor);
-});
 import("./observable").then(({ Observable }) => {
   customElements.define("btrix-observable", Observable);
 });
-import("./combobox").then(({ Combobox }) => {
+import("./combobox");
-  customElements.define("btrix-combobox", Combobox);
-});
 import("./markdown-editor").then(({ MarkdownEditor }) => {
   customElements.define("btrix-markdown-editor", MarkdownEditor);
 });
 import("./markdown-viewer").then(({ MarkdownViewer }) => {
   customElements.define("btrix-markdown-viewer", MarkdownViewer);
 });
-import("./file-list").then(({ FileList, FileListItem }) => {
+import("./file-list");
-  customElements.define("btrix-file-list", FileList);
+import("./collections-add");
-  customElements.define("btrix-file-list-item", FileListItem);
+import("./code");
-});
-import("./collections-add").then(({ CollectionsAdd }) => {
-  customElements.define("btrix-collections-add", CollectionsAdd);
-});
-import("./code").then(({ Code }) => {
-  customElements.define("btrix-code", Code);
-});
 import("./pw-strength-alert").then(({ PasswordStrengthAlert }) => {
   customElements.define("btrix-pw-strength-alert", PasswordStrengthAlert);
 });
@@ -160,6 +106,5 @@ import("./meter").then(({ Meter, MeterBar }) => {
   customElements.define("btrix-meter", Meter);
   customElements.define("btrix-meter-bar", MeterBar);
 });
-customElements.define("btrix-alert", Alert);
 customElements.define("btrix-input", Input);
 customElements.define("btrix-time-input", TimeInput);