TurboPower

To use turbo_power as a power-pack for Turbo Streams, install it via yarn and initialize it by passing the Turbo Stream Actions to TurboPower.initialize.

Note: This requires Turbo 7.2+.

TypeScript users: turbo_power re-exports types from @hotwired/turbo. Since Turbo 8, these types are provided via @types/hotwired__turbo. You must install this package manually for type support.

yarn add turbo_power
# For TypeScript users:
yarn add --dev @types/hotwired__turbo

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

TurboPower.initialize(Turbo.StreamActions)

To use Turbo Power's custom DOM manipulation actions within your Turbo Streams, you must call registerDOMActions and pass the TurboStreamActions object from @hotwired/turbo. This attaches the custom actions (like graft, inner_html, etc.) to the Turbo Stream execution engine.

import { Turbo } from "@hotwired/turbo"
import { registerDOMActions } from "@hotwired/turbo_power"

// Register the actions so Turbo Streams can recognize them
registerDOMActions(Turbo.streamActions)

The web-test-runner.config.mjs file defines the execution environment for tests. You can configure module resolution, log filtering, concurrency, and plugins.

Note: Setting concurrency to a value greater than 1 is currently not supported for tests involving session storage.

export default {
  nodeResolve: true,
  filterBrowserLogs: (log) => {
    // Custom logic to filter browser logs
    return true;
  },
  concurrency: 1, // Set to 1 if testing session storage
  mimeTypes: {},
  plugins: []
}

Actions for triggering events and managing form states.

Event Actions

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

Form Actions

• turbo_stream.reset_form(target, **attributes)

Actions for manipulating the browser's history stack.

• 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)

These actions allow you to modify attributes, CSS classes, and properties of DOM elements.

• 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)

Actions specifically targeting Turbo's core features like navigation, caching, and frames.

Turbo Actions

• turbo_stream.redirect_to(url, turbo_action = nil, turbo_frame = nil, **attributes)
• turbo_stream.turbo_clear_cache()
• 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)

Actions for controlling the browser environment and document metadata.

Browser Actions

• turbo_stream.reload(**attributes)
• turbo_stream.scroll_into_view(**attributes) (Supports targets, align_to_top, 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)

Actions for debugging and user notifications.

Debug Actions

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

Notification Actions

• turbo_stream.notification(title, **options)

Actions for managing browser storage (Local Storage, Session Storage, etc.).

• 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)

To make set_cookie and set_cookie_item available to your Turbo Stream processing, you must call registerDocumentActions and pass your TurboStreamActions instance to it.

import { registerDocumentActions } from "@hotwired/turbo_power/actions/document"

// Assuming streamActions is your TurboStreamActions instance
registerDocumentActions(streamActions)