fix: update classadder to work with new svelte component functions

Author: hperrin

packages/common/src/classadder/ClassAdder.svelte

@@ -14,20 +14,6 @@
   {...$$restProps}><slot /></svelte:component
 >
 
-<script lang="ts" context="module">
-  import type { ClassAdderInternals } from './ClassAdder.types.js';
-  import { SmuiElement } from '../index.js';
-
-  export const internals: ClassAdderInternals = {
-    component: SmuiElement as typeof SvelteComponent,
-    tag: 'div',
-    class: '',
-    classMap: {},
-    contexts: {},
-    props: {},
-  };
-</script>
-
 <script lang="ts">
   import type { SvelteComponent } from 'svelte';
   import { onDestroy, getContext, setContext } from 'svelte';
@@ -39,6 +25,8 @@
   } from '../smui.types.js';
   import type { ActionArray } from '../internal/useActions.js';
   import { classMap } from '../internal/classMap.js';
+  import { SmuiElement } from '../index.js';
+  import type { ClassAdderInternals } from './ClassAdder.types.js';
 
   type OwnProps = {
     use?: ActionArray;
@@ -55,23 +43,31 @@
   export let use: ActionArray = [];
   let className = '';
   export { className as class };
+  export let _internals: ClassAdderInternals = {
+    component: SmuiElement as typeof SvelteComponent,
+    tag: 'div',
+    class: '',
+    classMap: {},
+    contexts: {},
+    props: {},
+  };
 
   let element: SvelteComponent;
-  const smuiClass = internals.class;
+  const smuiClass = _internals.class;
   const smuiClassMap: { [k: string]: any } = {};
   const smuiClassUnsubscribes: (() => void)[] = [];
-  const contexts = internals.contexts;
-  const props = internals.props;
+  const contexts = _internals.contexts;
+  const props = _internals.props;
 
   export let component: typeof SvelteComponent<
     Record<string, any>,
     Record<string, any>,
     Record<string, any>
-  > = internals.component;
+  > = _internals.component;
   export let tag: keyof SmuiElementPropMap | undefined =
-    component === SmuiElement ? internals.tag : undefined;
+    component === SmuiElement ? _internals.tag : undefined;
 
-  Object.entries(internals.classMap).forEach(([name, context]) => {
+  Object.entries(_internals.classMap).forEach(([name, context]) => {
     const store = getContext(context) as SvelteStore<any>;
 
     if (store && 'subscribe' in store) {

packages/common/src/classadder/classAdderBuilder.ts

@@ -1,25 +1,26 @@
 import type { SvelteComponent } from 'svelte';
 
 import type { SmuiEveryElement } from '../smui.types.js';
+import { SmuiElement } from '../index.js';
 import type { ClassAdderInternals } from './ClassAdder.types.js';
-// @ts-ignore: Internals is exported... argh.
-import ClassAdder, { internals } from './ClassAdder.svelte';
-
-const defaults = { ...internals };
+import ClassAdder from './ClassAdder.svelte';
 
 export function classAdderBuilder<
   T extends SmuiEveryElement = 'div',
   C extends typeof SvelteComponent = typeof SvelteComponent,
->(props: Partial<ClassAdderInternals<T, C>>): C {
-  return new Proxy(ClassAdder, {
-    construct: function (target, args) {
-      Object.assign(internals, defaults, props);
-      // @ts-ignore: Need spread arg.
-      return new target(...args);
-    },
-    get: function (target, prop) {
-      Object.assign(internals, defaults, props);
-      return (target as any)[prop];
-    },
-  }) as unknown as C;
+>(internals: Partial<ClassAdderInternals<T, C>>): C {
+  return function (anchor: any, props: any) {
+    return ClassAdder(anchor, {
+      ...props,
+      _internals: {
+        component: SmuiElement as typeof SvelteComponent,
+        tag: 'div',
+        class: '',
+        classMap: {},
+        contexts: {},
+        props: {},
+        ...internals,
+      },
+    });
+  } as unknown as C;
 }