how to upgrade an "old" Phlex 1.4 / Phlex-rails 0.7.1 app to Phlex 1.9 / 1.1.1

[wdiechmann]

The title is perhaps too broad?

The issues at hand are

• .to_str is a nuisance at worst, an inconvenience at best
• forms do not 'collect' yields

[wdiechmann]

I've fixed the .to_str by patching a

def self.to_str 
  to_s
end

on the models/classes I needed it to be on - no idea why this is an issue but not a big problem.

The form not yielding on the other hand is somewhat more troubling - to say the least.

I've tried to fix it like this

                yield
                div( class: @fields_css) do
                  @_context.target
                end

again - I'm shooting in the dark here, but I can see that the @_context.target attribute does in fact hold all the HTML that I'd like to be part of the output from the form element

[joeldrapper]

Can you share the form code? Or at least what kind of object it is?

[wdiechmann]

    def template(&block)
      @modal ? modal_form(&block) : right_slide_form(&block)
    end

    def right_slide_form(&)
      div( id: "#{@form_id}", class: "pointer-events-auto #{@screen_height} #{@screen_width}") do
        form_with( model: @resource, 
          url: set_url( helpers.resource_url()), 
          data: { form_sleeve_target: 'form' }, 
          html: { id: "#{@form_id}_innerform", enctype: "multipart/form-data", class: @classes }) do |form|
            hidden_field( :account_id, value: (Current.account.id rescue nil) ) unless %(account service).include? @resource.class.to_s.underscore
            unless @assoc.nil?
              hidden_field( "#{@assoc}_type", value: @resource.send(@assoc).class.to_s) 
              hidden_field( :id, assoc: @assoc, value: set_id ) 
            end
            div( 
              class:"flex-1 relative space-y-12",
              data_controller: "form",
              data_form_form_sleeve_outlet: "#form-sleeve",
              data_form_list_outlet: "#list",
              data_form_clipboard_prefix_value: @clipboard_prefix,
              data_action: "keydown->form#keydownHandler" #  speicherMessage@window->form#handleMessages
              ) do
                div( class: @fields_css) do
                  yield
                end
            end
          end
      end
    end

[joeldrapper]

Are you using the Phlex::Rails::Helpers::FormWith module here?

[wdiechmann]

sorry - should have added the 'header' too -

  class Components::Form::Form < Views::Components::Form::PhlexBase
    include Phlex::Rails::Helpers::FormWith
    # include Phlex::Rails::Helpers::FieldsFor

    def initialize( **attribs, &block )
      @resource = attribs[:resource]
      @assoc = attribs[:assoc]
      @action = attribs[:action]
      @url = attribs[:url] || nil
      @modal = attribs[:modal] || false
      @clipboard_prefix = attribs[:clipboard_prefix]
      @classes = attribs[:css] || ( @modal ? "" : "scrollbar-hide h-full flex flex-col bg-white shadow-xl overflow-y-scroll ")
      @screen_height = attribs[:screen_height] || "h-screen max-h-screen"
      @screen_width = attribs[:screen_width] || "w-screen max-w-md"
      @fields_css = attribs[:fields_css] || (@modal ? "" : "border-b border-gray-900/10 pb-12 mb-14")
      @form_id = "form_#{Current.user.id rescue 0}"
    end

and the Views::Components::Form::PhlexBase is just a 'guard' around what may come 😄

module Views
  #
  # the errors component wraps the error messages
  #
  class Components::Form::PhlexBase < Phlex::HTML

    def initialize( resource: nil )
    end

    def template(&)
    end

    def text( text )
      plain(text)
    end
  end
end

[wdiechmann]

Not sure if this is mudding the water further - or offering deeper insight - but if I change the template in the above form to

      div( id: "#{@form_id}", class: "pointer-events-auto #{@screen_height} #{@screen_width}") do
        form() do |form|
        # form_with( model: @resource, 
        #   url: set_url( helpers.resource_url()), 
        #   data: { form_sleeve_target: 'form' }, 
        #   html: { id: "#{@form_id}_innerform", enctype: "multipart/form-data", class: @classes }) do |form|
            hidden_field( :account_id, value: (Current.account.id rescue nil) ) unless %(account service).include? @resource.class.to_s.underscore
            unless @assoc.nil?
              hidden_field( "#{@assoc}_type", value: @resource.send(@assoc).class.to_s) 
              hidden_field( :id, assoc: @assoc, value: set_id ) 
            end
            div( 
              class:"flex-1 relative space-y-12",
              data_controller: "form",
              data_form_form_sleeve_outlet: "#form-sleeve",
              data_form_list_outlet: "#list",
              data_form_clipboard_prefix_value: @clipboard_prefix,
              data_action: "keydown->form#keydownHandler" #  speicherMessage@window->form#handleMessages
              ) do
                div( class: @fields_css) do
                  yield
                end
            end
          end
      end

