@xyflow/svelte - npm Package Compare versions

Comparing version 1.0.0-next.2 to 1.0.0-next.3

dist/lib/components/ConnectionLine/ConnectionLine.svelte.d.ts

 import type { Component } from 'svelte';
 import { ConnectionLineType } from '@xyflow/system';
 import type { SvelteFlowStore } from '../../store/types';
-declare const ConnectionLine: Component<{
+type $$ComponentProps = {
     store: SvelteFlowStore;
@@ -10,4 +10,5 @@ type: ConnectionLineType;
     LineComponent?: Component;
-}, {}, "">;
+};
+declare const ConnectionLine: Component<$$ComponentProps, {}, "">;
 type ConnectionLine = ReturnType<typeof ConnectionLine>;
 export default ConnectionLine;

dist/lib/components/EdgeLabel/EdgeLabel.svelte.d.ts

 import { type Snippet } from 'svelte';
-declare const EdgeLabel: import("svelte").Component<{
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
     x?: number;
     y?: number;
     style?: string;
-    class?: string;
+    class?: ClassValue;
     children?: Snippet;
-}, {}, "">;
+};
+declare const EdgeLabel: import("svelte").Component<$$ComponentProps, {}, "">;
 type EdgeLabel = ReturnType<typeof EdgeLabel>;
 export default EdgeLabel;

dist/lib/components/EdgeLabelRenderer/EdgeLabelRenderer.svelte.d.ts

 import type { Snippet } from 'svelte';
-declare const EdgeLabelRenderer: import("svelte").Component<{
+type $$ComponentProps = {
     children?: Snippet;
-}, {}, "">;
+};
+declare const EdgeLabelRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type EdgeLabelRenderer = ReturnType<typeof EdgeLabelRenderer>;
 export default EdgeLabelRenderer;

dist/lib/components/EdgeWrapper/EdgeWrapper.svelte.d.ts

 import type { EdgeLayouted, EdgeEvents } from '../../types';
 import type { SvelteFlowStore } from '../../store/types';
-declare const EdgeWrapper: import("svelte").Component<{
+type $$ComponentProps = {
     store: SvelteFlowStore;
     edge: EdgeLayouted;
-} & EdgeEvents, {}, "">;
+} & EdgeEvents;
+declare const EdgeWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type EdgeWrapper = ReturnType<typeof EdgeWrapper>;
 export default EdgeWrapper;

dist/lib/components/NodeWrapper/NodeWrapper.svelte.d.ts

 import type { NodeWrapperProps } from './types';
 import type { NodeEvents } from '../../types';
-declare const NodeWrapper: import("svelte").Component<NodeWrapperProps & NodeEvents, {}, "">;
+type $$ComponentProps = NodeWrapperProps & NodeEvents;
+declare const NodeWrapper: import("svelte").Component<$$ComponentProps, {}, "">;
 type NodeWrapper = ReturnType<typeof NodeWrapper>;
 export default NodeWrapper;

dist/lib/components/Selection/Selection.svelte.d.ts

@@ -1,2 +0,2 @@
-declare const Selection: import("svelte").Component<{
+type $$ComponentProps = {
     x?: number | null;
@@ -7,4 +7,5 @@ y?: number | null;
     isVisible?: boolean;
-}, {}, "">;
+};
+declare const Selection: import("svelte").Component<$$ComponentProps, {}, "">;
 type Selection = ReturnType<typeof Selection>;
 export default Selection;

dist/lib/components/ViewportPortal/ViewportPortal.svelte.d.ts

 import type { Snippet } from 'svelte';
-declare const ViewportPortal: import("svelte").Component<{
+type $$ComponentProps = {
     children?: Snippet;
-}, {}, "">;
+};
+declare const ViewportPortal: import("svelte").Component<$$ComponentProps, {}, "">;
 type ViewportPortal = ReturnType<typeof ViewportPortal>;
 export default ViewportPortal;

dist/lib/container/EdgeRenderer/EdgeRenderer.svelte.d.ts

 import type { EdgeEvents } from '../../types';
 import type { SvelteFlowStore } from '../../store/types';
-declare const EdgeRenderer: import("svelte").Component<{
+type $$ComponentProps = {
     store: SvelteFlowStore;
-} & EdgeEvents, {}, "">;
+} & EdgeEvents;
+declare const EdgeRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type EdgeRenderer = ReturnType<typeof EdgeRenderer>;
 export default EdgeRenderer;

dist/lib/container/NodeRenderer/NodeRenderer.svelte.d.ts

 import type { NodeEvents } from '../../types';
 import type { SvelteFlowStore } from '../../store/types';
