Discovery > Look into possibilities for ViewComponent-specific Javascript

Now that we have ViewComponents for most of our simpler, static Pajamas components, it's time to think if and how we want to implement our more dynamic components as ViewComponents.

The goal for this issue is to make an informed decision which approach works best for us, or if we want to not support JS in ViewComponents at all.

Suggested solution

There isn't a built-in "works everywhere" solution, but the ViewComponent docs describe one possible way with webpack(er). There is already a rough draft of how this could work in GitLab at !99475 (closed).

Other ideas

Use existing page_specific_javascripts approach

Mark pointed me to this different way how we could approach this, but after looking into it, we don't think it's the way forward. See the discussion for more detail.

Introduce and use petite-vue

petite-vue is an alternative distribution of Vue optimized for progressive enhancement. It provides the same template syntax and reactivity mental model as standard Vue. However, it is specifically optimized for "sprinkling" a small amount of interactions on an existing HTML page rendered by a server framework.

I've explored the idea of adding petite-vue to the codebase. It would allow us to have stateful components and use familar syntax (v-on, v-show, v-for, ...) directly in the Haml of our ViewComponents.

But it's probably not the way forward for two reasons:

  • petite-vue hasn't received much attention from the Vue community since it was released. It's not abbandoned but also not actively developed at the moment.
  • It is not compatible with our Content Security Policy. It just wouln't work in our codebase as it is today.

Introduce and use Alpine.js

Alpine.js is very similar to petite-vue, but is very actively development, has great documentation and a nice browser dev tool. Also it has a CSP-compatible build that we could use. It's awesome, but it's not Vue. So adding it would bring in yet another framework, and about 30kB-gzipped. I feel it would be a bit too much for the little bit of interactivity that we want to give our ViewComponents.

[your idea here]

Do you have another idea in mind? Please comment or add it here in the description. Thanks!

Edited by Thomas Hutterer