{"id":13880783,"url":"https://github.com/marcoroth/cable-streams","last_synced_at":"2025-05-01T08:40:32.754Z","repository":{"id":47503683,"uuid":"480038855","full_name":"marcoroth/cable-streams","owner":"marcoroth","description":"Extend Turbo Streams with Custom Turbo Stream Actions and CableReady operations","archived":false,"fork":false,"pushed_at":"2022-12-18T21:12:51.000Z","size":144,"stargazers_count":26,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-24T19:07:36.265Z","etag":null,"topics":["cableready","hotwire","hotwired","turbo","turbo-streams"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcoroth.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-10T14:16:22.000Z","updated_at":"2023-10-07T22:16:43.000Z","dependencies_parsed_at":"2023-01-29T20:00:59.854Z","dependency_job_id":null,"html_url":"https://github.com/marcoroth/cable-streams","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fcable-streams","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fcable-streams/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fcable-streams/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcoroth%2Fcable-streams/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcoroth","download_url":"https://codeload.github.com/marcoroth/cable-streams/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251849025,"owners_count":21653787,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cableready","hotwire","hotwired","turbo","turbo-streams"],"created_at":"2024-08-06T08:03:28.760Z","updated_at":"2025-05-01T08:40:32.730Z","avatar_url":"https://github.com/marcoroth.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Cable Streams\n\nExtend Turbo Streams with Custom Turbo Stream Actions and CableReady operations.\n\n## Getting Started\n\n```bash\nyarn add cable-streams\n```\n\n```js\nimport * as Turbo from '@hotwired/turbo'\nimport CableReady from 'cable_ready'\nimport CableStreams from 'cable-streams'\n```\n\n## Adding Custom Turbo Stream Actions (Deprecated)\n\n\u003e Note: Custom Turbo Stream Actions via CableStreams are deprecated. Instead register your Custom Turbo Stream Actions directly on `Turbo.StreamActions`.\n\nYou can define your own Turbo Stream actions on the `CableStreams.customActions` object.\n\nWithin the scope of your custom action function `this` always points to the `\u003cturbo-stream\u003e` element.\n\nIf your action is targeting specific elements in the DOM you can access them via `this.targetElements`. The `\u003cturbo-stream\u003e` element lookups the right elements using the provided content of the `[target]` attribute on the `\u003cturbo-stream\u003e` element.\n\nYou can also access the content of the `\u003ctemplate\u003e` element within the `\u003cturbo-stream\u003e` via `this.templateContent`.\n\n### Example using the `\u003ctemplate\u003e` element\n\n```js\n// IMPORTANT: make sure you are explicitly using the `function` keyword\n// for defining your custom action in order to keep the right scope!\n\nCableStreams.customActions.log = function() {\n  console.log(this.templateContent)\n}\n```\n\nNow if you insert a `\u003cturbo-stream\u003e` element into the DOM it will be picked up and processed by your custom action.\n\n```html\n\u003cturbo-stream action=\"log\" target=\"body\"\u003e\n  \u003ctemplate\u003e\n    This will be logged\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n\n### Example using the regular Web API for HTMLElement\n\nIf you don't want to rely on the `\u003ctemplate\u003e` element you can also define regular attributes on the `\u003cturbo-stream\u003e` element. The payload from the example above can be represented as:\n```html\n\u003cturbo-stream action=\"log\" message=\"This will be logged\"\u003e\u003c/turbo-stream\u003e\n```\n\nSince the `\u003cturbo-stream\u003e` 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:\n```js\nCableStreams.customActions.log = function() {\n  console.log(this.getAttribute(\"message\"))\n}\n```\n\nThis leaves a lot of room for creativity.\n\n## Register CableReady operations as Turbo Stream Actions\n\nYou can register [all available CableReady operations](https://cableready.stimulusreflex.com/v/v5/reference/operations) as Turbo Stream Actions.\n\n```js\nCableStreams.registerCableReadyOperations()\n```\n\nNow you can use any CableReady operations serialized as JSON in the `\u003ctemplate\u003e` tag.\n\nFor example:\n\n```html\n\u003cturbo-stream action=\"consoleLog\"\u003e\n  \u003ctemplate\u003e\n    { \"message\": \"Hello from CableReady\", \"operation\": \"consoleLog\" }\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n\nYou can also leave out the `operation` option in the CableReady operation object, since it's already present on the `\u003cturbo-stream\u003e` element.\n\n```html\n\u003cturbo-stream action=\"consoleLog\"\u003e\n  \u003ctemplate\u003e\n    { \"message\": \"Hello from CableReady without the operation key\" }\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n\nIt also works with multiple operations, passed in as an array.\n\n```html\n\u003cturbo-stream action=\"consoleLog\"\u003e\n  \u003ctemplate\u003e\n    [\n      { \"message\": \"Message 1\" },\n      { \"message\": \"Message 2\" }\n    ]\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n\n## Usage with Rails\n\nThere 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).\n\n\n### Installation\n\n```bash\nbundle add cable_streams\n```\n\n### Example\n\nHere's the same example from above using the `console_log` operation:\n\n```html+erb\n\u003c%= turbo_stream.console_log(message: \"hello world\") %\u003e\n```\n\nWhich renders to:\n```html\n\u003cturbo-stream action=\"consoleLog\" target=\"body\"\u003e\n  \u003ctemplate\u003e\n    [\n      { \"message\": \"hello world\", \"operation\": \"consoleLog\" }\n    ]\n  \u003c/template\u003e\n\u003c/turbo-stream\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcoroth%2Fcable-streams","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcoroth%2Fcable-streams","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcoroth%2Fcable-streams/lists"}