feat: migrate drawer to typescript

Author: hperrin

packages/drawer/AppContent.js renamed to packages/drawer/AppContent.ts

@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-drawer-app-content',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/drawer/Content.js renamed to packages/drawer/Content.ts

@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-drawer__content',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/drawer/Drawer.svelte

@@ -17,7 +17,7 @@
   <slot />
 </aside>
 
-<script>
+<script lang="ts">
   import {
     MDCDismissibleDrawerFoundation,
     MDCModalDrawerFoundation,
@@ -30,24 +30,28 @@
     classMap,
     useActions,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
   const { FocusTrap } = domFocusTrap;
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
-  export let variant = null;
+  export let variant: 'dismissible' | 'modal' | undefined = undefined;
   export let open = false;
   export let fixed = true;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let previousFocus;
-  let focusTrap;
-  let scrim = false;
+  let element: HTMLElement;
+  let instance:
+    | MDCDismissibleDrawerFoundation
+    | MDCModalDrawerFoundation
+    | undefined = undefined;
+  let internalClasses: { [k: string]: boolean } = {};
+  let previousFocus: Element | null = null;
+  let focusTrap: domFocusTrap.FocusTrap;
+  let scrim: Element | false = false;
 
   setContext('SMUI:list:nav', true);
   setContext('SMUI:list:item:nav', true);
@@ -92,16 +96,18 @@
     }
 
     if (variant === 'modal') {
-      scrim = element.parentNode.querySelector('.mdc-drawer-scrim');
+      scrim = element.parentNode?.querySelector('.mdc-drawer-scrim') ?? false;
       if (scrim) {
         scrim.addEventListener('SMUIDrawerScrim:click', handleScrimClick);
       }
     }
 
-    const Foundation = {
-      dismissible: MDCDismissibleDrawerFoundation,
-      modal: MDCModalDrawerFoundation,
-    }[variant];
+    const Foundation =
+      variant === 'dismissible'
+        ? MDCDismissibleDrawerFoundation
+        : variant === 'modal'
+        ? MDCModalDrawerFoundation
+        : undefined;
 
     return Foundation
       ? new Foundation({
@@ -114,14 +120,14 @@
           restoreFocus: () => {
             if (
               previousFocus &&
-              previousFocus.focus &&
+              'focus' in previousFocus &&
               element.contains(document.activeElement)
             ) {
-              previousFocus.focus();
+              (previousFocus as HTMLInputElement).focus();
             }
           },
           focusActiveNavigationItem: () => {
-            const activeNavItemEl = element.querySelector(
+            const activeNavItemEl = element.querySelector<HTMLInputElement>(
               '.mdc-list-item--activated,.mdc-deprecated-list-item--activated'
             );
             if (activeNavItemEl) {
@@ -142,29 +148,29 @@
       : undefined;
   }
 
-  function hasClass(className) {
+  function hasClass(className: string) {
     return className in internalClasses
       ? internalClasses[className]
       : getElement().classList.contains(className);
   }
 
-  function addClass(className) {
+  function addClass(className: string) {
     if (!internalClasses[className]) {
       internalClasses[className] = true;
     }
   }
 
-  function removeClass(className) {
+  function removeClass(className: string) {
     if (!(className in internalClasses) || internalClasses[className]) {
       internalClasses[className] = false;
     }
   }
 
   function handleScrimClick() {
-    instance && instance.handleScrimClick();
+    instance && 'handleScrimClick' in instance && instance.handleScrimClick();
   }
 
-  export function setOpen(value) {
+  export function setOpen(value: boolean) {
     open = value;
   }
 

packages/drawer/Header.js renamed to packages/drawer/Header.ts

@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import Div from '@smui/common/Div.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-drawer__header',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/drawer/Scrim.svelte

@@ -13,23 +13,25 @@
   <slot />
 </svelte:component>
 
-<script>
+<script lang="ts">
+  import type { SMUIComponent } from '@smui/common';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
     classMap,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
   import Div from '@smui/common/Div.svelte';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let fixed = true;
 
-  let element;
+  let element: SMUIComponent;
 
   export let component = Div;
 

packages/drawer/Subtitle.js renamed to packages/drawer/Subtitle.ts

@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import H2 from '@smui/common/H2.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-drawer__subtitle',
-  component: H2,
+  component: H2 as typeof SMUIComponent,
 });

packages/drawer/Title.js renamed to packages/drawer/Title.ts

@@ -1,7 +1,8 @@
+import type { SMUIComponent } from '@smui/common';
 import { classAdderBuilder } from '@smui/common/internal';
 import H1 from '@smui/common/H1.svelte';
 
 export default classAdderBuilder({
   class: 'mdc-drawer__title',
-  component: H1,
+  component: H1 as typeof SMUIComponent,
 });

packages/drawer/bare.js

@@ -0,0 +1,2 @@
+export * from './index';
+export { default } from './index';

packages/drawer/bare.ts

@@ -0,0 +1,12 @@
+import Drawer from './Drawer.svelte';
+
+import AppContent from './AppContent';
+import Content from './Content';
+import Header from './Header';
+import Title from './Title';
+import Subtitle from './Subtitle';
+import Scrim from './Scrim.svelte';
+
+export default Drawer;
+
+export { AppContent, Content, Header, Title, Subtitle, Scrim };