Merge pull request #5327 from xyflow/fix/svelte-ssr-portals

Fix SSR and portals in Svelte Flow & update Astro Example
2025-06-11 13:29:14 +02:00
parent f084609bec 1fdcc12072
commit 3d2205a781
19 changed files with 2117 additions and 1909 deletions
@@ -1 +1,2 @@
 export { portal } from './portal.svelte';
+export { hideOnSSR } from './utils.svelte';
@@ -15,25 +15,32 @@ function tryToMount(node: Element, domNode: Element | null, target: Portal | und
 }

 export function portal(node: Element, target: Portal | undefined) {
-  // TODO: does this work if called outside of SvelteFlow
-  const store = useStore();
+  const { domNode } = $derived(useStore());

-  let previousTarget: Portal | undefined = target;
-
-  tryToMount(node, store.domNode, target);
+  let destroyEffect: (() => void) | undefined;
+  // svelte-ignore state_referenced_locally
+  if (domNode) {
+    // if the domNode is already mounted, we can directly try to mount the node
+    tryToMount(node, domNode, target);
+  } else {
+    // if the domNode is not mounted yet, we need to wait for it to be ready
+    destroyEffect = $effect.root(() => {
+      $effect(() => {
+        tryToMount(node, domNode, target);
+        destroyEffect?.();
+      });
+    });
+  }

  return {
-    async update(target: Portal) {
-      if (target !== previousTarget) {
-        node.parentNode?.removeChild(node);
-        previousTarget = target;
-      }
-      tryToMount(node, store.domNode, target);
+    async update(target: Portal | undefined) {
+      tryToMount(node, domNode, target);
    },
    destroy() {
      if (node.parentNode) {
        node.parentNode.removeChild(node);
      }
+      destroyEffect?.();
    }
  };
 }
@@ -0,0 +1,17 @@
+export function hideOnSSR(): { value: boolean } {
+  let hide = $state(typeof window === 'undefined');
+  if (hide) {
+    const destroyEffect = $effect.root(() => {
+      $effect(() => {
+        hide = false;
+        destroyEffect?.();
+      });
+    });
+  }
+
+  return {
+    get value() {
+      return hide;
+    }
+  };
+}
@@ -1,6 +1,6 @@
 <script lang="ts">
  import { getContext } from 'svelte';
-  import { portal } from '$lib/actions/portal';
+  import { hideOnSSR, portal } from '$lib/actions/portal';

  import { useStore } from '$lib/store';
  import type { EdgeLabelProps } from './types';
@@ -29,6 +29,7 @@

 <div
  use:portal={'edge-labels'}
+  style:display={hideOnSSR().value ? 'none' : undefined}
  class={['svelte-flow__edge-label', { transparent }, className]}
  style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
  style:transform="translate(-50%, -50%) translate({x}px,{y}px)"
@@ -89,8 +89,7 @@
    }
  }

-  onkeydown = (event: KeyboardEvent) => {
-    // TODO: Possible Svelte Bug? onkeydown is always firing for the last edge
+  function onkeydown(event: KeyboardEvent) {
    if (!store.disableKeyboardA11y && elementSelectionKeys.includes(event.key) && selectable) {
      const { unselectNodesAndEdges, addSelectedEdges } = store;
      const unselect = event.key === 'Escape';
@@ -102,7 +101,7 @@
        addSelectedEdges([id]);
      }
    }
-  };
+  }
 </script>

 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
@@ -46,7 +46,6 @@
  let store = useStore();
  let ariaLabelConfig = $derived(store.ariaLabelConfig);

