ConnectionLine props are mistyped

[RiadhAdrani]

Hello,
While I was trying your library, which is fun, I tried to override the standard ConnectionLine, I copied the code from the docs, it works, but vscode is showing a type error:

<template>
  <div style="height: 700px; width: 900px; background-color: #1e1e1e">
    <VueFlow>
      <template #node-custom="props">
        <CustomNode :data="props.data" :id="props.id" :position="props.position" />
      </template>
      <template #edge-custom="props">
        <CustomEdge
          v-bind="props"
          :segments="target.segments"
          :updateOnDrag="target.updateOnDrag"
        />
      </template>
      <template #connection-line="{ sourceX, sourceY, targetX, targetY }"> <!-- Property 'targetY' does not exist on type '{}' -->
        <CustomConnection
          :source-x="sourceX"
          :source-y="sourceY"
          :target-x="targetX"
          :target-y="targetY"
          :color="connectionColor"
        />
      </template>
    </VueFlow>
  </div>
</template>

While it is working in dev as I said, It is blocking the build process with vite.
Any workaround for this problem?
Thank you.

[bcakmakoglu]

Interesting. Are you using the Volar VSCode extension for Vue?
I can see the problem if I open the example in VSCode as well (using Volar).

Looks like I need to somehow type the slot props (which I didn't know was even possible currently, so I assumed they're all typed as any 😅)

You could try this for now:

 <ConnectionLine :target-x="(props as ConnectionLineProps).targetX" />

ConnectionLineProps are an exported type of @vue-flow/core

[RiadhAdrani]

Hello again and thanks for the help.

Yes, I am using Volar.

[bcakmakoglu]

@RiadhAdrani

The props should be correctly typed in 1.5.3, if possible, please install the latest version and give me some feedback if it works for you as well :)
VSCode + Volar seemed to be fine in my tests, just want to re-confirm 😄

[RiadhAdrani]

@bcakmakoglu
Just updated it now, and I can confirm that it is working correctly.

[bcakmakoglu]

Nice, thank you for testing :)