From d8f8e6db7309f60788298f3e2e80c8bd1a270dba Mon Sep 17 00:00:00 2001 From: emma Date: Wed, 15 Nov 2023 18:14:17 -0500 Subject: [PATCH] update first half of custom elements to be defined at their class dfns --- frontend/src/components/account-settings.ts | 3 +- frontend/src/components/alert.ts | 3 +- frontend/src/components/badge.ts | 3 +- frontend/src/components/button.ts | 3 +- frontend/src/components/checkbox-list.ts | 4 + frontend/src/components/code.ts | 3 +- frontend/src/components/collections-add.ts | 3 +- frontend/src/components/combobox.ts | 2 + frontend/src/components/config-details.ts | 3 +- frontend/src/components/config-editor.ts | 3 +- frontend/src/components/copy-button.ts | 3 +- frontend/src/components/crawl-list.ts | 3 + frontend/src/components/crawl-logs.ts | 3 +- .../src/components/crawl-metadata-editor.ts | 3 +- .../components/crawl-pending-exclusions.ts | 3 +- frontend/src/components/crawl-queue.ts | 3 +- frontend/src/components/crawl-status.ts | 7 +- frontend/src/components/data-table.ts | 3 +- frontend/src/components/desc-list.ts | 4 +- frontend/src/components/details.ts | 3 +- frontend/src/components/dialog.ts | 2 + frontend/src/components/exclusion-editor.ts | 3 +- frontend/src/components/file-list.ts | 3 + frontend/src/components/index.ts | 101 ++++-------------- 24 files changed, 78 insertions(+), 96 deletions(-) diff --git a/frontend/src/components/account-settings.ts b/frontend/src/components/account-settings.ts index f79f4cfc..fd2498d0 100644 --- a/frontend/src/components/account-settings.ts +++ b/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; diff --git a/frontend/src/components/alert.ts b/frontend/src/components/alert.ts index 89d6ed77..ced051a8 100644 --- a/frontend/src/components/alert.ts +++ b/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"; * 10 * ``` */ +@customElement("btrix-badge") export class Badge extends LitElement { @property({ type: String }) variant: "success" | "warning" | "danger" | "neutral" = "neutral"; diff --git a/frontend/src/components/button.ts b/frontend/src/components/button.ts index 2dd56bc9..67ee1220 100644 --- a/frontend/src/components/button.ts +++ b/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"; * Click me * ``` */ +@customElement("btrix-button") export class Button extends LitElement { @property({ type: String }) type: "submit" | "button" = "button"; diff --git a/frontend/src/components/checkbox-list.ts b/frontend/src/components/checkbox-list.ts index f215ff17..23bfed84 100644 --- a/frontend/src/components/checkbox-list.ts +++ b/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, diff --git a/frontend/src/components/code.ts b/frontend/src/components/code.ts index cdc769c3..07fc1d75 100644 --- a/frontend/src/components/code.ts +++ b/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` diff --git a/frontend/src/components/collections-add.ts b/frontend/src/components/collections-add.ts index 89996d9c..4e99b83a 100644 --- a/frontend/src/components/collections-add.ts +++ b/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; diff --git a/frontend/src/components/combobox.ts b/frontend/src/components/combobox.ts index 5bd7a03c..cb519f84 100644 --- a/frontend/src/components/combobox.ts +++ b/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, diff --git a/frontend/src/components/config-details.ts b/frontend/src/components/config-details.ts index e6b4c48f..5b7ae537 100644 --- a/frontend/src/components/config-details.ts +++ b/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; diff --git a/frontend/src/components/config-editor.ts b/frontend/src/components/config-editor.ts index 7ea2be91..64951eed 100644 --- a/frontend/src/components/config-editor.ts +++ b/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 = ""; diff --git a/frontend/src/components/copy-button.ts b/frontend/src/components/copy-button.ts index 05e321c3..e9b6dc9c 100644 --- a/frontend/src/components/copy-button.ts +++ b/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; diff --git a/frontend/src/components/crawl-list.ts b/frontend/src/components/crawl-list.ts index d2287448..fd258b05 100644 --- a/frontend/src/components/crawl-list.ts +++ b/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, diff --git a/frontend/src/components/crawl-logs.ts b/frontend/src/components/crawl-logs.ts index c4a32a5f..85988fea 100644 --- a/frontend/src/components/crawl-logs.ts +++ b/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, diff --git a/frontend/src/components/crawl-metadata-editor.ts b/frontend/src/components/crawl-metadata-editor.ts index a6cd2868..4814c91f 100644 --- a/frontend/src/components/crawl-metadata-editor.ts +++ b/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; diff --git a/frontend/src/components/crawl-pending-exclusions.ts b/frontend/src/components/crawl-pending-exclusions.ts index aee6a976..18b35b3c 100644 --- a/frontend/src/components/crawl-pending-exclusions.ts +++ b/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; diff --git a/frontend/src/components/crawl-queue.ts b/frontend/src/components/crawl-queue.ts index 597f5743..33e9fba5 100644 --- a/frontend/src/components/crawl-queue.ts +++ b/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; diff --git a/frontend/src/components/crawl-status.ts b/frontend/src/components/crawl-status.ts index 2e7dca26..a2ff9eee 100644 --- a/frontend/src/components/crawl-status.ts +++ b/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; diff --git a/frontend/src/components/data-table.ts b/frontend/src/components/data-table.ts index 0c1a53c7..b43e3e8c 100644 --- a/frontend/src/components/data-table.ts +++ b/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; * * ``` */ +@customElement("btrix-data-table") export class DataTable extends LitElement { static styles = css` :host { diff --git a/frontend/src/components/desc-list.ts b/frontend/src/components/desc-list.ts index ef1bcf4e..2f420d1d 100644 --- a/frontend/src/components/desc-list.ts +++ b/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 { diff --git a/frontend/src/components/details.ts b/frontend/src/components/details.ts index 6c30437c..2b8dc5a6 100644 --- a/frontend/src/components/details.ts +++ b/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; diff --git a/frontend/src/components/dialog.ts b/frontend/src/components/dialog.ts index 03b4ad1d..0e3f1033 100644 --- a/frontend/src/components/dialog.ts +++ b/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 * * Usage: see https://shoelace.style/components/dialog */ +@customElement("btrix-dialog") export class Dialog extends SLDialog { static styles = css` ${dialogStyles} .dialog__panel { diff --git a/frontend/src/components/exclusion-editor.ts b/frontend/src/components/exclusion-editor.ts index d826a785..3d017a36 100644 --- a/frontend/src/components/exclusion-editor.ts +++ b/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; diff --git a/frontend/src/components/file-list.ts b/frontend/src/components/file-list.ts index 98479f4c..b7637d6e 100644 --- a/frontend/src/components/file-list.ts +++ b/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` diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index afa16078..78c42482 100644 --- a/frontend/src/components/index.ts +++ b/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 }) => { - customElements.define("btrix-details", Details); -}); +import("./details"); import("./locale-picker").then(({ LocalePicker }) => { customElements.define("btrix-locale-picker", LocalePicker); }); -import("./account-settings").then(({ AccountSettings }) => { - customElements.define("btrix-account-settings", AccountSettings); -}); -import("./config-editor").then(({ ConfigEditor }) => { - customElements.define("btrix-config-editor", ConfigEditor); -}); +import("./account-settings"); +import("./config-editor"); import("./orgs-list").then(({ OrgsList }) => { customElements.define("btrix-orgs-list", OrgsList); }); -import("./copy-button").then(({ CopyButton }) => { - customElements.define("btrix-copy-button", CopyButton); -}); +import("./copy-button"); 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 }) => { - customElements.define("btrix-crawl-queue", CrawlQueue); -}); -import("./exclusion-editor").then(({ ExclusionEditor }) => { - customElements.define("btrix-exclusion-editor", ExclusionEditor); -}); -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("./crawl-queue"); +import("./exclusion-editor"); +import("./crawl-pending-exclusions"); +import("./badge"); +import("./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 }) => { - customElements.define("btrix-desc-list-item", DescListItem); - customElements.define("btrix-desc-list", DescList); -}); -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("./desc-list"); +import("./checkbox-list"); +import("./crawl-list"); import("./workflow-list").then(({ WorkflowListItem, WorkflowList }) => { customElements.define("btrix-workflow-list-item", WorkflowListItem); customElements.define("btrix-workflow-list", WorkflowList); }); -import("./crawl-logs").then(({ CrawlLogs }) => { - customElements.define("btrix-crawl-logs", CrawlLogs); -}); +import("./crawl-logs"); import("./section-heading").then(({ SectionHeading }) => { customElements.define("btrix-section-heading", SectionHeading); }); -import("./config-details").then(({ ConfigDetails }) => { - customElements.define("btrix-config-details", ConfigDetails); -}); +import("./config-details"); import("./tag-input").then(({ TagInput }) => { customElements.define("btrix-tag-input", TagInput); }); import("./tag").then(({ Tag }) => { customElements.define("btrix-tag", Tag); }); -import("./dialog").then(({ Dialog }) => { - customElements.define("btrix-dialog", Dialog); -}); -import("./data-table").then(({ DataTable }) => { - 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("./dialog"); +import("./data-table"); +import("./crawl-status"); +import("./crawl-metadata-editor"); import("./observable").then(({ Observable }) => { customElements.define("btrix-observable", Observable); }); -import("./combobox").then(({ Combobox }) => { - customElements.define("btrix-combobox", Combobox); -}); +import("./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 }) => { - customElements.define("btrix-file-list", FileList); - customElements.define("btrix-file-list-item", FileListItem); -}); -import("./collections-add").then(({ CollectionsAdd }) => { - customElements.define("btrix-collections-add", CollectionsAdd); -}); -import("./code").then(({ Code }) => { - customElements.define("btrix-code", Code); -}); +import("./file-list"); +import("./collections-add"); +import("./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);