feat: migrate components in snackbar to runes

hperrin · hperrin · commit 30ad59909f3f · 2024-12-02T19:56:03.000-08:00
diff --git a/README.md b/README.md
@@ -192,8 +192,8 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
 - Progress Indicators
   - [x] Circular Progress
   - [x] Linear Progress
-- [ ] Snackbar
-  - [ ] Kitchen
+- [x] Snackbar
+  - [x] Kitchen
 - Tabs
   - [x] Tab
   - [x] Tab Bar
diff --git a/packages/site/src/routes/demo/snackbar/+page.svelte b/packages/site/src/routes/demo/snackbar/+page.svelte
@@ -23,6 +23,10 @@
 
   <Demo component={DynamicText} file="snackbar/_DynamicText.svelte">
     Using dynamic text
+    {#snippet subtitle()}
+      This demo is set to not close automatically, so you can more easily test
+      it.
+    {/snippet}
   </Demo>
 
   <Demo
diff --git a/packages/site/src/routes/demo/snackbar/_Colors.svelte b/packages/site/src/routes/demo/snackbar/_Colors.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Snackbar bind:this={snackbarSuccess} class="demo-success">
   <Label
     >That thing you tried to do actually worked, if you can believe it!</Label
diff --git a/packages/site/src/routes/demo/snackbar/_DynamicText.svelte b/packages/site/src/routes/demo/snackbar/_DynamicText.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Snackbar bind:this={snackbar} labelText={text} timeoutMs={-1}>
   <Label />
   <Actions>
@@ -20,5 +18,5 @@
   import Textfield from '@smui/textfield';
 
   let snackbar: Snackbar;
-  let text = 'This is a snackbar with dynamic text.';
+  let text = $state('This is a snackbar with dynamic text.');
 </script>
diff --git a/packages/site/src/routes/demo/snackbar/_Kitchen.svelte b/packages/site/src/routes/demo/snackbar/_Kitchen.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Kitchen bind:this={kitchen} dismiss$class="material-icons" />
 
 <Button onclick={pushToKitchen}><Label>Push a New Snackbar</Label></Button>
@@ -16,8 +14,8 @@
   import Button, { Label } from '@smui/button';
 
   let kitchen: Kitchen;
-  let reason = 'nothing yet';
-  let action = 'nothing yet';
+  let reason = $state('nothing yet');
+  let action = $state('nothing yet');
 
   function pushToKitchen() {
     kitchen.push({
diff --git a/packages/site/src/routes/demo/snackbar/_KitchenSvg.svelte b/packages/site/src/routes/demo/snackbar/_KitchenSvg.svelte
@@ -1,7 +1,7 @@
-<svelte:options runes={false} />
-
 <Kitchen bind:this={kitchen} dismiss$tag="svg" dismiss$viewBox="0 0 24 24">
-  <path slot="dismiss" fill="currentColor" d={mdiCloseCircle} />
+  {#snippet dismiss()}
+    <path fill="currentColor" d={mdiCloseCircle} />
+  {/snippet}
 </Kitchen>
 
 <Button onclick={pushToKitchen}><Label>Push a New Snackbar</Label></Button>
@@ -19,8 +19,8 @@
   import Button, { Label } from '@smui/button';
 
   let kitchen: Kitchen<undefined, 'svg'>;
-  let reason = 'nothing yet';
-  let action = 'nothing yet';
+  let reason = $state('nothing yet');
+  let action = $state('nothing yet');
 
   function pushToKitchen() {
     kitchen.push({
diff --git a/packages/site/src/routes/demo/snackbar/_LeadingWithAction.svelte b/packages/site/src/routes/demo/snackbar/_LeadingWithAction.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Snackbar leading bind:this={snackbar} onSMUISnackbarClosed={handleClosed}>
   <Label>This is a leading snackbar.</Label>
   <Actions>
@@ -18,7 +16,7 @@
   import Button from '@smui/button';
 
   let snackbar: Snackbar;
-  let reason = 'nothing yet';
+  let reason = $state('nothing yet');
 
   function handleClosed(e: CustomEvent<{ reason: string | undefined }>) {
     reason = e.detail.reason ?? 'Undefined.';
diff --git a/packages/site/src/routes/demo/snackbar/_Simple.svelte b/packages/site/src/routes/demo/snackbar/_Simple.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Snackbar bind:this={snackbarWithClose}>
   <Label>This is a snackbar.</Label>
   <Actions>
diff --git a/packages/site/src/routes/demo/snackbar/_StackedWithAction.svelte b/packages/site/src/routes/demo/snackbar/_StackedWithAction.svelte
@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <Snackbar
   variant="stacked"
   bind:this={snackbar}
@@ -32,8 +30,8 @@
   import IconButton from '@smui/icon-button';
 
   let snackbar: Snackbar;
-  let reason = 'nothing yet';
-  let action = 'nothing yet';
+  let reason = $state('nothing yet');
+  let action = $state('nothing yet');
 
   function handleClosedStacked(e: CustomEvent<{ reason: string | undefined }>) {
     reason = e.detail.reason ?? 'Undefined.';
diff --git a/packages/snackbar/src/Snackbar.svelte b/packages/snackbar/src/Snackbar.svelte
@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <aside
   bind:this={element}
@@ -10,16 +10,16 @@
     'mdc-snackbar--leading': leading,
     ...internalClasses,
   })}
-  {...exclude($$restProps, ['surface$'])}
+  {...exclude(restProps, ['surface$'])}
   onkeydown={(e) => {
     if (instance) {
       instance.handleKeyDown(e);
     }
-    $$restProps.onkeydown?.(e);
+    restProps.onkeydown?.(e);
   }}
   onSMUISnackbarClosed={(e) => {
     handleClosed();
-    $$restProps.onSMUISnackbarClosed?.(e);
+    restProps.onSMUISnackbarClosed?.(e);
   }}
 >
   <div
@@ -30,13 +30,13 @@
     })}
     role="status"
     aria-relevant="additions"
-    {...prefixFilter($$restProps, 'surface$')}
+    {...prefixFilter(restProps, 'surface$')}
     onclick={(e) => {
       handleSurfaceClick(e);
-      $$restProps.surface$onclick?.(e);
+      restProps.surface$onclick?.(e);
     }}
   >
-    <slot />
+    {@render children?.()}
   </div>
 </aside>
 
@@ -47,6 +47,7 @@
 <script lang="ts">
   import { MDCSnackbarFoundation, util } from '@material/snackbar';
   import { ponyfill } from '@material/dom';
+  import type { Snippet } from 'svelte';
   import { onMount, setContext } from 'svelte';
   import type { SmuiAttrs, SmuiElementPropMap } from '@smui/common';
   import type { ActionArray } from '@smui/common/internal';
@@ -60,73 +61,118 @@
 
   const { closest } = ponyfill;
 
+  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;
-    variant?: string;
+    /**
+     * The styling variant of the snackbar.
+     *
+     * Undefined is the default variant. Stacked means the text goes above the
+     * actions and icons.
+     */
+    variant?: 'stacked' | undefined;
+    /**
+     * Whether to position the snackbar in the leading portion of the screen.
+     */
     leading?: boolean;
+    /**
+     * How many milliseconds to wait before automatically closing.
+     */
     timeoutMs?: number;
+    /**
+     * Whether to close the snackbar when the escape key is pressed.
+     *
+     * This only works when an element inside the snackbar has focus.
+     */
     closeOnEscape?: boolean;
+    /**
+     * Text content to place in the label.
+     */
     labelText?: string;
+    /**
+     * Text content to place in the action button.
+     */
     actionButtonText?: string;
-    surface$class?: string;
+    /**
+     * An array of Action or [Action, ActionProps] to be applied to the element.
+     */
     surface$use?: ActionArray;
+    /**
+     * A space separated list of CSS classes.
+     */
+    surface$class?: string;
+
+    children?: Snippet;
   };
-  type $$Props = OwnProps &
+  let {
+    use = [],
+    class: className = '',
+    variant,
+    leading = false,
+    timeoutMs = 5000,
+    closeOnEscape = true,
+    labelText = uninitializedValue as unknown as string,
+    actionButtonText = uninitializedValue as unknown as string,
+    surface$use = [],
+    surface$class = '',
+    children,
+    ...restProps
+  }: OwnProps &
     SmuiAttrs<'aside', keyof OwnProps> & {
       [k in keyof SmuiElementPropMap['div'] as `surface\$${k}`]?: SmuiElementPropMap['div'][k];
-    };
-
-  interface UninitializedValue extends Function {}
-  let uninitializedValue: UninitializedValue = () => {};
-  function isUninitializedValue(value: any): value is UninitializedValue {
-    return value === uninitializedValue;
-  }
-
-  // Remember to update $$Props if you add/remove/rename props.
-  export let use: ActionArray = [];
-  let className = '';
-  export { className as class };
-  export let variant = '';
-  export let leading = false;
-  export let timeoutMs = 5000;
-  export let closeOnEscape = true;
-  export let labelText: UninitializedValue | string = uninitializedValue;
-  export let actionButtonText: UninitializedValue | string = uninitializedValue;
-  export let surface$class = '';
-  export let surface$use: ActionArray = [];
+    } = $props();
 
   let element: HTMLElement;
-  let instance: MDCSnackbarFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
+  let instance: MDCSnackbarFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
   let closeResolve: (value: void) => void;
   let closePromise = new Promise<void>((resolve) => (closeResolve = resolve));
 
   setContext('SMUI:label:context', 'snackbar');
 
-  $: if (instance && instance.getTimeoutMs() !== timeoutMs) {
-    instance.setTimeoutMs(timeoutMs);
-  }
+  $effect(() => {
+    if (instance && instance.getTimeoutMs() !== timeoutMs) {
+      instance.setTimeoutMs(timeoutMs);
+    }
+  });
 
-  $: if (instance && instance.getCloseOnEscape() !== closeOnEscape) {
-    instance.setCloseOnEscape(closeOnEscape);
-  }
+  $effect(() => {
+    if (instance && instance.getCloseOnEscape() !== closeOnEscape) {
+      instance.setCloseOnEscape(closeOnEscape);
+    }
+  });
 
-  $: if (
-    instance &&
-    !isUninitializedValue(labelText) &&
-    getLabelElement().textContent !== labelText
-  ) {
-    getLabelElement().textContent = labelText;
-  }
+  $effect(() => {
+    if (
+      instance &&
+      !isUninitializedValue(labelText) &&
+      getLabelElement().textContent !== labelText
+    ) {
+      getLabelElement().textContent = labelText;
+    }
+  });
 
-  $: if (
-    instance &&
-    !isUninitializedValue(actionButtonText) &&
-    getActionButtonElement().textContent !== actionButtonText
-  ) {
-    getActionButtonElement().textContent = actionButtonText;
-  }
+  $effect(() => {
+    if (
+      instance &&
+      !isUninitializedValue(actionButtonText) &&
+      getActionButtonElement().textContent !== actionButtonText
+    ) {
+      getActionButtonElement().textContent = actionButtonText;
+    }
+  });
 
   onMount(() => {
     instance = new MDCSnackbarFoundation({
@@ -144,7 +190,7 @@
     instance.init();
 
     return () => {
-      instance.destroy();
+      instance?.destroy();
     };
   });
 
@@ -178,20 +224,23 @@
 
   export function open() {
     waiting = waiting.then(() => {
-      instance.open();
+      instance?.open();
       return closePromise;
     });
   }
 
   export function forceOpen() {
-    return instance.open();
+    return instance?.open();
   }
 
   export function close(reason?: string) {
-    return instance.close(reason);
+    return instance?.close(reason);
   }
 
   export function isOpen() {
+    if (instance == null) {
+      throw new Error('Instance is undefined.');
+    }
     return instance.isOpen();
   }
 
diff --git a/packages/snackbar/src/kitchen/Kitchen.svelte b/packages/snackbar/src/kitchen/Kitchen.svelte

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-<svelte:options runes={false} />`
`2`		`-`
`3`	`1`	`<Snackbar bind:this={snackbarSuccess} class="demo-success">`
`4`	`2`	`<Label`
`5`	`3`	`>That thing you tried to do actually worked, if you can believe it!</Label`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-<svelte:options runes={false} />`
`2`		`-`
`3`	`1`	`<Snackbar bind:this={snackbarWithClose}>`
`4`	`2`	`<Label>This is a snackbar.</Label>`
`5`	`3`	`<Actions>`