From c6222230e344ab532ca613ed8060c0ce6dfeb9f7 Mon Sep 17 00:00:00 2001 From: konnorrogers Date: Thu, 15 Jun 2023 14:01:29 -0400 Subject: [PATCH] prototype: scoped elements --- package-lock.json | 21 +------------------ package.json | 3 +-- src/components/alert/alert.component.ts | 9 ++++---- src/components/alert/alert.ts | 8 +++---- .../animated-image/animated-image.ts | 5 ++--- src/internal/shoelace-element.ts | 4 ++-- 6 files changed, 14 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1969ec06..70086a81 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,8 +17,7 @@ "@shoelace-style/localize": "^3.1.1", "composed-offset-position": "^0.0.4", "lit": "^2.7.5", - "qr-creator": "^1.0.0", - "web-component-define": "^2.0.10" + "qr-creator": "^1.0.0" }, "devDependencies": { "@11ty/eleventy": "^2.0.1", @@ -16744,15 +16743,6 @@ "defaults": "^1.0.3" } }, - "node_modules/web-component-define": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/web-component-define/-/web-component-define-2.0.10.tgz", - "integrity": "sha512-gwkjTFdG8eE8fxI4+RZUCQRy06SSSkCyLpQ1YSCsA+z8ZLlnmqLX/3B3WD2ZraVRtyje3hLXS8bxL8CK1/bZYQ==", - "dependencies": { - "@lit/reactive-element": "^1.6.1", - "@open-wc/dedupe-mixin": "^1.3.1" - } - }, "node_modules/webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", @@ -29906,15 +29896,6 @@ "defaults": "^1.0.3" } }, - "web-component-define": { - "version": "2.0.10", - "resolved": "https://registry.npmjs.org/web-component-define/-/web-component-define-2.0.10.tgz", - "integrity": "sha512-gwkjTFdG8eE8fxI4+RZUCQRy06SSSkCyLpQ1YSCsA+z8ZLlnmqLX/3B3WD2ZraVRtyje3hLXS8bxL8CK1/bZYQ==", - "requires": { - "@lit/reactive-element": "^1.6.1", - "@open-wc/dedupe-mixin": "^1.3.1" - } - }, "webidl-conversions": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz", diff --git a/package.json b/package.json index 4e97a9f7..a6aeb885 100644 --- a/package.json +++ b/package.json @@ -72,8 +72,7 @@ "@shoelace-style/localize": "^3.1.1", "composed-offset-position": "^0.0.4", "lit": "^2.7.5", - "qr-creator": "^1.0.0", - "web-component-define": "^2.0.10" + "qr-creator": "^1.0.0" }, "devDependencies": { "@11ty/eleventy": "^2.0.1", diff --git a/src/components/alert/alert.component.ts b/src/components/alert/alert.component.ts index d35c460e..42729593 100644 --- a/src/components/alert/alert.component.ts +++ b/src/components/alert/alert.component.ts @@ -1,17 +1,16 @@ -import '../icon-button/icon-button'; import { animateTo, stopAnimations } from '../../internal/animate'; import { classMap } from 'lit/directives/class-map.js'; -import { property, query } from 'lit/decorators.js'; import { getAnimation, setDefaultAnimation } from '../../utilities/animation-registry'; import { HasSlotController } from '../../internal/slot'; import { html } from 'lit'; import { LocalizeController } from '../../utilities/localize'; +import { property, query } from 'lit/decorators.js'; import { waitForEvent } from '../../internal/event'; import { watch } from '../../internal/watch'; import ShoelaceElement from '../../internal/shoelace-element'; +import SlIconButton from '../icon-button/icon-button'; import styles from './alert.styles'; import type { CSSResultGroup } from 'lit'; -import SlIconButton from '../icon-button/icon-button'; const toastStack = Object.assign(document.createElement('div'), { className: 'sl-toast-stack' }); @@ -43,10 +42,10 @@ const toastStack = Object.assign(document.createElement('div'), { className: 'sl export default class SlAlert extends ShoelaceElement { static styles: CSSResultGroup = styles; - static get scopedElements () { + static get scopedElements() { return { 'sl-icon-button': SlIconButton - } + }; } private autoHideTimeout: number; diff --git a/src/components/alert/alert.ts b/src/components/alert/alert.ts index 3a706406..00f792b3 100644 --- a/src/components/alert/alert.ts +++ b/src/components/alert/alert.ts @@ -1,5 +1,5 @@ -import SlAlert from "./alert.component" -export * from "./alert.component" +import SlAlert from './alert.component'; +export * from './alert.component'; -export default SlAlert -window.customElements.define("sl-alert", SlAlert) +export default SlAlert; +window.customElements.define('sl-alert', SlAlert); diff --git a/src/components/animated-image/animated-image.ts b/src/components/animated-image/animated-image.ts index e939a21d..18e1ab79 100644 --- a/src/components/animated-image/animated-image.ts +++ b/src/components/animated-image/animated-image.ts @@ -1,11 +1,10 @@ -import '../icon/icon'; import { customElement, property, query, state } from 'lit/decorators.js'; import { html } from 'lit'; import { watch } from '../../internal/watch'; import ShoelaceElement from '../../internal/shoelace-element'; +import SlIcon from '../icon/icon'; import styles from './animated-image.styles'; import type { CSSResultGroup } from 'lit'; -import SlIcon from '../icon/icon'; /** * @summary A component for displaying animated GIFs and WEBPs that play and pause on interaction. @@ -31,7 +30,7 @@ export default class SlAnimatedImage extends ShoelaceElement { static styles: CSSResultGroup = styles; static scopedElements = { 'sl-icon': SlIcon - } + }; @query('.animated-image__animated') animatedImage: HTMLImageElement; diff --git a/src/internal/shoelace-element.ts b/src/internal/shoelace-element.ts index d5252340..ddb34f35 100644 --- a/src/internal/shoelace-element.ts +++ b/src/internal/shoelace-element.ts @@ -1,6 +1,6 @@ import { LitElement } from 'lit'; import { property } from 'lit/decorators.js'; -import { ScopedElementsMixin } from "@open-wc/scoped-elements" +import { ScopedElementsMixin } from '@open-wc/scoped-elements'; // Match event type name strings that are registered on GlobalEventHandlersEventMap... type EventTypeRequiresDetail = T extends keyof GlobalEventHandlersEventMap @@ -68,7 +68,7 @@ export default class ShoelaceElement extends ScopedElementsMixin(LitElement) { @property() dir: string; @property() lang: string; - static scopedElements: Record + static scopedElements: Record; /** Emits a custom event with more convenient defaults. */ emit(