How do you handle component CSS and Interactivity?

[dscataglini]

One of the features React, Svelte, and other framework provide is localization of CSS and JS interaction.
Everything can be found in 1 file.
I personally really love that I can have all the things in one place. In my job I often have to remove components, pages, etc and hunting for all the CSS, JS, Routes, Images, etc is very painful and error prone. Everything in one file also makes it easy to share components.

My ideal situation would be that a file would have all the css (scoped to the component) js (same) for a specific component.
I don't know if it's out of scope for phlex.

Images I guess could be in a folder named the same as the component but that might again be out of the phlex scope.

[joeldrapper]

One option is to use CSS frameworks like UnoCSS or Tailwind and JavaScript frameworks like Stimulus or Alpine that allow you to do most of this in your HTML.

Another option is to use the Evil Martians approach, where you keep your CSS and JavaScript in the same folder as the component. They wrote about how they do this with ViewComponent components, but it’s all applicable to Phlex. https://evilmartians.com/chronicles/viewcomponent-in-the-wild-supercharging-your-components

Others have built extensions on Phlex to support CSS Modules. I think @joelmoss has been working on something like this.

It's not something I see Phlex addressing directly in the near future. One thing I am keeping an eye on is declarative shadow DOM. https://developer.chrome.com/en/articles/declarative-shadow-dom/

DSD allows you to declare custom elements with shadow DOM in pure HTML. Once this has better browser support, I will explore some kind of Phlex::HTML::WebComponent abstraction that lets you write scoped components with associated CSS and JavaScript — either as HEREdocs or sidecar files.

Another thing worth mentioning is new CSS features like container queries and CSS nesting make writing CSS for components much easier.

[wedow]

In case it helps anyone else, currently @scope and document.currentScript.parentNode work great for scoping CSS and JS, respectively, to their components. Firefox is a holdout on @scope support but if you don't have any Firefox users, structuring components to include inline <script> and <style> tags makes them incredibly easy to maintain.

Here's a redacted example of a recent component to illustrate

class DataGridComponent < ApplicationComponent
  def view_template
    article do
      header do
        yield if block_given?
      end

      table class: :striped do
        # table markup here
      end

      script do
        <<~JS
          (function() {
            const article = document.currentScript.parentNode
            console.log(article)
            // add extra interactivity here
          })()
        JS
      end
      style do
        <<~CSS
          @scope {
            :scope {
              /* article styles go here */
              table {
                /* fancy table styles go here */
              }
            }
          }
        CSS
      end
    end
  end
end