view_component 2.2.1 → 2.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a0dcab293971e6a9548226ecf4120a35eae4ea32765bef59b3cc2d8dd92d376f
-  data.tar.gz: 803b0167794db25dcb023e93dfdfcbd2af3d9442b94885abaf88d66d436986a8
+  metadata.gz: ead17ef5662526a74a4aa9547ba94b86dc9e4d30985ed44ab2d6ab8bdbbfd10b
+  data.tar.gz: 85013db59afe8594749a400205d2b94c3f7314a144c256081825e29125511dc9
 SHA512:
-  metadata.gz: d643fb3348dfcc799eabd1f066a46530df1181f0e868ce10eaa32112c48929132cd0069460a8f986d15094a1e6b74767ff41361acc01f78d6c31bf25599d40eb
-  data.tar.gz: 9c897a455c1fd51d887e0c0de9648a5b98e2cbabe4d70b1d37f06944ba31fcaba6def9a13b3ffdc81ef65118f5927fd03f3703f6bef99bb4830fbb1a89ff2ab5
+  metadata.gz: ab3c8366510c44a48473d9fa1186c823b1576b51e4aef745869adc033f254cfa4c0eea8e40ee1c9ce82f394150669958db3b25a430cb6bdade085edb18bd458c
+  data.tar.gz: 7c1767eb36013da60db2b6a0feb9af340a571573ecbd7b4552cf3c8c1ec4de019e852832a95123c4067c56db6602c1ab8e12c85ac6e55e3c2a68904db7d0ddef

data/CHANGELOG.md

@@ -1,5 +1,11 @@
 # master
 
+# v2.2.2
+
+* Add `Base.format` for better compatibility with `ActionView::Template`.
+
+    *Joel Hawksley*
+
 # v2.2.1
 
 * Fix bug where template could not be found if `inherited` was redefined.

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    view_component (2.2.1)
+    view_component (2.2.2)
       capybara (~> 3)
 
 GEM
@@ -74,7 +74,7 @@ GEM
       parser (>= 2.4)
       smart_properties
     builder (3.2.4)
-    capybara (3.32.0)
+    capybara (3.32.1)
       addressable
       mini_mime (>= 0.1.3)
       nokogiri (~> 1.8)
@@ -112,7 +112,7 @@ GEM
     parallel (1.19.1)
     parser (2.7.0.5)
       ast (~> 2.4.0)
-    public_suffix (4.0.3)
+    public_suffix (4.0.4)
     rack (2.2.2)
     rack-test (1.1.0)
       rack (>= 1.0, < 3)

data/README.md

