fix: finish some migration steps, update readme

Author: hperrin

MIGRATING.md

@@ -4,6 +4,12 @@ This doc contains information that will help you migrate your code from an older
 
 # SMUI 7 -> SMUI 8
 
+SMUI 8 has migrated to Svelte 5's new Runes mode. As such, it expects things like snippets and only some props are bindable.
+
+Note to Devs: update `indexOf()` with `$state` arrays or items to `findIndex()` to avoid bugs.
+
+Note to Devs: remove `x = x;` statements after `push()` and the like. They aren't needed anymore with Svelte 5's new $state rune.
+
 ## Breaking Changes
 
 - Svelte 5 is required! Svelte 4 will not work.

README.md

@@ -144,66 +144,6 @@ Click a component/package below to go to the documentation. (Note that this docu
 
 - Labels and icons are named exports in the components that use them, or you can use the 'Label' and 'Icon' exports from '@smui/common'. (Except for chips labels and icons, textfield icons, and select icons, because they are special snowflakes.)
 
-# Migration to Runes
-
-Svelte 5 Runes mode is being migrated to slowly. This is the todo list of components as they are migrated.
-
-- [x] Accordion
-- Action Buttons
-  - [x] Button
-  - [x] Floating Action Button
-  - [x] Icon Button
-- App Bars
-  - [x] Bottom App Bar
-  - [x] Top App Bar
-- [x] Badge
-- [x] Banner
-- [x] Card
-- [x] Common
-- [x] Data Table
-- [x] Dialog
-- [x] Drawer
-- [x] Image List
-- Inputs and Controls
-  - [x] Autocomplete
-  - [x] Checkbox
-  - [x] Chips
-  - [x] Chip Input
-  - [x] Floating Label
-  - [x] Form Field
-  - [x] Line Ripple
-  - [x] Notched Outline
-  - [x] Radio Button
-  - [x] Segmented Button
-  - [x] Select Menu
-    - [x] Select Helper Text
-    - [x] Select Icon
-  - [x] Slider
-  - [x] Switch
-  - [x] Text Field
-    - [x] Text Field Character Counter
-    - [x] Text Field Helper Text
-    - [x] Text Field Icon
-- [x] Layout Grid
-- [x] List
-- [x] Menu Surface
-- [x] Menu
-- [x] Paper
-- Progress Indicators
-  - [x] Circular Progress
-  - [x] Linear Progress
-- [x] Snackbar
-  - [x] Kitchen
-- Tabs
-  - [x] Tab
-  - [x] Tab Bar
-- [x] Tooltip
-- [x] Touch Target
-
-Note to Devs: update `indexOf()` on any `$state` array to `findIndex()`.
-
-Note to Devs: remove `x = x;` statements after `push()` and the like. They aren't needed anymore with Svelte 5's new $state rune.
-
 # License
 
 Copyright 2019-2024 Hunter Perrin

packages/accordion/src/Header.svelte

@@ -148,7 +148,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/banner/src/Banner.svelte

@@ -287,7 +287,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/bottom-app-bar/src/AutoAdjust.svelte

@@ -102,7 +102,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/bottom-app-bar/src/BottomAppBar.svelte

@@ -121,7 +121,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/button/src/Button.svelte

@@ -196,7 +196,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/card/src/PrimaryAction.svelte

@@ -100,7 +100,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/checkbox/src/Checkbox.svelte

@@ -390,7 +390,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/chip-input/src/ChipInput.svelte

@@ -340,7 +340,6 @@
       if (chips.findIndex((chip) => chip === event.detail) === -1) {
         chips.push(event.detail);
       }
-      chips = chips;
     }
   }
 
@@ -364,7 +363,6 @@
         if (chips.findIndex((chip) => chip === text) === -1) {
           chips.push(text);
         }
-        chips = chips;
         text = '';
       }
     }
@@ -391,7 +389,6 @@
         if (chips.findIndex((chip) => chip === text) === -1) {
           chips.push(text);
         }
-        chips = chips;
         text = '';
         floatingLabel?.float(false);
       }
@@ -409,7 +406,6 @@
   }
 
   function handleChipRemoval(chip: any) {
-    chips = chips;
     dispatch(getElement(), 'SMUIChipInputRemove', { chip });
   }
 

packages/chips/src/Chip.svelte

@@ -402,7 +402,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/chips/src/Set.svelte

@@ -159,10 +159,8 @@
 
   let element: HTMLDivElement;
   let instance: deprecated.MDCChipSetFoundation | undefined = $state();
-  let chipAccessorMap: Record<string, SMUIChipsChipAccessor> = $state({});
-  let chipAccessorWeakMap = $state.raw(
-    new WeakMap<Object, SMUIChipsChipAccessor>(),
-  );
+  let chipAccessorMap: Record<string, SMUIChipsChipAccessor> = {};
+  let chipAccessorWeakMap = new WeakMap<Object, SMUIChipsChipAccessor>();
   let initialSelected = chips.map(
     (chipId) =>
       (choice &&
@@ -292,12 +290,10 @@
             );
             if (selIndex !== -1) {
               (selected as ChipKey[]).splice(selIndex, 1);
-              selected = selected;
             }
           }
           // Now remove it from the chips.
           chips.splice(index, 1);
