Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcoroth/cable-streams
Extend Turbo Streams with Custom Turbo Stream Actions and CableReady operations
https://github.com/marcoroth/cable-streams
cableready hotwire hotwired turbo turbo-streams
Last synced: 20 days ago
JSON representation
Extend Turbo Streams with Custom Turbo Stream Actions and CableReady operations
- Host: GitHub
- URL: https://github.com/marcoroth/cable-streams
- Owner: marcoroth
- License: mit
- Created: 2022-04-10T14:16:22.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-12-18T21:12:51.000Z (almost 2 years ago)
- Last Synced: 2024-10-04T12:54:20.336Z (about 1 month ago)
- Topics: cableready, hotwire, hotwired, turbo, turbo-streams
- Language: TypeScript
- Homepage:
- Size: 141 KB
- Stars: 26
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Cable Streams
Extend Turbo Streams with Custom Turbo Stream Actions and CableReady operations.
## Getting Started
```bash
yarn add cable-streams
```
```js
import * as Turbo from '@hotwired/turbo'
import CableReady from 'cable_ready'
import CableStreams from 'cable-streams'
```
## Adding Custom Turbo Stream Actions (Deprecated)
> Note: Custom Turbo Stream Actions via CableStreams are deprecated. Instead register your Custom Turbo Stream Actions directly on `Turbo.StreamActions`.
You can define your own Turbo Stream actions on the `CableStreams.customActions` object.
Within the scope of your custom action function `this` always points to the `` element.
If your action is targeting specific elements in the DOM you can access them via `this.targetElements`. The `` element lookups the right elements using the provided content of the `[target]` attribute on the `` element.
You can also access the content of the `` element within the `` via `this.templateContent`.
### Example using the `` element
```js
// IMPORTANT: make sure you are explicitly using the `function` keyword
// for defining your custom action in order to keep the right scope!
CableStreams.customActions.log = function() {
console.log(this.templateContent)
}
```
Now if you insert a `` element into the DOM it will be picked up and processed by your custom action.
```html
This will be logged
```
### Example using the regular Web API for HTMLElement
If you don't want to rely on the `` element you can also define regular attributes on the `` element. The payload from the example above can be represented as:
```html
```
Since the `` element is a regular [`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) you can also use every available function and property on it. With that, the custom action can be rewritten as:
```js
CableStreams.customActions.log = function() {
console.log(this.getAttribute("message"))
}
```
This leaves a lot of room for creativity.
## Register CableReady operations as Turbo Stream Actions
You can register [all available CableReady operations](https://cableready.stimulusreflex.com/v/v5/reference/operations) as Turbo Stream Actions.
```js
CableStreams.registerCableReadyOperations()
```
Now you can use any CableReady operations serialized as JSON in the `` tag.
For example:
```html
{ "message": "Hello from CableReady", "operation": "consoleLog" }
```
You can also leave out the `operation` option in the CableReady operation object, since it's already present on the `` element.
```html
{ "message": "Hello from CableReady without the operation key" }
```
It also works with multiple operations, passed in as an array.
```html
[
{ "message": "Message 1" },
{ "message": "Message 2" }
]
```
## Usage with Rails
There is a [Rails companion gem](https://github.com/marcoroth/cable-streams-rails) which ships view helpers for all CableReady operations. All options are identical to [the regular CableReady operations](https://cableready.stimulusreflex.com/v/v5/reference/operations).
### Installation
```bash
bundle add cable_streams
```
### Example
Here's the same example from above using the `console_log` operation:
```html+erb
<%= turbo_stream.console_log(message: "hello world") %>
```
Which renders to:
```html
[
{ "message": "hello world", "operation": "consoleLog" }
]
```