README.md in actionview-component-1.4.0 vs README.md in actionview-component-1.5.0

- old
+ new

@@ -30,11 +30,11 @@ ``` In `config/application.rb`, add: ```bash -require "action_view/component/base" +require "action_view/component" ``` ## Guide ### What are components? @@ -95,14 +95,30 @@ Components are subclasses of `ActionView::Component::Base` and live in `app/components`. You may wish to create an `ApplicationComponent` that is a subclass of `ActionView::Component::Base` and inherit from that instead. Component class names end in -`Component`. +Component module names are plural, as they are for controllers. (`Users::AvatarComponent`) + Components support ActiveModel validations. Components are validated after initialization, but before rendering. Content passed to an `ActionView::Component` as a block is captured and assigned to the `content` accessor. +#### Quick start + +Use the component generator to create a new `ActionView::Component`. + +The generator accepts the component name and the list of accepted properties as arguments: + +```bash +bin/rails generate component Example title content + invoke test_unit + create test/components/example_component_test.rb + create app/components/example_component.rb + create app/components/example_component.html.erb +``` + #### Implementation An `ActionView::Component` is a Ruby file and corresponding template file (in any format supported by Rails) with the same base name: `app/components/test_component.rb`: @@ -197,9 +213,52 @@ %(<span title="my title">Hello, tablets!</span>), render_inline(TestComponent, title: "my title") { "Hello, tablets!" }.css("span").to_html ) end end +``` + +### Previewing Components +`ActionView::Component::Preview`s provide a way to see how components look by visiting a special URL that renders them. +In the previous example, the preview class for `TestComponent` would be called `TestComponentPreview` and located in `test/components/previews/test_component_preview.rb`. +To see the preview of the component with a given title, implement a method that renders the component. +You can define as many examples as you want: + +```ruby +# test/components/previews/test_component_preview.rb + +class TestComponentPreview < ActionView::Component::Preview + def with_default_title + render(TestComponent, 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") + end +end +``` + +The previews will be available in <http://localhost:3000/rails/components/test_component/with_default_title> +and <http://localhost:3000/rails/components/test_component/with_long_title>. + +Previews use the application layout by default, but you can also use other layouts from your app: + +```ruby +# test/components/previews/test_component_preview.rb + +class TestComponentPreview < ActionView::Component::Preview + layout "admin" + + ... +end +``` + +By default, the preview classes live in `test/components/previews`. +This can be configured using the `preview_path` option. +For example, if you want to use `lib/component_previews`, set the following in `config/application.rb`: + +```ruby +config.action_view_component.preview_path = "#{Rails.root}/lib/component_previews" ``` ## Frequently Asked Questions ### Can I use other templating languages besides ERB?