Phlex 2.0 alpha is ready for testing 🏗️

[joeldrapper]

The Phlex 2.0 alpha is ready for testing. New draft docs are in main here. There are instructions on how to build them in the README. Contributions to this documentation are very welcome. https://github.com/phlex-ruby/phlex.fun

You can install the alpha directly from GitHub.

gem "phlex-rails", git: "https://github.com/phlex-ruby/phlex-rails.git"
gem "phlex", git: "https://github.com/phlex-ruby/phlex.git"

I recommend trying it out in a new Rails app. You’ll need Ruby 3.3.1 or greater. Try the generators, kick the tyres and let us know how you get on.

Kits are enabled by default with the new install generator, so you can render components by calling their name as a method, e.g.

Card(title: "Hello") do
  p { "In a card" }
end

[joeldrapper]

You can now preview the new (incomplete) docs here. https://beta.phlex.fun

[stephannv]

I upgraded my app to Phlex 2.0.0.beta2 and only 3 things made my tests fail:

Rendering translations with HTML

This code:

# Before this rendered the correct html
div { t("my_key_html") }

# On Phlex 2.0.0.beta2 this escapes the HTML
div { t("my_key_html") }

# I had to do:
div { safe(t("my_key_html")) }

I'm not sure why, the ActiveSupport::SafeBuffer.include(Phlex::SGML::SafeObject) on Phlex::Rails should have resolved this. I will investigate this more.

Rendering partials

# before
render "my/partial/path"

#after
render partial: "my/partial/path"

I think this is fine, but just adding here because it could be added to the upgrading guide.

Phlex symbols handling x Turbo symbols handling

I had:

# on my controller
turbo_stream.replace(:x_y_z, XYZComponent.new) 

# on my view
div id: :x_y_z, ...

This rendered <div id="x-y-z">...</div> and turbo stream tried to replace a div with id x_y_z. I had to change to div id: "x_y_z".

[joeldrapper]

Thank you.

1. The first issue with t is being sorted already. Should be fixed in the next beta.
2. The second issue is intentional because we want you to be able to render polymorphic inputs including strings. We need to document this well in the upgrade guide.
3. The third issue is also intentional, though this has led to much debate. 😅 I outlined my thoughts on the decision here. https://github.com/orgs/phlex-ruby/discussions/785

[mhenrixon]

Is this becuase of phlex 2 or because of something else?

Test:

RSpec.describe Views::Organizations::Transfers::Show, type: :component do
  fixtures :organizations, :accounts, :transfers, :users, :members

  let(:organization) { organizations(:zazu) }
  let(:user)         { users(:alfred) }
  let(:member)       { members(:zazu_manager_alfred) }
  let(:transfer)     { transfers(:one) }
  let(:accounts)     { organization.accounts }

  it "displays the transfer details" do
    render described_class.new(
      member:,
      transfer:,
      accounts:
    )

    expect(component).to have_content(transfer.id)
    expect(component).to have_content(transfer.amount_currency)
    expect(component).to have_content(transfer.to_d.to_s)
    expect(component).to have_content(transfer.status)
    expect(component).to have_content(transfer.creditor_account.name)
    expect(component).to have_content(transfer.debitor_account.name)
    expect(component).to have_content(transfer.created_at.rfc3339)

    expect(component).to have_link("Back to Transfers", href: organization_transfers_path)
  end
end

Gives me the following error:

  1) Views::Organizations::Transfers::Show displays the transfer details
     Failure/Error:
       turbo_frame_tag :transfer_details do
         div(class: "py-6 px-6 bg-white h-screen h-full !w-[32rem]") do
           div(class: "space-y-6") do
             header
             payment_info
             transaction_details
             category_form
             labels_info
           end
         end

     NoMethodError:
       undefined method 'turbo_frame_tag' for nil
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-rails-2.0.0.beta2/lib/phlex/rails/helper_macros.rb:14:in 'Phlex::Rails::Helpers::TurboFrameTag#turbo_frame_tag'
     # ./app/views/organizations/transfers/show.rb:17:in 'Views::Organizations::Transfers::Show#view_template'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/sgml.rb:130:in 'block (2 levels) in Phlex::SGML#call'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/sgml.rb:319:in 'Phlex::SGML#around_template'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/sgml.rb:115:in 'block in Phlex::SGML#call'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/context.rb:23:in 'Phlex::Context#around_render'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/sgml.rb:114:in 'Phlex::SGML#call'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/testing/sgml.rb:5:in 'Phlex::Testing::SGML#render_to_string'
     # /Users/mhenrixon/.gem/ruby/3.4.0/gems/phlex-2.0.0.beta2/lib/phlex/testing/capybara.rb:25:in 'Phlex::Testing::Capybara#render'
     # ./spec/views/organizations/transfers/show_spec.rb:13:in 'block (2 levels) in <main>'

