feat: migrate components in circular progress to runes

Author: hperrin

README.md

@@ -190,7 +190,7 @@ Svelte 5 Runes mode is being migrated to slowly. This is the todo list of compon
 - [x] Menu
 - [x] Paper
 - Progress Indicators
-  - [ ] Circular Progress
+  - [x] Circular Progress
   - [ ] Linear Progress
 - [ ] Snackbar
   - [ ] Kitchen

packages/circular-progress/src/CircularProgress.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -15,7 +15,7 @@
   aria-valuemax={1}
   aria-valuenow={indeterminate ? undefined : progress}
   {...internalAttrs}
-  {...$$restProps}
+  {...restProps}
 >
   <div class="mdc-circular-progress__determinate-container">
     <svg
@@ -117,46 +117,72 @@
   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;
+    /**
+     * Whether to show indeterminate progress.
+     */
     indeterminate?: boolean;
+    /**
+     * Whether the progress indicator is closed.
+     *
+     * Closed progress indicators animate out, then still take up space in the
+     * UI.
+     */
     closed?: boolean;
+    /**
+     * The current progress (between 0 and 1).
+     */
     progress?: number;
+    /**
+     * Show the four color loop animation.
+     */
     fourColor?: 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 indeterminate = false;
-  export let closed = false;
-  export let progress = 0;
-  export let fourColor = false;
+  let {
+    use = [],
+    class: className = '',
+    indeterminate = false,
+    closed = false,
+    progress = 0,
+    fourColor = false,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
-  let instance: MDCCircularProgressFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let internalAttrs: { [k: string]: string | undefined } = {};
-  let determinateCircleAttrs: { [k: string]: string | undefined } = {};
+  let instance: MDCCircularProgressFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let internalAttrs: { [k: string]: string | undefined } = $state({});
+  let determinateCircleAttrs: { [k: string]: string | undefined } = $state({});
   let determinateCircle: SVGCircleElement;
 
-  $: if (instance && instance.isDeterminate() !== !indeterminate) {
-    instance.setDeterminate(!indeterminate);
-  }
+  $effect(() => {
+    if (instance && instance.isDeterminate() !== !indeterminate) {
+      instance.setDeterminate(!indeterminate);
+    }
+  });
 
-  $: if (instance && instance.getProgress() !== progress) {
-    instance.setProgress(progress);
-  }
+  $effect(() => {
+    if (instance && instance.getProgress() !== progress) {
+      instance.setProgress(progress);
+    }
+  });
 
-  $: if (instance) {
-    if (closed) {
-      instance.close();
-    } else {
-      instance.open();
+  $effect(() => {
+    if (instance) {
+      if (closed) {
+        instance.close();
+      } else {
+        instance.open();
+      }
     }
-  }
+  });
 
   onMount(() => {
     instance = new MDCCircularProgressFoundation({
@@ -172,7 +198,7 @@
     instance.init();
 
     return () => {
-      instance.destroy();
+      instance?.destroy();
     };
   });
 

packages/site/src/routes/demo/circular-progress/_Colored.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; justify-content: center">
   <CircularProgress
     class="my-colored-circle"

packages/site/src/routes/demo/circular-progress/_FourColor.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; justify-content: center">
   <CircularProgress
     class="my-four-colors"

packages/site/src/routes/demo/circular-progress/_Indeterminate.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; justify-content: center">
   <CircularProgress style="height: 32px; width: 32px;" indeterminate />
 </div>

packages/site/src/routes/demo/circular-progress/_Simple.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <div style="display: flex; justify-content: center">
   <CircularProgress style="height: 48px; width: 48px;" {progress} {closed} />
 </div>
@@ -22,8 +20,8 @@
   import FormField from '@smui/form-field';
   import Button from '@smui/button';
 
-  let progress = 0;
-  let closed = false;
+  let progress = $state(0);
+  let closed = $state(false);
   let timer: NodeJS.Timer;
 
   onMount(reset);