Creating Custom Turbo Stream Actions In Hotwire And Lucee CFML

bounce.htm

<cfmodule template="./tags/page.cfm">
	<cfoutput>

		<h2>
			Bouncing Back to Home
		</h2>

		<p>
			<!--- Required for restoration visits - see note below. --->
			<a href="index.htm">Go back to home</a> &rarr;
		</p>

		<!---
			CAUTION: If the user returns to this page through a restoration visit (ie,
			hitting the browser's BACK BUTTON), this Turbo-Stream element will no longer
			be here since it is removed during the stream evaluation. As such, it is
			important to provide the manual link above.
			--
			Also, by adding [data-action="replace"], we can override the current history
			entry, somewhat preventing the back button problem.
		--->
		<turbo-stream
			action="visit"
			data-url="index.htm">
		</turbo-stream>

	</cfoutput>
</cfmodule>

index.cfm

<cfmodule template="./tags/page.cfm">
	<cfoutput>

		<h2>
			Welcome to My Site
		</h2>

		<p>
			<a href="bounce.htm">Go to Bouncer</a>
		</p>

	</cfoutput>
</cfmodule>

main.js

// Import core modules.
import * as Turbo from "@hotwired/turbo";
import { StreamActions } from "@hotwired/turbo";

// ----------------------------------------------------------------------------------- //
// ----------------------------------------------------------------------------------- //

/**
* I support Turbo.visit() stream actions.
*/
StreamActions.visit = function() {

	var url = this.dataset.url;
	var action = ( this.dataset.action || "advance" );
	var frame = ( this.dataset.frame || undefined );

	Turbo.visit(
		url,
		{
			action: action,
			frame: frame
		}
	);

}

snippet-1.cfm

<turbo-stream
	action="visit"
	url="index.htm">
	<!--- No content is relevant for this action. --->
</turbo-stream>