Skip to content

Custom Turbo Stream Actions power-pack for Turbo Streams

License

Notifications You must be signed in to change notification settings

marcoroth/turbo_power

Repository files navigation

TurboPower

NPM Version NPM Downloads NPM Bundle Size

Getting Started

turbo_power is a power-pack for Turbo Streams. It provides Turbo Streams with a bunch of new actions and additionally adds the morph action from turbo-morph.

Note: Requires Turbo 7.2+

Getting Started

yarn add turbo_power
// application.js
import * as Turbo from '@hotwired/turbo'

+import TurboPower from 'turbo_power'
+TurboPower.initialize(Turbo.StreamActions)

Getting Started with Rails

Checkout the instructions in the turbo_power-rails repo.

Getting Started with Django

Checkout the doc of the django-turbo-helper repo.

Custom Actions

DOM Actions

  • turbo_stream.graft(target, parent, **attributes)
  • turbo_stream.morph(target, html = nil, **attributes, &block)
  • turbo_stream.inner_html(target, html = nil, **attributes, &block)
  • turbo_stream.insert_adjacent_html(target, html = nil, position: 'beforeend', **attributes, &block)
  • turbo_stream.insert_adjacent_text(target, text, position: 'beforebegin', **attributes)
  • turbo_stream.outer_html(target, html = nil, **attributes, &block)
  • turbo_stream.text_content(target, text, **attributes)
  • turbo_stream.set_meta(name, content)

Attribute Actions

  • turbo_stream.add_css_class(target, classes, **attributes)
  • turbo_stream.remove_attribute(target, attribute, **attributes)
  • turbo_stream.remove_css_class(target, classes, **attributes)
  • turbo_stream.set_attribute(target, attribute, value, **attributes)
  • turbo_stream.set_dataset_attribute(target, attribute, value, **attributes)
  • turbo_stream.set_property(target, property, value, **attributes)
  • turbo_stream.set_style(target, name, value, **attributes)
  • turbo_stream.set_styles(target, styles, **attributes)
  • turbo_stream.set_value(target, value, **attributes)
  • turbo_stream.toggle_attribute(target, attribute, force, **attributes)
  • turbo_stream.toggle_css_class(target, classes, **attributes)
  • turbo_stream.replace_css_class(target, from, to, **attributes)

Event Actions

  • turbo_stream.dispatch_event(target, name, detail: {}, **attributes)

Form Actions

  • turbo_stream.reset_form(target, **attributes)

Storage Actions

  • turbo_stream.clear_storage(type, **attributes)
  • turbo_stream.clear_local_storage(**attributes)
  • turbo_stream.clear_session_storage(**attributes)
  • turbo_stream.remove_storage_item(key, type, **attributes)
  • turbo_stream.remove_local_storage_item(key, **attributes)
  • turbo_stream.remove_session_storage_item(key, **attributes)
  • turbo_stream.set_storage_item(key, value, type, **attributes)
  • turbo_stream.set_local_storage_item(key, value, **attributes)
  • turbo_stream.set_session_storage_item(key, value, **attributes)

Browser Actions

  • turbo_stream.reload(**attributes)
  • turbo_stream.scroll_into_view(**attributes)
    • turbo_stream.scroll_into_view(targets)
    • turbo_stream.scroll_into_view(targets, align_to_top)
    • turbo_stream.scroll_into_view(targets, behavior:, block:, inline:)
  • turbo_stream.set_focus(target, **attributes)
  • turbo_stream.set_title(title, **attributes)

Document Actions

  • turbo_stream.set_cookie(cookie, **attributes)
  • turbo_stream.set_cookie_item(key, value, **attributes)

Browser History Actions

  • turbo_stream.history_back(**attributes)
  • turbo_stream.history_forward(**attributes)
  • turbo_stream.history_go(delta, **attributes)
  • turbo_stream.push_state(url, title = nil, state = nil, **attributes)
  • turbo_stream.replace_state(url, title = nil, state = nil, **attributes)

Debug Actions

  • turbo_stream.console_log(message, level = :log)
  • turbo_stream.console_table(data, columns)

Notification Actions

  • turbo_stream.notification(title, **options)

Turbo Actions

  • turbo_stream.redirect_to(url, turbo_action = nil, turbo_frame = nil, **attributes)
  • turbo_stream.turbo_clear_cache()

Turbo Progress Bar Actions

  • turbo_stream.turbo_progress_bar_show()
  • turbo_stream.turbo_progress_bar_hide()
  • turbo_stream.turbo_progress_bar_set_value(value)

Turbo Frame Actions

  • turbo_stream.turbo_frame_reload(frame_id)
  • turbo_stream.turbo_frame_set_src(frame_id, src)

Previous Art

TurboPower is heavily inspired by CableReady and its operations. This library aims to bring the same level of operation-diversity to Turbo Streams.

Development

To run the test runner:

yarn build
yarn test

Acknowledgments

turbo_power is MIT-licensed open-source software from Marco Roth.

turbo-morph is MIT-licensed open-source software from Marco Roth.

Turbo is MIT-licensed open-source software from Basecamp.