-declare const NodeRenderer: import("svelte").Component<{
+type $$ComponentProps = {
     store: SvelteFlowStore;
     nodeClickDistance?: number;
-} & NodeEvents, {}, "">;
+} & NodeEvents;
+declare const NodeRenderer: import("svelte").Component<$$ComponentProps, {}, "">;
 type NodeRenderer = ReturnType<typeof NodeRenderer>;
 export default NodeRenderer;

dist/lib/container/Panel/types.d.ts

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

dist/lib/container/SvelteFlow/SvelteFlow.svelte.d.ts

@@ -0,4 +1,6 @@
+import type { DOMAttributes } from 'svelte/elements';
 import type { SvelteFlowProps } from './types';
-declare const SvelteFlow: import("svelte").Component<SvelteFlowProps, {}, "nodes" | "edges" | "viewport">;
+type $$ComponentProps = SvelteFlowProps & DOMAttributes<HTMLDivElement>;
+declare const SvelteFlow: import("svelte").Component<$$ComponentProps, {}, "nodes" | "edges" | "viewport">;
 type SvelteFlow = ReturnType<typeof SvelteFlow>;
 export default SvelteFlow;

dist/lib/container/SvelteFlow/types.d.ts

@@ -1,2 +0,2 @@
-import type { DOMAttributes } from 'svelte/elements';
+import type { ClassValue } from 'svelte/elements';
 import type { ConnectionLineType, NodeOrigin, Viewport, SelectionMode, SnapGrid, OnMoveStart, OnMove, OnMoveEnd, CoordinateExtent, PanOnScrollMode, OnError, ConnectionMode, PanelPosition, ProOptions, ColorMode, OnConnect, OnConnectStart, OnConnectEnd, ColorModeClass } from '@xyflow/system';
@@ -6,3 +6,3 @@ import type { Edge, Node, NodeTypes, KeyDefinition, EdgeTypes, DefaultEdgeOptions, FitViewOptions, OnDelete, OnEdgeCreate, OnBeforeDelete, IsValidConnection } from '../../types';
 import type { EdgeEvents, NodeEvents, NodeSelectionEvents, PaneEvents } from '../../types/events';
