feat: warn on element redefinitions

adobe · Apr 21, 2023 · df3350d · df3350d
1 parent 15068e4
commit df3350d
Show file tree

Hide file tree

Showing 95 changed files with 303 additions and 88 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/accordion/test/accordion-item.test.ts b/packages/accordion/test/accordion-item.test.ts
@@ -16,6 +16,7 @@ import { spy } from 'sinon';
 import '@spectrum-web-components/accordion/sp-accordion-item.js';
 import { AccordionItem } from '@spectrum-web-components/accordion/src/AccordionItem.js';
 import { sendKeys } from '@web/test-runner-commands';
+import { warnsOnDoubleRegister } from '../../../test/testing-helpers.js';
 
 describe('Accordion Item', () => {
     it('can exist with no parent accessibly', async () => {
@@ -196,4 +197,8 @@ describe('Accordion Item', () => {
         expect(closed).to.be.false;
         expect(el.open).to.be.true;
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-accordion-item.js'))
+    );
 });
diff --git a/packages/accordion/test/accordion.test.ts b/packages/accordion/test/accordion.test.ts
@@ -17,7 +17,10 @@ import { Default } from '../stories/accordion.stories.js';
 import { Accordion, AccordionItem } from '@spectrum-web-components/accordion';
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers.js';
 
 describe('Accordion', () => {
     testForLitDevWarnings(async () => await fixture<Accordion>(Default()));
@@ -318,4 +321,8 @@ describe('Accordion', () => {
         expect(typeof outsideFocused).not.to.equal(AccordionItem);
         expect(typeof outsideFocused).not.to.equal(Accordion);
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-accordion.js'))
+    );
 });
diff --git a/packages/action-bar/sp-action-bar.ts b/packages/action-bar/sp-action-bar.ts
@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionBar } from './src/ActionBar.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-action-bar', ActionBar);
+defineElement('sp-action-bar', ActionBar);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/action-bar/test/action-bar.test.ts b/packages/action-bar/test/action-bar.test.ts
@@ -15,7 +15,10 @@ import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
 import '@spectrum-web-components/action-bar/sp-action-bar.js';
 import { ActionBar } from '@spectrum-web-components/action-bar';
 import { Default } from '../stories/action-bar.stories.js';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers.js';
 
 describe('ActionBar', () => {
     testForLitDevWarnings(async () => await fixture<ActionBar>(Default()));
@@ -88,4 +91,8 @@ describe('ActionBar', () => {
         expect(el.variant).to.equal('fixed');
         expect(el.getAttribute('variant')).to.equal('fixed');
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-action-bar.js'))
+    );
 });
diff --git a/packages/action-button/sp-action-button.ts b/packages/action-button/sp-action-button.ts
@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionButton } from './src/ActionButton.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-action-button', ActionButton);
+defineElement('sp-action-button', ActionButton);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/action-button/test/action-button.test.ts b/packages/action-button/test/action-button.test.ts
@@ -25,7 +25,10 @@ import {
 } from '@open-wc/testing';
 import { sendKeys } from '@web/test-runner-commands';
 import { spy } from 'sinon';
-import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers.js';
 import { m as BlackActionButton } from '../stories/action-button-black.stories.js';
 
 describe('ActionButton', () => {
@@ -235,4 +238,8 @@ describe('ActionButton', () => {
         expect(el.selected).to.be.true;
         expect(button.getAttribute('aria-pressed')).to.equal('true');
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-action-button.js'))
+    );
 });
diff --git a/packages/action-group/sp-action-group.ts b/packages/action-group/sp-action-group.ts
@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionGroup } from './src/ActionGroup.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-action-group', ActionGroup);
+defineElement('sp-action-group', ActionGroup);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
@@ -32,6 +32,7 @@ import {
     endEvent,
     homeEvent,
     testForLitDevWarnings,
+    warnsOnDoubleRegister,
 } from '../../../test/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import '@spectrum-web-components/action-group/sp-action-group.js';
@@ -1068,4 +1069,8 @@ describe('ActionGroup', () => {
         expect(el.selected.length).to.equal(1);
         expect(el.selected[0]).to.equal('Third');
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-action-group.js'))
+    );
 });
diff --git a/packages/action-menu/sp-action-menu.ts b/packages/action-menu/sp-action-menu.ts
@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { ActionMenu } from './src/ActionMenu.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-action-menu', ActionMenu);
+defineElement('sp-action-menu', ActionMenu);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/action-menu/test/index.ts b/packages/action-menu/test/index.ts
@@ -17,7 +17,10 @@ import {
     html,
     oneEvent,
 } from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers';
 
 import { spy } from 'sinon';
 
@@ -423,4 +426,8 @@ export const testActionMenu = (mode: 'sync' | 'async'): void => {
             expect(selectedItem.selected).to.be.true;
         });
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-action-menu.js'))
+    );
 };
diff --git a/packages/asset/sp-asset.ts b/packages/asset/sp-asset.ts
@@ -11,8 +11,9 @@ governing permissions and limitations under the License.
 */
 
 import { Asset } from './src/Asset.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-asset', Asset);
+defineElement('sp-asset', Asset);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/asset/test/asset.test.ts b/packages/asset/test/asset.test.ts
@@ -13,7 +13,10 @@ governing permissions and limitations under the License.
 import { elementUpdated, expect, fixture } from '@open-wc/testing';
 
 import { Asset } from '@spectrum-web-components/asset';
-import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers';
 import { Default, File, Folder } from '../stories/asset.stories.js';
 
 describe('Asset', () => {
@@ -39,4 +42,8 @@ describe('Asset', () => {
 
         await expect(el).to.be.accessible();
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-asset.js'))
+    );
 });
diff --git a/packages/avatar/sp-avatar.ts b/packages/avatar/sp-avatar.ts
@@ -10,8 +10,9 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { Avatar } from './src/Avatar.js';
+import { defineElement } from '@spectrum-web-components/shared/src/define-element.js';
 
-customElements.define('sp-avatar', Avatar);
+defineElement('sp-avatar', Avatar);
 
 declare global {
     interface HTMLElementTagNameMap {

diff --git a/packages/avatar/test/avatar.test.ts b/packages/avatar/test/avatar.test.ts
@@ -11,7 +11,10 @@ governing permissions and limitations under the License.
 import '@spectrum-web-components/avatar/sp-avatar.js';
 import { Avatar } from '@spectrum-web-components/avatar';
 import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-import { testForLitDevWarnings } from '../../../test/testing-helpers';
+import {
+    testForLitDevWarnings,
+    warnsOnDoubleRegister,
+} from '../../../test/testing-helpers';
 
 describe('Avatar', () => {
     testForLitDevWarnings(
@@ -111,4 +114,8 @@ describe('Avatar', () => {
             }).to.throw('There should be no error.');
         }
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-avatar.js'))
+    );
 });
diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts
@@ -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
@@ -22,6 +22,7 @@ import {
 import {
     shiftTabEvent,
     testForLitDevWarnings,
+    warnsOnDoubleRegister,
 } from '../../../test/testing-helpers.js';
 import { spy } from 'sinon';
 
@@ -562,4 +563,8 @@ describe('Button', () => {
             expect(el.variant).to.equal('accent');
         });
     });
+    describe(
+        'dev mode',
+        warnsOnDoubleRegister(() => import('../sp-button.js'))
+    );
 });
diff --git a/packages/card/sp-card.ts b/packages/card/sp-card.ts
@@ -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 {