fix: sigh, svelte 5 doesn't support what classAdderBuilder needs, so it had to be refactored

Author: hperrin

MIGRATING.md

@@ -23,6 +23,8 @@ Note to Devs: remove `x = x;` statements after `push()` and the like. They aren'
 - Chips' Set now expects a `chip` snippet instead of using `let:chip`.
 - Chips' Set key function is now required to return `string`, not `string | number`.
 - SegmentedButton now expects a `segment` snippet instead of using `let:segment`.
+- `classAdderBuilder` is no longer available. Instead, the `ClassAdder` component is exported.
+  - Svelte 5 doesn't seem to provide a way to reuse components the way classAdderBuilder needs. The version in beta.2 and before works only on the first render, but props were not reactive.
 
 ## Changes
 

packages/card/src/ActionButtons.svelte

@@ -0,0 +1,33 @@
+<svelte:options runes />
+
+<ClassAdder
+  _smuiClass="mdc-card__action-buttons"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
+
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
+
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>

packages/card/src/ActionButtons.ts

@@ -0,0 +1,33 @@
+<svelte:options runes />
+
+<ClassAdder
+  _smuiClass="mdc-card__action-icons"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
+
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
+
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>

packages/card/src/ActionIcons.svelte

@@ -0,0 +1,33 @@
+<svelte:options runes />
+
+<ClassAdder
+  _smuiClass="smui-card__content"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
+
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
+
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>

packages/card/src/ActionIcons.ts

@@ -0,0 +1,33 @@
+<svelte:options runes />
+
+<ClassAdder
+  _smuiClass="mdc-card__media-content"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
+
+<script
+  lang="ts"
+  generics="T extends SmuiEveryElement = keyof SmuiElementPropMap, C extends SmuiComponent = SmuiComponent"
+>
+  import type { ComponentProps, Snippet } from 'svelte';
+  import type {
+    SmuiComponent,
+    SmuiElementPropMap,
+    SmuiEveryElement,
+  } from '@smui/common';
+  import { ClassAdder } from '@smui/common/classadder';
+
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>

packages/card/src/Content.svelte

@@ -2,13 +2,13 @@
 
 import Card from './Card.svelte';
 
-import Content from './Content.js';
+import Content from './Content.svelte';
 import PrimaryAction from './PrimaryAction.svelte';
 import Media from './Media.svelte';
-import MediaContent from './MediaContent.js';
+import MediaContent from './MediaContent.svelte';
 import Actions from './Actions.svelte';
-import ActionButtons from './ActionButtons.js';
-import ActionIcons from './ActionIcons.js';
+import ActionButtons from './ActionButtons.svelte';
+import ActionIcons from './ActionIcons.svelte';
 
 export default Card;