actioncomponent 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +54 -1
- data/actioncomponent.gemspec +1 -1
- data/lib/actioncomponent.rb +2 -1
- data/lib/actioncomponent/component/renderer.rb +9 -2
- data/lib/actioncomponent/railtie.rb +3 -3
- metadata +1 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c7936977301d2d22392549e943a1e9fcc190b58113313a391f3554fe0edf081d
|
4
|
+
data.tar.gz: f2efb964bbe886ad4d4cac2aaaabef6347f1637509e7ee43abb8c570abacfcb7
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 65a09a93136aff38f3b82bac622fb0ecc5c3e9ea3b8912d12b159eac6a93c034582efde2bada564527b30a70780143d4926750c0989f4442c7cf492e9b096a07
|
7
|
+
data.tar.gz: cc9e6037ed5d10504c4ab4e4d1b64f8f3c2cb1c3afa7d57f5aa0a398719b5b0cefd3fe90ed775ab1377ae339868cfdb54915b1f88b6dd4951d9c9bdfb66a024b
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
Â# Welcome to actioncomponent gem
|
2
2
|
|
3
3
|
[![Travis](https://travis-ci.org/viniciusoyama/action_component.svg?branch=master)](https://travis-ci.org/viniciusoyama/action_component)
|
4
4
|
[![Code Climate](https://codeclimate.com/github/viniciusoyama/action_component/badges/gpa.svg)](https://codeclimate.com/github/viniciusoyama/action_component)
|
@@ -24,8 +24,11 @@ app
|
|
24
24
|
│ └── user
|
25
25
|
│ └── filter
|
26
26
|
│ └── template.html.erb
|
27
|
+
│ └── view_model.rb
|
28
|
+
│ └── style.sass
|
27
29
|
│ └── list
|
28
30
|
│ └── template.html.erb
|
31
|
+
│ └── style.sass
|
29
32
|
```
|
30
33
|
|
31
34
|
|
@@ -238,6 +241,56 @@ end
|
|
238
241
|
<%= formated_page %>
|
239
242
|
```
|
240
243
|
|
244
|
+
# Style namespacing
|
245
|
+
|
246
|
+
Each rendered component will be wrapped inside a div with a dynamic data attribute according to the component path. This means that you can create custom css for each component. Example:
|
247
|
+
|
248
|
+
|
249
|
+
```
|
250
|
+
app
|
251
|
+
├── components
|
252
|
+
│ └── user_page
|
253
|
+
│ └── header
|
254
|
+
│ └── template.html.erb
|
255
|
+
```
|
256
|
+
|
257
|
+
If we render the header inside a component it will generate a HTML like this
|
258
|
+
|
259
|
+
```html
|
260
|
+
|
261
|
+
<div class='action-component' data-action-component-id='user_page-header'>
|
262
|
+
...
|
263
|
+
...
|
264
|
+
</div>
|
265
|
+
|
266
|
+
```
|
267
|
+
|
268
|
+
Then you can customize the component with the following css:
|
269
|
+
|
270
|
+
```css
|
271
|
+
[data-action-component-id=project-index] {
|
272
|
+
background: red;
|
273
|
+
}
|
274
|
+
```
|
275
|
+
|
276
|
+
## Where do I put my CSS files?
|
277
|
+
|
278
|
+
Where it belongs: in your component folder. It doens't matter the name or de number of css/sass/less files that you have... Just don't forget to namespace it!
|
279
|
+
|
280
|
+
Also in your application.css file you should require all the css from the component folder. You can do that with a relative `require_tree`. Like this:
|
281
|
+
|
282
|
+
**application.sass**
|
283
|
+
|
284
|
+
```sass
|
285
|
+
//*=require_tree ../../../components
|
286
|
+
@import "fullcalendar.min"
|
287
|
+
@import "bootstrap"
|
288
|
+
@import "datepicker"
|
289
|
+
|
290
|
+
// ...
|
291
|
+
```
|
292
|
+
|
293
|
+
|
241
294
|
|
242
295
|
# Configuration
|
243
296
|
|
data/actioncomponent.gemspec
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
Gem::Specification.new do |s|
|
2
2
|
s.name = 'actioncomponent'
|
3
|
-
s.version = '0.
|
3
|
+
s.version = '0.2.0'
|
4
4
|
s.date = '2019-03-21'
|
5
5
|
s.summary = 'Stop using views: frontend components architecture for Ruby on Rails'
|
6
6
|
s.description = 'Stop using views: frontend components architecture for Ruby on Rails'
|
data/lib/actioncomponent.rb
CHANGED
@@ -2,7 +2,6 @@ require 'actioncomponent/importer_helper'
|
|
2
2
|
require 'actioncomponent/component'
|
3
3
|
require 'actioncomponent/component/view_model'
|
4
4
|
require 'actioncomponent/component/renderer'
|
5
|
-
require 'actioncomponent/railtie'
|
6
5
|
|
7
6
|
module ActionComponent
|
8
7
|
# Configuration class for ActionComponent
|
@@ -28,3 +27,5 @@ module ActionComponent
|
|
28
27
|
yield(configuration)
|
29
28
|
end
|
30
29
|
end
|
30
|
+
|
31
|
+
require 'actioncomponent/railtie'
|
@@ -1,7 +1,7 @@
|
|
1
1
|
module ActionComponent
|
2
2
|
# Renders a given component
|
3
3
|
class Component
|
4
|
-
class Renderer < ActionView::
|
4
|
+
class Renderer < ActionView::TemplateRenderer
|
5
5
|
class ComponentTemplateFileNotFound < StandardError; end
|
6
6
|
|
7
7
|
attr_reader :view_model
|
@@ -13,12 +13,19 @@ module ActionComponent
|
|
13
13
|
|
14
14
|
def render(component_path:)
|
15
15
|
file_path = template_path_from_component_path(component_path)
|
16
|
-
super(view_model, file: file_path)
|
16
|
+
rendered = super(view_model, file: file_path)
|
17
|
+
rendered = apply_html_namespacing(rendered, component_path)
|
18
|
+
ActionView::OutputBuffer.new(rendered)
|
17
19
|
end
|
18
20
|
|
19
21
|
def template_path_from_component_path(component_path, template_file_name: ActionComponent.configuration.template_file_name)
|
20
22
|
File.join(component_path, template_file_name).to_s
|
21
23
|
end
|
24
|
+
|
25
|
+
def apply_html_namespacing(raw_html, component_path)
|
26
|
+
component_id = component_path.gsub(%r{^/}, '').tr('/', '-')
|
27
|
+
"<div class='action-component' data-action-component-id='#{component_id}'>" + raw_html + '</div>'.html_safe
|
28
|
+
end
|
22
29
|
end
|
23
30
|
end
|
24
31
|
end
|
@@ -1,10 +1,10 @@
|
|
1
1
|
require 'rails/railtie'
|
2
|
-
|
2
|
+
require 'byebug'
|
3
3
|
class ViewComponent
|
4
4
|
class Rails < Rails::Railtie
|
5
|
-
config.view_component = ActiveSupport::OrderedOptions.new
|
6
|
-
|
7
5
|
initializer 'view_component' do
|
6
|
+
config.assets.paths << ::Rails.root.join(ActionComponent.configuration.components_path)
|
7
|
+
|
8
8
|
::ActionView::Base.send(:include, ActionComponent::ImporterHelper)
|
9
9
|
end
|
10
10
|
end
|