Removed classcat and reworked class types from string to ClassValue

packages/svelte/package.json

@@ -51,8 +51,7 @@
   },
   "dependencies": {
     "@svelte-put/shortcut": "^4.1.0",
-    "@xyflow/system": "workspace:*",
-    "classcat": "^5.0.5"
+    "@xyflow/system": "workspace:*"
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "^4.0.0",
@@ -83,7 +82,7 @@
     "typescript": "^5.7.3"
   },
   "peerDependencies": {
-    "svelte": "^5.7.0"
+    "svelte": "^5.16.0"
   },
   "files": [
     "dist"

packages/svelte/src/lib/components/ConnectionLine/ConnectionLine.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { Component } from 'svelte';
   import {
     ConnectionLineType,
@@ -67,7 +66,7 @@
     class="svelte-flow__connectionline"
     style={containerStyle}
   >
-    <g class={cc(['svelte-flow__connection', getConnectionStatus(store.connection.isValid)])}>
+    <g class={['svelte-flow__connection', getConnectionStatus(store.connection.isValid)]}>
       {#if LineComponent}
         <LineComponent></LineComponent>
       {:else}

packages/svelte/src/lib/components/EdgeLabel/EdgeLabel.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { getContext, type Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
 
   import { EdgeLabelRenderer } from '$lib/components/EdgeLabelRenderer';
   import { useStore } from '$lib/store';
@@ -14,7 +15,7 @@
     x?: number;
     y?: number;
     style?: string;
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
   } = $props();
 

packages/svelte/src/lib/components/EdgeWrapper/EdgeWrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { setContext } from 'svelte';
-  import cc from 'classcat';
 
   import { getMarkerId } from '@xyflow/system';
 
@@ -86,7 +85,7 @@
 {#if !hidden}
   <svg style:z-index={zIndex}>
     <g
-      class={cc(['svelte-flow__edge', className])}
+      class={['svelte-flow__edge', className]}
       class:animated
       class:selected
       class:selectable

packages/svelte/src/lib/components/Handle/Handle.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import cc from 'classcat';
   import {
     Position,
     XYHandle,
@@ -140,14 +139,14 @@ The Handle component is the part of a node that can be used to connect nodes.
   data-nodeid={nodeId}
   data-handlepos={position}
   data-id="{store.flowId}-{nodeId}-{handleId}-{type}"
-  class={cc([
+  class={[
     'svelte-flow__handle',
     `svelte-flow__handle-${position}`,
     'nodrag',
     'nopan',
     position,
     className
-  ])}
+  ]}
   class:valid
   class:connectingto={connectingTo}
   class:connectingfrom={connectingFrom}

packages/svelte/src/lib/components/NodeWrapper/NodeWrapper.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { setContext, onDestroy } from 'svelte';
-  import cc from 'classcat';
   import { errorMessages, nodeHasDimensions, Position } from '@xyflow/system';
 
   import drag from '$lib/actions/drag';
@@ -187,7 +186,7 @@
     }}
     bind:this={nodeRef}
     data-id={id}
-    class={cc(['svelte-flow__node', `svelte-flow__node-${type}`, className])}
+    class={['svelte-flow__node', `svelte-flow__node-${type}`, className]}
     class:dragging
     class:selected
     class:draggable

packages/svelte/src/lib/components/edges/BaseEdge.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { BaseEdgeProps } from '../../types';
   import EdgeLabel from '../EdgeLabel/EdgeLabel.svelte';
 
@@ -21,7 +20,7 @@
 <path
   {id}
   d={path}
-  class={cc(['svelte-flow__edge-path', className])}
+  class={['svelte-flow__edge-path', className]}
   marker-start={markerStart}
   marker-end={markerEnd}
   fill="none"

packages/svelte/src/lib/container/Panel/Panel.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
   import type { PanelProps } from './types';
   import { useStore } from '$lib/store';
 
@@ -17,7 +16,7 @@
 </script>
 
 <div
-  class={cc(['svelte-flow__panel', className, ...positionClasses])}
+  class={['svelte-flow__panel', className, ...positionClasses]}
   {style}
   style:pointer-events={store.selectionRectMode ? 'none' : ''}
   {...restProps}

packages/svelte/src/lib/container/Panel/types.ts

@@ -1,5 +1,5 @@
 import type { PanelPosition } from '@xyflow/system';
-import type { HTMLAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLAttributes } from 'svelte/elements';
 
 export type PanelProps = HTMLAttributes<HTMLDivElement> & {
   'data-testid'?: string;
@@ -9,5 +9,5 @@ export type PanelProps = HTMLAttributes<HTMLDivElement> & {
    */
   position?: PanelPosition;
   style?: string;
-  class?: string;
+  class?: ClassValue;
 };

packages/svelte/src/lib/container/SvelteFlow/SvelteFlow.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext, setContext, onDestroy } from 'svelte';
-  import cc from 'classcat';
   import { ConnectionLineType, PanOnScrollMode } from '@xyflow/system';
 
   import { key, createStore } from '$lib/store';
@@ -69,21 +68,10 @@
     ...props
   }: SvelteFlowProps = $props();
 
-  let domNode = $state<HTMLDivElement>();
-  let clientWidth = $state<number | undefined>(width);
-  let clientHeight = $state<number | undefined>(height);
-
   const store = createStore({
     props,
-    get domNode() {
-      return domNode;
-    },
-    get width() {
-      return clientWidth;
-    },
-    get height() {
-      return clientHeight;
-    },
+    width,
+    height,
     get nodes() {
       return nodes;
     },
@@ -124,13 +112,13 @@
 </script>
 
 <div
-  bind:this={domNode}
-  bind:clientWidth
-  bind:clientHeight
+  bind:this={store.domNode}
+  bind:clientWidth={store.width}
+  bind:clientHeight={store.height}
   style:width
   style:height
   {style}
-  class={cc(['svelte-flow', className, store.colorMode])}
+  class={['svelte-flow', className, store.colorMode]}
   data-testid="svelte-flow__wrapper"
   role="application"
   {...props}

packages/svelte/src/lib/container/SvelteFlow/types.ts

@@ -1,4 +1,4 @@
-import type { DOMAttributes } from 'svelte/elements';
+import type { ClassValue, DOMAttributes } from 'svelte/elements';
 import type {
   ConnectionLineType,
   NodeOrigin,
@@ -314,7 +314,7 @@ export type SvelteFlowProps = NodeEvents &
     /** Fallback color mode for SSR if colorMode is set to 'system' */
     colorModeSSR?: ColorModeClass;
     /** Class to be applied to the flow container */
-    class?: string;
+    class?: ClassValue;
     /** Styles to be applied to the flow container */
     style?: string;
     /** Choose from the built-in edge types to be used for connections

packages/svelte/src/lib/plugins/Background/Background.svelte

@@ -7,8 +7,6 @@
 </script>
 
 <script lang="ts">
-  import cc from 'classcat';
-
   import { useStore } from '$lib/store';
   import { BackgroundVariant, type BackgroundProps } from './types';
 
@@ -49,7 +47,7 @@
 </script>
 
 <svg
-  class={cc(['svelte-flow__background', className])}
+  class={['svelte-flow__background', className]}
   data-testid="svelte-flow__background"
   style:--xy-background-color-props={bgColor}
   style:--xy-background-pattern-color-props={patternColor}

packages/svelte/src/lib/plugins/Background/DotPattern.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
-  import cc from 'classcat';
+  import type { ClassValue } from 'svelte/elements';
 
-  let { radius, class: className }: { radius: number; class?: string } = $props();
+  let { radius, class: className }: { radius: number; class?: ClassValue } = $props();
 </script>
 
 <circle
   cx={radius}
   cy={radius}
   r={radius}
-  class={cc(['svelte-flow__background-pattern', 'dots', className])}
+  class={['svelte-flow__background-pattern', 'dots', className]}
 />

packages/svelte/src/lib/plugins/Background/LinePattern.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cc from 'classcat';
+  import type { ClassValue } from 'svelte/elements';
   import type { BackgroundVariant } from './types';
 
   let {
@@ -11,12 +11,12 @@
     lineWidth: number;
     dimensions: [number, number];
     variant: BackgroundVariant;
-    class?: string;
+    class?: ClassValue;
   } = $props();
 </script>
 
 <path
   stroke-width={lineWidth}
   d={`M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`}
-  class={cc(['svelte-flow__background-pattern', variant, className])}
+  class={['svelte-flow__background-pattern', variant, className]}
 />

packages/svelte/src/lib/plugins/Background/types.ts

@@ -1,3 +1,5 @@
+import type { ClassValue } from 'svelte/elements';
+
 export enum BackgroundVariant {
   Lines = 'lines',
   Dots = 'dots',
@@ -13,7 +15,7 @@ export type BackgroundProps = {
   /** Class applied to the pattern */
   patternClass?: string;
   /** Class applied to the container */
-  class?: string;
+  class?: ClassValue;
   /** Gap between repetitions of the pattern */
   gap?: number | [number, number];
   /** Size of a single pattern element */

packages/svelte/src/lib/plugins/Controls/ControlButton.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import cc from 'classcat';
-
   import type { ControlButtonProps } from './types';
 
   let {
@@ -19,7 +17,7 @@
 <button
   type="button"
   {onclick}
-  class={cc(['svelte-flow__controls-button', className])}
+  class={['svelte-flow__controls-button', className]}
   style:--xy-controls-button-background-color-props={bgColor}
   style:--xy-controls-button-background-color-hover-props={bgColorHover}
   style:--xy-controls-button-color-props={color}

packages/svelte/src/lib/plugins/Controls/Controls.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
-  import cc from 'classcat';
-
-  import Panel from '$lib/container/Panel/Panel.svelte';
   import { useStore } from '$lib/store';
+  import Panel from '$lib/container/Panel/Panel.svelte';
   import ControlButton from './ControlButton.svelte';
   import PlusIcon from './Icons/Plus.svelte';
   import MinusIcon from './Icons/Minus.svelte';
@@ -71,7 +69,7 @@
 </script>
 
 <Panel
-  class={cc(['svelte-flow__controls', orientationClass, className])}
+  class={['svelte-flow__controls', orientationClass, className]}
   {position}
   data-testid="svelte-flow__controls"
   aria-label={ariaLabel ?? 'Svelte Flow controls'}

packages/svelte/src/lib/plugins/Controls/types.ts

@@ -1,5 +1,5 @@
 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
 
 import type { FitViewOptions } from '$lib/types';
@@ -23,7 +23,7 @@ export type ControlsProps = {
   buttonBorderColor?: string;
   'aria-label'?: string;
   style?: string;
-  class?: string;
+  class?: ClassValue;
   orientation?: 'horizontal' | 'vertical';
   children?: Snippet;
   before?: Snippet;
@@ -32,7 +32,7 @@ export type ControlsProps = {
 };
 
 export type ControlButtonProps = HTMLButtonAttributes & {
-  class?: string;
+  class?: ClassValue;
   bgColor?: string;
   bgColorHover?: string;
   color?: string;

packages/svelte/src/lib/plugins/Minimap/Minimap.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-  import cc from 'classcat';
   import {
     getBoundsOfRects,
     getInternalNodesBounds,
@@ -84,7 +83,7 @@
 <Panel
   {position}
   style={style + (bgColor ? `;--xy-minimap-background-color-props:${bgColor}` : '')}
-  class={cc(['svelte-flow__minimap', className])}
+  class={['svelte-flow__minimap', className]}
   data-testid="svelte-flow__minimap"
 >
   {#if store.panZoom}

packages/svelte/src/lib/plugins/Minimap/MinimapNode.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import cc from 'classcat';
+  import type { ClassValue } from 'svelte/elements';
 
   let {
     x,
@@ -24,12 +24,12 @@
     strokeColor?: string;
     strokeWidth?: number;
     selected?: boolean;
-    class?: string;
+    class?: ClassValue;
   } = $props();
 </script>
 
 <rect
-  class={cc(['svelte-flow__minimap-node', className])}
+  class={['svelte-flow__minimap-node', className]}
   class:selected
   {x}
   {y}

packages/svelte/src/lib/plugins/Minimap/types.ts

@@ -1,5 +1,5 @@
 import type { PanelPosition } from '@xyflow/system';
-
+import type { ClassValue } from 'svelte/elements';
 import type { Node } from '$lib/types';
 
 export type GetMiniMapNodeAttribute = (node: Node) => string;
@@ -29,7 +29,7 @@ export type MiniMapProps = {
    */
   position?: PanelPosition;
   /** Class applied to container */
-  class?: string;
+  class?: ClassValue;
   /** Style applied to container */
   style?: string;
   /** The aria-label applied to container */

packages/svelte/src/lib/plugins/NodeResizer/ResizeControl.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { getContext, onMount } from 'svelte';
-  import cc from 'classcat';
   import { useStore } from '$lib/store';
   import {
     XYResizer,
@@ -115,7 +114,7 @@
 </script>
 
 <div
-  class={cc(['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className])}
+  class={['svelte-flow__resize-control', 'nodrag', ...positionClassNames, variant, className]}
   bind:this={resizeControlRef}
   style={controlStyle}
 >

packages/svelte/src/lib/plugins/NodeResizer/types.ts

@@ -1,3 +1,5 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import type {
   ControlPosition,
   ResizeControlVariant,
@@ -6,7 +8,6 @@ import type {
   OnResize,
   OnResizeEnd
 } from '@xyflow/system';
-import type { Snippet } from 'svelte';
 
 export type NodeResizerProps = {
   /** Id of the node it is resizing
@@ -68,7 +69,7 @@ export type ResizeControlProps = Pick<
    * @example ResizeControlVariant.Handle, ResizeControlVariant.Line
    */
   variant?: ResizeControlVariant;
-  class?: string;
+  class?: ClassValue;
   style?: string;
   children?: Snippet;
 };

packages/svelte/src/lib/store/initial-store.svelte.ts

@@ -155,9 +155,9 @@ export const getInitialStore = (signals: StoreSignals) => {
       };
     });
 
-    domNode: HTMLDivElement | null = $derived(signals.domNode ?? null);
-    width: number = $derived(signals.width ?? signals.props.width ?? 0);
-    height: number = $derived(signals.height ?? signals.props.height ?? 0);
+    domNode = $state<HTMLDivElement | null>(null);
+    width = $state<number>(signals.width ?? 0);
+    height = $state<number>(signals.height ?? 0);
 
     flowId: string = $derived(signals.props.id ?? '1');
     minZoom: number = $derived(signals.props.minZoom ?? 0.5);

packages/svelte/src/lib/store/types.ts

@@ -39,7 +39,6 @@ export type SvelteFlowStoreActions = {
 
 export type StoreSignals = {
   props: Partial<SvelteFlowProps>;
-  domNode?: HTMLDivElement;
   width?: number;
   height?: number;
   nodes: Node[];

packages/svelte/src/lib/types/edges.ts

@@ -9,6 +9,7 @@ import type {
 } from '@xyflow/system';
 
 import type { Node } from '$lib/types';
+import type { ClassValue } from 'svelte/elements';
 
 /**
  * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
@@ -20,7 +21,7 @@ export type Edge<
   label?: string;
   labelStyle?: string;
   style?: string;
-  class?: string;
+  class?: ClassValue;
 };
 
 export type BaseEdgeProps = Pick<
@@ -42,7 +43,7 @@ export type BaseEdgeProps = Pick<
    * @example 'url(#arrow)'
    */
   markerEnd?: string;
-  class?: string;
+  class?: ClassValue;
 };
 
 type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<

packages/svelte/src/lib/types/general.ts

@@ -1,4 +1,5 @@
 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
 import type {
   FitViewOptionsBase,
@@ -24,7 +25,7 @@ export type ConnectionData = {
 };
 
 export type HandleProps = HandlePropsSystem & {
-  class?: string;
+  class?: ClassValue;
   style?: string;
   onconnect?: (connections: Connection[]) => void;
   ondisconnect?: (connections: Connection[]) => void;

packages/svelte/src/lib/types/nodes.ts

@@ -1,4 +1,5 @@
 import type { Component } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import type { InternalNodeBase, NodeBase, NodeProps as NodePropsBase } from '@xyflow/system';
 
 /**
@@ -17,7 +18,7 @@ export type Node<
   NodeData extends Record<string, unknown> = Record<string, unknown>,
   NodeType extends string = string
 > = NodeBase<NodeData, NodeType> & {
-  class?: string;
+  class?: ClassValue;
   style?: string;
 };