From df3350d0cea556d9ebde37714bbe3f776c6ab360 Mon Sep 17 00:00:00 2001 From: Hunter Loftis Date: Thu, 20 Apr 2023 04:57:47 -0400 Subject: [PATCH] feat: warn on element redefinitions --- packages/accordion/sp-accordion-item.ts | 3 +- packages/accordion/sp-accordion.ts | 3 +- .../accordion/test/accordion-item.test.ts | 5 +++ packages/accordion/test/accordion.test.ts | 9 ++++- packages/action-bar/sp-action-bar.ts | 3 +- packages/action-bar/test/action-bar.test.ts | 9 ++++- packages/action-button/sp-action-button.ts | 3 +- .../action-button/test/action-button.test.ts | 9 ++++- packages/action-group/sp-action-group.ts | 3 +- .../action-group/test/action-group.test.ts | 5 +++ packages/action-menu/sp-action-menu.ts | 3 +- packages/action-menu/test/index.ts | 9 ++++- packages/asset/sp-asset.ts | 3 +- packages/asset/test/asset.test.ts | 9 ++++- packages/avatar/sp-avatar.ts | 3 +- packages/avatar/test/avatar.test.ts | 9 ++++- packages/badge/sp-badge.ts | 3 +- packages/banner/sp-banner.ts | 3 +- packages/button-group/sp-button-group.ts | 3 +- packages/button/sp-button.ts | 3 +- packages/button/sp-clear-button.ts | 3 +- packages/button/sp-close-button.ts | 3 +- packages/button/test/button.test.ts | 5 +++ packages/card/sp-card.ts | 3 +- packages/checkbox/sp-checkbox.ts | 3 +- packages/coachmark/sp-coachmark.ts | 3 +- packages/color-area/sp-color-area.ts | 3 +- packages/color-handle/sp-color-handle.ts | 3 +- packages/color-loupe/sp-color-loupe.ts | 3 +- packages/color-slider/sp-color-slider.ts | 3 +- packages/color-wheel/sp-color-wheel.ts | 3 +- packages/dialog/sp-dialog-base.ts | 3 +- packages/dialog/sp-dialog-wrapper.ts | 3 +- packages/dialog/sp-dialog.ts | 3 +- packages/divider/sp-divider.ts | 3 +- packages/dropzone/sp-dropzone.ts | 3 +- packages/field-group/sp-field-group.ts | 3 +- packages/field-label/sp-field-label.ts | 3 +- packages/help-text/sp-help-text.ts | 3 +- packages/icon/sp-icon.ts | 3 +- packages/icons/sp-icons-large.ts | 3 +- packages/icons/sp-icons-medium.ts | 3 +- .../sp-illustrated-message.ts | 3 +- packages/link/sp-link.ts | 3 +- packages/menu/sp-menu-divider.ts | 3 +- packages/menu/sp-menu-group.ts | 3 +- packages/menu/sp-menu-item.ts | 3 +- packages/menu/sp-menu.ts | 3 +- packages/meter/sp-meter.ts | 3 +- packages/number-field/sp-number-field.ts | 3 +- packages/picker-button/sp-picker-button.ts | 3 +- packages/picker/sp-picker.ts | 3 +- packages/popover/sp-popover.ts | 3 +- packages/progress-bar/sp-progress-bar.ts | 3 +- .../progress-circle/sp-progress-circle.ts | 3 +- packages/quick-actions/sp-quick-actions.ts | 3 +- packages/radio/sp-radio-group.ts | 3 +- packages/radio/sp-radio.ts | 3 +- packages/search/sp-search.ts | 3 +- packages/sidenav/sp-sidenav-heading.ts | 3 +- packages/sidenav/sp-sidenav-item.ts | 3 +- packages/sidenav/sp-sidenav.ts | 3 +- packages/slider/sp-slider-handle.ts | 3 +- packages/slider/sp-slider.ts | 3 +- packages/split-button/sp-split-button.ts | 3 +- packages/split-view/sp-split-view.ts | 3 +- packages/status-light/sp-status-light.ts | 3 +- packages/swatch/sp-swatch-group.ts | 3 +- packages/swatch/sp-swatch.ts | 3 +- packages/switch/sp-switch.ts | 3 +- packages/table/sp-table-body.ts | 3 +- packages/table/sp-table-cell.ts | 3 +- packages/table/sp-table-checkbox-cell.ts | 3 +- packages/table/sp-table-head-cell.ts | 3 +- packages/table/sp-table-head.ts | 3 +- packages/table/sp-table-row.ts | 3 +- packages/table/sp-table.ts | 3 +- packages/tabs/sp-tab-panel.ts | 3 +- packages/tabs/sp-tab.ts | 3 +- packages/tabs/sp-tabs-overflow.ts | 3 +- packages/tabs/sp-tabs.ts | 3 +- packages/tags/sp-tag.ts | 3 +- packages/tags/sp-tags.ts | 3 +- packages/textfield/sp-textfield.ts | 3 +- packages/thumbnail/sp-thumbnail.ts | 3 +- packages/toast/sp-toast.ts | 3 +- packages/tooltip/sp-tooltip.ts | 3 +- packages/top-nav/sp-top-nav-item.ts | 3 +- packages/top-nav/sp-top-nav.ts | 3 +- packages/tray/sp-tray.ts | 3 +- packages/underlay/sp-underlay.ts | 3 +- test/testing-helpers.ts | 35 +++++++++++++++++++ tools/shared/package.json | 4 +++ tools/shared/src/define-element.ts | 31 ++++++++++++++++ tools/styles/spectrum-core-global.css | 6 ++++ 95 files changed, 303 insertions(+), 88 deletions(-) create mode 100644 tools/shared/src/define-element.ts diff --git a/packages/accordion/sp-accordion-item.ts b/packages/accordion/sp-accordion-item.ts index 09c5baa57a6..29c063289c6 100644 --- a/packages/accordion/sp-accordion-item.ts +++ b/packages/accordion/sp-accordion-item.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { AccordionItem } from './src/AccordionItem.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-accordion-item', AccordionItem); +defineElement('sp-accordion-item', AccordionItem); declare global { interface HTMLElementTagNameMap { diff --git a/packages/accordion/sp-accordion.ts b/packages/accordion/sp-accordion.ts index 4fb392d96c7..fbe4c8e692b 100644 --- a/packages/accordion/sp-accordion.ts +++ b/packages/accordion/sp-accordion.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Accordion } from './src/Accordion.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-accordion', Accordion); +defineElement('sp-accordion', Accordion); declare global { interface HTMLElementTagNameMap { diff --git a/packages/accordion/test/accordion-item.test.ts b/packages/accordion/test/accordion-item.test.ts index 0b533f91c3e..dd6d449d8fb 100644 --- a/packages/accordion/test/accordion-item.test.ts +++ b/packages/accordion/test/accordion-item.test.ts @@ -16,6 +16,7 @@ import { spy } from 'sinon'; import '@spectrum-web-components/accordion/sp-accordion-item.js'; import { AccordionItem } from '@spectrum-web-components/accordion/src/AccordionItem.js'; import { sendKeys } from '@web/test-runner-commands'; +import { warnsOnDoubleRegister } from '../../../test/testing-helpers.js'; describe('Accordion Item', () => { it('can exist with no parent accessibly', async () => { @@ -196,4 +197,8 @@ describe('Accordion Item', () => { expect(closed).to.be.false; expect(el.open).to.be.true; }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-accordion-item.js')) + ); }); diff --git a/packages/accordion/test/accordion.test.ts b/packages/accordion/test/accordion.test.ts index 4134507621c..4b9f791f29b 100644 --- a/packages/accordion/test/accordion.test.ts +++ b/packages/accordion/test/accordion.test.ts @@ -17,7 +17,10 @@ import { Default } from '../stories/accordion.stories.js'; import { Accordion, AccordionItem } from '@spectrum-web-components/accordion'; import { sendKeys } from '@web/test-runner-commands'; import { spy } from 'sinon'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers.js'; describe('Accordion', () => { testForLitDevWarnings(async () => await fixture(Default())); @@ -318,4 +321,8 @@ describe('Accordion', () => { expect(typeof outsideFocused).not.to.equal(AccordionItem); expect(typeof outsideFocused).not.to.equal(Accordion); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-accordion.js')) + ); }); diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts index 0ba6f114d6b..02435b70a0a 100644 --- a/packages/action-bar/sp-action-bar.ts +++ b/packages/action-bar/sp-action-bar.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ActionBar } from './src/ActionBar.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-action-bar', ActionBar); +defineElement('sp-action-bar', ActionBar); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-bar/test/action-bar.test.ts b/packages/action-bar/test/action-bar.test.ts index 9ebf73d9092..bf670817bff 100644 --- a/packages/action-bar/test/action-bar.test.ts +++ b/packages/action-bar/test/action-bar.test.ts @@ -15,7 +15,10 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; import '@spectrum-web-components/action-bar/sp-action-bar.js'; import { ActionBar } from '@spectrum-web-components/action-bar'; import { Default } from '../stories/action-bar.stories.js'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers.js'; describe('ActionBar', () => { testForLitDevWarnings(async () => await fixture(Default())); @@ -88,4 +91,8 @@ describe('ActionBar', () => { expect(el.variant).to.equal('fixed'); expect(el.getAttribute('variant')).to.equal('fixed'); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-action-bar.js')) + ); }); diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts index 880398d022f..0ac54d73902 100644 --- a/packages/action-button/sp-action-button.ts +++ b/packages/action-button/sp-action-button.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ActionButton } from './src/ActionButton.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-action-button', ActionButton); +defineElement('sp-action-button', ActionButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts index 707cb5a36de..036081c508e 100644 --- a/packages/action-button/test/action-button.test.ts +++ b/packages/action-button/test/action-button.test.ts @@ -25,7 +25,10 @@ import { } from '@open-wc/testing'; import { sendKeys } from '@web/test-runner-commands'; import { spy } from 'sinon'; -import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers.js'; import { m as BlackActionButton } from '../stories/action-button-black.stories.js'; describe('ActionButton', () => { @@ -235,4 +238,8 @@ describe('ActionButton', () => { expect(el.selected).to.be.true; expect(button.getAttribute('aria-pressed')).to.equal('true'); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-action-button.js')) + ); }); diff --git a/packages/action-group/sp-action-group.ts b/packages/action-group/sp-action-group.ts index fc0c5bbf46b..cd406eb3288 100644 --- a/packages/action-group/sp-action-group.ts +++ b/packages/action-group/sp-action-group.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ActionGroup } from './src/ActionGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-action-group', ActionGroup); +defineElement('sp-action-group', ActionGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts index 221d60f2df1..565869d2a25 100644 --- a/packages/action-group/test/action-group.test.ts +++ b/packages/action-group/test/action-group.test.ts @@ -32,6 +32,7 @@ import { endEvent, homeEvent, testForLitDevWarnings, + warnsOnDoubleRegister, } from '../../../test/testing-helpers'; import { sendKeys } from '@web/test-runner-commands'; import '@spectrum-web-components/action-group/sp-action-group.js'; @@ -1068,4 +1069,8 @@ describe('ActionGroup', () => { expect(el.selected.length).to.equal(1); expect(el.selected[0]).to.equal('Third'); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-action-group.js')) + ); }); diff --git a/packages/action-menu/sp-action-menu.ts b/packages/action-menu/sp-action-menu.ts index 682841c85db..38d83a166e6 100644 --- a/packages/action-menu/sp-action-menu.ts +++ b/packages/action-menu/sp-action-menu.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ActionMenu } from './src/ActionMenu.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-action-menu', ActionMenu); +defineElement('sp-action-menu', ActionMenu); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts index ad71064c790..302806d6163 100644 --- a/packages/action-menu/test/index.ts +++ b/packages/action-menu/test/index.ts @@ -17,7 +17,10 @@ import { html, oneEvent, } from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers'; import { spy } from 'sinon'; @@ -423,4 +426,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => { expect(selectedItem.selected).to.be.true; }); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-action-menu.js')) + ); }; diff --git a/packages/asset/sp-asset.ts b/packages/asset/sp-asset.ts index a9e945c6c10..fe3f5390924 100644 --- a/packages/asset/sp-asset.ts +++ b/packages/asset/sp-asset.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Asset } from './src/Asset.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-asset', Asset); +defineElement('sp-asset', Asset); declare global { interface HTMLElementTagNameMap { diff --git a/packages/asset/test/asset.test.ts b/packages/asset/test/asset.test.ts index 181afdde0a7..c4e28d855bc 100644 --- a/packages/asset/test/asset.test.ts +++ b/packages/asset/test/asset.test.ts @@ -13,7 +13,10 @@ governing permissions and limitations under the License. import { elementUpdated, expect, fixture } from '@open-wc/testing'; import { Asset } from '@spectrum-web-components/asset'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers'; import { Default, File, Folder } from '../stories/asset.stories.js'; describe('Asset', () => { @@ -39,4 +42,8 @@ describe('Asset', () => { await expect(el).to.be.accessible(); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-asset.js')) + ); }); diff --git a/packages/avatar/sp-avatar.ts b/packages/avatar/sp-avatar.ts index 4336bbffcd1..d98c42e870e 100644 --- a/packages/avatar/sp-avatar.ts +++ b/packages/avatar/sp-avatar.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Avatar } from './src/Avatar.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-avatar', Avatar); +defineElement('sp-avatar', Avatar); declare global { interface HTMLElementTagNameMap { diff --git a/packages/avatar/test/avatar.test.ts b/packages/avatar/test/avatar.test.ts index f82b207465f..e10abb95445 100644 --- a/packages/avatar/test/avatar.test.ts +++ b/packages/avatar/test/avatar.test.ts @@ -11,7 +11,10 @@ governing permissions and limitations under the License. import '@spectrum-web-components/avatar/sp-avatar.js'; import { Avatar } from '@spectrum-web-components/avatar'; import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; -import { testForLitDevWarnings } from '../../../test/testing-helpers'; +import { + testForLitDevWarnings, + warnsOnDoubleRegister, +} from '../../../test/testing-helpers'; describe('Avatar', () => { testForLitDevWarnings( @@ -111,4 +114,8 @@ describe('Avatar', () => { }).to.throw('There should be no error.'); } }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-avatar.js')) + ); }); diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts index 14aaea98fc6..10ba9a23677 100644 --- a/packages/badge/sp-badge.ts +++ b/packages/badge/sp-badge.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Badge } from './src/Badge.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-badge', Badge); +defineElement('sp-badge', Badge); declare global { interface HTMLElementTagNameMap { diff --git a/packages/banner/sp-banner.ts b/packages/banner/sp-banner.ts index 4fcd561b16a..c45571793b7 100644 --- a/packages/banner/sp-banner.ts +++ b/packages/banner/sp-banner.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Banner } from './src/Banner.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-banner', Banner); +defineElement('sp-banner', Banner); declare global { interface HTMLElementTagNameMap { diff --git a/packages/button-group/sp-button-group.ts b/packages/button-group/sp-button-group.ts index 88a88e13354..d12e15d3b1a 100644 --- a/packages/button-group/sp-button-group.ts +++ b/packages/button-group/sp-button-group.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { ButtonGroup } from './src/ButtonGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-button-group', ButtonGroup); +defineElement('sp-button-group', ButtonGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/button/sp-button.ts b/packages/button/sp-button.ts index 7f1b72381a6..f117f21a19e 100644 --- a/packages/button/sp-button.ts +++ b/packages/button/sp-button.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Button } from './src/Button.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-button', Button); +defineElement('sp-button', Button); declare global { interface HTMLElementTagNameMap { diff --git a/packages/button/sp-clear-button.ts b/packages/button/sp-clear-button.ts index 2888f412098..79ea0333f00 100644 --- a/packages/button/sp-clear-button.ts +++ b/packages/button/sp-clear-button.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { ClearButton } from './src/ClearButton.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-clear-button', ClearButton); +defineElement('sp-clear-button', ClearButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/button/sp-close-button.ts b/packages/button/sp-close-button.ts index b931727f3ec..dd605996200 100644 --- a/packages/button/sp-close-button.ts +++ b/packages/button/sp-close-button.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { CloseButton } from './src/CloseButton.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-close-button', CloseButton); +defineElement('sp-close-button', CloseButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/button/test/button.test.ts b/packages/button/test/button.test.ts index 4b8593b17a6..fb579b724f5 100644 --- a/packages/button/test/button.test.ts +++ b/packages/button/test/button.test.ts @@ -22,6 +22,7 @@ import { import { shiftTabEvent, testForLitDevWarnings, + warnsOnDoubleRegister, } from '../../../test/testing-helpers.js'; import { spy } from 'sinon'; @@ -562,4 +563,8 @@ describe('Button', () => { expect(el.variant).to.equal('accent'); }); }); + describe( + 'dev mode', + warnsOnDoubleRegister(() => import('../sp-button.js')) + ); }); diff --git a/packages/card/sp-card.ts b/packages/card/sp-card.ts index f8c0ee3a49f..96dacdd62f7 100644 --- a/packages/card/sp-card.ts +++ b/packages/card/sp-card.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Card } from './src/Card.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-card', Card); +defineElement('sp-card', Card); declare global { interface HTMLElementTagNameMap { diff --git a/packages/checkbox/sp-checkbox.ts b/packages/checkbox/sp-checkbox.ts index 56ee43dcddc..a4c73936b2d 100644 --- a/packages/checkbox/sp-checkbox.ts +++ b/packages/checkbox/sp-checkbox.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Checkbox } from './src/Checkbox.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-checkbox', Checkbox); +defineElement('sp-checkbox', Checkbox); declare global { interface HTMLElementTagNameMap { diff --git a/packages/coachmark/sp-coachmark.ts b/packages/coachmark/sp-coachmark.ts index 5ce3feb831c..ba2b925989e 100644 --- a/packages/coachmark/sp-coachmark.ts +++ b/packages/coachmark/sp-coachmark.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Coachmark } from './src/Coachmark.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-coachmark', Coachmark); +defineElement('sp-coachmark', Coachmark); declare global { interface HTMLElementTagNameMap { diff --git a/packages/color-area/sp-color-area.ts b/packages/color-area/sp-color-area.ts index f618a55797e..17b7e44a0c8 100644 --- a/packages/color-area/sp-color-area.ts +++ b/packages/color-area/sp-color-area.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ColorArea } from './src/ColorArea.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-color-area', ColorArea); +defineElement('sp-color-area', ColorArea); declare global { interface HTMLElementTagNameMap { diff --git a/packages/color-handle/sp-color-handle.ts b/packages/color-handle/sp-color-handle.ts index f37f50c9768..ee9a396e2a7 100644 --- a/packages/color-handle/sp-color-handle.ts +++ b/packages/color-handle/sp-color-handle.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ColorHandle } from './src/ColorHandle.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-color-handle', ColorHandle); +defineElement('sp-color-handle', ColorHandle); declare global { interface HTMLElementTagNameMap { diff --git a/packages/color-loupe/sp-color-loupe.ts b/packages/color-loupe/sp-color-loupe.ts index 540fa8a9c8b..82ba78011d7 100644 --- a/packages/color-loupe/sp-color-loupe.ts +++ b/packages/color-loupe/sp-color-loupe.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ColorLoupe } from './src/ColorLoupe.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-color-loupe', ColorLoupe); +defineElement('sp-color-loupe', ColorLoupe); declare global { interface HTMLElementTagNameMap { diff --git a/packages/color-slider/sp-color-slider.ts b/packages/color-slider/sp-color-slider.ts index 8a4f7d02c9c..1463cbb3e3a 100644 --- a/packages/color-slider/sp-color-slider.ts +++ b/packages/color-slider/sp-color-slider.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ColorSlider } from './src/ColorSlider.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-color-slider', ColorSlider); +defineElement('sp-color-slider', ColorSlider); declare global { interface HTMLElementTagNameMap { diff --git a/packages/color-wheel/sp-color-wheel.ts b/packages/color-wheel/sp-color-wheel.ts index 539d79e292f..0133869fc31 100644 --- a/packages/color-wheel/sp-color-wheel.ts +++ b/packages/color-wheel/sp-color-wheel.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ColorWheel } from './src/ColorWheel.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-color-wheel', ColorWheel); +defineElement('sp-color-wheel', ColorWheel); declare global { interface HTMLElementTagNameMap { diff --git a/packages/dialog/sp-dialog-base.ts b/packages/dialog/sp-dialog-base.ts index aa7f561effd..52f0fc347e4 100644 --- a/packages/dialog/sp-dialog-base.ts +++ b/packages/dialog/sp-dialog-base.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { DialogBase } from './src/DialogBase.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-dialog-base', DialogBase); +defineElement('sp-dialog-base', DialogBase); declare global { interface HTMLElementTagNameMap { diff --git a/packages/dialog/sp-dialog-wrapper.ts b/packages/dialog/sp-dialog-wrapper.ts index 12ab674ed3e..b6d276f14ab 100644 --- a/packages/dialog/sp-dialog-wrapper.ts +++ b/packages/dialog/sp-dialog-wrapper.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { DialogWrapper } from './src/DialogWrapper.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-dialog-wrapper', DialogWrapper); +defineElement('sp-dialog-wrapper', DialogWrapper); declare global { interface HTMLElementTagNameMap { diff --git a/packages/dialog/sp-dialog.ts b/packages/dialog/sp-dialog.ts index 234828ac6c0..aea2dfcfa67 100644 --- a/packages/dialog/sp-dialog.ts +++ b/packages/dialog/sp-dialog.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Dialog } from './src/Dialog.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-dialog', Dialog); +defineElement('sp-dialog', Dialog); declare global { interface HTMLElementTagNameMap { diff --git a/packages/divider/sp-divider.ts b/packages/divider/sp-divider.ts index 8c08e0b34b8..15912cfa05e 100644 --- a/packages/divider/sp-divider.ts +++ b/packages/divider/sp-divider.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Divider } from './src/Divider.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-divider', Divider); +defineElement('sp-divider', Divider); declare global { interface HTMLElementTagNameMap { diff --git a/packages/dropzone/sp-dropzone.ts b/packages/dropzone/sp-dropzone.ts index 6adf632a7cb..cf345b30725 100644 --- a/packages/dropzone/sp-dropzone.ts +++ b/packages/dropzone/sp-dropzone.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Dropzone } from './src/Dropzone.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-dropzone', Dropzone); +defineElement('sp-dropzone', Dropzone); declare global { interface HTMLElementTagNameMap { diff --git a/packages/field-group/sp-field-group.ts b/packages/field-group/sp-field-group.ts index 33d5b148bca..1bde5ff4ab4 100644 --- a/packages/field-group/sp-field-group.ts +++ b/packages/field-group/sp-field-group.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { FieldGroup } from './src/FieldGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-field-group', FieldGroup); +defineElement('sp-field-group', FieldGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/field-label/sp-field-label.ts b/packages/field-label/sp-field-label.ts index 9bca15f20b2..1a9a0c4ef85 100644 --- a/packages/field-label/sp-field-label.ts +++ b/packages/field-label/sp-field-label.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { FieldLabel } from './src/FieldLabel.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-field-label', FieldLabel); +defineElement('sp-field-label', FieldLabel); declare global { interface HTMLElementTagNameMap { diff --git a/packages/help-text/sp-help-text.ts b/packages/help-text/sp-help-text.ts index bf222397fa2..5c55580069b 100644 --- a/packages/help-text/sp-help-text.ts +++ b/packages/help-text/sp-help-text.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { HelpText } from './src/HelpText.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-help-text', HelpText); +defineElement('sp-help-text', HelpText); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icon/sp-icon.ts b/packages/icon/sp-icon.ts index a26b9dd01c9..704f9432af5 100644 --- a/packages/icon/sp-icon.ts +++ b/packages/icon/sp-icon.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Icon } from './src/Icon.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-icon', Icon); +defineElement('sp-icon', Icon); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icons/sp-icons-large.ts b/packages/icons/sp-icons-large.ts index 2deb8e0b330..bb5c52ffc5f 100644 --- a/packages/icons/sp-icons-large.ts +++ b/packages/icons/sp-icons-large.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { IconsLarge } from './src/IconsLarge.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-icons-large', IconsLarge); +defineElement('sp-icons-large', IconsLarge); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icons/sp-icons-medium.ts b/packages/icons/sp-icons-medium.ts index 9b491476af6..59bdb16a986 100644 --- a/packages/icons/sp-icons-medium.ts +++ b/packages/icons/sp-icons-medium.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { IconsMedium } from './src/IconsMedium.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-icons-medium', IconsMedium); +defineElement('sp-icons-medium', IconsMedium); declare global { interface HTMLElementTagNameMap { diff --git a/packages/illustrated-message/sp-illustrated-message.ts b/packages/illustrated-message/sp-illustrated-message.ts index 48c21d485f8..ce915184c7c 100644 --- a/packages/illustrated-message/sp-illustrated-message.ts +++ b/packages/illustrated-message/sp-illustrated-message.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { IllustratedMessage } from './src/IllustratedMessage.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-illustrated-message', IllustratedMessage); +defineElement('sp-illustrated-message', IllustratedMessage); declare global { interface HTMLElementTagNameMap { diff --git a/packages/link/sp-link.ts b/packages/link/sp-link.ts index cf9f9a23aa5..21d00cebdd4 100644 --- a/packages/link/sp-link.ts +++ b/packages/link/sp-link.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Link } from './src/Link.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-link', Link); +defineElement('sp-link', Link); declare global { interface HTMLElementTagNameMap { diff --git a/packages/menu/sp-menu-divider.ts b/packages/menu/sp-menu-divider.ts index 8204eac0785..c6affc29e84 100644 --- a/packages/menu/sp-menu-divider.ts +++ b/packages/menu/sp-menu-divider.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { MenuDivider } from './src/MenuDivider.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-menu-divider', MenuDivider); +defineElement('sp-menu-divider', MenuDivider); declare global { interface HTMLElementTagNameMap { diff --git a/packages/menu/sp-menu-group.ts b/packages/menu/sp-menu-group.ts index 6bf1850f361..d15324552b3 100644 --- a/packages/menu/sp-menu-group.ts +++ b/packages/menu/sp-menu-group.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { MenuGroup } from './src/MenuGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-menu-group', MenuGroup); +defineElement('sp-menu-group', MenuGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/menu/sp-menu-item.ts b/packages/menu/sp-menu-item.ts index db663dd5d53..496c131aeaf 100644 --- a/packages/menu/sp-menu-item.ts +++ b/packages/menu/sp-menu-item.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { MenuItem } from './src/MenuItem.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-menu-item', MenuItem); +defineElement('sp-menu-item', MenuItem); declare global { interface HTMLElementTagNameMap { diff --git a/packages/menu/sp-menu.ts b/packages/menu/sp-menu.ts index 28045257a25..0a10bc6e655 100644 --- a/packages/menu/sp-menu.ts +++ b/packages/menu/sp-menu.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Menu } from './src/Menu.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-menu', Menu); +defineElement('sp-menu', Menu); declare global { interface HTMLElementTagNameMap { diff --git a/packages/meter/sp-meter.ts b/packages/meter/sp-meter.ts index 12b776870ff..a547d946aa0 100644 --- a/packages/meter/sp-meter.ts +++ b/packages/meter/sp-meter.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Meter } from './src/Meter.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-meter', Meter); +defineElement('sp-meter', Meter); declare global { interface HTMLElementTagNameMap { diff --git a/packages/number-field/sp-number-field.ts b/packages/number-field/sp-number-field.ts index ea57d2df040..491211e7393 100644 --- a/packages/number-field/sp-number-field.ts +++ b/packages/number-field/sp-number-field.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { NumberField } from './src/NumberField.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-number-field', NumberField); +defineElement('sp-number-field', NumberField); declare global { interface HTMLElementTagNameMap { diff --git a/packages/picker-button/sp-picker-button.ts b/packages/picker-button/sp-picker-button.ts index d766418dc78..b2429bd7c0f 100644 --- a/packages/picker-button/sp-picker-button.ts +++ b/packages/picker-button/sp-picker-button.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { PickerButton } from './src/PickerButton.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-picker-button', PickerButton); +defineElement('sp-picker-button', PickerButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/picker/sp-picker.ts b/packages/picker/sp-picker.ts index cef5d5a5cf5..2f5376b30e9 100644 --- a/packages/picker/sp-picker.ts +++ b/packages/picker/sp-picker.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Picker } from './src/Picker.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-picker', Picker); +defineElement('sp-picker', Picker); declare global { interface HTMLElementTagNameMap { diff --git a/packages/popover/sp-popover.ts b/packages/popover/sp-popover.ts index 59249a985ab..d6c6ef07b60 100644 --- a/packages/popover/sp-popover.ts +++ b/packages/popover/sp-popover.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Popover } from './src/Popover.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-popover', Popover); +defineElement('sp-popover', Popover); declare global { interface HTMLElementTagNameMap { diff --git a/packages/progress-bar/sp-progress-bar.ts b/packages/progress-bar/sp-progress-bar.ts index c4887742403..9378e7f40cd 100644 --- a/packages/progress-bar/sp-progress-bar.ts +++ b/packages/progress-bar/sp-progress-bar.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ProgressBar } from './src/ProgressBar.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-progress-bar', ProgressBar); +defineElement('sp-progress-bar', ProgressBar); declare global { interface HTMLElementTagNameMap { diff --git a/packages/progress-circle/sp-progress-circle.ts b/packages/progress-circle/sp-progress-circle.ts index 7c8fb2fb5c0..96255693e2e 100644 --- a/packages/progress-circle/sp-progress-circle.ts +++ b/packages/progress-circle/sp-progress-circle.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { ProgressCircle } from './src/ProgressCircle.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-progress-circle', ProgressCircle); +defineElement('sp-progress-circle', ProgressCircle); declare global { interface HTMLElementTagNameMap { diff --git a/packages/quick-actions/sp-quick-actions.ts b/packages/quick-actions/sp-quick-actions.ts index 4976499343d..d0526a62534 100644 --- a/packages/quick-actions/sp-quick-actions.ts +++ b/packages/quick-actions/sp-quick-actions.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { QuickActions } from './src/QuickActions.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-quick-actions', QuickActions); +defineElement('sp-quick-actions', QuickActions); declare global { interface HTMLElementTagNameMap { diff --git a/packages/radio/sp-radio-group.ts b/packages/radio/sp-radio-group.ts index 8fa0a07fa9f..39020a73ece 100644 --- a/packages/radio/sp-radio-group.ts +++ b/packages/radio/sp-radio-group.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { RadioGroup } from './src/RadioGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-radio-group', RadioGroup); +defineElement('sp-radio-group', RadioGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/radio/sp-radio.ts b/packages/radio/sp-radio.ts index d5b76e0276e..e6235a5b9b7 100644 --- a/packages/radio/sp-radio.ts +++ b/packages/radio/sp-radio.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Radio } from './src/Radio.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-radio', Radio); +defineElement('sp-radio', Radio); declare global { interface HTMLElementTagNameMap { diff --git a/packages/search/sp-search.ts b/packages/search/sp-search.ts index 81ca61c7fdd..10a301a93e2 100644 --- a/packages/search/sp-search.ts +++ b/packages/search/sp-search.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Search } from './src/Search.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-search', Search); +defineElement('sp-search', Search); declare global { interface HTMLElementTagNameMap { diff --git a/packages/sidenav/sp-sidenav-heading.ts b/packages/sidenav/sp-sidenav-heading.ts index 6597ce7a527..ede099aa572 100644 --- a/packages/sidenav/sp-sidenav-heading.ts +++ b/packages/sidenav/sp-sidenav-heading.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { SideNavHeading } from './src/SidenavHeading.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-sidenav-heading', SideNavHeading); +defineElement('sp-sidenav-heading', SideNavHeading); declare global { interface HTMLElementTagNameMap { diff --git a/packages/sidenav/sp-sidenav-item.ts b/packages/sidenav/sp-sidenav-item.ts index 118acc0e45c..7aa8fe65f92 100644 --- a/packages/sidenav/sp-sidenav-item.ts +++ b/packages/sidenav/sp-sidenav-item.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { SideNavItem } from './src/SidenavItem.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-sidenav-item', SideNavItem); +defineElement('sp-sidenav-item', SideNavItem); declare global { interface HTMLElementTagNameMap { diff --git a/packages/sidenav/sp-sidenav.ts b/packages/sidenav/sp-sidenav.ts index 04590976d71..6b35621cb9a 100644 --- a/packages/sidenav/sp-sidenav.ts +++ b/packages/sidenav/sp-sidenav.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { SideNav } from './src/Sidenav.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-sidenav', SideNav); +defineElement('sp-sidenav', SideNav); declare global { interface HTMLElementTagNameMap { diff --git a/packages/slider/sp-slider-handle.ts b/packages/slider/sp-slider-handle.ts index 93613efd2c5..5d270d5158c 100644 --- a/packages/slider/sp-slider-handle.ts +++ b/packages/slider/sp-slider-handle.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { SliderHandle } from './src/SliderHandle.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-slider-handle', SliderHandle); +defineElement('sp-slider-handle', SliderHandle); declare global { interface HTMLElementTagNameMap { diff --git a/packages/slider/sp-slider.ts b/packages/slider/sp-slider.ts index 594f0603ddd..87450b474a1 100644 --- a/packages/slider/sp-slider.ts +++ b/packages/slider/sp-slider.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import './sp-slider-handle.js'; // codify sp-slider's implicit dependency on sp-slider-handle import { Slider } from './src/Slider.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-slider', Slider); +defineElement('sp-slider', Slider); declare global { interface HTMLElementTagNameMap { diff --git a/packages/split-button/sp-split-button.ts b/packages/split-button/sp-split-button.ts index 787ad818420..ca2a38fe98b 100644 --- a/packages/split-button/sp-split-button.ts +++ b/packages/split-button/sp-split-button.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { SplitButton } from './src/SplitButton.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-split-button', SplitButton); +defineElement('sp-split-button', SplitButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/split-view/sp-split-view.ts b/packages/split-view/sp-split-view.ts index a94299211bb..caafd9c37e7 100644 --- a/packages/split-view/sp-split-view.ts +++ b/packages/split-view/sp-split-view.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { SplitView } from './src/SplitView.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-split-view', SplitView); +defineElement('sp-split-view', SplitView); declare global { interface HTMLElementTagNameMap { diff --git a/packages/status-light/sp-status-light.ts b/packages/status-light/sp-status-light.ts index ae151a32ee9..392e9cf049f 100644 --- a/packages/status-light/sp-status-light.ts +++ b/packages/status-light/sp-status-light.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { StatusLight } from './src/StatusLight.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-status-light', StatusLight); +defineElement('sp-status-light', StatusLight); declare global { interface HTMLElementTagNameMap { diff --git a/packages/swatch/sp-swatch-group.ts b/packages/swatch/sp-swatch-group.ts index 4389947b7f7..0ad528915cd 100644 --- a/packages/swatch/sp-swatch-group.ts +++ b/packages/swatch/sp-swatch-group.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { SwatchGroup } from './src/SwatchGroup.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-swatch-group', SwatchGroup); +defineElement('sp-swatch-group', SwatchGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/swatch/sp-swatch.ts b/packages/swatch/sp-swatch.ts index 01117c9b7a8..cff2645ded8 100644 --- a/packages/swatch/sp-swatch.ts +++ b/packages/swatch/sp-swatch.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Swatch } from './src/Swatch.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-swatch', Swatch); +defineElement('sp-swatch', Swatch); declare global { interface HTMLElementTagNameMap { diff --git a/packages/switch/sp-switch.ts b/packages/switch/sp-switch.ts index 6d1562a3b4c..da40ec7a660 100644 --- a/packages/switch/sp-switch.ts +++ b/packages/switch/sp-switch.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Switch } from './src/Switch.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-switch', Switch); +defineElement('sp-switch', Switch); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-body.ts b/packages/table/sp-table-body.ts index c7937eb18cf..2781a9db04c 100644 --- a/packages/table/sp-table-body.ts +++ b/packages/table/sp-table-body.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableBody } from './src/TableBody.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-body', TableBody); +defineElement('sp-table-body', TableBody); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-cell.ts b/packages/table/sp-table-cell.ts index 576b321a253..b711ad6bfc1 100644 --- a/packages/table/sp-table-cell.ts +++ b/packages/table/sp-table-cell.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableCell } from './src/TableCell.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-cell', TableCell); +defineElement('sp-table-cell', TableCell); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-checkbox-cell.ts b/packages/table/sp-table-checkbox-cell.ts index 75d7f20a65b..0c0a23c72ab 100644 --- a/packages/table/sp-table-checkbox-cell.ts +++ b/packages/table/sp-table-checkbox-cell.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableCheckboxCell } from './src/TableCheckboxCell.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-checkbox-cell', TableCheckboxCell); +defineElement('sp-table-checkbox-cell', TableCheckboxCell); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-head-cell.ts b/packages/table/sp-table-head-cell.ts index 272888e86ac..006e21dfefd 100644 --- a/packages/table/sp-table-head-cell.ts +++ b/packages/table/sp-table-head-cell.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableHeadCell } from './src/TableHeadCell.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-head-cell', TableHeadCell); +defineElement('sp-table-head-cell', TableHeadCell); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-head.ts b/packages/table/sp-table-head.ts index 77fe6479131..fda0f972f2f 100644 --- a/packages/table/sp-table-head.ts +++ b/packages/table/sp-table-head.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableHead } from './src/TableHead.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-head', TableHead); +defineElement('sp-table-head', TableHead); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table-row.ts b/packages/table/sp-table-row.ts index 4f63fcea30b..483b4defed6 100644 --- a/packages/table/sp-table-row.ts +++ b/packages/table/sp-table-row.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TableRow } from './src/TableRow.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table-row', TableRow); +defineElement('sp-table-row', TableRow); declare global { interface HTMLElementTagNameMap { diff --git a/packages/table/sp-table.ts b/packages/table/sp-table.ts index 053272be966..02658277ff8 100644 --- a/packages/table/sp-table.ts +++ b/packages/table/sp-table.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Table } from './src/Table.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-table', Table); +defineElement('sp-table', Table); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tabs/sp-tab-panel.ts b/packages/tabs/sp-tab-panel.ts index 3bbf884b7b2..d6d303ffd38 100644 --- a/packages/tabs/sp-tab-panel.ts +++ b/packages/tabs/sp-tab-panel.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { TabPanel } from './src/TabPanel.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tab-panel', TabPanel); +defineElement('sp-tab-panel', TabPanel); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tabs/sp-tab.ts b/packages/tabs/sp-tab.ts index 3d80e746b35..ec419f01e7b 100644 --- a/packages/tabs/sp-tab.ts +++ b/packages/tabs/sp-tab.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Tab } from './src/Tab.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tab', Tab); +defineElement('sp-tab', Tab); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tabs/sp-tabs-overflow.ts b/packages/tabs/sp-tabs-overflow.ts index 639b7be0ed6..62982aeace8 100644 --- a/packages/tabs/sp-tabs-overflow.ts +++ b/packages/tabs/sp-tabs-overflow.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { TabsOverflow } from './src/TabsOverflow.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tabs-overflow', TabsOverflow); +defineElement('sp-tabs-overflow', TabsOverflow); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tabs/sp-tabs.ts b/packages/tabs/sp-tabs.ts index 0fb235e5fc7..cfda7798450 100644 --- a/packages/tabs/sp-tabs.ts +++ b/packages/tabs/sp-tabs.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Tabs } from './src/Tabs.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tabs', Tabs); +defineElement('sp-tabs', Tabs); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tags/sp-tag.ts b/packages/tags/sp-tag.ts index fd78dd3ea1d..66a669fa971 100644 --- a/packages/tags/sp-tag.ts +++ b/packages/tags/sp-tag.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Tag } from './src/Tag.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tag', Tag); +defineElement('sp-tag', Tag); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tags/sp-tags.ts b/packages/tags/sp-tags.ts index 9e5630d8bb2..df27c0d3092 100644 --- a/packages/tags/sp-tags.ts +++ b/packages/tags/sp-tags.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Tags } from './src/Tags.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tags', Tags); +defineElement('sp-tags', Tags); declare global { interface HTMLElementTagNameMap { diff --git a/packages/textfield/sp-textfield.ts b/packages/textfield/sp-textfield.ts index d71f3115936..3f8a90eff5b 100644 --- a/packages/textfield/sp-textfield.ts +++ b/packages/textfield/sp-textfield.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Textfield } from './src/Textfield.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-textfield', Textfield); +defineElement('sp-textfield', Textfield); declare global { interface HTMLElementTagNameMap { diff --git a/packages/thumbnail/sp-thumbnail.ts b/packages/thumbnail/sp-thumbnail.ts index c76c74a37f4..3f41fdbf383 100644 --- a/packages/thumbnail/sp-thumbnail.ts +++ b/packages/thumbnail/sp-thumbnail.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Thumbnail } from './src/Thumbnail.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-thumbnail', Thumbnail); +defineElement('sp-thumbnail', Thumbnail); declare global { interface HTMLElementTagNameMap { diff --git a/packages/toast/sp-toast.ts b/packages/toast/sp-toast.ts index dec7e53f0ef..e101dc89a37 100644 --- a/packages/toast/sp-toast.ts +++ b/packages/toast/sp-toast.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Toast } from './src/Toast.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-toast', Toast); +defineElement('sp-toast', Toast); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tooltip/sp-tooltip.ts b/packages/tooltip/sp-tooltip.ts index d6a23e1f5c4..ba93b07b01e 100644 --- a/packages/tooltip/sp-tooltip.ts +++ b/packages/tooltip/sp-tooltip.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Tooltip } from './src/Tooltip.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tooltip', Tooltip); +defineElement('sp-tooltip', Tooltip); declare global { interface HTMLElementTagNameMap { diff --git a/packages/top-nav/sp-top-nav-item.ts b/packages/top-nav/sp-top-nav-item.ts index 38ebab705c5..5daf774ac00 100644 --- a/packages/top-nav/sp-top-nav-item.ts +++ b/packages/top-nav/sp-top-nav-item.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { TopNavItem } from './src/TopNavItem.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-top-nav-item', TopNavItem); +defineElement('sp-top-nav-item', TopNavItem); declare global { interface HTMLElementTagNameMap { diff --git a/packages/top-nav/sp-top-nav.ts b/packages/top-nav/sp-top-nav.ts index ec985054e89..0473cdf3390 100644 --- a/packages/top-nav/sp-top-nav.ts +++ b/packages/top-nav/sp-top-nav.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { TopNav } from './src/TopNav.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-top-nav', TopNav); +defineElement('sp-top-nav', TopNav); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tray/sp-tray.ts b/packages/tray/sp-tray.ts index ff079e66e59..d8ec32a8c13 100644 --- a/packages/tray/sp-tray.ts +++ b/packages/tray/sp-tray.ts @@ -11,8 +11,9 @@ governing permissions and limitations under the License. */ import { Tray } from './src/Tray.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-tray', Tray); +defineElement('sp-tray', Tray); declare global { interface HTMLElementTagNameMap { diff --git a/packages/underlay/sp-underlay.ts b/packages/underlay/sp-underlay.ts index 1dabe4da0e1..d2ab898917b 100644 --- a/packages/underlay/sp-underlay.ts +++ b/packages/underlay/sp-underlay.ts @@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ import { Underlay } from './src/Underlay.js'; +import { defineElement } from '@spectrum-web-components/shared/src/define-element.js'; -customElements.define('sp-underlay', Underlay); +defineElement('sp-underlay', Underlay); declare global { interface HTMLElementTagNameMap { diff --git a/test/testing-helpers.ts b/test/testing-helpers.ts index 400f78eebf3..e205c7264d4 100644 --- a/test/testing-helpers.ts +++ b/test/testing-helpers.ts @@ -122,3 +122,38 @@ export function ignoreResizeObserverLoopError( window.onerror = globalErrorHandler as OnErrorEventHandler; }); } + +export function warnsOnDoubleRegister(importFn: () => Promise) { + return () => { + const isWebkit = /WebKit/.test(window.navigator.userAgent); + beforeEach(function () { + window.__swc.verbose = true; + this.warn = stub(console, 'warn'); + }); + afterEach(function () { + this.warn.resetHistory(); + window.__swc.verbose = false; + this.warn.restore(); + }); + it('warns in Dev Mode when redefined', async function () { + let caughtError: Error | undefined; + try { + await importFn(); + } catch (error) { + caughtError = error as Error; + } + // webkit doesn't seem to bubble thrown errors from async import() + if (!isWebkit) { + expect(caughtError && caughtError.message).to.include( + 'has already been' + ); + } + expect(this.warn.called, 'should call console.warn()').to.be.true; + const spyCall = this.warn.getCall(0); + expect( + (spyCall.args.at(0) as string).includes('redefine'), + 'message should warn about redefining an element' + ).to.be.true; + }); + }; +} diff --git a/tools/shared/package.json b/tools/shared/package.json index 71203434eb3..246b0cb87c8 100644 --- a/tools/shared/package.json +++ b/tools/shared/package.json @@ -25,6 +25,10 @@ "default": "./src/index.js" }, "./package.json": "./package.json", + "./src/define-element.js": { + "development": "./src/define-element.dev.js", + "default": "./src/define-element.js" + }, "./src/first-focusable-in.js": { "development": "./src/first-focusable-in.dev.js", "default": "./src/first-focusable-in.js" diff --git a/tools/shared/src/define-element.ts b/tools/shared/src/define-element.ts new file mode 100644 index 00000000000..ba706624534 --- /dev/null +++ b/tools/shared/src/define-element.ts @@ -0,0 +1,31 @@ +/* +Copyright 2020 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +interface CustomElementConstructor { + new (...params: any[]): HTMLElement; +} + +export function defineElement( + name: string, + constructor: CustomElementConstructor +): void { + if (window.__swc?.DEBUG) { + if (customElements.get(name)) { + window.__swc.warn( + undefined, + `Attempted to redefine <${name}>. This usually indicates that multiple versions of the same web component were loaded onto a single page.`, + 'https://TODO' + ); + } + } + customElements.define(name, constructor); +} diff --git a/tools/styles/spectrum-core-global.css b/tools/styles/spectrum-core-global.css index 62c16ba9fc4..63d12cc780e 100644 --- a/tools/styles/spectrum-core-global.css +++ b/tools/styles/spectrum-core-global.css @@ -1832,6 +1832,12 @@ governing permissions and limitations under the License. --spectrum-alias-ui-icon-asterisk-size-100: var( --spectrum-global-dimension-size-100 ); + --spectrum-alias-transparent-blue-background-color-hover: rgba( + 0, + 87, + 190, + 0.15 + ); --spectrum-alias-transparent-blue-background-color-down: rgba( 0, 72,