Exploring Turbo Drive Back-Button Caching Behavior In Lucee CFML

frame.cfm

<turbo-frame id="home-frame">
	<p>
		This is lazy-loaded frame content. Copy, copy, copy ....
	</p>
</turbo-frame>

index.cfm

<cfscript>

	// Slowdown the load on the main page so that we can see any flashes of cached content
	// as the page navigation is occurring.
	sleep( 500 );

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

		<h1>
			ColdFusion + Hotwire Back-Button Cache Demo
		</h1>

		<p>
			<a href="index.htm"><strong>Home</strong></a> -
			<a href="about.htm">About</a>
		</p>

		<hr />

		<h2>
			Welcome to Our Site!
		</h2>

		<p>
			Copy, copy, copy....
		</p>

		<h2>
			Lazy Loaded Content
		</h2>

		<turbo-frame id="home-frame" src="frame.htm">
			<p>
				Frame content is eagerly-loading....
			</p>
		</turbo-frame>

		<!---
			This Controller will dynamically change the runtime styles of all the P tags.
			This will help illustrate how and when the page cache is populated (and then
			later restored or previewed).
		--->
		<button
			data-controller="magic"
			data-action="magic##changeDom"
			data-magic-selector-param="p"
			data-magic-styles-param='{
				"border": "3px dashed red",
				"background-color": "yellow"
			}'>
			Change Runtime Styles
		</button>

	</cfoutput>
</cfmodule>

main.js

// Import core modules.
import { Application } from "@hotwired/stimulus";
import { Controller } from "@hotwired/stimulus";

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

class MagicController extends Controller {

	// ---
	// LIFE-CYCLE METHODS.
	// ---

	/**
	* I run once after the component instance has been bound to the host DOM element. At
	* this point, all of the classes, targets, and values have already been bound.
	*/
	connect() {

		console.info( "Controller connected." );

	}


	/**
	* I get called once after the component instance has been unbound from the host DOM
	* element. At this point, all of the targets have already been disconnected as well.
	*/
	disconnect() {

		console.info( "Controller disconnected." );

	}

	// ---
	// PUBLIC METHODS.
	// ---

	/**
	* I alter the runtime styles of the DOM for the purposes of testing the cache.
	*/
	changeDom( event ) {

		document.querySelectorAll( event.params.selector ).forEach(
			( node ) => {

				Object.assign( node.style, event.params.styles );

			}
		);

	}

}

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

window.Stimulus = Application.start();
// When not using the Ruby On Rails asset pipeline / build system, Stimulus doesn't know
// how to map controller classes to data-controller attributes. As such, we have to
// explicitly register the Controllers on Stimulus startup.
Stimulus.register( "magic", MagicController );

snippet-1.cfm

<button
	data-controller="magic"
	data-action="magic#changeDom"
	data-magic-selector-param="p"
	data-magic-styles-param='{
		"border": "3px dashed red",
		"background-color": "yellow"
	}'>
	Change Runtime Styles
</button>