Svelvet中Edge的source未定义报错，请问原因是什么？

问题重现 #

使用Svelvet构建流程图时，直接在<Svelvet>组件内嵌套<Node>和<Edge>子组件，出现以下错误：

proxy.js:15 [HMR][Svelte] Unrecoverable HMR error in <Root>: next update will trigger a full reload

Edge.svelte:41 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'source')
at create_if_block (+page.svelte:10:71)
at Array.create_default_slot (+page.svelte:8:12)

相关代码：

<script>
  import { Svelvet, Node, Edge } from 'svelvet';

  // 注释掉了nodes和edges数组的写法
  // let nodes = [
  //   {
  //     id: 'start',
  //     position: { x: 100, y: 100 },
  //     data: { label: 'Start' }
  //   },
  //   {
  //     id: 'end',
  //     position: { x: 400, y: 100 },
  //     data: { label: 'End' }
  //   }
  // ];

  // let edges = [
  //   {
  //     id: 'edge-1',
  //     source: 'start',
  //     target: 'end',
  //     sourceHandle: null,
  //     targetHandle: null,
  //     type: 'bezier'
  //   }
  // ];
</script>

<Svelvet width={800} height={600}>
  <Node id="start" position={{ x: 100, y: 100 }}>Start</Node>
  <Node id="end" position={{ x: 400, y: 100 }}>End</Node>
  <Edge id="edge-1" source="start" target="end" type="bezier" />
</Svelvet>

错误原因 #

• Svelvet不支持直接将<Node>和<Edge>作为子组件嵌套在<Svelvet>内部使用
• 正确用法是通过nodes和edges属性向<Svelvet>传递节点、连线数据数组，而非直接渲染子组件
• 直接嵌套<Edge>时，组件无法正确关联到对应的source节点，导致内部读取source属性时触发未定义错误

解决方案 #

恢复注释中的nodes和edges数组定义，通过props传递给<Svelvet>组件：

<script>
  import { Svelvet } from 'svelvet';

  let nodes = [
    {
      id: 'start',
      position: { x: 100, y: 100 },
      data: { label: 'Start' }
    },
    {
      id: 'end',
      position: { x: 400, y: 100 },
      data: { label: 'End' }
    }
  ];

  let edges = [
    {
      id: 'edge-1',
      source: 'start',
      target: 'end',
      sourceHandle: null,
      targetHandle: null,
      type: 'bezier'
    }
  ];
</script>

<Svelvet width={800} height={600} {nodes} {edges} />

内容的提问来源于stack exchange，提问作者Vishnu