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 +4 -4
- data/CHANGELOG.md +6 -0
- data/Gemfile.lock +3 -3
- data/README.md +137 -4
- data/lib/view_component/base.rb +4 -0
- data/lib/view_component/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: ead17ef5662526a74a4aa9547ba94b86dc9e4d30985ed44ab2d6ab8bdbbfd10b
|
4
|
+
data.tar.gz: 85013db59afe8594749a400205d2b94c3f7314a144c256081825e29125511dc9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: ab3c8366510c44a48473d9fa1186c823b1576b51e4aef745869adc033f254cfa4c0eea8e40ee1c9ce82f394150669958db3b25a430cb6bdade085edb18bd458c
|
7
|
+
data.tar.gz: 7c1767eb36013da60db2b6a0feb9af340a571573ecbd7b4552cf3c8c1ec4de019e852832a95123c4067c56db6602c1ab8e12c85ac6e55e3c2a68904db7d0ddef
|
data/CHANGELOG.md
CHANGED
data/Gemfile.lock
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
PATH
|
2
2
|
remote: .
|
3
3
|
specs:
|
4
|
-
view_component (2.2.
|
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.
|
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.
|
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
|
|
data/lib/view_component/base.rb
CHANGED
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.
|
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-
|
11
|
+
date: 2020-04-07 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: capybara
|