Props are not passed to sockets

[pokecheater]

Describe the bug

Hey,

I followed your tutorial:

https://retejs.org/examples/customization/vue

But it seems that the defined data props are not passed to the socket.

As you can see here, like in your tutorial example I defined the prop data for my socket:

On the node template I call it with the ref and pass some values to data.

However inside the rendering only the name of the socket is available which I have not defined at all...

So 2 questions:
-> Where does the name property inside data come from? Seems that there is some logic that is called when using the Ref.
-> Is this behaviour intendet? How do I pass custom values to the socket then?

Thx in advance

Example to reproduce

No response

How to reproduce

Go to your own examples:
https://retejs.org/examples/customization/vue
and replace the socket code with this:

{{data}}

<script> export default { props: ['data'] } </script> <style lang="scss" scoped> @use "sass:math"; @import "./vars"; .socket { display: inline-block; cursor: pointer; border: 1px solid grey; width: $socket-size; height: $socket-size * 2; vertical-align: middle; background: #fff; z-index: 2; box-sizing: border-box; &:hover { background: #ddd; } } </style>

See that there is only name property:

thoose properties are not used at all:

Expected behavior

parameters should be passed correctly

Dependencies

"rete": "^2.0.5",
"rete-area-plugin": "^2.1.3",
"rete-connection-plugin": "^2.0.5",
"rete-render-utils": "^2.0.3",
"rete-vue-plugin": "^2.1.1",
"rete-vue-render-plugin": "^0.5.2",

Platform

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[Ni55aN]

data property inside Vue component refers to payload property of this attribute

This is expected behavior for any element type of classic preset

      } else if (context.data.type === 'socket') {
        const { payload } = context.data
        const component = socket
          ? socket(context.data)
          : Socket

        return {
          component,
          props: {
            data: payload
          }
        }
      }

https://github.com/retejs/vue-plugin/blob/35dbbbfc2bfb63d81be357392d490f244b875461/src/presets/classic/index.ts#L128

Other properties other than payload aren't passed to the component because they are more internal and shouldn't be passed directly to the component. For instance, they are used by https://github.com/retejs/render-utils/blob/main/src/sockets-position/base-socket-position.ts#L69