README.md in actionview-component-1.9.0 vs README.md in actionview-component-1.10.0
- old
+ new
@@ -142,57 +142,27 @@
```
We can render it in a view as:
```erb
-<%= render(TestComponent, title: "my title") do %>
+<%= render(TestComponent.new(title: "my title")) do %>
Hello, World!
<% end %>
```
Which returns:
```html
<span title="my title">Hello, World!</span>
```
-##### Supported `render` syntaxes
-
-Components can be rendered via:
-
-`render(TestComponent, foo: :bar)`
-
-`render(component: TestComponent, locals: { foo: :bar })`
-
-**Rendering components through models**
-
-Passing model instances will cause `render` to look for its respective component class.
-
-The component is instantiated with the rendered model instance.
-
-Example for a `Post` model:
-
-`render(@post)`
-
-```ruby
-class PostComponent < ActionView::Component::Base
- def initialize(post)
- @post = post
- end
-end
-```
-
-The following syntax has been deprecated and will be removed in v2.0.0:
-
-`render(TestComponent.new(foo: :bar))`
-
#### Error case
If the component is rendered with a blank title:
```erb
-<%= render(TestComponent, title: "") do %>
+<%= render(TestComponent.new(title: "")) do %>
Hello, World!
<% end %>
```
An error will be raised:
@@ -225,11 +195,11 @@
```
We can render it in a view as:
```erb
-<%= render(ModalComponent, user: {name: 'Jane'}) do |component| %>
+<%= render(ModalComponent.new(user: {name: 'Jane'})) do |component| %>
<% component.with(:header) do %>
Hello <%= user[:name] %>
<% end %>
<% component.with(:body) do %>
<p>Have a great day.</p>
@@ -263,11 +233,11 @@
end
end
```
```erb
-<%= render(ModalComponent, header: "Hi!") do |component| %>
+<%= render(ModalComponent.new(header: "Hi!")) do |component| %>
<% help_enabled? && component.with(:header) do %>
<span class="help_icon"><%= component.header %></span>
<% end %>
<% component.with(:body) do %>
<p>Have a great day.</p>
@@ -290,11 +260,11 @@
end
```
`app/views/render_arg.html.erb`:
```erb
-<%= render(ModalComponent, header: "Hi!") do |component| %>
+<%= render(ModalComponent.new(header: "Hi!")) do |component| %>
<% component.with(:body) do %>
<p>Have a great day.</p>
<% end %>
<% end %>
```
@@ -336,20 +306,20 @@
</div>
```
`app/views/render_arg.html.erb`:
```erb
-<%= render(ModalComponent, header: "Hi!") do |component| %>
+<%= render(ModalComponent.new(header: "Hi!")) do |component| %>
<% component.with(:body) do %>
<p>Have a great day.</p>
<% end %>
<% end %>
```
`app/views/with_block.html.erb`:
```erb
-<%= render(ModalComponent) do |component| %>
+<%= render(ModalComponent.new) do |component| %>
<% component.with(:header) do %>
<span class="help_icon">Hello</span>
<% end %>
<% component.with(:body) do %>
<p>Have a great day.</p>
@@ -357,11 +327,11 @@
<% end %>
```
`app/views/no_header.html.erb`:
```erb
-<%= render(ModalComponent) do |component| %>
+<%= render(ModalComponent.new) do |component| %>
<% component.with(:body) do %>
<p>Have a great day.</p>
<% end %>
<% end %>
```
@@ -384,11 +354,11 @@
or the view that renders the component:
```erb
<!-- app/views/_banners.html.erb -->
<% if current_user.requires_confirmation? %>
- <%= render(ConfirmEmailComponent, user: current_user) %>
+ <%= render(ConfirmEmailComponent.new(user: current_user)) %>
<% end %>
```
The `#render?` hook allows you to move this logic into the Ruby class, leaving your views more readable and declarative in style:
@@ -412,11 +382,11 @@
</div>
```
```erb
<!-- app/views/_banners.html.erb -->
-<%= render(ConfirmEmailComponent, user: current_user) %>
+<%= render(ConfirmEmailComponent.new(user: current_user)) %>
```
### Testing
Components are unit tested directly. The `render_inline` test helper wraps the result in `Nokogiri.HTML`, allowing us to test the component above as:
@@ -426,11 +396,11 @@
class MyComponentTest < ActionView::Component::TestCase
test "render component" do
assert_equal(
%(<span title="my title">Hello, World!</span>),
- render_inline(TestComponent, title: "my title") { "Hello, World!" }.to_html
+ render_inline(TestComponent.new(title: "my title")) { "Hello, World!" }.to_html
)
end
end
```
@@ -443,11 +413,11 @@
```ruby
test "render component for tablet" do
with_variant :tablet do
assert_equal(
%(<span title="my title">Hello, tablets!</span>),
- render_inline(TestComponent, title: "my title") { "Hello, tablets!" }.css("span").to_html
+ render_inline(TestComponent.new(title: "my title")) { "Hello, tablets!" }.css("span").to_html
)
end
end
```
@@ -460,14 +430,14 @@
```ruby
# test/components/previews/test_component_preview.rb
class TestComponentPreview < ActionView::Component::Preview
def with_default_title
- render(TestComponent, title: "Test component default")
+ render(TestComponent.new(title: "Test component default"))
end
def with_long_title
- render(TestComponent, title: "This is a really long title to see how the component renders this")
+ render(TestComponent.new(title: "This is a really long title to see how the component renders this"))
end
end
```
The previews will be available in <http://localhost:3000/rails/components/test_component/with_default_title>