-          chips = chips;
         }
       },
       removeFocusFromChipAtIndex: (index) => {
@@ -315,10 +311,8 @@
             );
             if (selectedValue && selIndex === -1) {
               (selected as ChipKey[]).push(chips[index]);
-              selected = selected;
             } else if (!selectedValue && selIndex !== -1) {
               (selected as ChipKey[]).splice(selIndex, 1);
-              selected = selected;
             }
           } else if (
             choice &&

packages/chips/src/TrailingAction.svelte

@@ -189,7 +189,6 @@
     if (internalStyles[name] != value) {
       if (value === '' || value == null) {
         delete internalStyles[name];
-        internalStyles = internalStyles;
       } else {
         internalStyles[name] = value;
       }

packages/common/README.md

@@ -177,7 +177,7 @@ Build a class string from a map of class names to conditions. This is useful whe
 
   export let condition = true;
 
-  let internalClasses: { [k: string]: boolean } = {};
+  let internalClasses: { [k: string]: boolean } = $state({});
 
   export function addClass(className: string) {
     if (!internalClasses[className]) {
@@ -240,21 +240,34 @@ Exclude a set of properties from an object. It differs from normal `omit` functi
 
 ```svelte
 <!-- MyComponent.svelte -->
-<div class="my-component {className}" {...exclude($$restProps, ['button$'])}>
-  <button
-    class="button {button$class}"
-    {...prefixFilter($$restProps, 'button$')}
-  >
-    <slot />
+<div class="my-component {className}" {...exclude(restProps, ['button$'])}>
+  <button class="button {button$class}" {...prefixFilter(restProps, 'button$')}>
+    {@render children?.()}
   </button>
 </div>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SmuiAttrs } from '@smui/common';
   import { exclude, prefixFilter } from '@smui/common/internal';
 
-  let className = '';
-  export { className as class };
-  export let button$class = '';
+  type OwnProps = {
+    class?: string;
+    button$class?: string;
+    children?: Snippet;
+  };
+  let {
+    class: className = '',
+    button$class = '',
+    children,
+    ...restProps
+  }: OwnProps &
+    SmuiAttrs<'div', keyof OwnProps> & {
+      [k in keyof SmuiAttrs<
+        'button',
+        keyof OwnProps
+      > as `button\$${k}`]?: SmuiAttrs<'button', keyof OwnProps>[k];
+    } = $props();
 </script>
 ```
 
@@ -270,7 +283,7 @@ Exclude a set of properties from an object. It differs from normal `omit` functi
 <script lang="ts">
   import MyComponent from './MyComponent.svelte';
 
-  let disabled = false;
+  let disabled = $state(false);
 </script>
 ```
 
@@ -280,21 +293,34 @@ Filter an object for only properties with a certain prefix. It is usually used a
 
 ```svelte
 <!-- MyComponent.svelte -->
-<div class="my-component {className}" {...exclude($$restProps, ['button$'])}>
-  <button
-    class="button {button$class}"
-    {...prefixFilter($$restProps, 'button$')}
-  >
-    <slot />
+<div class="my-component {className}" {...exclude(restProps, ['button$'])}>
+  <button class="button {button$class}" {...prefixFilter(restProps, 'button$')}>
+    {@render children?.()}
   </button>
 </div>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { SmuiAttrs } from '@smui/common';
   import { exclude, prefixFilter } from '@smui/common/internal';
 
-  let className = '';
-  export { className as class };
-  export let button$class = '';
+  type OwnProps = {
+    class?: string;
+    button$class?: string;
+    children?: Snippet;
+  };
+  let {
+    class: className = '',
+    button$class = '',
+    children,
+    ...restProps
+  }: OwnProps &
+    SmuiAttrs<'div', keyof OwnProps> & {
+      [k in keyof SmuiAttrs<
+        'button',
+        keyof OwnProps
+      > as `button\$${k}`]?: SmuiAttrs<'button', keyof OwnProps>[k];
+    } = $props();
 </script>
 ```
 
@@ -310,7 +336,7 @@ Filter an object for only properties with a certain prefix. It is usually used a
 <script lang="ts">
   import MyComponent from './MyComponent.svelte';
 
-  let disabled = false;
+  let disabled = $state(false);
 </script>
 ```
 
@@ -321,14 +347,21 @@ An action that takes actions and runs them on the element. Used to allow actions
 ```svelte
 <!-- MyComponent.svelte -->
 <div use:useActions={use}>
-  <slot />
+  {@render children?.()}
 </div>
 
 <script lang="ts">
+  import type { Snippet } from 'svelte';
   import type { ActionArray } from '@smui/common/internal';
   import { useActions } from '@smui/common/internal';
 
-  export let use: ActionArray = [];
+  let {
+    use = [],
+    children,
+  }: {
+    use?: ActionArray;
+    children?: Snippet;
+  } = $props();
 </script>
 ```
 
@@ -373,7 +406,7 @@ These components are not exported in the index file, but are available to be imp
 
 ## ContextFragment.svelte
 
-A fragment component (only contains a `<slot />`) used to define a Svelte context with a Svelte store.
+A fragment component (only contains a `{@render children?.()}`) used to define a Svelte context with a Svelte store.
 
 ### Props / Defaults
 

packages/data-table/src/Body.svelte

@@ -57,10 +57,9 @@
   setContext(
     'SMUI:data-table:row:unmount',
     (accessor: SMUIDataTableRowAccessor) => {
-      const idx = rows.indexOf(accessor);
+      const idx = rows.findIndex((a) => a === accessor);
       if (idx !== -1) {
         rows.splice(idx, 1);
-        rows = rows;
       }
       rowAccessorMap.delete(accessor.element);
     },

packages/data-table/src/Head.svelte

@@ -61,10 +61,9 @@
   setContext(
     'SMUI:data-table:cell:unmount',
     (accessor: SMUIDataTableCellAccessor) => {
-      const idx = cells.indexOf(accessor);
+      const idx = cells.findIndex((a) => a === accessor);
       if (idx !== -1) {
         cells.splice(idx, 1);
-        cells = cells;
       }
       cellAccessorMap.delete(accessor.element);
     },