I get the expected output - sort'a - 'cause it comes back in a weird order with the outermost part first and the yield'ed output last like this:

<turbo-stream action="replace" target="form_1"><template> 

  <div class="sticky z-20 top-0 right-0 px-4 py-6 bg-gray-50 sm:px-6"><div class="flex items-start justify-between space-x-3"><div class="space-y-1"><h2 class="text-lg font-medium text-gray-900" id="slide-over-title">Ret arbejdssted</h2><p class="text-sm text-gray-500">Du kan rette et arbejdssted her.</p></div><div class="h-7 flex items-center"><button type="button" data-action="form-sleeve#cancel" class="text-gray-400 hover:text-gray-500"><span class="sr-only" sr="close form"></span><svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg></button></div></div></div>
  

  <!-- Divider container -->
  <div class="h-full py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200">

    <!-- Name -->
    

    <!-- Address, Phone, more -->
    
  
    
    


  </div>

  <div id="form-footer" class="fixed w-screen max-w-md bottom-0 w-full flex justify-start border-t border-gray-200 bg-gray-50 py-5 px-6 z-40"><div class="flex-none w-1/4 h-14"><a class="button delete-button" data-turbo-confirm="Are you sure?" data-turbo-method="delete" data-action="click-&gt;form-sleeve#toggle" href="/locations/11">Slet</a></div><div class="flex justify-end w-full mr-5 sm:mr-1 md:mr-2"><div class="space-x-3"><span class="text-gray-400 text-xs" title="Location">11</span><button data-form-sleeve-target="cancel" data-action="click-&gt;form-sleeve#cancel" type="button" class="button cancel-button">Fortryd</button><button data-form-sleeve-target="save" type="submit" class="button save-button"><span class="group-disabled:hidden">Opdatér</span><span class="hidden group:disabled:block group-disabled:cursor-wait"><span class="translation_missing" title="translation missing: da.locations.form.updating">Updating</span></span></button></div></div></div>

<div id="form_1" class="pointer-events-auto h-screen max-h-screen w-screen max-w-md">
  <form>
    <input id="asset__account_id" name="asset[account_id]" focus="false" required="required" value="1" autocomplete="off" type="hidden" />
    <input id="asset__assetable_type" name="asset[assetable_type]" focus="false" required="required" value="Location" autocomplete="off" type="hidden" />
    <input id="asset_assetable_id" name="asset[assetable_attributes][id]" focus="false" required="required" value="11" autocomplete="off" type="hidden" />
    <div class="flex-1 relative space-y-12" data-controller="form" data-form-form-sleeve-outlet="#form-sleeve" data-form-list-outlet="#list" data-action="keydown-&gt;form#keydownHandler">
      <div class="border-b border-gray-900/10 pb-12 mb-14"><div class="space-y-1 px-4 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
      <div class="">
        <label name="asset[name]" class="block text-sm font-medium text-gray-900 sm:mt-px sm:pt-2" for="__Asset:0x000000011f216810_name">Navn</label>
...
            <div class="text-sm text-red-800"></div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<div class="border-blue-500"></div>
</template>
</turbo-stream>

[wdiechmann]

am I right to expect this output (provided all components are by my own doing - ie no form_with or other Rails helpers)?

<form>
  <div>
    <input type="hidden" />
    <input type="hidden" />
  </div>
  <div>
    <div>
      <div>
        <input type="text" />
      </div>
    </div>
  </div>
</form>

given this:

# views/employees/_form.rb
<%= render Views::Components::Form::Form.new() do |form| %>
  <div>
    <%= form.my_text_field() %>
  </div>
<% end %>

# views/components/form/form.rb
def template
  form() do |form|
    div() do 
      my_hidden_field()
      my_hidden_field()
    end
    div() do 
      div() do
        yield
      end
    end
  end
end

def my_hidden_field
  render Views::Components::Form::HiddenField.new()
end

def my_text_field()
  render Views::Components::Form::TextField.new()
end

[wdiechmann]

sometimes you just have to 'wait it up' (at least that's what my brother labels it - he's my business partner and together we've had this tiny business adventure for 25+ years; him doing the hardware and me doing the software, and lately my son has entered the 'enterprise' too) anyways - I'm digressing:

left the issue to itself for the weekend, and this morning, I took @manu's medicin: built myself a small demo app and did away with the Rails form_with helper - and lo' and behold! All is well (again)
😍