feat: migrate chips to typescript

BREAKING CHANGE: Renamed SMUI events from like SMUI:component:event to like SMUIComponent:event.
hperrin · Sep 10, 2021 · 075f48a · 075f48a
1 parent 3eb3d49
commit 075f48a
Show file tree

Hide file tree

Showing 56 changed files with 392 additions and 894 deletions.
diff --git a/packages/banner/Banner.svelte b/packages/banner/Banner.svelte
@@ -16,6 +16,8 @@
     .concat([style])
     .join(' ')}
   role="banner"
+  on:SMUIBannerButton:primaryActionClick={handlePrimaryActionClick}
+  on:SMUIBannerButton:secondaryActionClick={handleSecondaryActionClick}
   {...exclude($$restProps, ['content$', 'textWrapper$', 'graphic$'])}
 >
   <Fixed bind:fixed {width}>
@@ -131,15 +133,6 @@
   }
 
   onMount(() => {
-    element.addEventListener(
-      'SMUI:banner:button:primaryActionClick',
-      handlePrimaryActionClick
-    );
-    element.addEventListener(
-      'SMUI:banner:button:secondaryActionClick',
-      handleSecondaryActionClick
-    );
-
     focusTrap = new FocusTrap(element, {
       initialFocusEl: getPrimaryActionEl(),
     });
@@ -179,15 +172,6 @@
     layout();
 
     return () => {
-      element.removeEventListener(
-        'SMUI:banner:button:primaryActionClick',
-        handlePrimaryActionClick
-      );
-      element.removeEventListener(
-        'SMUI:banner:button:secondaryActionClick',
-        handleSecondaryActionClick
-      );
-
       instance.destroy();
     };
   });

diff --git a/packages/banner/ambient.d.ts b/packages/banner/ambient.d.ts
@@ -0,0 +1,8 @@
+declare namespace svelte.JSX {
+  interface HTMLProps<T extends EventTarget> extends HTMLAttributes<T> {
+    ['onSMUIBannerButton:primaryActionClick']?: (
+      event: CustomEvent<any> & { target: T }
+    ) => any;
+    ['onSMUIBannerButton:secondaryActionClick']?: any;
+  }
+}
diff --git a/packages/button/Button.svelte b/packages/button/Button.svelte
@@ -128,8 +128,8 @@
       dispatch(
         getElement(),
         secondary
-          ? 'SMUI:banner:button:secondaryActionClick'
-          : 'SMUI:banner:button:primaryActionClick'
+          ? 'SMUIBannerButton:secondaryActionClick'
+          : 'SMUIBannerButton:primaryActionClick'
       );
     }
   }

diff --git a/packages/checkbox/Checkbox.svelte b/packages/checkbox/Checkbox.svelte
@@ -248,14 +248,14 @@
       },
     };
 
-    dispatch(element, 'SMUI:generic:input:mount', accessor);
-    dispatch(element, 'SMUI:checkbox:mount', accessor);
+    dispatch(element, 'SMUIGenericInput:mount', accessor);
+    dispatch(element, 'SMUICheckbox:mount', accessor);
 
     instance.init();
 
     return () => {
-      dispatch(element, 'SMUI:generic:input:unmount', accessor);
-      dispatch(element, 'SMUI:checkbox:unmount', accessor);
+      dispatch(element, 'SMUIGenericInput:unmount', accessor);
+      dispatch(element, 'SMUICheckbox:unmount', accessor);
 
       instance.destroy();
     };

diff --git a/packages/chips/Checkmark.svelte b/packages/chips/Checkmark.svelte
@@ -17,14 +17,14 @@
   </svg>
 </span>
 
-<script>
-  import { classMap, useActions } from '@smui/common/internal';
+<script lang="ts">
+  import { ActionArray, classMap, useActions } from '@smui/common/internal';
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
 
-  let element;
+  let element: HTMLSpanElement;
 
   export function getElement() {
     return element;

diff --git a/packages/chips/Chip.svelte b/packages/chips/Chip.svelte
@@ -36,13 +36,13 @@
     instance && instance.handleTrailingActionInteraction()}
   on:MDCChipTrailingAction:navigation={(event) =>
     instance && instance.handleTrailingActionNavigation(event)}
