Introduce ToolbarItem as a better base type instead of DynamicSvelteComponent

ts/editor-toolbar/ButtonDropdown.svelte

@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import ButtonGroup from "./ButtonGroup.svelte";
 
     export let id = "";
@@ -9,7 +9,7 @@
         return `dropdown-menu bg-transparent border-0 ${className}`;
     }
 
-    export let buttons: DynamicSvelteComponent[];
+    export let buttons: ToolbarItem[];
 </script>
 
 <ButtonGroup {id} className={extendClassName(className)} {buttons} {...$$restProps} />

ts/editor-toolbar/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface ButtonGroupProps {
     id: string;
     className?: string;
-    buttons: DynamicSvelteComponent[];
+    buttons: ToolbarItem[];
 }

ts/editor-toolbar/ButtonGroup.svelte

@@ -1,18 +1,11 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
-
-    interface Hidden {
-        hidden: boolean;
-    }
 
     export let id;
     export let className = "";
-    export let buttons: DynamicSvelteComponent<Hidden>[];
+    export let buttons: ToolbarItem[];
 
-    function filterHidden({
+    function filterHidden({ hidden, ...props }) {
-        hidden,
-        ...props
-    }: DynamicSvelteComponent & Hidden): DynamicSvelteComponent {
         return props;
     }
 </script>

ts/editor-toolbar/DropdownMenu.d.ts

@@ -1,6 +1,6 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface DropdownMenuProps {
     id: string;
-    menuItems: DynamicSvelteComponent[];
+    menuItems: ToolbarItem[];
 }

ts/editor-toolbar/EditorToolbar.svelte

@@ -14,14 +14,14 @@
 
 <script lang="typescript">
     import type { Readable } from "svelte/store";
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
     import { setContext } from "svelte";
     import { disabledKey, nightModeKey } from "./contextKeys";
 
     import ButtonGroup from "./ButtonGroup.svelte";
 
-    export let buttons: Readable<DynamicSvelteComponent[]>;
+    export let buttons: Readable<ToolbarItem[]>;
-    export let menus: Readable<DynamicSvelteComponent[]>;
+    export let menus: Readable<ToolbarItem[]>;
 
     $: _buttons = $buttons;
     $: _menus = $menus;

ts/editor-toolbar/WithDropdownMenu.d.ts

@@ -1,6 +1,6 @@
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 export interface WithDropdownMenuProps {
-    button: DynamicSvelteComponent;
+    button: ToolbarItem;
     menuId: string;
 }

ts/editor-toolbar/WithDropdownMenu.svelte

@@ -1,7 +1,7 @@
 <script lang="typescript">
-    import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+    import type { ToolbarItem } from "./types";
 
-    export let button: DynamicSvelteComponent;
+    export let button: ToolbarItem;
     export let menuId: string;
 
     function extend({

ts/editor-toolbar/index.ts

@@ -1,5 +1,5 @@
-import type { SvelteComponent } from "svelte";
+import type { SvelteComponentDev } from "svelte/internal";
-import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { ToolbarItem } from "./types";
 
 import ButtonGroup from "./ButtonGroup.svelte";
 import type { ButtonGroupProps } from "./ButtonGroup";
@@ -38,12 +38,10 @@ function toggleComponent(component: Hideable) {
 const buttonGroup = dynamicComponent<typeof ButtonGroup, ButtonGroupProps>(ButtonGroup);
 
 class EditorToolbar extends HTMLElement {
-    component?: SvelteComponent;
+    component?: SvelteComponentDev;
 
-    buttons?: Writable<
+    buttons?: Writable<(ToolbarItem<typeof ButtonGroup> & ButtonGroupProps)[]>;
-        (DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps)[]
+    menus?: Writable<ToolbarItem[]>;
-    >;
-    menus?: Writable<DynamicSvelteComponent[]>;
 
     connectedCallback(): void {
         setupI18n({ modules: [ModuleName.EDITING] }).then(() => {
@@ -68,7 +66,7 @@ class EditorToolbar extends HTMLElement {
 
     updateButtonGroup<T>(
         update: (
-            component: DynamicSvelteComponent<typeof ButtonGroup> & ButtonGroupProps & T
+            component: ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
         ) => void,
         group: string | number
     ): void {
@@ -77,9 +75,7 @@ class EditorToolbar extends HTMLElement {
 
             if (foundGroup) {
                 update(
-                    foundGroup as DynamicSvelteComponent<typeof ButtonGroup> &
+                    foundGroup as ToolbarItem<typeof ButtonGroup> & ButtonGroupProps & T
-                        ButtonGroupProps &
-                        T
                 );
             }
 
@@ -113,43 +109,40 @@ class EditorToolbar extends HTMLElement {
         });
     }
 
-    updateButton<T>(
+    updateButton(
-        update: (component: DynamicSvelteComponent & T) => void,
+        update: (component: ToolbarItem) => void,
         group: string | number,
         button: string | number
     ): void {
         this.updateButtonGroup((foundGroup) => {
-            const foundButton = search(
+            const foundButton = search(foundGroup.buttons, button);
-                foundGroup.buttons as (DynamicSvelteComponent & Identifiable)[],
-                button
-            );
 
             if (foundButton) {
-                update(foundButton as DynamicSvelteComponent & T);
+                update(foundButton);
             }
         }, group);
     }
 
     showButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(showComponent, group, button);
+        this.updateButton(showComponent, group, button);
     }
 
     hideButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(hideComponent, group, button);
+        this.updateButton(hideComponent, group, button);
     }
 
     toggleButton(group: string | number, button: string | number): void {
-        this.updateButton<Hideable>(toggleComponent, group, button);
+        this.updateButton(toggleComponent, group, button);
     }
 
     insertButton(
-        newButton: DynamicSvelteComponent & Identifiable,
+        newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = 0
     ) {
         this.updateButtonGroup((component) => {
             component.buttons = insert(
-                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                component.buttons as (ToolbarItem & Identifiable)[],
                 newButton,
                 button
             );
@@ -157,13 +150,13 @@ class EditorToolbar extends HTMLElement {
     }
 
     addButton(
-        newButton: DynamicSvelteComponent & Identifiable,
+        newButton: ToolbarItem & Identifiable,
         group: string | number,
         button: string | number = -1
     ) {
         this.updateButtonGroup((component) => {
             component.buttons = add(
-                component.buttons as (DynamicSvelteComponent & Identifiable)[],
+                component.buttons as (ToolbarItem & Identifiable)[],
                 newButton,
                 button
             );

ts/editor-toolbar/types.d.ts

@@ -0,0 +1,8 @@
+import type { DynamicSvelteComponent } from "sveltelib/dynamicComponent";
+import type { SvelteComponentDev } from "svelte/internal";
+
+interface ToolbarItem<T extends typeof SvelteComponentDev = typeof SvelteComponentDev>
+    extends DynamicSvelteComponent<T> {
+    id?: string;
+    hidden?: boolean;
+}