feat: migrate components in chips to runes

Author: hperrin

MIGRATING.md

@@ -13,7 +13,9 @@ This doc contains information that will help you migrate your code from an older
 - The deprecated "MDC" events have been removed. All event names should be migrated to the corresponding "SMUI" event names.
 - The "Fixation" theme now uses Tahoma as its large header font.
 - Select no longer defaults the value to an empty string, meaning you must either set the value given to it to an empty string or provide a key function that returns an empty string for an undefined value.
-- The TabBar now exprects a `tab` snippet instead of using `let:tab`.
+- TabBar now expects a `tab` snippet instead of using `let:tab`.
+- Chips' Set now expects a `chip` snippet instead of using `let:chip`.
+- Chips' Set key function is now required to return `string`, not `string | number`.
 
 ## Changes
 

README.md

@@ -167,7 +167,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
 - Inputs and Controls
   - [ ] Autocomplete
   - [x] Checkbox
-  - [ ] Chips
+  - [x] Chips
   - [ ] Chip Input
   - [x] Floating Label
   - [x] Form Field

packages/chips/src/Checkmark.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <span
   bind:this={element}
@@ -7,33 +7,46 @@
     [className]: true,
     'mdc-chip__checkmark': true,
   })}
-  {...$$restProps}
+  {...restProps}
 >
-  <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
-    <path
-      class="mdc-chip__checkmark-path"
-      fill="none"
-      stroke="black"
-      d="M1.73,12.91 8.1,19.28 22.79,4.59"
-    />
-  </svg>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <svg class="mdc-chip__checkmark-svg" viewBox="-2 -3 30 30">
+      <path
+        class="mdc-chip__checkmark-path"
+        fill="none"
+        stroke="black"
+        d="M1.73,12.91 8.1,19.28 22.79,4.59"
+      />
+    </svg>
+  {/if}
 </span>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import { classMap, useActions } from '@smui/common/internal';
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
-  };
-  type $$Props = OwnProps & SmuiAttrs<'span', keyof OwnProps>;
 
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'span', keyof OwnProps> = $props();
 
   let element: HTMLSpanElement;
 

packages/chips/src/Chip.svelte

