[RUBY] Introducing ActionView :: Component

github/view_component About [Rails 6.1] ActionView :: Component PR

Preparation

Terminal

rails new view_component_app -d postgresql

environment

Gemfile

ruby '2.7.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.3'
# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'

Put Slim

Gemfile

gem 'slim-rails'
gem 'html2slim'

Terminal

bundle install

Put Tailwind

ref: tailwindcss Documentation

1.Install Tailwind via npm

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

2.Add Tailwind to your CSS Added app / javascript / src / scss / application.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

Added the following to app / javascript / packs / application.js

import '../src/scss/application.scss'

3.Create your Tailwind config file (optional)

npx tailwindcss init

4.Process your CSS with Tailwind Added the following to postcss.config.js

module.exports = {
  plugins: [
    // ...
    require('tailwindcss'),
    require('autoprefixer'),
    // ...
  ]
}

Scaffold

Terminal

bin/rails g scaffold blog content:text

routes.rb

Rails.application.routes.draw do
  root 'blogs#index' #add to
  resources :blogs
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

DB creation

Terminal

bin/rails db:create
bin/rails db:migrate

Introducing ActionView :: Component

Installation

Gemfile

gem "view_component", require: "view_component/engine"

Terminal

bundle install

Sample 1

Prepare components

Terminal

-> % bin/rails generate component Example title content
Running via Spring preloader in process 24985
      create  app/components/example_component.rb
      invoke  test_unit
      create    test/components/example_component_test.rb
      invoke  slim
      create    app/components/example_component.html.slim

app/components/example_component.rb

class ExampleComponent < ViewComponent::Base
  def initialize(title:, content:)
    @title = title
    @content = content
  end
end

slim:app/components/example_component.html.slim

div
  = @title
div
  = @content

Caller

slim:app/views/blogs/index.html.slim

h1 Listing blogs

table
  thead
    tr
      th Content
      th
      th
      th

  tbody
    - @blogs.each do |blog|
      tr
        td = blog.content
        td = link_to 'Show', blog
        td = link_to 'Edit', edit_blog_path(blog)
        td = link_to 'Destroy', blog, data: { confirm: 'Are you sure?' }, method: :delete

br

= link_to 'New Blog', new_blog_path

= render(ExampleComponent.new(title: 'my title', content: 'my content'))

display

Sample 2

Prepare components

Terminal

bin/rails generate component Test title

app/components/test_component.rb

class TestComponent < ViewComponent::Base
  def initialize(title:)
    @title = title
  end
end

slim:app/components/test_component.html.slim

div
  span(title=@title)
    = content

Caller

slim:app/views/blogs/index.html.slim

h1 Listing blogs

table
  thead
    tr
      th Content
      th
      th
      th

  tbody
    - @blogs.each do |blog|
      tr
        td = blog.content
        td = link_to 'Show', blog
        td = link_to 'Edit', edit_blog_path(blog)
        td = link_to 'Destroy', blog, data: { confirm: 'Are you sure?' }, method: :delete

br

= link_to 'New Blog', new_blog_path

div.mt-3
  |Sample 1
  = render(ExampleComponent.new(title: 'my title', content: 'my content'))

div.mt-3
  |Sample 2
  = render(TestComponent.new(title: "my title")) do
    | Hellow, World!

display