subcomponent 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/MIT-LICENSE +20 -0
- data/README.md +139 -0
- data/Rakefile +3 -0
- data/app/helpers/component_helper.rb +59 -0
- data/lib/subcomponent/component.rb +209 -0
- data/lib/subcomponent/railtie.rb +9 -0
- data/lib/subcomponent/version.rb +3 -0
- data/lib/subcomponent.rb +7 -0
- data/lib/tasks/subcomponent_tasks.rake +4 -0
- metadata +69 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA256:
|
3
|
+
metadata.gz: 0e45581419c661089fedb66b9c803a42f9edc3554585c24ddc0b8fa97e26a448
|
4
|
+
data.tar.gz: e5863ed447bf64a00b37c50afb8d22ae68020ef3c6887f0872edcf1d42c0d463
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: ca8c18a231cfc387a1545e5c894903890396365d1776d6432c2d7aa702ec0e07b4e7979934476fc1b77099837349b407a5fac4888dcba4fdcd65b30c3e598d24
|
7
|
+
data.tar.gz: d8644df39b061f70c0213449f6b34e9b0f94f7cd69f8ecaa5b61388ca6cd9888e3e09e038b6b35c2631c5472b9f5dcaa66ffb8a399a356685623199b37fc83e1
|
data/MIT-LICENSE
ADDED
@@ -0,0 +1,20 @@
|
|
1
|
+
Copyright 2023 candland
|
2
|
+
|
3
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
4
|
+
a copy of this software and associated documentation files (the
|
5
|
+
"Software"), to deal in the Software without restriction, including
|
6
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
7
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
8
|
+
permit persons to whom the Software is furnished to do so, subject to
|
9
|
+
the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be
|
12
|
+
included in all copies or substantial portions of the Software.
|
13
|
+
|
14
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
15
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
16
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
17
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
18
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
19
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
20
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,139 @@
|
|
1
|
+
# Subcomponent
|
2
|
+
|
3
|
+
When you want to create HTML simple components, using partials.
|
4
|
+
|
5
|
+
## Usage
|
6
|
+
|
7
|
+
Components are stored in `app/views/components` and are named `_component.html.erb`.
|
8
|
+
They can also be stored in a subdirectory of `app/views/components` and are named using the component name for the directory and the partial `component/_component.html.erb`.
|
9
|
+
|
10
|
+
Additional subcomponent partials can be included in the component directory allowing
|
11
|
+
to break up the component into smaller pieces.
|
12
|
+
|
13
|
+
### Example Simple Component
|
14
|
+
|
15
|
+
Create a button component in `app/views/components/_button.html.erb`:
|
16
|
+
```erb
|
17
|
+
<button>
|
18
|
+
<%= this.text %>
|
19
|
+
</button>
|
20
|
+
```
|
21
|
+
|
22
|
+
Use `this` to access the component instance containing locals and subcomponents.
|
23
|
+
|
24
|
+
To use the component in a view:
|
25
|
+
```erb
|
26
|
+
<%= component :button, text: 'Click Me' %>
|
27
|
+
```
|
28
|
+
|
29
|
+
Using with the method_missing shorthand:
|
30
|
+
```erb
|
31
|
+
<%= button text: 'Click Me' %>
|
32
|
+
```
|
33
|
+
|
34
|
+
Locals can also be set within the component block:
|
35
|
+
```erb
|
36
|
+
<%= component :button do |c| %>
|
37
|
+
<% c.text = 'Click Me' %>
|
38
|
+
<% end %>
|
39
|
+
```
|
40
|
+
|
41
|
+
### Example Component with Subcomponents
|
42
|
+
|
43
|
+
Create a card component in `app/views/components/card/_card.html.erb`:
|
44
|
+
```erb
|
45
|
+
<div>
|
46
|
+
<%= this.render :title %>
|
47
|
+
<%= this.text || this.yield %>
|
48
|
+
</div>
|
49
|
+
```
|
50
|
+
|
51
|
+
Create the title subcomponent in `app/views/components/card/_title.html.erb`:
|
52
|
+
```erb
|
53
|
+
<h1>
|
54
|
+
<%= this.text %>
|
55
|
+
</h1>
|
56
|
+
```
|
57
|
+
|
58
|
+
You can use `this.render` to render a subcomponent. The subcomponent will have access
|
59
|
+
to the locals and subcomponents passed in the view.
|
60
|
+
|
61
|
+
You can use `this.yield` to render the block passed in the view.
|
62
|
+
|
63
|
+
To use the component in a view:
|
64
|
+
```erb
|
65
|
+
<%= component :card do |c| %>
|
66
|
+
<%= c.title text: 'Card Title' %>
|
67
|
+
<p>Card Text</p>
|
68
|
+
<% end %>
|
69
|
+
```
|
70
|
+
|
71
|
+
This will render:
|
72
|
+
```html
|
73
|
+
<div>
|
74
|
+
<h1>Card Title</h1>
|
75
|
+
<p>Card Text</p>
|
76
|
+
</div>
|
77
|
+
```
|
78
|
+
|
79
|
+
### Example Using Locals without method_missing.
|
80
|
+
|
81
|
+
In some cases you may want to use a local variable that
|
82
|
+
clashes with existing methods on `Object`. In these cases you can access
|
83
|
+
the locals hash directly.
|
84
|
+
```erb
|
85
|
+
<h1>
|
86
|
+
<%= this.local(:method) %>
|
87
|
+
</h1>
|
88
|
+
```
|
89
|
+
|
90
|
+
### Example Using Subcomponents without method_missing.
|
91
|
+
|
92
|
+
In some cases you may want to use a subcomponent that
|
93
|
+
clashes with existing methods on `Object`. In these cases you can access
|
94
|
+
the subcomponents hash directly.
|
95
|
+
```erb
|
96
|
+
<%= this.components(:method) %>
|
97
|
+
```
|
98
|
+
|
99
|
+
This returns and Array of subcomponents. You can render the first subcomponent with
|
100
|
+
a given key using, `this.render(:header)`.
|
101
|
+
```erb
|
102
|
+
<%= this.render(:header) %>
|
103
|
+
```
|
104
|
+
|
105
|
+
If you have multiple subcomponents with the same key, you can render them all using
|
106
|
+
`this.render_all(:header)`.
|
107
|
+
```erb
|
108
|
+
<%= this.render_all(:header) %>
|
109
|
+
```
|
110
|
+
|
111
|
+
If you want to render all subcomponents, but with HTML between them,
|
112
|
+
you can use `this.components(:actions)`.
|
113
|
+
```erb
|
114
|
+
<ul>
|
115
|
+
<% this.components(:actions).each do |sub| %>
|
116
|
+
<li><%= sub.render %></li>
|
117
|
+
<% end %>
|
118
|
+
</ul>
|
119
|
+
```
|
120
|
+
|
121
|
+
## Installation
|
122
|
+
|
123
|
+
Add this line to your application's Gemfile:
|
124
|
+
```bash
|
125
|
+
$ bundle add subcomponent
|
126
|
+
```
|
127
|
+
|
128
|
+
Or install it yourself as:
|
129
|
+
```bash
|
130
|
+
$ gem install subcomponent
|
131
|
+
```
|
132
|
+
|
133
|
+
## Contributing
|
134
|
+
|
135
|
+
Bug reports and pull requests are welcome on GitHub at [https://github.com/candland/subcomponent](https://github.com/candland/subcomponent).
|
136
|
+
|
137
|
+
## License
|
138
|
+
|
139
|
+
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).
|
data/Rakefile
ADDED
@@ -0,0 +1,59 @@
|
|
1
|
+
module ComponentHelper
|
2
|
+
# Create a component in a view.
|
3
|
+
#
|
4
|
+
# @param [Symbol] name The name of the component.
|
5
|
+
# @param [Hash] kwargs The locals to pass to the component.
|
6
|
+
# @param [Proc] block The block to pass to the component. You can use
|
7
|
+
# other components inside this block. You can set locals inside this
|
8
|
+
# block.
|
9
|
+
#
|
10
|
+
# @example
|
11
|
+
#
|
12
|
+
# = component :header do |c|
|
13
|
+
# - c.title = "Hello"
|
14
|
+
# p My Extra Content
|
15
|
+
#
|
16
|
+
def component name, **kwargs, &block
|
17
|
+
component = Component.new(name, kwargs, lookup_context, nil, block)
|
18
|
+
|
19
|
+
component._renderer = proc do |partial, locals, captured|
|
20
|
+
render partial, locals do
|
21
|
+
captured
|
22
|
+
end
|
23
|
+
end
|
24
|
+
|
25
|
+
component._capture = proc do |component, block|
|
26
|
+
if block
|
27
|
+
capture do
|
28
|
+
block.call(component)
|
29
|
+
end
|
30
|
+
end
|
31
|
+
end
|
32
|
+
|
33
|
+
component._capture_self
|
34
|
+
component._yield_renderer
|
35
|
+
end
|
36
|
+
|
37
|
+
# Alias for component.
|
38
|
+
alias_method :comp, :component
|
39
|
+
|
40
|
+
# Create a component in a view with shorthand syntax.
|
41
|
+
# This is the same as calling component with the same arguments.
|
42
|
+
#
|
43
|
+
# @example
|
44
|
+
#
|
45
|
+
# = header do |c|
|
46
|
+
# - c.title = "Hello"
|
47
|
+
#
|
48
|
+
def method_missing symbol, *args, **kwargs, &block
|
49
|
+
super unless respond_to?(symbol)
|
50
|
+
|
51
|
+
component symbol, *args, **kwargs, &block
|
52
|
+
end
|
53
|
+
|
54
|
+
# :nodoc:
|
55
|
+
def respond_to_missing? symbol, *args
|
56
|
+
lookup_context.exists?("components/#{symbol}/#{symbol}", [], true) ||
|
57
|
+
lookup_context.exists?("components/#{symbol}", [], true)
|
58
|
+
end
|
59
|
+
end
|
@@ -0,0 +1,209 @@
|
|
1
|
+
class Component
|
2
|
+
attr_accessor :_renderer
|
3
|
+
attr_accessor :_capture
|
4
|
+
|
5
|
+
# Use Component::ComponentHelper to create components.
|
6
|
+
def initialize name, locals, lookup_context, parent, block
|
7
|
+
@_name = name
|
8
|
+
@_parent = parent
|
9
|
+
@_locals = locals
|
10
|
+
@_lookup_context = lookup_context
|
11
|
+
@_block = block
|
12
|
+
|
13
|
+
@_components = {}
|
14
|
+
@_building = false
|
15
|
+
end
|
16
|
+
|
17
|
+
# Specify and use local values or sub-components using method calls.
|
18
|
+
#
|
19
|
+
# == Locals
|
20
|
+
#
|
21
|
+
# @example
|
22
|
+
#
|
23
|
+
# = component :header do |c|
|
24
|
+
# c.title = "Hello"
|
25
|
+
#
|
26
|
+
# In the component:
|
27
|
+
#
|
28
|
+
# @example
|
29
|
+
#
|
30
|
+
# = this.title
|
31
|
+
#
|
32
|
+
# @return "Hello"
|
33
|
+
#
|
34
|
+
# == Sub-components
|
35
|
+
#
|
36
|
+
# @example
|
37
|
+
#
|
38
|
+
# = component :card do |c|
|
39
|
+
# - c.header do |c|
|
40
|
+
# - c.title = "Hello"
|
41
|
+
#
|
42
|
+
# In the component:
|
43
|
+
#
|
44
|
+
# @example
|
45
|
+
#
|
46
|
+
# = this.render :header
|
47
|
+
#
|
48
|
+
# = this.header.render
|
49
|
+
#
|
50
|
+
# @return The rendered component
|
51
|
+
#
|
52
|
+
# == Checking for locals or sub-components
|
53
|
+
#
|
54
|
+
# @example
|
55
|
+
#
|
56
|
+
# = this.title?
|
57
|
+
# = this.header?
|
58
|
+
#
|
59
|
+
# @return true or false
|
60
|
+
#
|
61
|
+
def method_missing symbol, *args, **kwargs, &block
|
62
|
+
# This is used when building a component
|
63
|
+
if _building && symbol != :to_ary
|
64
|
+
if symbol.ends_with?("=") && args.length == 1
|
65
|
+
_locals[symbol[0..-2].to_sym] = args.first
|
66
|
+
else
|
67
|
+
_components[symbol] ||= []
|
68
|
+
|
69
|
+
child = Component.new(symbol, args.first || kwargs, _lookup_context, self, block)
|
70
|
+
child._renderer = _renderer
|
71
|
+
child._capture = _capture
|
72
|
+
child._capture_self
|
73
|
+
|
74
|
+
_components[symbol] << child
|
75
|
+
end
|
76
|
+
nil
|
77
|
+
|
78
|
+
# This is used when rendering a component
|
79
|
+
elsif symbol.ends_with?("?")
|
80
|
+
_locals.key?(symbol[0..-2].to_sym) || _components.key?(symbol[0..-2].to_sym)
|
81
|
+
else
|
82
|
+
_locals[symbol] || _components[symbol]
|
83
|
+
end
|
84
|
+
end
|
85
|
+
|
86
|
+
# :nodoc:
|
87
|
+
def respond_to_missing? symbol, *args
|
88
|
+
if symbol != :to_ary
|
89
|
+
true
|
90
|
+
else
|
91
|
+
super
|
92
|
+
end
|
93
|
+
end
|
94
|
+
|
95
|
+
# This is used to require local keys or sub-components.
|
96
|
+
#
|
97
|
+
# @param [Array<Symbol>] loacl_keys
|
98
|
+
#
|
99
|
+
# require :title, :body
|
100
|
+
#
|
101
|
+
def require *local_keys
|
102
|
+
missing = local_keys.reject { |k| _locals.key?(k) || _components.key?(k) }
|
103
|
+
if missing.count > 0
|
104
|
+
raise "The #{_name} component requires #{missing.join(", ")} local(s) or component(s)."
|
105
|
+
end
|
106
|
+
nil
|
107
|
+
end
|
108
|
+
|
109
|
+
# This is used to access sub-components passed to the component.
|
110
|
+
#
|
111
|
+
# @param [Symbol] key The name of the sub-component
|
112
|
+
#
|
113
|
+
# @example
|
114
|
+
#
|
115
|
+
# components :header
|
116
|
+
#
|
117
|
+
# returns: [<Component>, <Component>, ...]
|
118
|
+
#
|
119
|
+
def components key
|
120
|
+
_components[key] || []
|
121
|
+
end
|
122
|
+
|
123
|
+
# This is used to access locals passed to the component.
|
124
|
+
def local key
|
125
|
+
_locals[key]
|
126
|
+
end
|
127
|
+
|
128
|
+
# This is used to render a sub-component.
|
129
|
+
#
|
130
|
+
# From within a component:
|
131
|
+
#
|
132
|
+
# this.render :header
|
133
|
+
#
|
134
|
+
# Or calling directly on a sub-component:
|
135
|
+
#
|
136
|
+
# this.header.render
|
137
|
+
#
|
138
|
+
def render symbol = nil
|
139
|
+
if symbol.nil?
|
140
|
+
if _parent.nil?
|
141
|
+
raise "Cannot render a component without a symbol when it has a parent."
|
142
|
+
else
|
143
|
+
return _yield_renderer
|
144
|
+
end
|
145
|
+
end
|
146
|
+
_components[symbol]&.first&._yield_renderer
|
147
|
+
end
|
148
|
+
|
149
|
+
# Render all sub-components of a given name.
|
150
|
+
#
|
151
|
+
# this.render_all :header
|
152
|
+
#
|
153
|
+
# Returns a string of all rednered sub-components.
|
154
|
+
#
|
155
|
+
def render_all symbol
|
156
|
+
_components[symbol]&.map(&:_yield_renderer)&.join&.html_safe
|
157
|
+
end
|
158
|
+
|
159
|
+
# Yield the block passed to the component.
|
160
|
+
#
|
161
|
+
# this.yield
|
162
|
+
#
|
163
|
+
def yield
|
164
|
+
_captured
|
165
|
+
end
|
166
|
+
|
167
|
+
# :nodoc:
|
168
|
+
def _yield_renderer
|
169
|
+
locals = _locals.merge(this: self)
|
170
|
+
_renderer.call(_partial, locals, _captured)
|
171
|
+
end
|
172
|
+
|
173
|
+
# :nodoc:
|
174
|
+
def _capture_self
|
175
|
+
self._building = true
|
176
|
+
self._captured = _capture.call(self, _block)
|
177
|
+
ensure
|
178
|
+
self._building = false
|
179
|
+
end
|
180
|
+
|
181
|
+
protected
|
182
|
+
|
183
|
+
attr_reader :_name
|
184
|
+
attr_reader :_locals
|
185
|
+
attr_reader :_components
|
186
|
+
attr_reader :_block
|
187
|
+
attr_reader :_parent
|
188
|
+
attr_accessor :_captured
|
189
|
+
attr_reader :_lookup_context
|
190
|
+
attr_accessor :_building
|
191
|
+
|
192
|
+
# :nodoc:
|
193
|
+
def _base_name
|
194
|
+
on = self
|
195
|
+
until on._parent.nil?
|
196
|
+
on = on._parent
|
197
|
+
end
|
198
|
+
on._name
|
199
|
+
end
|
200
|
+
|
201
|
+
# :nodoc:
|
202
|
+
def _partial
|
203
|
+
@partial ||= if _lookup_context.exists?("components/#{_base_name}/#{_name}", [], true)
|
204
|
+
"components/#{_base_name}/#{_name}"
|
205
|
+
else
|
206
|
+
"components/#{_name}"
|
207
|
+
end
|
208
|
+
end
|
209
|
+
end
|
data/lib/subcomponent.rb
ADDED
metadata
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: subcomponent
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- candland
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2023-05-08 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: rails
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ">="
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '7.0'
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ">="
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '7.0'
|
27
|
+
description: Very simple parial based components.
|
28
|
+
email:
|
29
|
+
- candland@gmail.com
|
30
|
+
executables: []
|
31
|
+
extensions: []
|
32
|
+
extra_rdoc_files: []
|
33
|
+
files:
|
34
|
+
- MIT-LICENSE
|
35
|
+
- README.md
|
36
|
+
- Rakefile
|
37
|
+
- app/helpers/component_helper.rb
|
38
|
+
- lib/subcomponent.rb
|
39
|
+
- lib/subcomponent/component.rb
|
40
|
+
- lib/subcomponent/railtie.rb
|
41
|
+
- lib/subcomponent/version.rb
|
42
|
+
- lib/tasks/subcomponent_tasks.rake
|
43
|
+
homepage: https://candland.net/subcomponent
|
44
|
+
licenses:
|
45
|
+
- MIT
|
46
|
+
metadata:
|
47
|
+
homepage_uri: https://candland.net/subcomponent
|
48
|
+
source_code_uri: https://github.com/candland/subcomponent
|
49
|
+
changelog_uri: https://github.com/candland/subcomponent/CHANGELOG.md
|
50
|
+
post_install_message:
|
51
|
+
rdoc_options: []
|
52
|
+
require_paths:
|
53
|
+
- lib
|
54
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
55
|
+
requirements:
|
56
|
+
- - ">="
|
57
|
+
- !ruby/object:Gem::Version
|
58
|
+
version: '0'
|
59
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
60
|
+
requirements:
|
61
|
+
- - ">="
|
62
|
+
- !ruby/object:Gem::Version
|
63
|
+
version: '0'
|
64
|
+
requirements: []
|
65
|
+
rubygems_version: 3.3.7
|
66
|
+
signing_key:
|
67
|
+
specification_version: 4
|
68
|
+
summary: Very simple parial based components
|
69
|
+
test_files: []
|