Project

turbo_boost-elements

0.03
There's a lot of open issues
turbo_boost-elementshopsoft/turbo_boost-elementsHomepageDocumentationSource CodeBug TrackerWiki
Pre-built easy to use reactive TurboBoost elements for Rails/Hotwire apps.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Popularity
Downloads
12,773
Stars
103
Forks
5
Watchers
5
 Releases
Current version
0.1.0
Total releases
20
First release
2022-12-26
Latest release
2024-05-27
 Issues
Open Issues
8
Closed Issues
4
Total Issues
12
Issue Closure Rate
33%
 Pull Requests
Open Pull Requests
1
Closed Pull Requests
0
Merged Pull Requests
39
Pull Request Acceptance Rate
97%
 Development
Primary Language
JavaScript
Licenses
MIT
Average date of last 50 commits
2023-05-15
Reverse Dependencies
0

 Dependencies

Development

magic_frozen_string_literal
>= 0
minitest-reporters
>= 0
pry-byebug
>= 0
rake
>= 0
standardrb
>= 0

Runtime

rails
>= 6.1
turbo_boost-commands
>= 0.3.0
turbo-rails
>= 1.1
 Project Readme

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
  • Dependencies
  • Installation
  • Setup
  • Behaviors
    • Toggle
      • Tag Helpers
      • DevTools helpers
  • Introductory Video
  • Releasing
  • License

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.