feat: migrate components in floating label, line ripple, and notched outline to runes

hperrin · hperrin · commit 605ca3576819 · 2024-11-28T00:44:03.000-08:00
diff --git a/README.md b/README.md
@@ -169,10 +169,10 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
   - [x] Checkbox
   - [ ] Chips
   - [ ] Chip Input
-  - [ ] Floating Label
+  - [x] Floating Label
   - [x] Form Field
-  - [ ] Line Ripple
-  - [ ] Notched Outline
+  - [x] Line Ripple
+  - [x] Notched Outline
   - [x] Radio Button
   - [ ] Segmented Button
   - [ ] Select Menu
diff --git a/packages/floating-label/src/FloatingLabel.svelte b/packages/floating-label/src/FloatingLabel.svelte
@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 {#if wrapped}
   <span
@@ -15,7 +15,7 @@
       .map(([name, value]) => `${name}: ${value};`)
       .concat([style])
       .join(' ')}
-    {...$$restProps}><slot /></span
+    {...restProps}>{@render children?.()}</span
   >
 {:else}
   <label
@@ -33,12 +33,13 @@
       .concat([style])
       .join(' ')}
     for={forId || (inputProps ? inputProps.id : undefined)}
-    {...$$restProps}><slot /></label
+    {...restProps}>{@render children?.()}</label
   >
 {/if}
 
 <script lang="ts">
   import { MDCFloatingLabelFoundation } from '@material/floating-label';
+  import type { Snippet } from 'svelte';
   import { onMount, getContext } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
@@ -47,46 +48,75 @@
   import type { SMUIFloatingLabelAccessor } from './FloatingLabel.types.js';
 
   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;
+    /**
+     * The ID that this label is for.
+     */
     for?: string | undefined;
+    /**
+     * Whether to float the label.
+     */
     floatAbove?: boolean;
+    /**
+     * Whether to style for a required input.
+     */
     required?: boolean;
+    /**
+     * Whether the input is already wrapped in a label.
+     *
+     * If not, a label element will be used with the ID value in the `for` prop.
+     */
     wrapped?: boolean;
+
+    children?: Snippet;
   };
-  type $$Props = SmuiAttrs<'span', keyof OwnProps> &
+  let {
+    use = [],
+    class: className = '',
+    style = '',
+    for: forId,
+    floatAbove = $bindable(false),
+    required = $bindable(false),
+    wrapped = false,
+    children,
+    ...restProps
+  }: SmuiAttrs<'span', keyof OwnProps> &
     SmuiAttrs<'label', keyof OwnProps> &
-    OwnProps;
-
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let style = '';
-  let forId: string | undefined = undefined;
-  export { forId as for };
-  export let floatAbove = false;
-  export let required = false;
-  export let wrapped = false;
+    OwnProps = $props();
 
   let element: HTMLSpanElement | HTMLLabelElement;
-  let instance: MDCFloatingLabelFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let internalStyles: { [k: string]: string } = {};
+  let instance: MDCFloatingLabelFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let internalStyles: { [k: string]: string } = $state({});
   let inputProps =
     getContext<{ id?: string } | undefined>('SMUI:generic:input:props') ?? {};
 
   let previousFloatAbove = floatAbove;
-  $: if (instance && previousFloatAbove !== floatAbove) {
-    previousFloatAbove = floatAbove;
-    instance.float(floatAbove);
-  }
+  $effect(() => {
+    if (instance && previousFloatAbove !== floatAbove) {
+      previousFloatAbove = floatAbove;
+      instance.float(floatAbove);
+    }
+  });
 
   let previousRequired = required;
-  $: if (instance && previousRequired !== required) {
-    previousRequired = required;
-    instance.setRequired(required);
-  }
+  $effect(() => {
+    if (instance && previousRequired !== required) {
+      previousRequired = required;
+      instance.setRequired(required);
+    }
+  });
 
   const SMUIFloatingLabelMount = getContext<
     ((accessor: SMUIFloatingLabelAccessor) => void) | undefined
@@ -131,7 +161,7 @@
     return () => {
       SMUIFloatingLabelUnmount && SMUIFloatingLabelUnmount(accessor);
 
-      instance.destroy();
+      instance?.destroy();
     };
   });
 
@@ -166,7 +196,7 @@
   }
 
   export function shake(shouldShake: boolean) {
-    instance.shake(shouldShake);
+    instance?.shake(shouldShake);
   }
 
   export function float(shouldFloat: boolean) {
@@ -178,6 +208,9 @@
   }
 
   export function getWidth() {
+    if (instance == null) {
+      throw new Error('Instance is undefined.');
+    }
     return instance.getWidth();
   }
 
diff --git a/packages/line-ripple/src/LineRipple.svelte b/packages/line-ripple/src/LineRipple.svelte
@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -13,7 +13,7 @@
     .map(([name, value]) => `${name}: ${value};`)
     .concat([style])
     .join(' ')}
