feat: migrate card to typescript

Author: hperrin

packages/card/ActionButtons.js renamed to packages/card/ActionButtons.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-card__action-buttons',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/card/ActionIcons.js renamed to packages/card/ActionIcons.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-card__action-icons',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/card/Actions.svelte

@@ -12,23 +12,24 @@
   <slot />
 </div>
 
-<script>
+<script lang="ts">
   import { setContext } 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 };
   export let fullBleed = false;
 
-  let element;
+  let element: HTMLDivElement;
 
   setContext('SMUI:button:context', 'card:action');
   setContext('SMUI:icon-button:context', 'card:action');

packages/card/Card.svelte

@@ -13,23 +13,24 @@
   <slot />
 </div>
 
-<script>
+<script lang="ts">
   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 };
-  export let variant = 'raised';
+  export let variant: 'raised' | 'outlined' = 'raised';
   export let padded = false;
 
-  let element;
+  let element: HTMLDivElement;
 
   export function getElement() {
     return element;

packages/card/Content.js renamed to packages/card/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: 'smui-card__content',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/card/Media.svelte

@@ -13,22 +13,23 @@
   <slot />
 </div>
 
-<script>
+<script lang="ts">
   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 };
-  export let aspectRatio = null;
+  export let aspectRatio: 'square' | '16x9' | null | undefined = null;
 
-  let element;
+  let element: HTMLDivElement;
 
   export function getElement() {
     return element;

packages/card/MediaContent.js renamed to packages/card/MediaContent.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-card__media-content',
-  component: Div,
+  component: Div as typeof SMUIComponent,
 });

packages/card/PrimaryAction.svelte

@@ -26,43 +26,44 @@
   <slot />
 </div>
 
-<script>
+<script lang="ts">
   import { get_current_component } from 'svelte/internal';
   import {
     forwardEventsBuilder,
     classMap,
     useActions,
+    ActionArray,
   } from '@smui/common/internal';
   import Ripple from '@smui/ripple';
 
   const forwardEvents = forwardEventsBuilder(get_current_component());
 
-  export let use = [];
+  export let use: ActionArray = [];
   let className = '';
   export { className as class };
   export let style = '';
   export let ripple = true;
-  export let color = null;
+  export let color: 'primary' | 'secondary' | null | undefined = null;
   export let padded = false;
-  export let tabindex = '0';
+  export let tabindex = 0;
 
-  let element;
-  let internalClasses = {};
-  let internalStyles = {};
+  let element: HTMLDivElement;
+  let internalClasses: { [k: string]: boolean } = {};
+  let internalStyles: { [k: string]: string } = {};
 
-  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 addStyle(name, value) {
+  function addStyle(name: string, value: string) {
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];

packages/card/bare.js

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

packages/card/bare.ts

@@ -1,12 +1,12 @@
 import Card from './Card.svelte';
 
-import Content from './Content.js';
+import Content from './Content';
 import PrimaryAction from './PrimaryAction.svelte';
 import Media from './Media.svelte';
-import MediaContent from './MediaContent.js';
+import MediaContent from './MediaContent';
 import Actions from './Actions.svelte';
-import ActionButtons from './ActionButtons.js';
-import ActionIcons from './ActionIcons.js';
+import ActionButtons from './ActionButtons';
+import ActionIcons from './ActionIcons';
 
 export default Card;