view_component 2.2.1 → 2.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.


This version of view_component might be problematic. Click here for more details.

checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a0dcab293971e6a9548226ecf4120a35eae4ea32765bef59b3cc2d8dd92d376f
4
- data.tar.gz: 803b0167794db25dcb023e93dfdfcbd2af3d9442b94885abaf88d66d436986a8
3
+ metadata.gz: ead17ef5662526a74a4aa9547ba94b86dc9e4d30985ed44ab2d6ab8bdbbfd10b
4
+ data.tar.gz: 85013db59afe8594749a400205d2b94c3f7314a144c256081825e29125511dc9
5
5
  SHA512:
6
- metadata.gz: d643fb3348dfcc799eabd1f066a46530df1181f0e868ce10eaa32112c48929132cd0069460a8f986d15094a1e6b74767ff41361acc01f78d6c31bf25599d40eb
7
- data.tar.gz: 9c897a455c1fd51d887e0c0de9648a5b98e2cbabe4d70b1d37f06944ba31fcaba6def9a13b3ffdc81ef65118f5927fd03f3703f6bef99bb4830fbb1a89ff2ab5
6
+ metadata.gz: ab3c8366510c44a48473d9fa1186c823b1576b51e4aef745869adc033f254cfa4c0eea8e40ee1c9ce82f394150669958db3b25a430cb6bdade085edb18bd458c
7
+ data.tar.gz: 7c1767eb36013da60db2b6a0feb9af340a571573ecbd7b4552cf3c8c1ec4de019e852832a95123c4067c56db6602c1ab8e12c85ac6e55e3c2a68904db7d0ddef
@@ -1,5 +1,11 @@
1
1
  # master
2
2
 
3
+ # v2.2.2
4
+
5
+ * Add `Base.format` for better compatibility with `ActionView::Template`.
6
+
7
+ *Joel Hawksley*
8
+
3
9
  # v2.2.1
4
10
 
5
11
  * Fix bug where template could not be found if `inherited` was redefined.
@@ -1,7 +1,7 @@
1
1
  PATH
2
2
  remote: .
3
3
  specs:
4
- view_component (2.2.1)
4
+ view_component (2.2.2)
5
5
  capybara (~> 3)
6
6
 
7
7
  GEM
@@ -74,7 +74,7 @@ GEM
74
74
  parser (>= 2.4)
75
75
  smart_properties
76
76
  builder (3.2.4)
77
- capybara (3.32.0)
77
+ capybara (3.32.1)
78
78
  addressable
79
79
  mini_mime (>= 0.1.3)
80
80
  nokogiri (~> 1.8)
@@ -112,7 +112,7 @@ GEM
112
112
  parallel (1.19.1)
113
113
  parser (2.7.0.5)
114
114
  ast (~> 2.4.0)
115
- public_suffix (4.0.3)
115
+ public_suffix (4.0.4)
116
116
  rack (2.2.2)
117
117
  rack-test (1.1.0)
118
118
  rack (>= 1.0, < 3)
data/README.md CHANGED
@@ -316,6 +316,137 @@ end
316
316
  </li>