-  on:SMUI:chips:chip:primary-action:mount={(event) =>
+  on:SMUIChipsChipPrimaryAction:mount={(event) =>
     (primaryActionAccessor = event.detail)}
-  on:SMUI:chips:chip:primary-action:unmount={() =>
+  on:SMUIChipsChipPrimaryAction:unmount={() =>
     (primaryActionAccessor = undefined)}
-  on:SMUI:chips:chip:trailing-action:mount={(event) =>
+  on:SMUIChipsChipTrailingAction:mount={(event) =>
     (trailingActionAccessor = event.detail)}
-  on:SMUI:chips:chip:trailing-action:unmount={() =>
+  on:SMUIChipsChipTrailingAction:unmount={() =>
     (trailingActionAccessor = undefined)}
   {...$$restProps}
 >
@@ -55,7 +55,8 @@
   {/if}
 </svelte:component>
 
-<script>
+<script lang="ts">
+  import type { SMUIComponent } from '@smui/common';
   import { MDCChipFoundation } from '@material/chips/deprecated/chip/foundation.js';
   import { onMount, setContext, getContext } from 'svelte';
   import { writable } from 'svelte/store';
@@ -64,35 +65,48 @@
     forwardEventsBuilder,
     classMap,
     dispatch,
+    ActionArray,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
   import Div from '@smui/common/Div.svelte';
 
+  import type { SMUIChipsPrimaryActionAccessor } from './Text.types';
+  import type { SMUIChipsTrailingActionAccessor } from './TrailingAction.types';
+  import type { SMUIChipsChipAccessor } from './Chip.types';
+
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
-  let chipId;
+  let chipId: any;
   export { chipId as chip };
   export let ripple = true;
   export let touch = false;
   export let shouldRemoveOnTrailingIconClick = true;
   export let shouldFocusPrimaryActionOnClick = true;
 
-  let element;
-  let instance;
-  let internalClasses = {};
-  let leadingIconClasses = {};
-  let internalStyles = {};
-  const initialSelectedStore = getContext('SMUI:chips:chip:initialSelected');
+  let element: SMUIComponent;
+  let instance: MDCChipFoundation;
+  let internalClasses: { [k: string]: boolean } = {};
+  let leadingIconClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
+  const initialSelectedStore = getContext<SvelteStore<boolean>>(
+    'SMUI:chips:chip:initialSelected'
+  );
   let selected = $initialSelectedStore;
-  let primaryActionAccessor;
-  let trailingActionAccessor;
-  const nonInteractive = getContext('SMUI:chips:nonInteractive');
-  const choice = getContext('SMUI:chips:choice');
-  const index = getContext('SMUI:chips:chip:index');
+  let primaryActionAccessor:
+    | SMUIChipsPrimaryActionAccessor
+    | undefined = undefined;
+  let trailingActionAccessor:
+    | SMUIChipsTrailingActionAccessor
+    | undefined = undefined;
+  const nonInteractive = getContext<SvelteStore<boolean>>(
+    'SMUI:chips:nonInteractive'
+  );
+  const choice = getContext<SvelteStore<boolean>>('SMUI:chips:choice');
+  const index = getContext<SvelteStore<number>>('SMUI:chips:chip:index');
 
   export let component = Div;
 
@@ -142,7 +156,9 @@
       addClass,
       addClassToLeadingIcon: addLeadingIconClass,
       eventTargetHasClass: (target, className) =>
-        target ? target.classList.contains(className) : false,
+        target && 'classList' in target
+          ? (target as HTMLElement).classList.contains(className)
+          : false,
       focusPrimaryAction: () => {
         if (primaryActionAccessor) {
           primaryActionAccessor.focus();
@@ -215,7 +231,7 @@
       setStyleProperty: addStyle,
     });
 
-    const accessor = {
+    const accessor: SMUIChipsChipAccessor = {
       chipId,
       get selected() {
         return selected;
@@ -226,48 +242,48 @@
       setSelectedFromChipSet,
     };
 
-    dispatch(getElement(), 'SMUI:chips:chip:mount', accessor);
+    dispatch(getElement(), 'SMUIChipsChip:mount', accessor);
 
     instance.init();
 
     return () => {
-      dispatch(getElement(), 'SMUI:chips:chip:unmount', accessor);
+      dispatch(getElement(), 'SMUIChipsChip:unmount', accessor);
 
       instance.destroy();
     };
   });
 
-  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 addLeadingIconClass(className) {
+  function addLeadingIconClass(className: string) {
     if (!leadingIconClasses[className]) {
       leadingIconClasses[className] = true;
     }
   }
 
-  function removeLeadingIconClass(className) {
+  function removeLeadingIconClass(className: string) {
     if (!(className in leadingIconClasses) || leadingIconClasses[className]) {
       leadingIconClasses[className] = false;
     }
   }
 
-  function addStyle(name, value) {
+  function addStyle(name: string, value: string) {
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
@@ -278,13 +294,16 @@
     }
   }
 
-  function getStyle(name) {
+  function getStyle(name: string) {
     return name in internalStyles
       ? internalStyles[name]
       : getComputedStyle(getElement()).getPropertyValue(name);
   }
 
-  function setSelectedFromChipSet(value, shouldNotifyClients) {
+  function setSelectedFromChipSet(
+    value: boolean,
+    shouldNotifyClients: boolean
+  ) {
     selected = value;
     instance.setSelectedFromChipSet(selected, shouldNotifyClients);
   }

diff --git a/packages/chips/Chip.types.ts b/packages/chips/Chip.types.ts
@@ -0,0 +1,8 @@
+export interface SMUIChipsChipAccessor {
+  chipId: any;
+  readonly selected: boolean;
+  focusPrimaryAction(): void;
+  focusTrailingAction(): void;
+  removeFocus(): void;
+  setSelectedFromChipSet(value: boolean, shouldNotifyClients: boolean): void;
+}
diff --git a/packages/chips/LeadingIcon.svelte b/packages/chips/LeadingIcon.svelte
@@ -12,26 +12,31 @@
   {...$$restProps}><slot /></i
 >
 
-<script>
+<script lang="ts">
   import { getContext } from 'svelte';
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
     classMap,
     useActions,
+    ActionArray,
   } from '@smui/common/internal';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
 
-  const filter = getContext('SMUI:chips:filter');
-  const isSelected = getContext('SMUI:chips:chip:isSelected');
-  const leadingIconClasses = getContext('SMUI:chips:chip:leadingIconClasses');
+  const filter = getContext<SvelteStore<boolean>>('SMUI:chips:filter');
+  const isSelected = getContext<SvelteStore<boolean>>(
+    'SMUI:chips:chip:isSelected'
+  );
+  const leadingIconClasses = getContext<SvelteStore<{ [k: string]: boolean }>>(
+    'SMUI:chips:chip:leadingIconClasses'
+  );
 
-  let element;
+  let element: HTMLElement;
 
   export function getElement() {
     return element;