Svelte5でsvelteflow（@xyflow/svlelte）を動かす

はじめに

svelteflowでは現状svelte4をターゲットにしているが、svelte5向けの開発が進められている。
https://github.com/xyflow/xyflow/pull/4878

Quickstartを少しいじってsvelte5で動かしてみる。

検証

検証環境

• Windows11 23H2 22631.4751
• Node.js v22.14.0, NPM v11.1.0
• sv 0.6.21

1. Svelte5向け環境構築

> mkdir test
> npx sv create .
Need to install the following packages:
sv@0.6.21
Ok to proceed? (y) y

┌  Welcome to the Svelte CLI! (v0.6.21)
│
◇  Which template would you like?
│  SvelteKit minimal
│
◇  Add type checking with Typescript?
│  Yes, using Typescript syntax
│
◆  Project created
│
◇  What would you like to add to your project? (use   
arrow keys / space bar)
│  tailwindcss, sveltekit-adapter
│
◇  sveltekit-adapter: Which SvelteKit adapter would   
you like to use?
│  static
│
◆  Successfully setup add-ons
│
◇  Which package manager do you want to install       
dependencies with?
│  npm
◆  Successfully installed dependencies
│
◇  Project next steps ─────────────────────────────────────────────────────╮
│                                                     
                     │
│  1: git init && git add -A && git commit -m "Initial commit" (optional)  │
│  2: npm run dev -- --open                           
                     │
│                                                     
                     │
│  To close the dev server, hit Ctrl-C                
                     │
│                                                     
                     │
│  Stuck? Visit us at https://svelte.dev/chat         
                     │
│                                                     
                     │
├──────────────────────────────────────────────────────────────────────────╯
│
└  You're all set!

2. svelteflowのインストール

以下の指示に従っていく。
https://github.com/xyflow/xyflow/pull/4878

> npm install --save-dev @xyflow/svelte@next

3. Quickstartを動かしてみる

Quickstartをmigration guideに従って書き換える。

src/routes/+page.svelte

<script lang="ts">
  import {
    SvelteFlow,
    Controls,
    Background,
    BackgroundVariant,
    MiniMap
  } from '@xyflow/svelte';

  // 👇 this is important! You need to import the styles for Svelte Flow to work
  import '@xyflow/svelte/dist/style.css';

  // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      data: { label: 'Input Node' },
      position: { x: 0, y: 0 }
    },
    {
      id: '2',
      type: 'default',
      data: { label: 'Node' },
      position: { x: 0, y: 150 }
    }
  ]);

  // same for edges
  let edges = $state.raw([
    {
      id: '1-2',
      type: 'default',
      source: '1',
      target: '2',
      label: 'Edge Text'
    }
  ]);

  const snapGrid: [number, number] = [25, 25];
</script>

<!--
👇 By default, the Svelte Flow container has a height of 100%.
This means that the parent container needs a height to render the flow.
-->
<div style:height="500px">
  <SvelteFlow
    bind:nodes
    bind:edges
    {snapGrid}
    fitView
    onnodeclick={(event) => console.log('onnodeclick', event)}
  >
    <Controls />
    <Background variant={BackgroundVariant.Dots} />
    <MiniMap />
  </SvelteFlow>
</div>

diff

1,2c1
< <script>
<   import { writable } from 'svelte/store';
---
> <script lang="ts">
10c9
<
---
>
13c12
<
---
>
15c14
<   const nodes = writable([
---
>   let nodes = $state.raw([
29c28
<
---
>
31c30
<   const edges = writable([
---
>   let edges = $state.raw([
40,41c39,40
<
<   const snapGrid = [25, 25];
---
>
>   const snapGrid: [number, number] = [25, 25];
43c42
<
---
>
50,51c49,50
<     {nodes}
<     {edges}
---
>     bind:nodes
>     bind:edges
54c53
<     on:nodeclick={(event) => console.log('on node click', event.detail.node)}
---
>     onnodeclick={(event) => console.log('onnodeclick', event)}

4. 実行

> npm run dev