317
317
  ```
318
318
 
319
+ ### Sidecar assets (experimental)
320
+
321
+ We're experimenting with including Javascript and CSS alongside components, sometimes called "sidecar" assets or files.
322
+
323
+ To use the Webpacker gem to compile sidecar assets located in `app/components`:
324
+
325
+ 1. 1. In `config/webpacker.yml`, add `"app/components"` to the `resolved_paths` array (e.g. `resolved_paths: ["app/components"]`).
326
+ 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:
327
+
328
+ Near the top the entry file, add:
329
+
330
+ ```js
331
+ import "../components"
332
+ ```
333
+
334
+ Then add the following to a new file `app/javascript/components.js`:
335
+
336
+ ```js
337
+ function importAll(r) {
338
+ r.keys().forEach(r)
339
+ }
340
+
341
+ importAll(require.context("../components", true, /_component.js$/))
342
+ ```
343
+
344
+ 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.
345
+
346
+ #### Encapsulating sidecar assets
347
+
348
+ Ideally, sidecar Javascript/CSS should not "leak" out of the context of its associated component.
349
+
350
+ One approach is to use Web Components, which contain all Javascript functionality, internal markup, and styles within the shadow root of the Web Component.
351
+
352
+ For example:
353
+
354
+ `app/components/comment_component.rb`
355
+ ```ruby
356
+ class CommentComponent < ViewComponent::Base
357
+ def initialize(comment:)
358
+ @comment = comment
359
+ end
360
+
361
+ def commenter
362
+ @comment.user
363
+ end
364
+
365
+ def commenter_name
366
+ commenter.name
367
+ end
368
+
369
+ def avatar
370
+ commenter.avatar_image_url
371
+ end
372
+
373
+ def formatted_body
374
+ simple_format(@comment.body)
375
+ end
376
+
377
+ private
378
+
379
+ attr_reader :comment
380
+ end
381
+ ```
382
+
383
+ `app/components/comment_component.html.erb`
384
+ ```erb
385
+ <my-comment comment-id="<%= comment.id %>">
386
+ <time slot="posted" datetime="<%= comment.created_at.iso8601 %>"><%= comment.created_at.strftime("%b %-d") %></time>
387
+
388
+ <div slot="avatar"><img src="<%= avatar %>" /></div>
389
+
390
+ <div slot="author"><%= commenter_name %></div>
391
+
392
+ <div slot="body"><%= formatted_body %></div>
393
+ </my-comment>
394
+ ```
395
+
396
+ `app/components/comment_component.js`
397
+ ```js
398
+ class Comment extends HTMLElement {
399
+ styles() {
400
+ return `
401
+ :host {
402
+ display: block;
403
+ }
404
+ ::slotted(time) {
405
+ float: right;
406
+ font-size: 0.75em;
407
+ }
408
+ .commenter { font-weight: bold; }
409
+ .body { … }
410
+ `
411
+ }
412
+
413
+ constructor() {
414
+ super()
415
+ const shadow = this.attachShadow({mode: 'open'});
416
+ shadow.innerHTML = `
417
+ <style>
418
+ ${this.styles()}
419
+ </style>
420
+ <slot name="posted"></slot>
421
+ <div class="commenter">
422
+ <slot name="avatar"></slot> <slot name="author"></slot>
423
+ </div>
424
+ <div class="body">
425
+ <slot name="body"></slot>
426
+ </div>
427
+ `
428
+ }
429
+ }
430
+ customElements.define('my-comment', Comment)
431
+ ```
432
+
433
+ ##### Stimulus
434
+
435
+ 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`:
436
+
437
+ ```js
438
+ const application = Application.start()
439
+ const context = require.context("controllers", true, /.js$/)
440
+ const context_components = require.context("../../components", true, /_controller.js$/)
441
+ application.load(
442
+ definitionsFromContext(context).concat(
443
+ definitionsFromContext(context_components)
444
+ )
445
+ )
446
+ ```
447
+
448
+ 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.
449
+
319
450
  ### Testing
320
451
 
321
452
  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
454
585
 
455
586
  ## Resources
456
587
 
588
+ - [Components, HAML vs ERB, and Design Systems](https://the-ruby-blend.fireside.fm/4)
589
+ - [Choosing the Right Tech Stack with Dave Paola](https://5by5.tv/rubyonrails/307)
457
590
  - [Rethinking the View Layer with Components, RailsConf 2019](https://www.youtube.com/watch?v=y5Z5a6QdA-M)
458
591
  - [Introducing ActionView::Component with Joel Hawksley, Ruby on Rails Podcast](http://5by5.tv/rubyonrails/276)
459
592
  - [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
493
626
  |@mellowfish|@horacio|@dukex|@dark-panda|@smashwilson|
494
627
  |Spring Hill, TN|Buenos Aires|São Paulo||Gambrills, MD|
495
628
 
496
- |<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" />
497
- |:---:|:---:|:---:|:---:|
498
- |@blakewilliams|@seanpdoyle|@tclem|@nashby|
499
- |Boston, MA|New York, NY|San Francisco, CA|Minsk|
629
+ |<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" />|
630
+ |:---:|:---:|:---:|:---:|:---:|
631
+ |@blakewilliams|@seanpdoyle|@tclem|@nashby|@jaredcwhite|
632
+ |Boston, MA|New York, NY|San Francisco, CA|Minsk|Portland, OR|
500
633
 
501
634
  ## License
502
635
 
@@ -220,6 +220,10 @@ module ViewComponent
220
220
  "text/html"
221
221
  end
222
222
 
223
+ def format
224
+ :html
225
+ end
226
+
223
227
  def identifier
224
228
  source_location
225
229
  end
@@ -4,7 +4,7 @@ module ViewComponent
4
4
  module VERSION
5
5
  MAJOR = 2
6
6
  MINOR = 2
7
- PATCH = 1
7
+ PATCH = 2
8
8
 
9
9
  STRING = [MAJOR, MINOR, PATCH].join(".")
10
10
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: view_component
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.2.1
4
+ version: 2.2.2
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: exe
10
10
  cert_chain: []
11
- date: 2020-04-01 00:00:00.000000000 Z
11
+ date: 2020-04-07 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: capybara