feat: migrate components in linear progress to runes

Author: hperrin

README.md

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

packages/circular-progress/src/CircularProgress.svelte

@@ -126,7 +126,7 @@
      */
     class?: string;
     /**
-     * Whether to show indeterminate progress.
+     * Whether to show indeterminate progress (a throbber).
      */
     indeterminate?: boolean;
     /**

packages/linear-progress/src/LinearProgress.svelte

@@ -1,4 +1,4 @@
-<svelte:options runes={false} />
+<svelte:options runes />
 
 <div
   bind:this={element}
@@ -20,12 +20,12 @@
   aria-valuemax={1}
   aria-valuenow={indeterminate ? undefined : progress}
   {...internalAttrs}
-  {...$$restProps}
+  {...restProps}
   ontransitionend={(e) => {
     if (instance) {
       instance.handleTransitionEnd();
     }
-    $$restProps.ontransitionend?.(e);
+    restProps.ontransitionend?.(e);
   }}
 >
   <div class="mdc-linear-progress__buffer">
@@ -60,65 +60,101 @@
   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 to show indeterminate progress (a throbber).
+     */
     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;
+    /**
+     * An optional buffer section of the progress bar.
+     *
+     * This can be used to show when, for example, a video has a current
+     * position and a buffered position.
+     */
     buffer?: number | undefined;
   };
-  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 indeterminate = false;
-  export let closed = false;
-  export let progress = 0;
-  export let buffer: number | undefined = undefined;
+  let {
+    use = [],
+    class: className = '',
+    style = '',
+    indeterminate = false,
+    closed = false,
+    progress = 0,
+    buffer = undefined,
+    ...restProps
+  }: OwnProps & SmuiAttrs<'div', keyof OwnProps> = $props();
 
   let element: HTMLDivElement;
-  let instance: MDCLinearProgressFoundation;
-  let internalClasses: { [k: string]: boolean } = {};
-  let internalAttrs: { [k: string]: string | undefined } = {};
-  let internalStyles: { [k: string]: string } = {};
-  let bufferBarStyles: { [k: string]: string } = {};
-  let primaryBarStyles: { [k: string]: string } = {};
+  let instance: MDCLinearProgressFoundation | undefined = $state();
+  let internalClasses: { [k: string]: boolean } = $state({});
+  let internalAttrs: { [k: string]: string | undefined } = $state({});
+  let internalStyles: { [k: string]: string } = $state({});
+  let bufferBarStyles: { [k: string]: string } = $state({});
+  let primaryBarStyles: { [k: string]: string } = $state({});
   let context = getContext<string | undefined>('SMUI:linear-progress:context');
   let closedStore = getContext<Writable<boolean> | undefined>(
     'SMUI:linear-progress:closed',
   );
 
-  $: if (closedStore) {
-    $closedStore = closed;
-  }
+  $effect(() => {
+    if (closedStore) {
+      $closedStore = closed;
+    }
+  });
 
-  $: 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 (buffer == null) {
-      instance.setBuffer(1);
-    } else {
-      instance.setBuffer(buffer);
+  $effect(() => {
+    if (instance) {
+      if (buffer == null) {
+        instance.setBuffer(1);
+      } else {
+        instance.setBuffer(buffer);
+      }
     }
-  }
+  });
 
-  $: if (instance) {
-    if (closed) {
-      instance.close();
-    } else {
-      instance.open();
+  $effect(() => {
+    if (instance) {
+      if (closed) {
+        instance.close();
+      } else {
+        instance.open();
+      }
     }
-  }
+  });
 
   onMount(() => {
     instance = new MDCLinearProgressFoundation({
@@ -151,7 +187,7 @@
     instance.init();
 
     return () => {
-      instance.destroy();
+      instance?.destroy();
     };
   });
 

packages/site/src/routes/demo/linear-progress/_Buffered.svelte

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LinearProgress progress={0.5} buffer={0.75} />
 
 <script lang="ts">

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

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LinearProgress
   class="my-colored-linear-progress"
   progress={0.5}

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

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LinearProgress indeterminate />
 
 <script lang="ts">

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

@@ -1,5 +1,3 @@
-<svelte:options runes={false} />
-
 <LinearProgress {progress} {closed} />
 
 <br />
@@ -20,8 +18,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);