-  {...$$restProps}
+  {...restProps}
 ></div>
 
 <script lang="ts">
@@ -24,24 +24,35 @@
   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;
+    /**
+     * A list of CSS styles.
+     */
     style?: string;
+    /**
+     * Whether the line is active.
+     */
     active?: boolean;
   };
-  type $$Props = OwnProps & SmuiAttrs<'div', 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 = '';
-  export let active = false;
+  let {
+    use = [],
+    class: className = '',
+    style = '',
+    active = false,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
-  let instance: MDCLineRippleFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let internalStyles: { [k: string]: string } = {};
+  let instance: MDCLineRippleFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let internalStyles: { [k: string]: string } = $state({});
 
   onMount(() => {
     instance = new MDCLineRippleFoundation({
@@ -58,7 +69,7 @@
     instance.init();
 
     return () => {
-      instance.destroy();
+      instance?.destroy();
     };
   });
 
@@ -92,15 +103,15 @@
   }
 
   export function activate() {
-    instance.activate();
+    instance?.activate();
   }
 
   export function deactivate() {
-    instance.deactivate();
+    instance?.deactivate();
   }
 
   export function setRippleCenter(xCoordinate: number) {
-    instance.setRippleCenter(xCoordinate);
+    instance?.setRippleCenter(xCoordinate);
   }
 
   export function getElement() {
diff --git a/packages/notched-outline/src/NotchedOutline.svelte b/packages/notched-outline/src/NotchedOutline.svelte
@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -10,7 +10,7 @@
     'mdc-notched-outline--no-label': noLabel,
     ...internalClasses,
   })}
-  {...$$restProps}
+  {...restProps}
 >
   <div class="mdc-notched-outline__leading"></div>
   {#if !noLabel}
@@ -20,52 +20,73 @@
         .map(([name, value]) => `${name}: ${value};`)
         .join(' ')}
     >
-      <slot />
+      {@render children?.()}
     </div>
   {/if}
   <div class="mdc-notched-outline__trailing"></div>
 </div>
 
 <script lang="ts">
   import { MDCNotchedOutlineFoundation } from '@material/notched-outline';
+  import type { Snippet } from 'svelte';
   import { onMount, setContext } from 'svelte';
   import type { SmuiAttrs } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
   import { classMap, useActions } from '@smui/common/internal';
   import type { SMUIFloatingLabelAccessor } from '@smui/floating-label';
 
   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;
+    /**
+     * The notched state of the outline.
+     */
     notched?: boolean;
+    /**
+     * Don't render a label.
+     */
     noLabel?: boolean;
-  };
-  type $$Props = OwnProps & SmuiAttrs<'div', keyof OwnProps>;
 
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let notched = false;
-  export let noLabel = false;
+    children?: Snippet;
+  };
+  let {
+    use = [],
+    class: className = '',
+    notched = false,
+    noLabel = false,
+    children,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
-  let instance: MDCNotchedOutlineFoundation;
-  let floatingLabel: SMUIFloatingLabelAccessor | undefined;
-  let internalClasses: { [k: string]: boolean } = {};
-  let notchStyles: { [k: string]: string } = {};
-
-  $: if (floatingLabel) {
-    floatingLabel.addStyle('transition-duration', '0s');
-    addClass('mdc-notched-outline--upgraded');
-    requestAnimationFrame(() => {
+  let instance: MDCNotchedOutlineFoundation | undefined = $state();
+  let floatingLabel: SMUIFloatingLabelAccessor | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let notchStyles: { [k: string]: string } = $state({});
+
+  let previousFloatingLabel: SMUIFloatingLabelAccessor | undefined = undefined;
+  $effect(() => {
+    if (floatingLabel !== previousFloatingLabel) {
       if (floatingLabel) {
-        floatingLabel.removeStyle('transition-duration');
+        floatingLabel.addStyle('transition-duration', '0s');
+        addClass('mdc-notched-outline--upgraded');
+        requestAnimationFrame(() => {
+          if (floatingLabel) {
+            floatingLabel.removeStyle('transition-duration');
+          }
+        });
+      } else {
+        removeClass('mdc-notched-outline--upgraded');
       }
-    });
-  } else {
-    removeClass('mdc-notched-outline--upgraded');
-  }
+      previousFloatingLabel = floatingLabel;
+    }
+  });
 
   setContext(
     'SMUI:floating-label:mount',
@@ -88,7 +109,7 @@
     instance.init();
 
     return () => {
-      instance.destroy();
+      instance?.destroy();
     };
   });
 
@@ -123,11 +144,11 @@
   }
 
   export function notch(notchWidth: number) {
-    instance.notch(notchWidth);
+    instance?.notch(notchWidth);
   }
 
   export function closeNotch() {
-    instance.closeNotch();
+    instance?.closeNotch();
   }
 
   export function getElement() {
