Adding my own helpers

[mhenrixon]

I am using @hopsoft's turbo_boost-elements for building reactive websites and found it doesn't work with phlex-rails that I would love to use.

1. https://github.com/hopsoft/turbo_boost-elements/blob/main/app/helpers/turbo_boost/elements/application_helper.rb
2. https://github.com/hopsoft/turbo_boost-elements/blob/main/lib/turbo_boost/elements/tag_builders/toggle_tags_builder.rb

It looks something like this:

<%= tag.div id: dom_id(article) do %>
  <% if Current.ability.can?(:edit, article) %>
    <div class="article-commands flex space-x-4 align-right">
      <input type="checkbox" class="hidden">

      <%= toggle_trigger_tag renders: current_partial_path,
                             morphs: article_tag,
                             controls: settings_tag,
                             locals: { article: },
                             assigns: { article: } do %>
        <% if toggle_target_collapsed? settings_tag %>
          <%= link_to request.path, id: "edit-settings-cmd", class: "text-accent" do %>
            <%= heroicon("cog", variant: :outline, class: "text-accent w-16") %>
          <% end %>
        <% else %>
          <%= link_to request.path, id: "show-article-cmd", class: "text-accent" do %>
            <%= heroicon("x-mark", variant: :outline, class: "text-accent w-16") %>
          <% end %>
        <% end %>
      <% end %>

      <%= toggle_trigger_tag renders: current_partial_path,
                             morphs: article_tag,
                             controls: edit_body_tag,
                             locals: { article: },
                             assigns: { article: } do %>

        <% if toggle_target_collapsed? edit_body_tag %>
          <%= link_to request.path, id: "edit-body-cmd", class: "text-accent" do %>
            <%= heroicon("pencil-square", variant: :outline, class: "text-accent w-16") %>
          <% end %>
        <% else %>
          <%= link_to request.path, id: "show-article2-cmd", class: "text-accent" do %>
            <%= heroicon("x-mark", variant: :outline, class: "text-accent w-16") %>
          <% end %>
        <% end %>
      <% end %>
    </div>
  <% end %>

  <%= toggle_target_tag settings_tag do %>
    <%= render Articles::Settings.new(article:) %>
  <% end %>

  <%= toggle_target_tag edit_body_tag do %>
    <%= render Articles::EditBody.new(article:) %>
  <% end %>

  <% if toggle_target_collapsed?(edit_body_tag) && toggle_target_collapsed?(settings_tag) %>
    <article class="article">
      <div class="text-center">
        <h2 class="article-title mb-4 text-4xl tracking-tight font-extrabold text-primary">
          <%= article.title %>
        </h2>
      </div>

      <%= article_image(article.image, class: "rounded-xl shadow-xl mx-auto") %>

      <div class="article-content" data-controller="highlight">
        <%= @article.content %>
      </div>
    </article>
  <% end %>
<% end %>

Here are a few ideas of what can be wrong:

1. toggle_trigger_tag renders: current_partial_path This seems to rely on actionview.
2. toggle_target_tag settings_tag do, which I believe stores the block as a callback for later. It doesn't render the block.

Now, that's fine, phlex is still new but I'd love to stick to one thing so how can I contribute fixes here?

The main problem, apart from the discussion about action text, is in the blocks, and I need to wrap this functionality somehow to avoid it being rendered directly.

WDYT?

[joeldrapper]

Hey @mhenrixon, Phlex 2 will have a feature to help creating your own helper adapters. For now, here's how you can do it manually.

If you have a helper that provides a value — perhaps a URL or a string of text to display, you can define a method that delegates to the helpers proxy.

def current_url(...)
  helpers.current_url(...)
end

Since you're in a Rails environment, you could use Rails delegate method to do this.

delegate :current_url, to: :helpers

Now, if you have a helper that returns HTML to output, you’ll need to do things a little differently. I’ll give you an example with the toggle_trigger_tag helper and then try to explain what each bit does.

def toggle_trigger_tag(*args, **kwargs, &block)
  output = helpers.toggle_trigger_tag(*args, **kwargs) { capture(&block) }

  if ActiveSupport::SafeBuffer === output
    unsafe_raw(output)
  end
end

In the first line, we define a method that takes any number of positional arguments as args, any number of keyword arguments as kwargs and an optional block as block.

In line two, we call the original helper (via the helpers proxy) and pass it the args and kwargs. But instead of passing it the block that we captured in the previous line, we pass it a custom block. Inside this block, we pass the captured block to the capture method. What this does is evaluate the block in Phlex and return the output as an HTML-safe String (called an ActiveSupport::SafeBuffer) — this is what you'd get if you called .html_safe on a String.