-
  let prevConnections: Map<string, HandleConnection> | null = null;
  $effect.pre(() => {
    if (onconnect || ondisconnect) {
@@ -66,7 +66,9 @@
  let draggable = $derived(_draggable ?? store.nodesDraggable);
  let selectable = $derived(_selectable ?? store.elementsSelectable);
  let connectable = $derived(_connectable ?? store.nodesConnectable);
-  let initialized = $derived(nodeHasDimensions(node) && !!node.internals.handleBounds);
+  let hasDimensions = $derived(nodeHasDimensions(node));
+  let hasHandleBounds = $derived(!!node.internals.handleBounds);
+  let isInitialized = $derived(hasDimensions && hasHandleBounds);
  let focusable = $derived(_focusable ?? store.nodesFocusable);

  function isInParentLookup(id: string) {
@@ -150,7 +152,7 @@

  $effect(() => {
    /* eslint-disable @typescript-eslint/no-unused-expressions */
-    if (resizeObserver && (!initialized || nodeRef !== prevNodeRef)) {
+    if (resizeObserver && (!isInitialized || nodeRef !== prevNodeRef)) {
      prevNodeRef && resizeObserver.unobserve(prevNodeRef);
      nodeRef && resizeObserver.observe(nodeRef);
      prevNodeRef = nodeRef;
@@ -265,7 +267,7 @@
    class:parent={isParent}
    style:z-index={zIndex}
    style:transform="translate({positionX}px, {positionY}px)"
-    style:visibility={initialized ? 'visible' : 'hidden'}
+    style:visibility={hasDimensions ? 'visible' : 'hidden'}
    style={nodeStyle}
    onclick={onSelectNodeHandler}
    onpointerenter={onnodepointerenter
@@ -1,10 +1,14 @@
 <script lang="ts">
-  import { portal } from '$lib/actions/portal';
+  import { hideOnSSR, portal } from '$lib/actions/portal';
  import type { ViewportPortalProps } from './types';

  let { target = 'front', children, ...rest }: ViewportPortalProps = $props();
 </script>

-<div use:portal={`viewport-${target}`} {...rest}>
+<div
+  use:portal={`viewport-${target}`}
+  style:display={hideOnSSR().value ? 'none' : undefined}
+  {...rest}
+>
  {@render children?.()}
 </div>
@@ -2,7 +2,7 @@
  import { getContext } from 'svelte';
  import { Position, getNodeToolbarTransform } from '@xyflow/system';

-  import { portal } from '$lib/actions/portal';
+  import { hideOnSSR, portal } from '$lib/actions/portal';
  import { useStore } from '$lib/store';
  import { useSvelteFlow } from '$lib/hooks/useSvelteFlow.svelte';

@@ -68,6 +68,7 @@
 {#if store.domNode && isActive && toolbarNodes}
  <div
    use:portal={'root'}
+    style:display={hideOnSSR().value ? 'none' : undefined}
    class="svelte-flow__node-toolbar"
    data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
    style:position="absolute"
@@ -84,6 +84,25 @@ export const initialEdgeTypes = {
  step: StepEdgeInternal
 };

+function getInitialViewport(
+  // This is just used to make sure adoptUserNodes is called before we calculate the viewport
+  _nodesInitialized: boolean,
+  fitView: boolean | undefined,
+  initialViewport: Viewport | undefined,
+  width: number,
+  height: number,
+  nodeLookup: NodeLookup
+) {
+  if (fitView && !initialViewport && width && height) {
+    const bounds = getInternalNodesBounds(nodeLookup, {
+      filter: (node) => !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
+    });
+    return getViewportForBounds(bounds, width, height, 0.5, 2, 0.1);
+  } else {
+    return initialViewport ?? { x: 0, y: 0, zoom: 1 };
+  }
+}
+
 export function getInitialStore<NodeType extends Node = Node, EdgeType extends Edge = Edge>(
  signals: StoreSignals<NodeType, EdgeType>
 ) {
@@ -298,7 +317,16 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E

    // _viewport is the internal viewport.
    // when binding to viewport, we operate on signals.viewport instead
-    _viewport: Viewport = $state(signals.props.initialViewport ?? { x: 0, y: 0, zoom: 1 });
+    _viewport: Viewport = $state(
+      getInitialViewport(
+        this.nodesInitialized,
+        signals.props.fitView,
+        signals.props.initialViewport,
+        this.width,
+        this.height,
+        this.nodeLookup
+      )
+    );
    get viewport() {
      return signals.viewport ?? this._viewport;
    }
@@ -410,15 +438,6 @@ export function getInitialStore<NodeType extends Node = Node, EdgeType extends E
    );

    constructor() {
-      // Process intial fitView here
-      if (signals.props.fitView && !signals.props.initialViewport && this.width && this.height) {
-        const bounds = getInternalNodesBounds(this.nodeLookup, {
-          filter: (node) =>
-            !!((node.width || node.initialWidth) && (node.height || node.initialHeight))
-        });
-        this.viewport = getViewportForBounds(bounds, this.width, this.height, 0.5, 2, 0.1);
-      }
-
      if (process.env.NODE_ENV === 'development') {
        warnIfDeeplyReactive(signals.nodes, 'nodes');
        warnIfDeeplyReactive(signals.edges, 'edges');