Replace Webpacker with importmapped Hotwire as default JavaScript setup#42999
Merged
Replace Webpacker with importmapped Hotwire as default JavaScript setup#42999
Conversation
ghiculescu
reviewed
Aug 11, 2021
Co-authored-by: Alex Ghiculescu <alex@tanda.co>
added 10 commits
August 13, 2021 14:06
Not sure why these are showing up in this PR, though.
Member
Author
|
If anyone would like to help with this effort, I’d appreciate some assistance fixing all the remaining tests ✌️ |
|
It may not be the best First Issue to start collaborating on Rails, but I want to give a try. |
andrehjr
reviewed
Aug 15, 2021
Closed
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Sep 3, 2021
The upcoming release of [Rails 7][] will be notable for numerous reasons. One of the more remarkable announcements involves the deprecation of Rails UJS and the switch to [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/seanpdoyle/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Sep 3, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/seanpdoyle/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Sep 10, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Sep 15, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Sep 15, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Oct 12, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Dec 10, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Dec 10, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Dec 19, 2021
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Jan 25, 2022
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Feb 13, 2022
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
seanpdoyle
added a commit
to thoughtbot/hotwire-example-template
that referenced
this pull request
Feb 25, 2022
The upcoming [Rails 7][] release will be notable for numerous reasons. One of the more remarkable being the deprecation and removal of Rails UJS, and the introduction of [Hotwire][] as Rails' [default JavaScript framework][]. Let's learn more about how Hotwire fits into Rails by building an Article drafting experience that provides end-users with a preview of their final version as they type! We'll start with an out-of-the-box Rails installation that utilizes Turbo Drive, Turbo Streams, and Stimulus to then progressively enhance concepts and tools that are built directly into browsers. Plus, it'll degrade gracefully when JavaScript is unavailable! The code samples contained within omit the majority of the application's setup. While reading, know that the bulk of the application's code was generated by a `rails new` command The rest of the source code from this article can be found [on GitHub][]. [Hotwire]: https://hotwired.dev [Rails 7]: https://edgeguides.rubyonrails.org/7_0_release_notes.html [default JavaScript framework]: rails/rails#42999 [on GitHub]: https://github.com/thoughtbot/hotwire-example-template/commits/hotwire-example-live-preview Drafting Articles === We'll start by using Rails `model` generator to create some `Article` [scaffolding][] code to serve as a starting point for our extensions and customizations: ```sh bin/rails generate scaffold Article content:text bin/rails db:migrate ``` We won't be making any changes to the vast majority of the generated code, but there are two view partials that will be changed the most throughout the rest of the article. To have context for those changes, it's worth becoming familiar with them before we get started: `app/views/articles/_form.html.erb` and `app/views/articles/_article.html.erb`. The `articles/form` partial renders a single `<textarea>` field for our `Article` model's `content`, along with an `<input type="submit">` element: ```erb <%= form_with(model: article) do |form| %> <% if article.errors.any? %> <div id="error_explanation"> <h2><%= pluralize(article.errors.count, "error") %> prohibited this article from being saved:</h2> <ul> <% article.errors.each do |error| %> <li><%= error.full_message %></li> <% end %> </ul> </div> <% end %> <div class="field"> <%= form.label :content %> <%= form.text_area :content %> </div> <div class="actions"> <%= form.submit %> </div> <% end %> ``` Similarly, the `articles/article` partial renders the value of the `content` as plain text: ```erb <div id="<%= dom_id article %>" class="scaffold_record"> <p> <strong>Content:</strong> <%= article.content %> </p> <p> <%= link_to "Show this article", article %> </p> </div> ``` The rest of the generated code serves as the foundation for creating, reading, updating, and destroying `Article` instances. While it's crucial, they're implementation details that we can ignore for the sake of this example. [scaffolding]: https://edgeguides.rubyonrails.org/getting_started.html#mvc-and-you-generating-a-model
dskecse
added a commit
to dskecse/dotfiles
that referenced
this pull request
Jan 9, 2023
* Rails 7 has replaced Turbolinks and UJS w/ Hotwire-based frameworks Turbo and Stimulus * https://manny.codes/this-week-in-rails-wrapped-an-overview-of-rails-7-1-features-part-i/#01-rails-701-released * rails/rails#42999
dskecse
added a commit
to dskecse/dotfiles
that referenced
this pull request
Jan 9, 2023
* Rails 7 has retired Webpacker and replaced it w/ import maps and Hotwire-based frameworks Turbo and Stimulus * https://manny.codes/this-week-in-rails-wrapped-an-overview-of-rails-7-1-features-part-i/#01-rails-701-released * rails/rails#42999 * https://world.hey.com/dhh/modern-web-apps-without-javascript-bundling-or-transpiling-a20f2755
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
A default Rails skeleton should not have to require the full JavaScript toolchain with Webpack by default. Let's start with an importmapped Hotwire, then make it easy to go from there to Webpack, if needed later. Though we'll retain --webpack as an option for everyone who knows they'll need the full JS chain (like if doing React).
The new options are as follows:
rails newproduces a skeleton configured with importmap-rails, turbo-rails, and stimulus-rails. No Webpack, no Yarn, no package.json, no node. All the integration setup is done through adding the gems, then runningimportmap:install,turbo:install,stimulus:installtasks.rails new —skip-hotwirea skeleton like above but with just importmap-rails configured.rails new —skip-javascriptno JavaScript setup of any kind is configured.rails new —webpackis essentially what we had on Rails 6.2, with the exception that the default Turbolinks configuration is replaced with Hotwire (both Turbo and Stimulus). This of course includes setting up package.json, Yarn, etc.rails new —webpack —skip-hotwireis the same as above, minus the default configuration of Hotwire.In line with the upcoming Webpacker 6, we’ve dropped the —webpack=framework preconfiguration. —webpack is now a boolean flag.
Alpha preview of what this feels like: https://www.youtube.com/watch?v=PtxZvFnL2i0&t=334s