fix astro example, fix svelte SSR, fix portals

packages/svelte/src/lib/actions/portal/index.ts

@@ -1 +1,2 @@
 export { portal } from './portal.svelte';
+export { hideDuringSSR } from './utils.svelte';

packages/svelte/src/lib/actions/portal/portal.svelte.ts

@@ -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?.();
     }
   };
 }

packages/svelte/src/lib/actions/portal/utils.svelte.ts

@@ -0,0 +1,17 @@
+export function hideDuringSSR(): { display: 'none' | undefined } {
+  let display = $state(typeof window === 'undefined' ? ('none' as const) : undefined);
+  if (display) {
+    const destroyEffect = $effect.root(() => {
+      $effect(() => {
+        display = undefined;
+        destroyEffect?.();
+      });
+    });
+  }
+
+  return {
+    get display() {
+      return display;
+    }
+  };
+}

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getContext } from 'svelte';
-  import { portal } from '$lib/actions/portal';
+  import { hideDuringSSR, 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={hideDuringSSR().display}
   class={['svelte-flow__edge-label', { transparent }, className]}
   style:cursor={selectEdgeOnClick ? 'pointer' : undefined}
   style:transform="translate(-50%, -50%) translate({x}px,{y}px)"

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

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

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

@@ -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

packages/svelte/src/lib/components/ViewportPortal/ViewportPortal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { portal } from '$lib/actions/portal';
+  import { hideDuringSSR, 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={hideDuringSSR().display} {...rest}>
   {@render children?.()}
 </div>

packages/svelte/src/lib/plugins/NodeToolbar/NodeToolbar.svelte

@@ -2,7 +2,7 @@
   import { getContext } from 'svelte';
   import { Position, getNodeToolbarTransform } from '@xyflow/system';
 
-  import { portal } from '$lib/actions/portal';
+  import { hideDuringSSR, 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={hideDuringSSR().display}
     class="svelte-flow__node-toolbar"
     data-id={toolbarNodes.reduce((acc, node) => `${acc}${node.id} `, '').trim()}
     style:position="absolute"

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

@@ -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');