@@ -1,7 +1,6 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
-<svelte:component
-  this={component}
+<MyComponent
   {tag}
   bind:this={element}
   use={[
@@ -29,61 +28,74 @@
     .concat([style])
     .join(' ')}
   role="row"
-  {...$$restProps}
+  {...restProps}
   ontransitionend={(e: TransitionEvent) => {
     if (instance) {
       instance.handleTransitionEnd(e);
     }
-    $$restProps.ontransitionend?.(e);
+    restProps.ontransitionend?.(e);
   }}
   onclick={(e: MouseEvent) => {
     if (instance) {
       instance.handleClick();
     }
-    $$restProps.onclick?.(e);
+    restProps.onclick?.(e);
   }}
   onkeydown={(e: KeyboardEvent) => {
     if (instance) {
       instance.handleKeydown(e);
     }
-    $$restProps.onkeydown?.(e);
+    restProps.onkeydown?.(e);
   }}
   onfocusin={(e: FocusEvent) => {
     if (instance) {
       instance.handleFocusIn(e);
     }
-    $$restProps.onfocusin?.(e);
+    restProps.onfocusin?.(e);
   }}
   onfocusout={(e: FocusEvent) => {
     if (instance) {
       instance.handleFocusOut(e);
     }
-    $$restProps.onfocusout?.(e);
+    restProps.onfocusout?.(e);
   }}
-  onSMUIChipTrailingActionInteraction={(e: CustomEvent) => {
+  onSMUIChipTrailingActionInteraction={(
+    e: CustomEvent<{
+      trigger: InteractionTrigger;
+    }> & { currentTarget: EventTarget & SmuiElementMap[TagName] },
+  ) => {
     if (instance) {
       instance.handleTrailingActionInteraction();
     }
-    $$restProps.onSMUIChipTrailingActionInteraction?.(e);
+    restProps.onSMUIChipTrailingActionInteraction?.(e);
   }}
-  onSMUIChipTrailingActionNavigation={(e: CustomEvent) => {
+  onSMUIChipTrailingActionNavigation={(
+    e: CustomEvent<{ key: string }> & {
+      currentTarget: EventTarget & SmuiElementMap[TagName];
+    },
+  ) => {
     if (instance) {
       instance.handleTrailingActionNavigation(e);
     }
-    $$restProps.onSMUIChipTrailingActionNavigation?.(e);
+    restProps.onSMUIChipTrailingActionNavigation?.(e);
   }}
 >
   {#if ripple && !$nonInteractive}
     <div class="mdc-chip__ripple"></div>
   {/if}
-  <slot />
+  {@render children?.()}
   {#if touch}
     <div class="mdc-chip__touch"></div>
   {/if}
-</svelte:component>
+</MyComponent>
 
-<script lang="ts" generics="TagName extends SmuiEveryElement = 'div'">
+<script
+  lang="ts"
+  generics="ChipKey extends Object | string | number, TagName extends SmuiEveryElement = 'div'"
+>
+  import type { InteractionTrigger } from '@material/chips/deprecated/trailingaction/constants';
   import { deprecated } from '@material/chips';
+  import type { Snippet } from 'svelte';
   import { onMount, setContext, getContext } from 'svelte';
   import { writable } from 'svelte/store';
   import type { ActionArray } from '@smui/common/internal';
@@ -104,40 +116,73 @@
   const { MDCChipFoundation } = deprecated;
 
   type OwnProps = {
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
     class?: string;
+    /**
+     * A list of CSS styles.
+     */
     style?: string;
-    chip: any;
+    /**
+     * The chip object this chip is for.
+     */
+    chip: ChipKey;
+    /**
+     * Whether to show a ripple animation.
+     */
     ripple?: boolean;
+    /**
+     * Whether to use touch styling
+     */
     touch?: boolean;
+    /**
+     * Whether this chip should be removed when user clicks the trailing icon.
+     */
     shouldRemoveOnTrailingIconClick?: boolean;
+    /**
+     * Whether primary action should focus when user clicks the chip.
+     */
     shouldFocusPrimaryActionOnClick?: boolean;
+    /**
+     * The component to use to render the element.
+     */
     component?: SmuiComponent<SmuiElementMap[TagName]>;
+    /**
+     * The tag name of the element to create.
+     */
     tag?: TagName;
+
+    children?: Snippet;
   };
-  type $$Props = OwnProps & SmuiAttrs<TagName, keyof OwnProps>;
-
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let style = '';
-  let chipId: any;
-  export { chipId as chip };
-  export let ripple = true;
-  export let touch = false;
-  export let shouldRemoveOnTrailingIconClick = true;
-  export let shouldFocusPrimaryActionOnClick = true;
+  let {
+    use = [],
+    class: className = '',
+    style = '',
+    chip: chipId,
+    ripple = true,
+    touch = false,
+    shouldRemoveOnTrailingIconClick = true,
+    shouldFocusPrimaryActionOnClick = true,
+    component: MyComponent = SmuiElement,
+    tag = 'div' as TagName,
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<TagName, keyof OwnProps> = $props();
 
   let element: ReturnType<SmuiComponent<SmuiElementMap[TagName]>>;
-  let instance: deprecated.MDCChipFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let leadingIconClasses: { [k: string]: boolean } = {};
-  let internalStyles: { [k: string]: string } = {};
+  let instance: deprecated.MDCChipFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let leadingIconClasses: { [k: string]: boolean } = $state({});
+  let internalStyles: { [k: string]: string } = $state({});
   const initialSelectedStore = getContext<SvelteStore<boolean>>(
     'SMUI:chips:chip:initialSelected',
   );
-  let selected = $initialSelectedStore;
+  let selected = $state($initialSelectedStore);
   let primaryActionAccessor: SMUIChipsPrimaryActionAccessor | undefined =
     undefined;
   let trailingActionAccessor: SMUIChipsTrailingActionAccessor | undefined =
@@ -148,50 +193,53 @@
   const choice = getContext<SvelteStore<boolean>>('SMUI:chips:choice');
   const index = getContext<SvelteStore<number>>('SMUI:chips:chip:index');
 
-  export let component: SmuiComponent<SmuiElementMap[TagName]> = SmuiElement;
-  export let tag: SmuiEveryElement | undefined =
-    component === SmuiElement ? 'div' : undefined;
-
   const shouldRemoveOnTrailingIconClickStore = writable(
     shouldRemoveOnTrailingIconClick,
   );
-  $: $shouldRemoveOnTrailingIconClickStore = shouldRemoveOnTrailingIconClick;
+  $effect(() => {
+    $shouldRemoveOnTrailingIconClickStore = shouldRemoveOnTrailingIconClick;
+  });
   setContext(
     'SMUI:chips:chip:shouldRemoveOnTrailingIconClick',
     shouldRemoveOnTrailingIconClickStore,
   );
+
   const isSelectedStore = writable(selected);
-  $: $isSelectedStore = selected;
+  $effect(() => {
+    $isSelectedStore = selected;
+  });
   setContext('SMUI:chips:chip:isSelected', isSelectedStore);
+
   const leadingIconClassesStore = writable(leadingIconClasses);
-  $: $leadingIconClassesStore = leadingIconClasses;
+  $effect(() => {
+    $leadingIconClassesStore = leadingIconClasses;
+  });
   setContext('SMUI:chips:chip:leadingIconClasses', leadingIconClassesStore);
+
   setContext(
     'SMUI:chips:chip:focusable',
     ($choice && selected) || $index === 0,
   );
 
-  if (!chipId) {
-    throw new Error(
-      'The chip property is required! It should be passed down from the Set to the Chip.',
-    );
-  }
-
-  $: if (
-    instance &&
-    instance.getShouldRemoveOnTrailingIconClick() !==
-      shouldRemoveOnTrailingIconClick
-  ) {
-    instance.setShouldRemoveOnTrailingIconClick(
-      shouldRemoveOnTrailingIconClick,
-    );
-  }
+  $effect(() => {
+    if (
+      instance &&
+      instance.getShouldRemoveOnTrailingIconClick() !==
+        shouldRemoveOnTrailingIconClick
+    ) {
+      instance.setShouldRemoveOnTrailingIconClick(
+        shouldRemoveOnTrailingIconClick,
+      );
+    }
+  });
 
-  $: if (instance) {
-    instance.setShouldFocusPrimaryActionOnClick(
-      shouldFocusPrimaryActionOnClick,
-    );
-  }
+  $effect(() => {
+    if (instance) {
+      instance.setShouldFocusPrimaryActionOnClick(
+        shouldFocusPrimaryActionOnClick,
+      );
+    }
+  });
 
   setContext(
     'SMUI:chips:primary-action:mount',
@@ -316,7 +364,7 @@
     return () => {
       SMUIChipsChipUnmount && SMUIChipsChipUnmount(accessor);
 
-      instance.destroy();
+      instance?.destroy();
     };
   });
 
@@ -372,19 +420,19 @@
     shouldNotifyClients: boolean,
   ) {
     selected = value;
-    instance.setSelectedFromChipSet(selected, shouldNotifyClients);
+    instance?.setSelectedFromChipSet(selected, shouldNotifyClients);
   }
 
   function focusPrimaryAction() {
-    instance.focusPrimaryAction();
+    instance?.focusPrimaryAction();
   }
 
   function focusTrailingAction() {
-    instance.focusTrailingAction();
+    instance?.focusTrailingAction();
   }
 
   function removeFocus() {
-    instance.removeFocus();
+    instance?.removeFocus();
   }
 
   export function getElement() {