feat: migrate to common element component instead of elemental components

Author: hperrin

MIGRATING.md

@@ -2,6 +2,12 @@
 
 This doc contains information that will help you migrate your code from an older version of SMUI to a newer one. Things that you will need to change in your existing code will be written here. It would also be helpful to check the MDC changelog if the upstream MDC versions has changed between SMUI versions.
 
+# SMUI 6 -> SMUI 7
+
+## Breaking Changes
+
+- The `@smui/common/elements` components are gone. It is replaced with the `Element` component exported from `@smui/common`. It takes a `tag` prop and creates an element dynamically with that tag name.
+
 # SMUI 5 -> SMUI 6
 
 SMUI 6 migrated to upstream MDC 13.0 from 11.0:

packages/accordion/src/Accordion.types.ts

@@ -1,6 +1,10 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type Component from './Accordion.svelte';
 
-export declare class AccordionComponentDev extends Component {
+export declare class AccordionComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -12,4 +16,6 @@ export declare class AccordionComponentDev extends Component {
     'use' | 'class' | 'multiple'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Header.types.ts

@@ -1,6 +1,10 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type Component from './Header.svelte';
 
-export declare class HeaderComponentDev extends Component {
+export declare class HeaderComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -12,4 +16,6 @@ export declare class HeaderComponentDev extends Component {
     'use' | 'class' | 'style' | 'ripple'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }

packages/accordion/src/Panel.types.ts

@@ -1,7 +1,11 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type { PaperComponentDev } from '@smui/paper';
 import type Component from './Panel.svelte';
 
-export declare class PanelComponentDev extends Component {
+export declare class PanelComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -22,6 +26,8 @@ export declare class PanelComponentDev extends Component {
     | 'extendedElevation'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }
 
 export interface SMUIAccordionPanelAccessor {

packages/autocomplete/src/Autocomplete.types.ts

@@ -1,9 +1,13 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type { MenuComponentDev } from '@smui/menu';
 import type { TextfieldComponentDev } from '@smui/textfield';
 import type { ListComponentDev } from '@smui/list';
 import type Component from './Autocomplete.svelte';
 
-export declare class AutocompleteComponentDev extends Component {
+export declare class AutocompleteComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -38,4 +42,6 @@ export declare class AutocompleteComponentDev extends Component {
     textfield$label?: never;
     textfield$value?: never;
   } & Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }

packages/badge/src/Badge.types.ts

@@ -1,6 +1,10 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type Component from './Badge.svelte';
 
-export declare class BadgeComponentDev extends Component {
+export declare class BadgeComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -12,4 +16,6 @@ export declare class BadgeComponentDev extends Component {
     'use' | 'class' | 'square' | 'color' | 'position' | 'align'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }

packages/banner/src/Banner.types.ts

@@ -1,6 +1,10 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type Component from './Banner.svelte';
 
-export declare class BannerComponentDev extends Component {
+export declare class BannerComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -29,6 +33,8 @@ export declare class BannerComponentDev extends Component {
       svelte.JSX.HTMLAttributes<HTMLDivElement>
     >[k];
   } & Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }
 
 export { CloseReason } from '@material/banner';

packages/button/src/Button.svelte

@@ -52,17 +52,18 @@
 >
 
 <script lang="ts">
+  import type { ComponentType } from 'svelte';
   import { setContext, getContext } from 'svelte';
-  import type { SvelteComponentDev } from 'svelte/internal';
   import { get_current_component } from 'svelte/internal';
   import type { ActionArray } from '@smui/common/internal';
   import {
     forwardEventsBuilder,
     classMap,
     dispatch,
   } from '@smui/common/internal';
-  import { Element } from '@smui/common';
   import Ripple from '@smui/ripple';
+  import type { SmuiComponentDev } from '@smui/common';
+  import { Element } from '@smui/common';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
@@ -80,12 +81,12 @@
   export let defaultAction = false;
   export let secondary = false;
 
-  let element: SvelteComponentDev;
+  let element: SmuiComponentDev;
   let internalClasses: { [k: string]: boolean } = {};
   let internalStyles: { [k: string]: string } = {};
   let context = getContext<string | undefined>('SMUI:button:context');
 
-  export let component: typeof SvelteComponentDev = Element;
+  export let component: ComponentType<SmuiComponentDev> = Element;
   export let tag =
     component === Element ? (href == null ? 'button' : 'a') : null;
 

packages/button/src/Button.types.ts

@@ -1,10 +1,13 @@
-import type { SvelteComponentDev } from 'svelte/internal';
+import type { SmuiComponentDev, ElementComponentDev } from '@smui/common';
 import type Component from './Button.svelte';
-import type { ButtonComponentDev as ButtonElementComponentDev } from '@smui/common/elements';
 
 export declare class ButtonComponentDev<
-  C extends SvelteComponentDev = ButtonElementComponentDev
-> extends Component {
+    T extends string = 'button',
+    C extends SmuiComponentDev = ElementComponentDev<T>
+  >
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -25,6 +28,9 @@ export declare class ButtonComponentDev<
     | 'defaultAction'
     | 'secondary'
     | 'component'
+    | 'tag'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<C['getElement']>;
 }

packages/button/src/Group.types.ts

@@ -1,6 +1,10 @@
+import type { SmuiComponentDev } from '@smui/common';
 import type Component from './Group.svelte';
 
-export declare class GroupComponentDev extends Component {
+export declare class GroupComponentDev
+  extends Component
+  implements SmuiComponentDev
+{
   /**
    * @private
    * For type checking capabilities only.
@@ -12,4 +16,6 @@ export declare class GroupComponentDev extends Component {
     'use' | 'class' | 'variant'
   > &
     Component['$$prop_def'];
+
+  getElement(): ReturnType<Component['getElement']>;
 }