From c80c2efac87a6592efc802c5c748841a4c4e6f53 Mon Sep 17 00:00:00 2001 From: Hunter Loftis Date: Tue, 2 May 2023 13:49:15 -0400 Subject: [PATCH] feat: shared pkg versions, devmode define warning, registry-conflicts docs --- lerna.json | 2 +- packages/accordion/sp-accordion-item.ts | 3 +- packages/accordion/sp-accordion.ts | 3 +- packages/action-bar/sp-action-bar.ts | 3 +- packages/action-button/sp-action-button.ts | 3 +- packages/action-group/sp-action-group.ts | 3 +- packages/action-menu/sp-action-menu.ts | 3 +- packages/asset/sp-asset.ts | 3 +- packages/avatar/sp-avatar.ts | 3 +- 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/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-ui/bin/build.js | 3 +- packages/icons-workflow/bin/build.js | 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/overlay/active-overlay.ts | 3 +- packages/overlay/overlay-trigger.ts | 3 +- packages/picker-button/package.json | 19 +- packages/picker-button/sp-picker-button.ts | 3 +- .../picker-button/test/picker-button.test.ts | 2 +- 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/radio/test/radio-group.test.ts | 2 +- 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-button/test/index.ts | 7 - 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/thumbnail/test/thumbnail.test.ts | 2 +- packages/toast/sp-toast.ts | 3 +- packages/tooltip/sp-tooltip.ts | 3 +- packages/tooltip/src/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 +- .../content/_includes/partials/sidenav.njk | 9 +- .../content/registry-conflicts.md | 66 ++++++ .../scripts/build-search-index.js | 1 + tools/base/package.json | 4 + tools/base/src/define-element.ts | 31 +++ tools/base/test/define-element.test.ts | 213 ++++++++++++++++++ web-test-runner.config.js | 4 +- 100 files changed, 517 insertions(+), 106 deletions(-) create mode 100644 projects/documentation/content/registry-conflicts.md create mode 100644 tools/base/src/define-element.ts create mode 100644 tools/base/test/define-element.test.ts diff --git a/lerna.json b/lerna.json index 98a8498363..1ae59d9f40 100644 --- a/lerna.json +++ b/lerna.json @@ -1,6 +1,6 @@ { "packages": ["packages/*", "projects/*", "tools/*"], - "version": "independent", + "version": "0.30.0", "granularPathspec": false, "npmClient": "yarn", "useWorkspaces": true, diff --git a/packages/accordion/sp-accordion-item.ts b/packages/accordion/sp-accordion-item.ts index 09c5baa57a..7b6af9cc2c 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/base/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 4fb392d96c..e4bd0e9349 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/base/src/define-element.js'; -customElements.define('sp-accordion', Accordion); +defineElement('sp-accordion', Accordion); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts index 0ba6f114d6..9e356591cd 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/base/src/define-element.js'; -customElements.define('sp-action-bar', ActionBar); +defineElement('sp-action-bar', ActionBar); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts index 880398d022..895f1fd45b 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/base/src/define-element.js'; -customElements.define('sp-action-button', ActionButton); +defineElement('sp-action-button', ActionButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-group/sp-action-group.ts b/packages/action-group/sp-action-group.ts index fc0c5bbf46..3ed61703a8 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/base/src/define-element.js'; -customElements.define('sp-action-group', ActionGroup); +defineElement('sp-action-group', ActionGroup); declare global { interface HTMLElementTagNameMap { diff --git a/packages/action-menu/sp-action-menu.ts b/packages/action-menu/sp-action-menu.ts index 682841c85d..c5f903dbf4 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/base/src/define-element.js'; -customElements.define('sp-action-menu', ActionMenu); +defineElement('sp-action-menu', ActionMenu); declare global { interface HTMLElementTagNameMap { diff --git a/packages/asset/sp-asset.ts b/packages/asset/sp-asset.ts index a9e945c6c1..707d378e25 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/base/src/define-element.js'; -customElements.define('sp-asset', Asset); +defineElement('sp-asset', Asset); declare global { interface HTMLElementTagNameMap { diff --git a/packages/avatar/sp-avatar.ts b/packages/avatar/sp-avatar.ts index 4336bbffcd..2e7f5524ac 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/base/src/define-element.js'; -customElements.define('sp-avatar', Avatar); +defineElement('sp-avatar', Avatar); declare global { interface HTMLElementTagNameMap { diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts index 14aaea98fc..babc45df1c 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/base/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 4fcd561b16..e036f42f3f 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/base/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 88a88e1335..a2048c4db6 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/base/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 7f1b72381a..481aeef8da 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/base/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 2888f41209..d7547e2ff6 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/base/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 b931727f3e..98692be3de 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/base/src/define-element.js'; -customElements.define('sp-close-button', CloseButton); +defineElement('sp-close-button', CloseButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/card/sp-card.ts b/packages/card/sp-card.ts index f8c0ee3a49..e63d8bd31e 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/base/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 56ee43dcdd..bc88535d3b 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/base/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 5ce3feb831..b2f95b0734 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/base/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 f618a55797..5bee20c746 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/base/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 f37f50c976..81fa42472d 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/base/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 540fa8a9c8..d942753941 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/base/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 8a4f7d02c9..789be87921 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/base/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 539d79e292..213aca3ed3 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/base/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 aa7f561eff..db5c15b438 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/base/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 12ab674ed3..46b5ddf8b5 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/base/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 234828ac6c..0640eb2e42 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/base/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 8c08e0b34b..ec20e3d939 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/base/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 6adf632a7c..256714437f 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/base/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 33d5b148bc..2904ceb73b 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/base/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 9bca15f20b..0beefe5ab2 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/base/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 bf222397fa..764fc89f15 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/base/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 a26b9dd01c..3b9b7a6b14 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/base/src/define-element.js'; -customElements.define('sp-icon', Icon); +defineElement('sp-icon', Icon); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icons-ui/bin/build.js b/packages/icons-ui/bin/build.js index 264fb00ee3..791ac19b61 100644 --- a/packages/icons-ui/bin/build.js +++ b/packages/icons-ui/bin/build.js @@ -224,8 +224,9 @@ glob(`${rootDir}/node_modules/${iconsPath}/**.svg`, (error, icons) => { ${disclaimer} import { Icon${ComponentName} } from '../src/elements/Icon${id}.js'; + import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; - customElements.define('${iconElementName}', Icon${ComponentName}); + defineElement('${iconElementName}', Icon${ComponentName}); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icons-workflow/bin/build.js b/packages/icons-workflow/bin/build.js index 9ed7ac8c26..4e01a1e646 100644 --- a/packages/icons-workflow/bin/build.js +++ b/packages/icons-workflow/bin/build.js @@ -229,8 +229,9 @@ glob(`${rootDir}/node_modules/${iconsPath}/**.svg`, (error, icons) => { ${disclaimer} import { Icon${ComponentName} } from '../src/elements/Icon${id}.js'; + import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; - customElements.define('${iconElementName}', Icon${ComponentName}); + defineElement('${iconElementName}', Icon${ComponentName}); declare global { interface HTMLElementTagNameMap { diff --git a/packages/icons/sp-icons-large.ts b/packages/icons/sp-icons-large.ts index 2deb8e0b33..b1d16f3995 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/base/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 9b491476af..5f420e4ad8 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/base/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 48c21d485f..483664113e 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/base/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 cf9f9a23aa..e577fbff10 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/base/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 8204eac078..f06da4b1cd 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/base/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 6bf1850f36..50125f54d7 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/base/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 db663dd5d5..971cf748b3 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/base/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 28045257a2..784a95c137 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/base/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 12b776870f..345032729f 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/base/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 ea57d2df04..5b1fc3a576 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/base/src/define-element.js'; -customElements.define('sp-number-field', NumberField); +defineElement('sp-number-field', NumberField); declare global { interface HTMLElementTagNameMap { diff --git a/packages/overlay/active-overlay.ts b/packages/overlay/active-overlay.ts index 8e3afd02b3..6b8f3a93ee 100644 --- a/packages/overlay/active-overlay.ts +++ b/packages/overlay/active-overlay.ts @@ -9,9 +9,10 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; import { ActiveOverlay } from './src/ActiveOverlay.js'; -customElements.define('active-overlay', ActiveOverlay); +defineElement('active-overlay', ActiveOverlay); declare global { interface HTMLElementTagNameMap { diff --git a/packages/overlay/overlay-trigger.ts b/packages/overlay/overlay-trigger.ts index 4bc3994913..067e79221b 100644 --- a/packages/overlay/overlay-trigger.ts +++ b/packages/overlay/overlay-trigger.ts @@ -9,9 +9,10 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ +import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; import { OverlayTrigger } from './src/OverlayTrigger.js'; -customElements.define('overlay-trigger', OverlayTrigger); +defineElement('overlay-trigger', OverlayTrigger); declare global { interface HTMLElementTagNameMap { diff --git a/packages/picker-button/package.json b/packages/picker-button/package.json index d926b6fa6c..f243f15981 100644 --- a/packages/picker-button/package.json +++ b/packages/picker-button/package.json @@ -20,11 +20,19 @@ "module": "src/index.js", "type": "module", "exports": { - ".": "./src/index.js", - "./src/*": "./src/*.js", + ".": { + "development": "./src/index.dev.js", + "default": "./src/index.js" + }, "./package.json": "./package.json", - "./sp-picker-button": "./sp-picker-button.js", - "./sp-picker-button.js": "./sp-picker-button.js" + "./src/PickerButton.js": { + "development": "./src/PickerButton.dev.js", + "default": "./src/PickerButton.js" + }, + "./sp-picker-button.js": { + "development": "./sp-picker-button.dev.js", + "default": "./sp-picker-button.js" + } }, "scripts": { "test": "echo \"Error: run tests from mono-repo root.\" && exit 1" @@ -53,6 +61,7 @@ "types": "./src/index.d.ts", "customElements": "custom-elements.json", "sideEffects": [ - "./sp-*.js" + "./sp-*.js", + "./**/*.dev.js" ] } diff --git a/packages/picker-button/sp-picker-button.ts b/packages/picker-button/sp-picker-button.ts index d766418dc7..ca8e5005c2 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/base/src/define-element.js'; -customElements.define('sp-picker-button', PickerButton); +defineElement('sp-picker-button', PickerButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/picker-button/test/picker-button.test.ts b/packages/picker-button/test/picker-button.test.ts index a9dff3f67d..77270e43b8 100644 --- a/packages/picker-button/test/picker-button.test.ts +++ b/packages/picker-button/test/picker-button.test.ts @@ -11,7 +11,7 @@ governing permissions and limitations under the License. */ import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; -import '../sp-picker-button.js'; +import '@spectrum-web-components/picker-button/sp-picker-button.js'; import { PickerButton } from '..'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; diff --git a/packages/picker/sp-picker.ts b/packages/picker/sp-picker.ts index cef5d5a5cf..7cc9bc16f2 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/base/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 59249a985a..38e75b8a02 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/base/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 c488774240..b3e836b2c4 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/base/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 7c8fb2fb5c..a90b07c969 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/base/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 4976499343..6d9b5732c2 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/base/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 8fa0a07fa9..fcfcb9e84b 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/base/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 d5b76e0276..5052ae77db 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/base/src/define-element.js'; -customElements.define('sp-radio', Radio); +defineElement('sp-radio', Radio); declare global { interface HTMLElementTagNameMap { diff --git a/packages/radio/test/radio-group.test.ts b/packages/radio/test/radio-group.test.ts index c5b98cd540..1132104062 100644 --- a/packages/radio/test/radio-group.test.ts +++ b/packages/radio/test/radio-group.test.ts @@ -641,7 +641,7 @@ describe('Radio Group - late children', () => { /** * In some cases (e.g. when wrapped in React components) will cause otherwise standard looking * DOM structures to add `` children to `` parents in a non-syncronous manner. - * + * * This test emulates that render process to ensure that validation will still work as expect in that context. */ const test = await fixture(html` diff --git a/packages/search/sp-search.ts b/packages/search/sp-search.ts index 81ca61c7fd..df12948187 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/base/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 6597ce7a52..7501f39a76 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/base/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 118acc0e45..3b085362db 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/base/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 04590976d7..1d7f890df9 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/base/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 93613efd2c..1acbfd65b8 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/base/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 594f0603dd..5d75511640 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/base/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 787ad81842..0e5f49ee9c 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/base/src/define-element.js'; -customElements.define('sp-split-button', SplitButton); +defineElement('sp-split-button', SplitButton); declare global { interface HTMLElementTagNameMap { diff --git a/packages/split-button/test/index.ts b/packages/split-button/test/index.ts index 304715be87..83e6d65d9f 100644 --- a/packages/split-button/test/index.ts +++ b/packages/split-button/test/index.ts @@ -26,13 +26,6 @@ import type { Button } from '@spectrum-web-components/button'; import type { MenuItem } from '@spectrum-web-components/menu'; import type { SplitButton } from '@spectrum-web-components/split-button'; -// const pickerReady = async (picker: SplitButton): Promise => { -// await elementUpdated(picker); -// if (picker.open) { -// await elementUpdated(picker.optionsMenu); -// } -// } - export function runSplitButtonTests( wrapInDiv: (storyArgument: TemplateResult) => TemplateResult, deprecatedMenu: () => TemplateResult diff --git a/packages/split-view/sp-split-view.ts b/packages/split-view/sp-split-view.ts index a94299211b..a48ee036be 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/base/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 ae151a32ee..5113a261a3 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/base/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 4389947b7f..6d080c5fd6 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/base/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 01117c9b7a..4308b5f00c 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/base/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 6d1562a3b4..90f1dde5b2 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/base/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 c7937eb18c..a0d8e8dc63 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/base/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 576b321a25..825aff3729 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/base/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 75d7f20a65..704b1ea28e 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/base/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 272888e86a..de0544572b 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/base/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 77fe647913..5a862afa79 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/base/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 4f63fcea30..df978b161c 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/base/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 053272be96..340468d843 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/base/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 3bbf884b7b..8edc1e331f 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/base/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 3d80e746b3..c06c206590 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/base/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 639b7be0ed..e3d37743c8 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/base/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 0fb235e5fc..a88509e7c3 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/base/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 fd78dd3ea1..f2d2f97dde 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/base/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 9e5630d8bb..da2fd638b5 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/base/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 d71f311593..4507312f70 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/base/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 c76c74a37f..c47e35aab6 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/base/src/define-element.js'; -customElements.define('sp-thumbnail', Thumbnail); +defineElement('sp-thumbnail', Thumbnail); declare global { interface HTMLElementTagNameMap { diff --git a/packages/thumbnail/test/thumbnail.test.ts b/packages/thumbnail/test/thumbnail.test.ts index c7bbd84de4..ed44e9d7c7 100644 --- a/packages/thumbnail/test/thumbnail.test.ts +++ b/packages/thumbnail/test/thumbnail.test.ts @@ -12,7 +12,7 @@ governing permissions and limitations under the License. import { elementUpdated, expect, fixture, html } from '@open-wc/testing'; -import '../sp-thumbnail.js'; +import '@spectrum-web-components/thumbnail/sp-thumbnail.js'; import { Thumbnail } from '..'; import { thumbnail } from '../stories/images.js'; import { testForLitDevWarnings } from '../../../test/testing-helpers.js'; diff --git a/packages/toast/sp-toast.ts b/packages/toast/sp-toast.ts index dec7e53f0e..00b8525358 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/base/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 d6a23e1f5c..4141f1339c 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/base/src/define-element.js'; -customElements.define('sp-tooltip', Tooltip); +defineElement('sp-tooltip', Tooltip); declare global { interface HTMLElementTagNameMap { diff --git a/packages/tooltip/src/Tooltip.ts b/packages/tooltip/src/Tooltip.ts index 953c8939c0..87ad8af4d0 100644 --- a/packages/tooltip/src/Tooltip.ts +++ b/packages/tooltip/src/Tooltip.ts @@ -21,6 +21,7 @@ import { property, query, } from '@spectrum-web-components/base/src/decorators.js'; +import { defineElement } from '@spectrum-web-components/base/src/define-element.js'; import type { OverlayDisplayQueryDetail, Placement, @@ -35,7 +36,7 @@ export class TooltipProxy extends HTMLElement { } } -customElements.define('tooltip-proxy', TooltipProxy); +defineElement('tooltip-proxy', TooltipProxy); /** * @element sp-tooltip diff --git a/packages/top-nav/sp-top-nav-item.ts b/packages/top-nav/sp-top-nav-item.ts index 38ebab705c..2f2617ab37 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/base/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 ec985054e8..3a67771259 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/base/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 ff079e66e5..cebd200984 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/base/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 1dabe4da0e..05183c32d6 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/base/src/define-element.js'; -customElements.define('sp-underlay', Underlay); +defineElement('sp-underlay', Underlay); declare global { interface HTMLElementTagNameMap { diff --git a/projects/documentation/content/_includes/partials/sidenav.njk b/projects/documentation/content/_includes/partials/sidenav.njk index d5ec2868a9..534d757de0 100644 --- a/projects/documentation/content/_includes/partials/sidenav.njk +++ b/projects/documentation/content/_includes/partials/sidenav.njk @@ -17,6 +17,13 @@ > Dev mode + + Registry conflicts + Spectrum CSS - \ No newline at end of file + diff --git a/projects/documentation/content/registry-conflicts.md b/projects/documentation/content/registry-conflicts.md new file mode 100644 index 0000000000..e91659391f --- /dev/null +++ b/projects/documentation/content/registry-conflicts.md @@ -0,0 +1,66 @@ +--- +layout: dev-mode.njk +title: 'Registry Conflicts: Spectrum Web Components' +displayName: Registry conflicts +slug: registry-conflicts +--- + +# Registry conflicts + +Element names are unique, so if you try to register two different implementations of the same element via [window.customElements](https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements), you'll encounter an error like: + +``` +Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': +the name "foo-bar" has already been used with this registry +``` + +You might hit this error when: + +- Multiple components import the redefined component as a dependency and the project's dependency tree has not been [deduped](https://docs.npmjs.com/cli/v9/commands/npm-dedupe?v=true). +- Multiple components import out-of-date versions of the redefined component, such that there is no [semver-valid](https://docs.npmjs.com/about-semantic-versioning) version to satisfy all of them. +- A package publishes a pre-built JavaScript blob instead of [import](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/import)-able files, and includes web component dependency definitions in that blob instead of listing them as external. + +## Resolution + +First, verify that each `@spectrum-web-components` package in your `package.json` shares the same version. If `@spectrum-web-components/button` is on version `0.30.0`, then all other SWC packages should _also_ be on version `0.30.0`. + +Further resolutions are package-manager dependent, but the goal state is the same: a _de-duped_ dependency tree where multiple versions of the same package are _hoisted_ into a single version. + +Regardless of package manager, packages that share a dependency with un-resolvable semver ranges are not compatible with one another. The solution is typically for the package maintainers to bump their dependencies to a recent version. + +If that isn't possible, package managers provide a way to _force_ version resolutions. However, forcing incompatible versions is likely to cause undefined or breaking behavior in your application: + +- [npm overrides](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) +- [yarn resolutions](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) +- [pnpm overrides](https://pnpm.io/package_json#pnpmoverrides) + +### With npm or pnpm + +Run [`(p)npm dedupe`](https://docs.npmjs.com/cli/v9/commands/npm-dedupe?v=true) to collapse multiple definitions of the same component into a single dependency in your tree. + +To check for duplication, run [`npm list @spectrum-web-components/packagenamehere`](https://docs.npmjs.com/cli/v8/commands/npm-ls?v=true). This will show the branches of the dependency tree that include the conflicting package. + +Also, consider setting `npm config set prefer-dedupe true` for npm to deduplicate packages by default. With this set, npm will dedupe by default, which is convenient for web component development. + +### With yarn + +Yarn [removed its dedupe command](https://classic.yarnpkg.com/en/docs/cli/dedupe), since in theory it dedupes on install. However, this does not seem to always be true. + +If you are not able to switch to a package manager that can dedupe dependency trees automatically, then you may have to dedupe manually. With yarn, that involves: + +- Running `yarn list {packagename}` to see which versions are installed +- Adding a commonly-valid version to [yarn's resolutions list](https://classic.yarnpkg.com/lang/en/docs/selective-version-resolutions/) in package.json. +- Running `yarn` to reinstall with resolutions. + +## Future + +The [Scoped custom element registries](https://wicg.github.io/webcomponents/proposals/Scoped-Custom-Element-Registries.html) proposal is being prototyped in Chrome and discussed in standards groups like the [WCCG](https://w3c.github.io/webcomponents-cg/2022.html#scoped-element-registries). + +Scoped registries would allow for multiple custom element definitions for a single tag name to coexist within a page. While that will alleviate some pain, it will not be a panacea, because: + +- Shipping multiple versions of components will increase page-load size. +- Some components that broadly manage state, or coordinate and orchestrate other components, will still require a single de-duplicated version on the page. + +Experimentation with scoped registry polyfills showed unacceptable performance degradation for a large component library. + +To support this feature in coming to browsers faster, [share your use case](https://github.com/WICG/webcomponents/issues/716) with implementors to help increase awareness and priority of this API. diff --git a/projects/documentation/scripts/build-search-index.js b/projects/documentation/scripts/build-search-index.js index 04f0360818..05f0fde472 100644 --- a/projects/documentation/scripts/build-search-index.js +++ b/projects/documentation/scripts/build-search-index.js @@ -101,6 +101,7 @@ async function main() { `${projectDir}/projects/documentation/content/migrations/*.md`, `${projectDir}/projects/documentation/content/getting-started.md`, `${projectDir}/projects/documentation/content/dev-mode.md`, + `${projectDir}/projects/documentation/content/registry-conflicts.md`, ], { ignore: ['**/node_modules/**'], diff --git a/tools/base/package.json b/tools/base/package.json index 6aaf3f1562..a962739f58 100644 --- a/tools/base/package.json +++ b/tools/base/package.json @@ -37,6 +37,10 @@ "development": "./src/decorators.dev.js", "default": "./src/decorators.js" }, + "./src/define-element.js": { + "development": "./src/define-element.dev.js", + "default": "./src/define-element.js" + }, "./src/directives.js": { "development": "./src/directives.dev.js", "default": "./src/directives.js" diff --git a/tools/base/src/define-element.ts b/tools/base/src/define-element.ts new file mode 100644 index 0000000000..c773779071 --- /dev/null +++ b/tools/base/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: unknown[]): HTMLElement; +} + +export function defineElement( + name: string, + constructor: CustomElementConstructor +): void { + if (window.__swc && 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://opensource.adobe.com/spectrum-web-components/registry-conflicts' + ); + } + } + customElements.define(name, constructor); +} diff --git a/tools/base/test/define-element.test.ts b/tools/base/test/define-element.test.ts new file mode 100644 index 0000000000..6750df9c94 --- /dev/null +++ b/tools/base/test/define-element.test.ts @@ -0,0 +1,213 @@ +/* +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. +*/ + +import { expect } from '@open-wc/testing'; +import { stub } from 'sinon'; +import { + isFirefox, + isWebKit, +} from '@spectrum-web-components/shared/src/platform.js'; + +// for window.__swc +import '@spectrum-web-components/base'; + +// mostly alphabetical, +// but reordered to put dependents above dependencies, +// in order to avoid transitive dependency conflicts (eg card -> asset) +const elements = { + 'sp-accordion-item': () => + import('@spectrum-web-components/accordion/sp-accordion-item.js'), + 'sp-accordion': () => + import('@spectrum-web-components/accordion/sp-accordion.js'), + 'sp-action-bar': () => + import('@spectrum-web-components/action-bar/sp-action-bar.js'), + 'sp-action-menu': () => + import('@spectrum-web-components/action-menu/sp-action-menu.js'), + 'sp-action-button': () => + import('@spectrum-web-components/action-button/sp-action-button.js'), + 'sp-action-group': () => + import('@spectrum-web-components/action-group/sp-action-group.js'), + 'sp-card': () => import('@spectrum-web-components/card/sp-card.js'), + 'sp-asset': () => import('@spectrum-web-components/asset/sp-asset.js'), + 'sp-avatar': () => import('@spectrum-web-components/avatar/sp-avatar.js'), + 'sp-badge': () => import('@spectrum-web-components/badge/sp-badge.js'), + 'sp-banner': () => import('@spectrum-web-components/banner/sp-banner.js'), + 'sp-dialog-wrapper': () => + import('@spectrum-web-components/dialog/sp-dialog-wrapper.js'), + 'sp-dialog': () => import('@spectrum-web-components/dialog/sp-dialog.js'), + 'sp-dialog-base': () => + import('@spectrum-web-components/dialog/sp-dialog-base.js'), + 'sp-button': () => import('@spectrum-web-components/button/sp-button.js'), + 'sp-button-group': () => + import('@spectrum-web-components/button-group/sp-button-group.js'), + 'sp-checkbox': () => + import('@spectrum-web-components/checkbox/sp-checkbox.js'), + 'sp-coachmark': () => + import('@spectrum-web-components/coachmark/sp-coachmark.js'), + 'sp-color-area': () => + import('@spectrum-web-components/color-area/sp-color-area.js'), + 'sp-color-handle': () => + import('@spectrum-web-components/color-handle/sp-color-handle.js'), + 'sp-color-loupe': () => + import('@spectrum-web-components/color-loupe/sp-color-loupe.js'), + 'sp-color-slider': () => + import('@spectrum-web-components/color-slider/sp-color-slider.js'), + 'sp-color-wheel': () => + import('@spectrum-web-components/color-wheel/sp-color-wheel.js'), + 'sp-divider': () => + import('@spectrum-web-components/divider/sp-divider.js'), + 'sp-dropzone': () => + import('@spectrum-web-components/dropzone/sp-dropzone.js'), + 'sp-meter': () => import('@spectrum-web-components/meter/sp-meter.js'), + 'sp-field-group': () => + import('@spectrum-web-components/field-group/sp-field-group.js'), + 'sp-field-label': () => + import('@spectrum-web-components/field-label/sp-field-label.js'), + 'sp-help-text': () => + import('@spectrum-web-components/help-text/sp-help-text.js'), + 'sp-icon': () => import('@spectrum-web-components/icon/sp-icon.js'), + 'sp-icons-medium': () => + import('@spectrum-web-components/icons/sp-icons-medium.js'), + 'sp-icons-large': () => + import('@spectrum-web-components/icons/sp-icons-large.js'), + 'sp-illustrated-message': () => + import( + '@spectrum-web-components/illustrated-message/sp-illustrated-message.js' + ), + 'sp-link': () => import('@spectrum-web-components/link/sp-link.js'), + 'sp-menu-group': () => + import('@spectrum-web-components/menu/sp-menu-group.js'), + 'sp-menu-item': () => + import('@spectrum-web-components/menu/sp-menu-item.js'), + 'sp-menu': () => import('@spectrum-web-components/menu/sp-menu.js'), + 'overlay-trigger': () => + import('@spectrum-web-components/overlay/overlay-trigger.js'), + 'active-overlay': () => + import('@spectrum-web-components/overlay/active-overlay.js'), + 'sp-picker': () => import('@spectrum-web-components/picker/sp-picker.js'), + 'sp-picker-button': () => + import('@spectrum-web-components/picker-button/sp-picker-button.js'), + 'sp-popover': () => + import('@spectrum-web-components/popover/sp-popover.js'), + 'sp-progress-bar': () => + import('@spectrum-web-components/progress-bar/sp-progress-bar.js'), + 'sp-progress-circle': () => + import( + '@spectrum-web-components/progress-circle/sp-progress-circle.js' + ), + 'sp-quick-actions': () => + import('@spectrum-web-components/quick-actions/sp-quick-actions.js'), + 'sp-radio-group': () => + import('@spectrum-web-components/radio/sp-radio-group.js'), + 'sp-radio': () => import('@spectrum-web-components/radio/sp-radio.js'), + 'sp-search': () => import('@spectrum-web-components/search/sp-search.js'), + 'sp-sidenav-item': () => + import('@spectrum-web-components/sidenav/sp-sidenav-item.js'), + 'sp-sidenav': () => + import('@spectrum-web-components/sidenav/sp-sidenav.js'), + 'sp-slider': () => import('@spectrum-web-components/slider/sp-slider.js'), + 'sp-slider-handle': () => + import('@spectrum-web-components/slider/sp-slider-handle.js'), + 'sp-split-button': () => + import('@spectrum-web-components/split-button/sp-split-button.js'), + 'sp-split-view': () => + import('@spectrum-web-components/split-view/sp-split-view.js'), + 'sp-status-light': () => + import('@spectrum-web-components/status-light/sp-status-light.js'), + 'sp-swatch-group': () => + import('@spectrum-web-components/swatch/sp-swatch-group.js'), + 'sp-swatch': () => import('@spectrum-web-components/swatch/sp-swatch.js'), + 'sp-switch': () => import('@spectrum-web-components/switch/sp-switch.js'), + 'sp-table': () => import('@spectrum-web-components/table/sp-table.js'), + 'sp-table-body': () => + import('@spectrum-web-components/table/sp-table-body.js'), + 'sp-table-cell': () => + import('@spectrum-web-components/table/sp-table-cell.js'), + 'sp-table-head': () => + import('@spectrum-web-components/table/sp-table-head.js'), + 'sp-table-checkbox-cell': () => + import('@spectrum-web-components/table/sp-table-checkbox-cell.js'), + 'sp-table-head-cell': () => + import('@spectrum-web-components/table/sp-table-head-cell.js'), + 'sp-table-row': () => + import('@spectrum-web-components/table/sp-table-row.js'), + 'sp-tab': () => import('@spectrum-web-components/tabs/sp-tab.js'), + 'sp-tabs': () => import('@spectrum-web-components/tabs/sp-tabs.js'), + 'sp-tabs-overflow': () => + import('@spectrum-web-components/tabs/sp-tabs-overflow.js'), + 'sp-tag': () => import('@spectrum-web-components/tags/sp-tag.js'), + 'sp-tags': () => import('@spectrum-web-components/tags/sp-tags.js'), + 'sp-textfield': () => + import('@spectrum-web-components/textfield/sp-textfield.js'), + 'sp-thumbnail': () => + import('@spectrum-web-components/thumbnail/sp-thumbnail.js'), + 'sp-toast': () => import('@spectrum-web-components/toast/sp-toast.js'), + 'sp-tooltip': () => + import('@spectrum-web-components/tooltip/sp-tooltip.js'), + 'sp-top-nav': () => + import('@spectrum-web-components/top-nav/sp-top-nav.js'), + 'sp-tray': () => import('@spectrum-web-components/tray/sp-tray.js'), + 'sp-underlay': () => + import('@spectrum-web-components/underlay/sp-underlay.js'), +}; + +const browser: 'webkit' | 'firefox' | 'chromium' = isWebKit() + ? 'webkit' + : isFirefox() + ? 'firefox' + : 'chromium'; + +describe('define-element', function () { + // registrations are globally-unique, so retries will always fail + this.retries(0); + + beforeEach(function () { + window.__swc.verbose = true; + this.warn = stub(console, 'warn'); + }); + + afterEach(function () { + this.warn.resetHistory(); + window.__swc.verbose = false; + this.warn.restore(); + }); + + Object.entries(elements).forEach(([name, register]) => + it(`'${name}' warns on redefinition`, async function () { + // classes already-defined via transitive dependencies can't be tested this way + if (customElements.get(name)) { + this.skip(); + } + const error = { + webkit: 'Cannot define multiple custom elements with the same tag name', + firefox: `'${name}' has already been defined`, + chromium: `"${name}" has already been used with this registry`, + }[browser]; + let caughtError: Error | undefined; + + customElements.define(name, class extends HTMLElement {}); + try { + await register(); + } catch (error) { + caughtError = error as Error; + } + + expect(caughtError?.message ?? '').to.include(error); + 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/web-test-runner.config.js b/web-test-runner.config.js index f7354c17ca..f941e1a83a 100644 --- a/web-test-runner.config.js +++ b/web-test-runner.config.js @@ -87,8 +87,8 @@ export default { ], threshold: { statements: 98.5, - branches: 95.78, - functions: 97.8, + branches: 95.5, + functions: 96.5, lines: 98.5, }, },