Skip to content

Commit 45d19cb

Browse files
committed
Update documentation
1 parent 065275f commit 45d19cb

1 file changed

Lines changed: 53 additions & 18 deletions

File tree

README.md

Lines changed: 53 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# Superview
22

3-
Build Rails applications, from the ground up, using [Phlex](https://www.phlex.fun/) components, like this.
3+
Build Rails applications, from the ground up, using [Phlex](https://www.phlex.fun/) or [ViewComponent](https://viewcomponent.org/) components, like this.
44

55
```ruby
66
class PostsController < ApplicationController
@@ -17,6 +17,21 @@ class PostsController < ApplicationController
1717
end
1818
end
1919

20+
class Edit < ViewComponent::Base
21+
attr_accessor :post
22+
23+
def call
24+
<<~HTML
25+
<h1>Edit #{@post.title}</h1>
26+
<form action="<%= post_path(@post) %>" method="post">
27+
<input type="text" name="title" value="<%= @post.title %>">
28+
<textarea name="body"><%= @post.body %></textarea>
29+
<button type="submit">Save</button>
30+
</form>
31+
HTML
32+
end
33+
end
34+
2035
private
2136
def load_post
2237
@post = Post.find(params[:id])
@@ -41,11 +56,17 @@ If bundler is not being used to manage dependencies, install the gem by executin
4156

4257
## Usage
4358

44-
Install `phlex-rails` in your Rails application.
59+
Add `include Superview::Actions` to any controllers you'd like to render components as controller actions.
60+
61+
```ruby
62+
class PostsController < ApplicationController
63+
include Superview::Actions # 🚨🚨🚨 Add this to your controller 🚨🚨🚨
4564

46-
$ bin/rails generate phlex:install
65+
# Your code...
66+
end
67+
```
4768

48-
Then add `include Superview::Actions` to any controllers you'd like to render Phlex components.
69+
Then add classes to your controller that map to the actions you'd like to render. The `Show` class will render when the `PostsController#show` action is called and the `Edit` class will render when the `PostsController#edit` action is called.
4970

5071
```ruby
5172
class PostsController < ApplicationController
@@ -62,20 +83,37 @@ class PostsController < ApplicationController
6283
end
6384
end
6485

86+
class Edit < ViewComponent::Base
87+
attr_accessor :post
88+
89+
def call
90+
<<~HTML
91+
<h1>Edit #{@post.title}</h1>
92+
<form action="<%= post_path(@post) %>" method="post">
93+
<input type="text" name="title" value="<%= @post.title %>">
94+
<textarea name="body"><%= @post.body %></textarea>
95+
<button type="submit">Save</button>
96+
</form>
97+
HTML
98+
end
99+
end
100+
65101
private
66102
def load_post
67103
@post = Post.find(params[:id])
68104
end
69105
end
70106
```
71107

72-
The `Show` class will render when the `PostsController#show` action is called. To use along side other formats or render manually, you can define the `PostsController#show` as you'd expect:
108+
### Explicit rendering
109+
110+
You can explicitly render a component in a controller action method. In this example, we needed to render a the `Show` component in the `html` format and a JSON response in the `json` format.
73111

74112
```ruby
75113
class PostsController < ApplicationController
76114
include Superview::Actions
77115

78-
before_action :load_post
116+
# Your code...
79117

80118
class Show < ApplicationComponent
81119
attr_accessor :post
@@ -88,8 +126,10 @@ class PostsController < ApplicationController
88126

89127
def show
90128
respond_to do |format|
129+
# 👋 Renders the Show component
91130
format.html { render phlex }
92-
# These would also work...
131+
132+
# 👉 These would also work...
93133
# format.html { render Show.new.tap { _1.post = @post } }
94134
# format.html { render phlex Show.new }
95135
# format.html { render phlex Show }
@@ -98,10 +138,7 @@ class PostsController < ApplicationController
98138
end
99139
end
100140

101-
private
102-
def load_post
103-
@post = Post.find(params[:id])
104-
end
141+
# Your code...
105142
end
106143
```
107144

@@ -119,21 +156,19 @@ class PostsController < ApplicationController
119156
if @post.save
120157
redirect_to @post
121158
else
159+
# 👋 Renders the New component from the create action.
122160
render phlex New
123-
# These would also work...
161+
162+
# 👉 These would also work...
124163
# render New.new.tap { _1.post = @post }
125164
# render phlex New.new
126165
# render phlex New
127166
# render phlex :new
128167
end
129168
end
130169

131-
private
132-
def load_post
133-
@post = Post.find(params[:id])
134-
end
170+
# Your code...
135171
end
136-
137172
```
138173

139174
### Extracting inline views into the `./app/views` folder
@@ -161,7 +196,7 @@ Then include the `Posts` module in the controllers you'd like to use the views:
161196
```ruby
162197
class PostsController < ApplicationController
163198
include Superview::Actions
164-
include Posts # Add this to your controller 🚨
199+
include Posts # 🚨🚨🚨 Add this to your controller 🚨🚨🚨
165200

166201
before_action :load_post
167202

0 commit comments

Comments
 (0)