@@ -316,6 +316,137 @@ end
 </li>
 ```
 
+### Sidecar assets (experimental)
+
+We're experimenting with including Javascript and CSS alongside components, sometimes called "sidecar" assets or files.
+
+To use the Webpacker gem to compile sidecar assets located in `app/components`:
+
+1. 1. In `config/webpacker.yml`, add `"app/components"` to the `resolved_paths` array (e.g. `resolved_paths: ["app/components"]`).
+2. In the Webpack entry file (often `app/javascript/packs/application.js`), add an import statement to a helper file, and in the helper file, import the components' Javascript:
+
+Near the top the entry file, add:
+
+```js
+import "../components"
+```
+
+Then add the following to a new file `app/javascript/components.js`:
+
+```js
+function importAll(r) {
+  r.keys().forEach(r)
+}
+
+importAll(require.context("../components", true, /_component.js$/))
+```
+
+Any file with the `_component.js` suffix, for example `app/components/widget_component.js`, will get compiled into the Webpack bundle. If that file itself imports another file, for example `app/components/widget_component.css`, that will also get compiled and bundled into Webpack's output stylesheet if Webpack is being used for styles.
+
+#### Encapsulating sidecar assets
+
+Ideally, sidecar Javascript/CSS should not "leak" out of the context of its associated component.
+
+One approach is to use Web Components, which contain all Javascript functionality, internal markup, and styles within the shadow root of the Web Component.
+
+For example:
+
+`app/components/comment_component.rb`
+```ruby
+class CommentComponent < ViewComponent::Base
+  def initialize(comment:)
+    @comment = comment
+  end
+
+  def commenter
+    @comment.user
+  end
+
+  def commenter_name
+    commenter.name
+  end
+
+  def avatar
+    commenter.avatar_image_url
+  end
+
+  def formatted_body
+    simple_format(@comment.body)
+  end
+
+  private
+
+  attr_reader :comment
+end
+```
+
+`app/components/comment_component.html.erb`
+```erb
+<my-comment comment-id="<%= comment.id %>">
+  <time slot="posted" datetime="<%= comment.created_at.iso8601 %>"><%= comment.created_at.strftime("%b %-d") %></time>
+
+  <div slot="avatar"><img src="<%= avatar %>" /></div>
+
+  <div slot="author"><%= commenter_name %></div>
+
+  <div slot="body"><%= formatted_body %></div>
+</my-comment>
+```
+
+`app/components/comment_component.js`
+```js
+class Comment extends HTMLElement {
+  styles() {
+    return `
+      :host {
+        display: block;
+      }
+      ::slotted(time) {
+        float: right;
+        font-size: 0.75em;
+      }
+      .commenter { font-weight: bold; }
+      .body { … }
+    `
+  }
+
+  constructor() {
+    super()
+    const shadow = this.attachShadow({mode: 'open'});
+    shadow.innerHTML = `
+      <style>
+        ${this.styles()}
+      </style>
+      <slot name="posted"></slot>
+      <div class="commenter">
+        <slot name="avatar"></slot> <slot name="author"></slot>
+      </div>
+      <div class="body">
+        <slot name="body"></slot>
+      </div>
+    `
+  }
+}
+customElements.define('my-comment', Comment)
+```
+
+##### Stimulus
+
+In Stimulus, create a 1:1 mapping between a Stimulus controller and a component. In order to load in Stimulus controllers from the `app/components` tree, amend the Stimulus boot code in `app/javascript/packs/application.js`:
+
+```js
+const application = Application.start()
+const context = require.context("controllers", true, /.js$/)
+const context_components = require.context("../../components", true, /_controller.js$/)
+application.load(
+  definitionsFromContext(context).concat(
+    definitionsFromContext(context_components)
+  )
+)
+```
+
+This will allow you to create files such as `app/components/widget_controller.js`, where the controller identifier matches the `data-controller` attribute in the component's HTML template.
+
 ### Testing
 
 Unit test components directly, using the `render_inline` test helper and Capybara matchers:
@@ -454,6 +585,8 @@ Inline templates have been removed (for now) due to concerns raised by [@soutaro
 
 ## Resources
 
+- [Components, HAML vs ERB, and Design Systems](https://the-ruby-blend.fireside.fm/4)
+- [Choosing the Right Tech Stack with Dave Paola](https://5by5.tv/rubyonrails/307)
 - [Rethinking the View Layer with Components, RailsConf 2019](https://www.youtube.com/watch?v=y5Z5a6QdA-M)
 - [Introducing ActionView::Component with Joel Hawksley, Ruby on Rails Podcast](http://5by5.tv/rubyonrails/276)
 - [Rails to Introduce View Components, Dev.to](https://dev.to/andy/rails-to-introduce-view-components-3ome)
@@ -493,10 +626,10 @@ Bug reports and pull requests are welcome on GitHub at https://github.com/github
 |@mellowfish|@horacio|@dukex|@dark-panda|@smashwilson|
 |Spring Hill, TN|Buenos Aires|São Paulo||Gambrills, MD|
 
-|<img src="https://avatars.githubusercontent.com/blakewilliams?s=256" alt="blakewilliams" width="128" />|<img src="https://avatars.githubusercontent.com/seanpdoyle?s=256" alt="seanpdoyle" width="128" />|<img src="https://avatars.githubusercontent.com/tclem?s=256" alt="tclem" width="128" />|<img src="https://avatars.githubusercontent.com/nashby?s=256" alt="nashby" width="128" />
-|:---:|:---:|:---:|:---:|
-|@blakewilliams|@seanpdoyle|@tclem|@nashby|
-|Boston, MA|New York, NY|San Francisco, CA|Minsk|
+|<img src="https://avatars.githubusercontent.com/blakewilliams?s=256" alt="blakewilliams" width="128" />|<img src="https://avatars.githubusercontent.com/seanpdoyle?s=256" alt="seanpdoyle" width="128" />|<img src="https://avatars.githubusercontent.com/tclem?s=256" alt="tclem" width="128" />|<img src="https://avatars.githubusercontent.com/nashby?s=256" alt="nashby" width="128" />|<img src="https://avatars.githubusercontent.com/jaredcwhite?s=256" alt="jaredcwhite" width="128" />|
+|:---:|:---:|:---:|:---:|:---:|
+|@blakewilliams|@seanpdoyle|@tclem|@nashby|@jaredcwhite|
+|Boston, MA|New York, NY|San Francisco, CA|Minsk|Portland, OR|
 
 ## License
 

data/lib/view_component/base.rb

@@ -220,6 +220,10 @@ module ViewComponent
         "text/html"
       end
 
+      def format
+        :html
+      end
+
       def identifier
         source_location
       end

data/lib/view_component/version.rb

@@ -4,7 +4,7 @@ module ViewComponent
   module VERSION
     MAJOR = 2
     MINOR = 2
-    PATCH = 1
+    PATCH = 2
 
     STRING = [MAJOR, MINOR, PATCH].join(".")
   end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: view_component
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.2.2
 platform: ruby
 authors:
 - GitHub Open Source
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2020-04-01 00:00:00.000000000 Z
+date: 2020-04-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: capybara