-export type SvelteFlowProps = NodeEvents & NodeSelectionEvents & EdgeEvents & PaneEvents & DOMAttributes<HTMLDivElement> & {
+export type SvelteFlowProps = NodeEvents & NodeSelectionEvents & EdgeEvents & PaneEvents & {
     /** The id of the flow
@@ -279,3 +279,3 @@ *
     /** Class to be applied to the flow container */
-    class?: string;
+    class?: ClassValue;
     /** Styles to be applied to the flow container */
@@ -282,0 +282,0 @@ style?: string;

dist/lib/container/Viewport/Viewport.svelte.d.ts

 import type { SvelteFlowStore } from '../../store/types';
 import type { Snippet } from 'svelte';
-declare const Viewport: import("svelte").Component<{
+type $$ComponentProps = {
     store: SvelteFlowStore;
     children: Snippet;
-}, {}, "">;
+};
+declare const Viewport: import("svelte").Component<$$ComponentProps, {}, "">;
 type Viewport = ReturnType<typeof Viewport>;
 export default Viewport;

dist/lib/plugins/Background/DotPattern.svelte.d.ts

@@ -1,6 +0,8 @@
-declare const DotPattern: import("svelte").Component<{
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
     radius: number;
-    class?: string;
-}, {}, "">;
+    class?: ClassValue;
+};
+declare const DotPattern: import("svelte").Component<$$ComponentProps, {}, "">;
 type DotPattern = ReturnType<typeof DotPattern>;
 export default DotPattern;

dist/lib/plugins/Background/LinePattern.svelte.d.ts

@@ -0,9 +1,11 @@
+import type { ClassValue } from 'svelte/elements';
 import type { BackgroundVariant } from './types';
-declare const LinePattern: import("svelte").Component<{
+type $$ComponentProps = {
     lineWidth: number;
     dimensions: [number, number];
     variant: BackgroundVariant;
-    class?: string;
-}, {}, "">;
+    class?: ClassValue;
+};
+declare const LinePattern: import("svelte").Component<$$ComponentProps, {}, "">;
 type LinePattern = ReturnType<typeof LinePattern>;
 export default LinePattern;

dist/lib/plugins/Background/types.d.ts

@@ -0,1 +1,2 @@
+import type { ClassValue } from 'svelte/elements';
 export declare enum BackgroundVariant {
@@ -15,3 +16,3 @@ Lines = "lines",
     /** Class applied to the container */
-    class?: string;
+    class?: ClassValue;
     /** Gap between repetitions of the pattern */
@@ -18,0 +19,0 @@ gap?: number | [number, number];

dist/lib/plugins/Controls/types.d.ts

 import type { Snippet } from 'svelte';
-import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ClassValue, HTMLButtonAttributes } from 'svelte/elements';
 import type { PanelPosition } from '@xyflow/system';
@@ -24,3 +24,3 @@ import type { FitViewOptions } from '../../types';
     style?: string;
-    class?: string;
+    class?: ClassValue;
     orientation?: 'horizontal' | 'vertical';
@@ -33,3 +33,3 @@ children?: Snippet;
 export type ControlButtonProps = HTMLButtonAttributes & {
-    class?: string;
+    class?: ClassValue;
     bgColor?: string;
@@ -36,0 +36,0 @@ bgColorHover?: string;

dist/lib/plugins/Minimap/MinimapNode.svelte.d.ts

@@ -1,2 +0,3 @@
-declare const MinimapNode: import("svelte").Component<{
+import type { ClassValue } from 'svelte/elements';
+type $$ComponentProps = {
     x: number;
@@ -12,5 +13,6 @@ y: number;
     selected?: boolean;
-    class?: string;
-}, {}, "">;
+    class?: ClassValue;
+};
+declare const MinimapNode: import("svelte").Component<$$ComponentProps, {}, "">;
 type MinimapNode = ReturnType<typeof MinimapNode>;
 export default MinimapNode;

dist/lib/plugins/Minimap/types.d.ts

 import type { PanelPosition } from '@xyflow/system';
+import type { ClassValue } from 'svelte/elements';
 import type { Node } from '../../types';
@@ -29,3 +30,3 @@ export type GetMiniMapNodeAttribute = (node: Node) => string;
     /** Class applied to container */
-    class?: string;
+    class?: ClassValue;
     /** Style applied to container */
@@ -32,0 +33,0 @@ style?: string;

dist/lib/plugins/NodeResizer/types.d.ts

@@ -0,3 +1,4 @@
+import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import type { ControlPosition, ResizeControlVariant, ShouldResize, OnResizeStart, OnResize, OnResizeEnd } from '@xyflow/system';
-import type { Snippet } from 'svelte';
 export type NodeResizerProps = {
@@ -49,5 +50,5 @@ /** Id of the node it is resizing
     variant?: ResizeControlVariant;
-    class?: string;
+    class?: ClassValue;
     style?: string;
     children?: Snippet;
 };

dist/lib/store/index.js

 import { fitView as fitViewSystem, panBy as panBySystem, updateNodeInternals as updateNodeInternalsSystem, addEdge as addEdgeUtil, initialConnection, errorMessages, getFitViewNodes, updateAbsolutePositions, getDimensions } from '@xyflow/system';
 import { initialEdgeTypes, initialNodeTypes, getInitialStore } from './initial-store.svelte';
 import {} from './types';
-// import { getVisibleEdges } from './visible-edges';
-// import { getVisibleNodes } from './visible-nodes';
 export const key = Symbol();
@@ -7,0 +5,0 @@ export { useStore } from '../hooks/useStore';

dist/lib/store/initial-store.svelte.js

@@ -86,5 +86,5 @@ import { infiniteExtent, SelectionMode, ConnectionMode, devWarn, adoptUserNodes, getViewportForBounds, updateConnectionLookup, initialConnection, getInternalNodesBounds, createMarkerIds, pointToRendererPoint } from '@xyflow/system';
         });
-        domNode = $derived(signals.domNode ?? null);
-        width = $derived(signals.width ?? signals.props.width ?? 0);
-        height = $derived(signals.height ?? signals.props.height ?? 0);
+        domNode = $state(null);
+        width = $state(signals.width ?? 0);
+        height = $state(signals.height ?? 0);
         flowId = $derived(signals.props.id ?? '1');
@@ -91,0 +91,0 @@ minZoom = $derived(signals.props.minZoom ?? 0.5);

dist/lib/store/types.d.ts

@@ -31,5 +31,5 @@ import type { InternalNodeUpdate, XYPosition, ViewportHelperFunctionOptions, Connection, UpdateNodePositions, CoordinateExtent, UpdateConnection, Viewport } from '@xyflow/system';
 };
+export type SvelteFlowRestProps = Omit<SvelteFlowProps, 'width' | 'height' | 'class' | 'proOptions' | 'selectionKey' | 'deleteKey' | 'panActivationKey' | 'multiSelectionKey' | 'zoomActivationKey' | 'paneClickDistance' | 'nodeClickDistance' | 'onMoveStart' | 'onMoveEnd' | 'onMove' | 'onnodeclick' | 'onnodecontextmenu' | 'onnodedrag' | 'onnodedragstart' | 'onnodedragstop' | 'onnodepointerenter' | 'onnodepointermove' | 'onnodepointerleave' | 'onselectionclick' | 'onselectioncontextmenu' | 'onedgeclick' | 'onedgecontextmenu' | 'onedgepointerenter' | 'onedgepointerleave' | 'onpaneclick' | 'onpanecontextmenu' | 'panOnScrollMode' | 'preventScrolling' | 'zoomOnScroll' | 'zoomOnDoubleClick' | 'zoomOnPinch' | 'panOnScroll' | 'panOnDrag' | 'selectionOnDrag' | 'connectionLineComponent' | 'connectionLineStyle' | 'connectionLineContainerStyle' | 'connectionLineType' | 'attributionPosition' | 'children' | 'nodes' | 'edges' | 'viewport'>;
 export type StoreSignals = {
-    props: Partial<SvelteFlowProps>;
-    domNode?: HTMLDivElement;
+    props: SvelteFlowRestProps;
     width?: number;
@@ -36,0 +36,0 @@ height?: number;

dist/lib/types/edges.d.ts

 import type { Component } from 'svelte';
 import type { EdgeBase, BezierPathOptions, DefaultEdgeOptionsBase, EdgePosition, SmoothStepPathOptions, StepPathOptions } from '@xyflow/system';
 import type { Node } from './';
+import type { ClassValue } from 'svelte/elements';
 /**
@@ -11,3 +12,3 @@ * The Edge type is mainly used for the `edges` that get passed to the SvelteFlow component.
     style?: string;
-    class?: string;
+    class?: ClassValue;
 };
@@ -30,3 +31,3 @@ export type BaseEdgeProps = Pick<EdgeProps, 'interactionWidth' | 'label' | 'labelStyle' | 'style'> & {
     markerEnd?: string;
-    class?: string;
+    class?: ClassValue;
 };
@@ -33,0 +34,0 @@ type SmoothStepEdge<EdgeData extends Record<string, unknown> = Record<string, unknown>> = Edge<EdgeData, 'smoothstep'> & {

dist/lib/types/general.d.ts

 import type { Snippet } from 'svelte';
+import type { ClassValue } from 'svelte/elements';
 import type { ShortcutModifierDefinition } from '@svelte-put/shortcut';
@@ -19,3 +20,3 @@ import type { FitViewOptionsBase, XYPosition, Handle, Connection, OnBeforeDeleteBase, HandleProps as HandlePropsSystem } from '@xyflow/system';
 export type HandleProps = HandlePropsSystem & {
-    class?: string;
+    class?: ClassValue;
     style?: string;
@@ -22,0 +23,0 @@ onconnect?: (connections: Connection[]) => void;

dist/lib/types/nodes.d.ts

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

package.json

 {
   "name": "@xyflow/svelte",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "description": "Svelte Flow - A highly customizable Svelte library for building node-based editors, workflow systems, diagrams and more.",
@@ -43,3 +43,2 @@ "keywords": [
     "@svelte-put/shortcut": "^4.1.0",
-    "classcat": "^5.0.5",
     "@xyflow/system": "0.0.50"
@@ -49,7 +48,7 @@ },
     "@sveltejs/adapter-auto": "^4.0.0",
-    "@sveltejs/kit": "^2.16.0",
-    "@sveltejs/package": "^2.3.7",
+    "@sveltejs/kit": "^2.16.1",
+    "@sveltejs/package": "^2.3.9",
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
-    "@typescript-eslint/eslint-plugin": "^8.21.0",
-    "@typescript-eslint/parser": "^8.21.0",
+    "@typescript-eslint/eslint-plugin": "^8.22.0",
+    "@typescript-eslint/parser": "^8.22.0",
     "autoprefixer": "^10.4.20",
@@ -69,3 +68,3 @@ "cssnano": "^7.0.6",
     "prettier-plugin-svelte": "^3.3.3",
-    "svelte": "^5.19.0",
+    "svelte": "^5.19.5",
     "svelte-check": "^4.1.4",
@@ -78,3 +77,3 @@ "svelte-eslint-parser": "^0.43.0",
   "peerDependencies": {
-    "svelte": "^5.7.0"
+    "svelte": "^5.16.0"
   },
@@ -81,0 +80,0 @@ "files": [

No alert changes

Improved metrics

Total package byte prevSize

249941

increased by1.65%

Dependency count

3

decreased by-25%

Number of package files

243

increased by0.83%

Lines of code

4391

increased by0.99%

Dependency changes

• - Removedclasscat@^5.0.5

• - Removedclasscat@5.0.5(transitive)