feat: migrate components in segmented button to runes

Author: hperrin

MIGRATING.md

@@ -16,6 +16,7 @@ This doc contains information that will help you migrate your code from an older
 - 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`.
+- SegmentedButton now expects a `segment` snippet instead of using `let:segment`.
 
 ## Changes
 

README.md

@@ -174,7 +174,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
   - [x] Line Ripple
   - [x] Notched Outline
   - [x] Radio Button
-  - [ ] Segmented Button
+  - [x] Segmented Button
   - [x] Select Menu
     - [x] Select Helper Text
     - [x] Select Icon

packages/segmented-button/src/Segment.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <button
   bind:this={element}
@@ -25,24 +25,26 @@
   aria-pressed={!singleSelect ? (selected ? 'true' : 'false') : undefined}
   aria-checked={singleSelect ? (selected ? 'true' : 'false') : undefined}
   {...internalAttrs}
-  {...$$restProps}
+  {...restProps}
   onclick={(e) => {
-    $$restProps.onclick?.(e);
+    restProps.onclick?.(e);
     if (!e.defaultPrevented && instance && !manualSelection) {
       instance.handleClick();
     }
   }}
-  >{#if ripple}<div class="mdc-segmented-button__ripple"></div>{/if}<slot
-  />{#if touch}<div
+  >{#if ripple}<div
+      class="mdc-segmented-button__ripple"
+    ></div>{/if}{@render children?.()}{#if touch}<div
       class="mdc-segmented-button__segment__touch"
     ></div>{/if}</button
 >
 
-<script lang="ts">
+<script lang="ts" generics="SegmentKey extends Object | string | number">
   // TODO: Remove this when MDC's segmented button is fixed.
   // TODO: Also remove @material/base and @material/ripple from the package.json
   // @ts-ignore
   import { MDCSegmentedButtonSegmentFoundation } from './mdc-segmented-button/index.js';
+  import type { Snippet } from 'svelte';
   import { onMount, getContext } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
@@ -51,70 +53,91 @@
 
   import type { SMUISegmentedButtonSegmentAccessor } from './Segment.types.js';
 
+  interface UninitializedValue extends Function {}
+  let uninitializedValue: UninitializedValue = () => {};
+  function isUninitializedValue(value: any): value is UninitializedValue {
+    return value === uninitializedValue;
+  }
+
   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;
-    segment: any;
+    /**
+     * The segment object this segment is for.
+     */
+    segment: SegmentKey;
+    /**
+     * Whether to show a ripple animation.
+     */
     ripple?: boolean;
+    /**
+     * Whether to use touch styling
+     */
     touch?: boolean;
+    /**
+     * Whether this segment is selected.
+     *
+     * You don't need to set this unless you are manually handling selection.
+     */
     selected?: boolean;
-  };
-  type $$Props = OwnProps & SmuiAttrs<'button', keyof OwnProps>;
 
-  interface UninitializedValue extends Function {}
-  let uninitializedValue: UninitializedValue = () => {};
-  function isUninitializedValue(value: any): value is UninitializedValue {
-    return value === uninitializedValue;
-  }
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    style = '',
+    segment: segmentId,
+    ripple = true,
+    touch = false,
+    selected = $bindable(uninitializedValue as unknown as boolean),
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'button', keyof OwnProps> = $props();
 
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let style = '';
-  let segmentId: any;
-  export { segmentId as segment };
-  export let ripple = true;
-  export let touch = false;
   const initialSelectedStore = getContext<SvelteStore<boolean>>(
     'SMUI:segmented-button:segment:initialSelected',
   );
-
   // Some trickery to detect uninitialized values but also have the right types.
-  /** You don't need to set this unless you are manually handling selection. */
-  export let selected: boolean = uninitializedValue as unknown as boolean;
   let manualSelection: boolean = !isUninitializedValue(selected);
   if (isUninitializedValue(selected)) {
     selected = $initialSelectedStore;
   }
   // Done with the trickery.
 
   let element: HTMLButtonElement;
-  let instance: MDCSegmentedButtonSegmentFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let internalStyles: { [k: string]: string } = {};
-  let internalAttrs: { [k: string]: string | undefined } = {};
+  let instance: MDCSegmentedButtonSegmentFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let internalStyles: { [k: string]: string } = $state({});
+  let internalAttrs: { [k: string]: string | undefined } = $state({});
   const singleSelect = getContext<SvelteStore<boolean>>(
     'SMUI:segmented-button:singleSelect',
   );
   const index = getContext<SvelteStore<number>>(
     'SMUI:segmented-button:segment:index',
   );
 
-  if (!segmentId) {
-    throw new Error(
-      'The segment property is required! It should be passed down from the SegmentedButton to the Segment.',
-    );
-  }
-
-  $: if (instance && instance.isSelected() && !selected) {
-    instance.setUnselected();
-  }
+  $effect(() => {
+    if (instance && instance.isSelected() && !selected) {
+      instance.setUnselected();
+    }
+  });
 
-  $: if (instance && !instance.isSelected() && selected) {
-    instance.setSelected();
-  }
+  $effect(() => {
+    if (instance && !instance.isSelected() && selected) {
+      instance.setSelected();
+    }
+  });
 
   const SMUISegmentedButtonSegmentMount = getContext<
     ((accessor: SMUISegmentedButtonSegmentAccessor) => void) | undefined
@@ -168,7 +191,7 @@
       SMUISegmentedButtonSegmentUnmount &&
         SMUISegmentedButtonSegmentUnmount(accessor);
 
-      instance.destroy();
+      instance?.destroy();
     };
   });