Not sure where to start looking

[stephannv]

@mhenrixon you can try removing all phlex testing helpers requires & includes, and try the snippet below:

RSpec.describe Views::Organizations::Transfers::Show do
  include RSpec::Rails::ViewExampleGroup
  include Capybara::RSpecMatchers
  
  it "..." do
    render described_class.new(...)
  end
end

If it works, it is a problem with your Phlex testing setup. If not, it can be a problem with you spec/app/test setup.

[mhenrixon]

That worked as far as that I got a much deeper issue with url generation that I might have to solve but it at least doesn't crash at the missing turbo frame.

[stephannv]

That worked as far as that I got a much deeper issue with url generation that I might have to solve but it at least doesn't crash at the missing turbo frame.

You can include Rails.application.routes.url_helpers. Something like:

# spec/support/components.rb
RSpec.configure do |config|
  config.include RSpec::Rails::ViewExampleGroup, type: %i[component page] # or just :component if you don't need type: :page
  config.include Capybara::RSpecMatchers, type: %i[component page]
  config.include Rails.application.routes.url_helpers, type: %i[component page]
end

Or just using type: :view and config.include Capybara::RSpecMatchers, type: :view

[mhenrixon]

Yup! The following works like a charm:

# TODO: Figure out how to use phlex testing to avoid system test everything
require "rails_helper"

RSpec.describe Views::Organizations::Transfers::Show, type: :view do
  fixtures :organizations, :accounts, :transfers, :users, :members

  let(:organization) { organizations(:zazu) }
  let(:user)         { users(:alfred) }
  let(:member)       { members(:zazu_manager_alfred) }
  let(:transfer)     { transfers(:one) }
  let(:accounts)     { organization.accounts }

  it "displays the transfer details" do
    render described_class.new(
      member:,
      transfer:,
      accounts:
    )

    expect(component).to have_content(transfer.id)
    expect(component).to have_content(transfer.amount_currency)
    expect(component).to have_content(transfer.to_d.to_s)
    expect(component).to have_content(transfer.status)
    expect(component).to have_content(transfer.creditor_account.name)
    expect(component).to have_content(transfer.debitor_account.name)
    expect(component).to have_content(transfer.created_at.rfc3339)

    expect(component).to have_link("Back to Transfers", href: organization_transfers_path)
  end

  def component
    response
  end
end
``

```ruby
# spec/rails_helper.rb
RSpec.configure do |config|
  config.include ActiveSupport::Testing::TimeHelpers # to use freeze_time and travel_to
  config.include RSpec::Rails::ViewExampleGroup, type: %i[component page] # or just :component if you don't need type: :page
  config.include Capybara::RSpecMatchers, type: %i[component page view]
  config.include Rails.application.routes.url_helpers, type: %i[component page view]
end

Maybe you can have a look at that @joeldrapper seems like it shouldn't be this hard. I believe something is loading out of order.

[stephannv]

Yup! The following works like a charm:

# TODO: Figure out how to use phlex testing to avoid system test everything
require "rails_helper"

RSpec.describe Views::Organizations::Transfers::Show, type: :view do
  fixtures :organizations, :accounts, :transfers, :users, :members

  let(:organization) { organizations(:zazu) }
  let(:user)         { users(:alfred) }
  let(:member)       { members(:zazu_manager_alfred) }
  let(:transfer)     { transfers(:one) }
  let(:accounts)     { organization.accounts }

  it "displays the transfer details" do
    render described_class.new(
      member:,
      transfer:,
      accounts:
    )

    expect(component).to have_content(transfer.id)
    expect(component).to have_content(transfer.amount_currency)
    expect(component).to have_content(transfer.to_d.to_s)
    expect(component).to have_content(transfer.status)
    expect(component).to have_content(transfer.creditor_account.name)
    expect(component).to have_content(transfer.debitor_account.name)
    expect(component).to have_content(transfer.created_at.rfc3339)

    expect(component).to have_link("Back to Transfers", href: organization_transfers_path)
  end

  def component
    response
  end
end
``

```ruby
# spec/rails_helper.rb
RSpec.configure do |config|
  config.include ActiveSupport::Testing::TimeHelpers # to use freeze_time and travel_to
  config.include RSpec::Rails::ViewExampleGroup, type: %i[component page] # or just :component if you don't need type: :page
  config.include Capybara::RSpecMatchers, type: %i[component page view]
  config.include Rails.application.routes.url_helpers, type: %i[component page view]
end

Maybe you can have a look at that @joeldrapper seems like it shouldn't be this hard. I believe something is loading out of order.

If you don't want to create the component method, you can do something like:

component = render MyClass.new

expect(component).to ...