actioncomponent 0.1.1 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 76be070b5053ecc8da9c380f2e13946d9955b2dd3eeaa76f08d3dfe48031ea80
-  data.tar.gz: 48545e6160b1667d4af0fa0686bb60bb11130ee67d67a46686d1988ef25c7242
+  metadata.gz: c7936977301d2d22392549e943a1e9fcc190b58113313a391f3554fe0edf081d
+  data.tar.gz: f2efb964bbe886ad4d4cac2aaaabef6347f1637509e7ee43abb8c570abacfcb7
 SHA512:
-  metadata.gz: d04b7b700b5cb1a6fae38baa9a7bcaa5e4a7f1b65690de597ab599c8b3e514122f83830f0bc41bd985c7fea459e59f010e6b2a571bdcf4e935d155c03fb7ca29
-  data.tar.gz: 4b7a9dbc8c5f30951c1c1d2bd110cb277d291f591dc46dad8704f35c36b7f09f8d067e10b7fcd9ace15b441d45a42958ed4b3683c81d4781f2384fd8f4b12680
+  metadata.gz: 65a09a93136aff38f3b82bac622fb0ecc5c3e9ea3b8912d12b159eac6a93c034582efde2bada564527b30a70780143d4926750c0989f4442c7cf492e9b096a07
+  data.tar.gz: cc9e6037ed5d10504c4ab4e4d1b64f8f3c2cb1c3afa7d57f5aa0a398719b5b0cefd3fe90ed775ab1377ae339868cfdb54915b1f88b6dd4951d9c9bdfb66a024b

data/README.md

@@ -1,4 +1,4 @@
-# Welcome to actioncomponent gem
+Â# Welcome to actioncomponent gem
 
 [![Travis](https://travis-ci.org/viniciusoyama/action_component.svg?branch=master)](https://travis-ci.org/viniciusoyama/action_component)
 [![Code Climate](https://codeclimate.com/github/viniciusoyama/action_component/badges/gpa.svg)](https://codeclimate.com/github/viniciusoyama/action_component)
@@ -24,8 +24,11 @@ app
 │   └── user
 │       └── filter
 │           └── template.html.erb
+│           └── view_model.rb
+│           └── style.sass
 │       └── list
 │           └── template.html.erb
+│           └── style.sass
 ```
 
 
@@ -238,6 +241,56 @@ end
 <%= formated_page %>
 ```
 
+# Style namespacing
+
+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:
+
+
+```
+app
+├── components
+│   └── user_page
+│       └── header
+│           └── template.html.erb
+```
+
+If we render the header inside a component it will generate a HTML like this
+
+```html
+
+<div class='action-component' data-action-component-id='user_page-header'>
+  ...
+  ...
+</div>
+
+```
+
+Then you can customize the component with the following css:
+
+```css
+[data-action-component-id=project-index] {
+  background: red;
+}
+```
+
+## Where do I put my CSS files?
+
+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!
+
+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:
+
+**application.sass**
+
+```sass
+//*=require_tree ../../../components
+@import "fullcalendar.min"
+@import "bootstrap"
+@import "datepicker"
+
+// ...
+```
+
+
 
 # Configuration
 

data/actioncomponent.gemspec

@@ -1,6 +1,6 @@
 Gem::Specification.new do |s|
   s.name        = 'actioncomponent'
-  s.version     = '0.1.1'
+  s.version     = '0.2.0'
   s.date        = '2019-03-21'
   s.summary     = 'Stop using views: frontend components architecture for Ruby on Rails'
   s.description = 'Stop using views: frontend components architecture for Ruby on Rails'

data/lib/actioncomponent.rb

@@ -2,7 +2,6 @@ require 'actioncomponent/importer_helper'
 require 'actioncomponent/component'
 require 'actioncomponent/component/view_model'
 require 'actioncomponent/component/renderer'
-require 'actioncomponent/railtie'
 
 module ActionComponent
   # Configuration class for ActionComponent
@@ -28,3 +27,5 @@ module ActionComponent
     yield(configuration)
   end
 end
+
+require 'actioncomponent/railtie'

data/lib/actioncomponent/component/renderer.rb

@@ -1,7 +1,7 @@
 module ActionComponent
   # Renders a given component
   class Component
-    class Renderer < ActionView::Renderer
+    class Renderer < ActionView::TemplateRenderer
       class ComponentTemplateFileNotFound < StandardError; end
 
       attr_reader :view_model
@@ -13,12 +13,19 @@ module ActionComponent
 
       def render(component_path:)
         file_path = template_path_from_component_path(component_path)
-        super(view_model, file: file_path)
+        rendered = super(view_model, file: file_path)
+        rendered = apply_html_namespacing(rendered, component_path)
+        ActionView::OutputBuffer.new(rendered)
       end
 
       def template_path_from_component_path(component_path, template_file_name: ActionComponent.configuration.template_file_name)
         File.join(component_path, template_file_name).to_s
       end
+
+      def apply_html_namespacing(raw_html, component_path)
+        component_id = component_path.gsub(%r{^/}, '').tr('/', '-')
+        "<div class='action-component' data-action-component-id='#{component_id}'>" + raw_html + '</div>'.html_safe
+      end
     end
   end
 end

data/lib/actioncomponent/railtie.rb

@@ -1,10 +1,10 @@
 require 'rails/railtie'
-
+require 'byebug'
 class ViewComponent
   class Rails < Rails::Railtie
-    config.view_component = ActiveSupport::OrderedOptions.new
-
     initializer 'view_component' do
+      config.assets.paths << ::Rails.root.join(ActionComponent.configuration.components_path)
+
       ::ActionView::Base.send(:include, ActionComponent::ImporterHelper)
     end
   end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: actioncomponent
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.0
 platform: ruby
 authors:
 - Vinícius Oyama