feat: warn on element redefinitions and fail gracefully

adobe · Apr 20, 2023 · b8b6ad2 · b8b6ad2
1 parent 15068e4
commit b8b6ad2
Show file tree

Hide file tree

Showing 85 changed files with 222 additions and 83 deletions.
diff --git 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
@@ -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/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-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-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-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/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/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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,7 +23,7 @@ import {
  shiftTabEvent,
  testForLitDevWarnings,
 } from '../../../test/testing-helpers.js';
-import { spy } from 'sinon';
+import { spy, stub } from 'sinon';
 
 type TestableButtonType = {
  hasLabel: boolean;
@@ -562,4 +562,25 @@ describe('Button', () => {
  expect(el.variant).to.equal('accent');
  });
  });
+ describe.only('dev mode', () => {
+ 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 () {
+ await import('../sp-button.js');
+
+ 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {