@turbo-boost/elements NPM

Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.

Dependencies

ruby >= 3.0
rails >= 6.1
turbo-rails >= 1.1
@hotwired/turbo-rails >= 7.2
turbo_boost-commands >= 0.1.1
@turbo-boost/commands >= 0.1.1

Setup

Add TurboBoost Elements dependencies

# Gemfile
gem "turbo-rails", ">= 1.1", "< 2"
+gem "turbo_boost-elements", "~> VERSION"

# package.json
"dependencies": {
  "@hotwired/turbo-rails": ">=7.2",
+  "@turbo-boost/elements": "^VERSION"

# app/javascript/application.js
import '@hotwired/turbo-rails'
+import '@turbo-boost/elements'

Add TurboBoost to your Rails app

# app/views/layouts/application.html.erb
<html>
  <head>
+  <%= turbo_boost.meta_tag %>
  </head>
  <body>
  </body>
</html>

Elements

`<toggle-trigger>` and `<toggle-target>`

Toggle content via conditional rendering.

This example will re-render the post partial and toggle the form section.

<!-- app/views/posts/_post.html.erb -->
<%= tag.div id: dom_id(post) do %>
  <!-- content -->

  <%= toggle_trigger_tag renders: current_partial_path, morphs: dom_id(post),
    controls: dom_id(post, :form), locals: local_assigns, assigns: { post: @post } do %>
    <% if toggle_target_collapsed?  dom_id(post, :form) %>
      <%= link_to "Edit Post Inline", request.path %>
    <% else %>
      <%= link_to "Cancel Editing Post", request.path %>
    <% end %>
  <% end %>

  <%= toggle_target_tag dom_id(post, :form) do %>
    <%= render "posts/form", post: post %>
  <% end %>

  <!-- content -->
<% end %>

Tag Helpers

toggle_trigger_tag
- renders - REQUIRED, the partial path to render
- morphs - REQUIRED, dom_id of the partial's outermost containing element
- controls - REQUIRED, dom_id of the toggle target
- assigns - {}, assigns required to render the partial (i.e. instance variables)
- locals - {}, local_assigns required to render the parital
- collapse_selector - nil, CSS selector for other matching targets to collapse when the target is expanded
- focus_selector - nil, CSS selector for the element to focus when the target is expanded
- method - :toggle, method to inovke (:show, :hide, :toggle)
- disabled - false, disable the trigger
- remember - false, remember ephemeral UI state between requests
- kwargs - generic support for additional element attributes like class etc.
- &block - a Ruby block that emits this trigger's content
toggle_target_tag
- id - REQUIRED, the dom_id for the element
- collapse_on - [], list of events that will collapse this target
- collapse_selector - nil, CSS selector for other matching targets to collapse when this target is expanded
- expanded - false, override to force expansion
- focus_selector - nil, CSS selector for the element to focus when this target is expanded
- kwargs - generic support for additional element attributes like class etc.
- &block - a Ruby block that emits this target's content

If a named keyword argument is shared by both the trigger and target, the trigger value will take precendence because multiple triggers might control the same target.

DevTools

TurboBoost ships with client/browser based devtools designed to improve the developer experience. You can enable the devtools with JavaScript like so.

TurboBoost.devtools.start()

Introductory Video

Releasing

Run npm install and bundle to pick up the latest
Update the version number consistently in the following files:
- lib/turbo_boost/elements/version.rb - pre-release versions should use .preN
- app/javascript/version.js - pre-release versions use -preN
- package.json - pre-release versions use -preN
Run bin/standardize
Run rake build and npm run build
Commit and push changes to GitHub
Run rake release
Run npm publish --access public
Commit and push changes to GitHub
Create a new release on GitHub (here) and generate the changelog for the stable release for it