Accept all attributes in attr :global without a warning

Phoenix Forum Questions / Help
,
1

I’m developing a LiveVue library with an interface:

   <.vue
      count={@count}
      v-component="Counter"
      v-socket={@socket}
      v-on:inc={JS.push("inc")}
    />

where all props other than these special 3 (prefixed “v-”) should end up in :rest attr. Currently I’m getting warnings on these props. Is there a way to fix it? include won’t work since I don’t know these props. There’s also a way of declaring def __global__?(name) but it would silence all these warnings for all components…

2

https://hexdocs.pm/phoenix_live_view/Phoenix.Component.html#module-included-globals

3

Thanks LostKobrakai, but I already mentioned this in my question:

include won’t work since I don’t know these props

I simply want to allow all props, so whitelisting is not an option.

There’s an option to provide a whitelisted prefix, but again, it won’t work because I’d like to allow all props.

I’ve even tried to implement undocumented globals in using, but it hides all warnings, also for other functions, not only vue.

There are two choices I see:

  1. Add a prefix to all props.
  2. Remove :attr declarations for vue component. It seems to be working fine, but it won’t warn in compile time about missing required props.

I personally prefer option 2. Maybe in the future it will be possible to allow all props to be included in :global without explicit whitelisting.

4

The idea behind the validation is that you get feedback when you fat finger the attributes. Allowing everything would mean you loose a good part of the validation provided.

5

I understand. But in my case I want to disable that validation for this component, since I’m creating a wrapper component. I’m not interested in these props as I just want to pass them through, in my case to the Vue component.

What I’d like to keep is documentation generated thanks to :attr and check if all required params are provided.

Basically, it would all be fine if I could somehow disable warning on unknown props. According to my udnerstanding, it’s not possible right now :pensive:

6

Isn’t the way to do a wrapper component to use slots? Make a slot for the inner contents and then that inner item can have whatever attrs it wants. Your wrapper then would only define atrrs for things it specifically uses.

7

Not exactly. I’m rendering these props as data-props={Jason.encode!(@rest)} so they can be picked up by Hook.