[Proposal]: Add shortcut version for the basic component properties

[vheathen]

It would be very helpful to have short version of the properties like v-socket and v-component.

For example:

v-component="Counter" -> @Counter v-socket={@socket} -> @={@socket} v-on:event="handler" -> @on:event="handler

I made a small change to make it work, and for me these renders 4 Counter components:

  def render(assigns) do
    ~H"""
    <div class="w-[350px] flex flex-col text-center h-full justify-center gap-2">
      <div>
        <.vue count={@count} v-component="Counter" v-socket={@socket} @on:inc={JS.push("inc_counter")} />
        <.vue count={@count} @Counter @={@socket} @on:inc={JS.push("inc_counter")} />

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

I can send PR if need.

[Valian]

I don't think it's a good idea. It might save a few chars but hurts readability. For example @=@socket seems very confusing.

Another reason is that @ has a special meaning in HEEX. That's the reason why I opted to use only v- prefix for special props (socket, ssr, and handlers).

Last - My personal preference is if a single thing can be done in a single way 😉

Do you agree?