This is very important because the original helper expects the passed block to return a string, since the original helper is designed to work with ERB.

This line takes care of converting from Phlex mode (where everything is buffered) to ERB mode (where everything is a passed as a value). Finally, we save it to a variable called output.

Now, we could render this output directly with unsafe_raw, but to be extra safe before we do that, we want to check that it's definitely a "safe string" or ActiveSupport::SafeBuffer. There are a few ways to do this. My favourite way is to ask ActiveSupport::SafeBuffer if it === the output rather than asking the output if it is_a?(ActiveSupport::SafeBuffer), since the output is untrusted in this scenario and could lie.

Hope that makes sense. When Phlex 2 comes out, you should just be able to do something like

register_output_helper :toggle_trigger_tag

[mhenrixon]

Of course, I prefer the v2 version, but v1 is better than I thought. Kudos on the great work you put in so far.

I'll give this a go, narrowing it down to a reproducible case that could be shared with other third-party library developers. I want phlex support everywhere.

[mhenrixon]

Got a little further:

def toggle_target_tag(id, **kwargs, &block)
  output = helpers.toggle_target_tag(id, **kwargs) { capture(&block) }

  if ActiveSupport::SafeBuffer === output
    unsafe_raw(output)
  end
end

def toggle_trigger_tag(**kwargs, &block)
  output = helpers.toggle_trigger_tag(**kwargs) { capture(&block) }

  if ActiveSupport::SafeBuffer === output
    unsafe_raw(output)
  end
end

This works apart from that, which assumes ERB and a rail's partial path. I must likely patch turbo_boost to support rendering a phlex view/component.

[mhenrixon]

toggle_trigger_tag(renders: "articles/article",

Gives me a stacklevel too deep and the below does too but the below is how it should be

toggle_trigger_tag(renders: Articles::Article,

[joeldrapper]

Oh that's frustrating. I thought you could just pass a block of content. If it requires a renders: argument, it's likely going to need patching in turbo boost itself. I wonder if it wouldn’t be easier to replace these helpers with a component that creates <toggle-trigger> and <toggle-target> elements directly.

I haven't run this, but this is roughly what you'd need, I think.

class ToggleTriggerComponent < ApplicationComponent
  register_element :toggle_trigger

  def initialise(
    morphs:, # REQUIRED, `dom_id` of the partial's outermost containing element
    controls:, # REQUIRED, `dom_id` of the toggle target
    collapse_selector: nil, # CSS selector for other matching targets to collapse when the target is expanded
    focus_selector: nil, # CSS selector for the element to focus when the target is expanded
    method: :toggle, # method to inovke (:show, :hide, :toggle)
    disabled: false, # disable the trigger
    expanded: false, # override to force expansion
    remember: false, # remember ephemeral UI state between requests
    **kwargs # generic support for additional element attributes like `class` etc.
  )
    @morphs = morphs
    @controls = controls
    @collapse_selector = collapse_selector
    @focus_selector = focus_selector
    @method = method
    @disabled = disabled
    @expanded = expanded
    @remember = remember
    @kwargs = kwargs
  end

  def template(&content)
    toggle_trigger(
      **mix(attributes, @kwargs),
      &content
    )
  end

  private

  def attributes
    {
      loading: :eager,
      id: "#{controls}-toggle-trigger",
      data:,
      aria:,
      renders: @renders,
      morphs: @morphs,
      view_stack: @view_stack.to_json if Rails.env.development?,
      collapse_selector: @collapse_selector,
      focus_selector: @focus_selector,
      remember: !!@remember
    }
  end

  def data
    {
      turbo_command: "TurboBoost::Elements::ToggleCommand##{@method}"
    }
  end

  def area
    {
      controls: @controls,
      expanded: @expanded || target_expanded?(@controls),
      atomic: true,
      relevant: "all"
    }
  end
end

[pedantic-git]

Thanks for this discussion! I noticed register_output_helper already exists in Phlex::Rails::HelperMacros so my solution was to create a lib/upstream_macros.rb that looks like this:

# frozen_string_literal: true

# Mixing this into ApplicationComponent to provide access to helpers that are
# provided by gems
# Until Phlex 2 comes out (see https://github.com/orgs/phlex-ruby/discussions/651 )
module UpstreamHelpers
  extend Phlex::Rails::HelperMacros

  # Helpers that return things
  delegate :current_user, :user_signed_in?, :title, to: :helpers

  # Helpers that output HTML
  register_output_helper :display_meta_tags
end

To get the helpers from the meta-tags and devise gems that I use. I just mixed that module into my ApplicationComponent for now and it works like a dream.