From 9b68a95391f306621312ba810d75f425e80c8b55 Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 09:58:02 -0700 Subject: [PATCH 1/7] remove JS and CSS docs as they proved difficult to maintain --- docs/CHANGELOG.md | 4 + docs/guide/javascript_and_css.md | 168 ------------------------------- 2 files changed, 4 insertions(+), 168 deletions(-) delete mode 100644 docs/guide/javascript_and_css.md diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 25475738c..648dbce15 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -10,6 +10,10 @@ nav_order: 5 ## main +* Remove JS and CSS docs as they proved difficult to maintain.* + + *Joel Hawksley* + * Do not prefix release tags with `v`, per recommendation from @bkuhlmann. *Joel Hawksley* diff --git a/docs/guide/javascript_and_css.md b/docs/guide/javascript_and_css.md deleted file mode 100644 index 9ccb39a7d..000000000 --- a/docs/guide/javascript_and_css.md +++ /dev/null @@ -1,168 +0,0 @@ ---- -layout: default -title: JavaScript and CSS -parent: How-to guide ---- - -# JavaScript and CSS - -While ViewComponent doesn't provide any built-in tooling to do so, it’s possible to include JavaScript and CSS alongside components. - -To use the Webpacker gem to compile assets located in `app/components`: - -1. In `config/webpacker.yml`, add `"app/components"` to the `additional_paths` array (for example `additional_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: - -```js -import "../components" -``` - -Then, in `app/javascript/components.js`, add: - -```js -function importAll(r) { - r.keys().forEach(r) -} - -importAll(require.context("../components", true, /[_\/]component\.js$/)) -``` - -Any file with the `_component.js` suffix (such as `app/components/widget_component.js`) will be compiled into the Webpack bundle. If that file itself imports another file, for example `app/components/widget_component.css`, it will also be compiled and bundled into Webpack's output stylesheet if Webpack is being used for styles. - -## Encapsulating assets - -Ideally, JavaScript and CSS should be scoped to the 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: - -```ruby -# app/components/comment_component.rb -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 -``` - -```erb -<%# app/components/comment_component.html.erb %> - - - -
- -
<%= commenter_name %>
- -
<%= formatted_body %>
- -``` - -```js -// app/components/comment_component.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 = ` - - -
- -
-
- -
- ` - } -} -customElements.define('my-comment', Comment) -``` - -## Stimulus - -In Stimulus, create a 1:1 mapping between a Stimulus controller and a component. To load in Stimulus controllers from the `app/components` tree, amend the Stimulus boot code in `app/javascript/controllers/index.js`: - -```js -import { Application } from "stimulus" -import { definitionsFromContext } from "stimulus/webpack-helpers" - -const application = Application.start() -const context = require.context("controllers", true, /\.js$/) -const contextComponents = require.context("../../components", true, /_controller\.js$/) -application.load( - definitionsFromContext(context).concat( - definitionsFromContext(contextComponents) - ) -) -``` - -This enables the creation of files such as `app/components/widget_controller.js`, where the controller identifier matches the `data-controller` attribute in the component's HTML template. - -After configuring Webpack to load Stimulus controller files from the `components` directory, add the path to `additional_paths` in `config/webpacker.yml`: - -```yml - additional_paths: ["app/components"] -``` - -When placing a Stimulus controller inside a sidecar directory, be aware that when referencing the controller [each forward slash in a namespaced controller file’s path becomes two dashes in its identifier]( -https://stimulusjs.org/handbook/installing#controller-filenames-map-to-identifiers): - -```console -app/components -├── ... -├── example -| ├── component.rb -| ├── component.css -| ├── component.html.erb -| └── component_controller.js -├── ... -``` - -`component_controller.js`'s Stimulus identifier becomes: `example--component`: - -```erb -
- - -
-``` - -See [Generators Options](generators.html#generate-a-stimulus-controller) to generate a Stimulus controller alongside the component using the generator. From e463ddb346fe0a1040cf3857732bc75558e3c616 Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 10:01:48 -0700 Subject: [PATCH 2/7] fix CI --- test/sandbox/test/rendering_test.rb | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/test/sandbox/test/rendering_test.rb b/test/sandbox/test/rendering_test.rb index 3e9fcdb60..6221b68da 100644 --- a/test/sandbox/test/rendering_test.rb +++ b/test/sandbox/test/rendering_test.rb @@ -16,8 +16,8 @@ def test_render_inline_allocations MyComponent.ensure_compiled allocations = (Rails.version.to_f >= 8.0) ? - {"3.5.0" => 117, "3.4.1" => 117, "3.3.6" => 129} : - {"3.3.6" => 120, "3.3.0" => 120, "3.2.6" => 118, "3.1.6" => 118, "3.0.7" => 127} + {"3.5.0" => 117, "3.4.1" => 117, "3.3.7" => 129} : + {"3.3.7" => 120, "3.3.0" => 120, "3.2.6" => 118, "3.1.6" => 118, "3.0.7" => 127} assert_allocations(**allocations) do render_inline(MyComponent.new) From ba353aa3ff74dbb531207d0e5a83d68aa2bbe4e0 Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 10:05:02 -0700 Subject: [PATCH 3/7] use concurrent-ruby for 6.1 support --- view_component.gemspec | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/view_component.gemspec b/view_component.gemspec index 62492b1da..2c48f2dfd 100644 --- a/view_component.gemspec +++ b/view_component.gemspec @@ -31,7 +31,7 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "activesupport", [">= 5.2.0", "< 8.1"] spec.add_runtime_dependency "method_source", "~> 1.0" - spec.add_runtime_dependency "concurrent-ruby", "~> 1.0" + spec.add_runtime_dependency "concurrent-ruby", "~> 1.2.4" spec.add_development_dependency "allocation_stats", "~> 0.1.5" spec.add_development_dependency "appraisal", "~> 2.4" spec.add_development_dependency "benchmark-ips", "~> 2.13.0" From 902ba77ccd30ef5861da527ddbf68f2d7dffc0a5 Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 10:06:24 -0700 Subject: [PATCH 4/7] use concurrent-ruby that works --- Gemfile.lock | 2 +- view_component.gemspec | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 3bcb83aed..48558ba17 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,7 +3,7 @@ PATH specs: view_component (3.21.0) activesupport (>= 5.2.0, < 8.1) - concurrent-ruby (~> 1.0) + concurrent-ruby (~> 1.3.4) method_source (~> 1.0) GEM diff --git a/view_component.gemspec b/view_component.gemspec index 2c48f2dfd..e732bc97e 100644 --- a/view_component.gemspec +++ b/view_component.gemspec @@ -31,7 +31,7 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "activesupport", [">= 5.2.0", "< 8.1"] spec.add_runtime_dependency "method_source", "~> 1.0" - spec.add_runtime_dependency "concurrent-ruby", "~> 1.2.4" + spec.add_runtime_dependency "concurrent-ruby", "~> 1.3.4" # lock version that supports Rails 6.1 spec.add_development_dependency "allocation_stats", "~> 0.1.5" spec.add_development_dependency "appraisal", "~> 2.4" spec.add_development_dependency "benchmark-ips", "~> 2.13.0" From 6f33ac2ee6cd4f1fe1da26ab6c1b2e5011bb718d Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 10:20:11 -0700 Subject: [PATCH 5/7] force 1.3.4 --- Gemfile.lock | 2 +- view_component.gemspec | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Gemfile.lock b/Gemfile.lock index 48558ba17..d6e428861 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -3,7 +3,7 @@ PATH specs: view_component (3.21.0) activesupport (>= 5.2.0, < 8.1) - concurrent-ruby (~> 1.3.4) + concurrent-ruby (= 1.3.4) method_source (~> 1.0) GEM diff --git a/view_component.gemspec b/view_component.gemspec index e732bc97e..70cffeee7 100644 --- a/view_component.gemspec +++ b/view_component.gemspec @@ -31,7 +31,7 @@ Gem::Specification.new do |spec| spec.add_runtime_dependency "activesupport", [">= 5.2.0", "< 8.1"] spec.add_runtime_dependency "method_source", "~> 1.0" - spec.add_runtime_dependency "concurrent-ruby", "~> 1.3.4" # lock version that supports Rails 6.1 + spec.add_runtime_dependency "concurrent-ruby", "1.3.4" # lock version that supports Rails 6.1 spec.add_development_dependency "allocation_stats", "~> 0.1.5" spec.add_development_dependency "appraisal", "~> 2.4" spec.add_development_dependency "benchmark-ips", "~> 2.13.0" From 2b4d2b8e9d7495695328a2da6c080c826c0c1cc6 Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 12:59:59 -0700 Subject: [PATCH 6/7] Update docs/CHANGELOG.md --- docs/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 648dbce15..543c67022 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -10,7 +10,7 @@ nav_order: 5 ## main -* Remove JS and CSS docs as they proved difficult to maintain.* +* Remove JS and CSS docs as they proved difficult to maintain. *Joel Hawksley* From 30baf08958966494a2b0074f25a9a11ef531d86f Mon Sep 17 00:00:00 2001 From: Joel Hawksley Date: Thu, 16 Jan 2025 13:00:15 -0700 Subject: [PATCH 7/7] Update docs/CHANGELOG.md --- docs/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 543c67022..6ae2a2a32 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -10,7 +10,7 @@ nav_order: 5 ## main -* Remove JS and CSS docs as they proved difficult to maintain. +* Remove JS and CSS docs as they proved difficult to maintain and lacked consensus. *Joel Hawksley*