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:*",
+    "@xyflow/system": "workspace:*"
-    "classcat": "^5.0.5"
   },
   "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() {
+    width,
-      return domNode;
+    height,
-    },
-    get width() {
-      return clientWidth;
-    },
-    get height() {
-      return clientHeight;
-    },
     get nodes() {
       return nodes;
     },
@@ -124,13 +112,13 @@
 </script>
 
 <div
-  bind:this={domNode}
+  bind:this={store.domNode}
-  bind:clientWidth
+  bind:clientWidth={store.width}
-  bind:clientHeight
+  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);
+    domNode = $state<HTMLDivElement | null>(null);
-    width: number = $derived(signals.width ?? signals.props.width ?? 0);
+    width = $state<number>(signals.width ?? 0);
-    height: number = $derived(signals.height ?? signals.props.height ?? 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;
 };
 

pnpm-lock.yaml

@@ -293,9 +293,6 @@ importers:
       '@xyflow/system':
         specifier: workspace:*
         version: link:../system
-      classcat:
-        specifier: ^5.0.5
-        version: 5.0.5
     devDependencies:
       '@sveltejs/adapter-auto':
         specifier: ^4.0.0
@@ -2255,11 +2252,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.11.3:
-    resolution: {integrity: sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   acorn@8.14.0:
     resolution: {integrity: sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==}
     engines: {node: '>=0.4.0'}
@@ -2618,9 +2610,6 @@ packages:
   classcat@5.0.4:
     resolution: {integrity: sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==}
 
-  classcat@5.0.5:
-    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
-
   clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -7562,7 +7551,7 @@ snapshots:
   '@eslint/eslintrc@2.1.4':
     dependencies:
       ajv: 6.12.6
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       espree: 9.6.1
       globals: 13.23.0
       ignore: 5.3.0
@@ -7598,7 +7587,7 @@ snapshots:
   '@humanwhocodes/config-array@0.11.14':
     dependencies:
       '@humanwhocodes/object-schema': 2.0.2
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
@@ -8466,8 +8455,6 @@ snapshots:
 
   acorn@8.11.2: {}
 
-  acorn@8.11.3: {}
-
   acorn@8.14.0: {}
 
   aggregate-error@3.1.0:
@@ -8938,8 +8925,6 @@ snapshots:
 
   classcat@5.0.4: {}
 
-  classcat@5.0.5: {}
-
   clean-stack@2.2.0: {}
 
   cli-boxes@3.0.0: {}
@@ -9337,6 +9322,10 @@ snapshots:
     optionalDependencies:
       supports-color: 8.1.1
 
+  debug@4.3.4:
+    dependencies:
+      ms: 2.1.2
+
   debug@4.3.4(supports-color@8.1.1):
     dependencies:
       ms: 2.1.2
@@ -9995,7 +9984,7 @@ snapshots:
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.3
-      debug: 4.3.4(supports-color@8.1.1)
+      debug: 4.3.4
       doctrine: 3.0.0
       escape-string-regexp: 4.0.0
       eslint-scope: 7.2.2
@@ -13103,7 +13092,7 @@ snapshots:
   terser@5.31.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
-      acorn: 8.11.3
+      acorn: 8.14.0
       commander: 2.20.3
       source-map-support: 0.5.21
 
@@ -13474,7 +13463,7 @@ snapshots:
   vite@6.0.10(@types/node@20.14.6)(terser@5.31.0):
     dependencies:
       esbuild: 0.24.2
-      postcss: 8.4.49
+      postcss: 8.5.1
       rollup: 4.25.0
     optionalDependencies:
       '@types/node': 20.14.6