Skip to content

hopsoft/turbo_boost-elements

Repository files navigation

Welcome to TurboBoost Elements πŸ‘‹

Lines of Code GEM Version GEM Downloads Ruby Style NPM Version NPM Downloads NPM Bundle Size JavaScript Style Tests GitHub Discussions Sponsors Twitter Follow

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

Table of Contents

Sponsors

Proudly sponsored by

Dependencies

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

Watch the introduction on YouTube

Releasing

  1. Run npm install and bundle to pick up the latest
  2. 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
  3. Run bin/standardize
  4. Run rake build and npm run build
  5. Commit and push changes to GitHub
  6. Run rake release
  7. Run npm publish --access public
  8. Commit and push changes to GitHub
  9. Create a new release on GitHub (here) and generate the changelog for the stable release for it

License

The gem is available as open source under the terms of the MIT License.