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;
 

packages/card/src/Content.ts

@@ -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;
 

packages/card/src/MediaContent.svelte

@@ -415,45 +415,84 @@ A fragment component (only contains a `{@render children?.()}`) used to define a
 
 ## classadder/ClassAdder.svelte
 
-A base component that adds a class to an element. The ClassAdder is used to provide simple components. It usually uses the `SmuiElement` component shown above, but you can specify a different component for it to use.
+Use this to make a ClassAdder component.
 
-### Props / Defaults
-
-- `component`: `(depends on context)` - The component to extend. Usually it is set to `SmuiElement`.
-- `tag`: `(depends on context)` - The HTML tag name `SmuiElement` will use.
-- `use`: `[]` - An array of Svelte actions and/or arrays of an action and its options.
-- `class`: `''` - A CSS class string.
+```svelte
+<ClassAdder
+  _smuiClass="my-added-class"
+  tag="div"
+  bind:this={element as ReturnType<C>}
+  {...restProps}>{@render children?.()}</ClassAdder
+>
 
-## classAdderBuilder
+<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';
 
-Use this to build a ClassAdder component. ClassAdder components are useful for reducing the size of your bundle. If you have tons of simple components that just need to add classes/props or set a context, using ClassAdder components means there's only one actual Svelte component in your bundle for all of these many tiny components.
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
 
-```js
-import { classAdderBuilder } from '@smui/common/classadder';
+  let element: ReturnType<C>;
 
-export default classAdderBuilder({
-  class: 'my-added-class',
-  tag: 'div',
-});
+  export function getElement() {
+    return element.getElement();
+  }
+</script>
 ```
 
 You can also supply a component that implements the `SmuiComponent` interface.
 
-```js
-import { classAdderBuilder } from '@smui/common/classadder';
-import Button from '@smui/button';
+```svelte
+<ClassAdder
+  _smuiClass="my-added-class"
+  component={Button as unknown as SmuiComponent}
+  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';
+  import Button from '@smui/button';
 
-export default classAdderBuilder({
-  class: 'my-added-class',
-  component: Button,
-});
+  type OwnProps = {
+    children?: Snippet;
+  };
+  let { children, ...restProps }: OwnProps & ComponentProps<ClassAdder<T, C>> =
+    $props();
+
+  let element: ReturnType<C>;
+
+  export function getElement() {
+    return element.getElement();
+  }
+</script>
 ```
 
 ### Props / Defaults
 
 - `component`: `SmuiElement` - An SMUI compatible component.
 - `tag`: `'div'` - An HTML tag name. (Only means anything for the `SmuiElement` component.)
-- `class`: `''` - The class to add.
-- `classMap`: `{}` - A map of classes to contexts. The context should resolve to a Svelte store, and the class will be added if the Svelte store's value is true.
-- `contexts`: `{}` - A map of contexts to values to set for them.
-- `props`: `{}` - A map of props to add to the element.
+- `_smuiClass`: `''` - The class to add.
+- `_smuiClassMap`: `{}` - A map of classes to contexts. The context should resolve to a Svelte store, and the class will be added if the Svelte store's value is true.
+- `_smuiContexts`: `{}` - A map of contexts to values to set for them.
+- `_smuiProps`: `{}` - A map of props to add to the element.