### HTML Wiring for FrankenPHP Hot Reload Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt This HTML snippet demonstrates the minimal setup required to enable FrankenPHP Hot Reload. It includes meta tags for configuration and imports the hot reload script. ```html

``` -------------------------------- ### Get FrankenPHP Hot Reload Configuration Property Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt This internal function reads a specific configuration value from a meta tag. It returns null if the tag is not found. The resolved config object is used by all reloaders. ```javascript // Internal usage (src/config.js) — illustrates how each property is resolved: function getConfigurationProperty(name) { const content = document .querySelector(`meta[name="frankenphp-hot-reload:${name}"]`) ?.getAttribute("content"); return content ?? null; } // Resolved config object exported from src/config.js: // { // loggingEnabled: "true" | false, // mercureURL: "https://example.com/.well-known/mercure?topic=hot-reload", // htmlReloadMethod: "morph" | "turbo" | null // } // Throws if the required URL meta tag is missing: // Error: element is required. ``` -------------------------------- ### Construct URL with Additional Query Parameters Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Builds an absolute URL from a string (resolving relative paths against `window.location.origin`) and merges in supplied query parameters. Overwrites existing values for duplicate keys. ```javascript import { urlWithParams } from './src/helpers.js'; // Adds hot-reload marker so the server can skip certain middleware: urlWithParams(window.location.href, { frankenphp_hot_reloading: 'true' }); // → "https://example.com/current-page?frankenphp_hot_reloading=true" urlWithParams('/api/data', { version: '2', format: 'json' }); // → "https://example.com/api/data?version=2&format=json" ``` -------------------------------- ### urlWithParams(urlString, params) Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Constructs a URL with additional query parameters. It resolves relative paths against `window.location.origin` and merges provided key/value pairs as query parameters, overwriting existing values if keys are duplicated. ```APIDOC ## `urlWithParams(urlString, params)` — Construct a URL with additional query parameters Builds an absolute URL from a string (resolving relative paths against `window.location.origin`) and merges in the supplied key/value pairs as query parameters, overwriting any existing values for duplicate keys. ```js import { urlWithParams } from './src/helpers.js'; // Adds hot-reload marker so the server can skip certain middleware: urlWithParams(window.location.href, { frankenphp_hot_reloading: 'true' }); // → "https://example.com/current-page?frankenphp_hot_reloading=true" urlWithParams('/api/data', { version: '2', format: 'json' }); // → "https://example.com/api/data?version=2&format=json" ``` ``` -------------------------------- ### Configure FrankenPHP Hot Reload with Meta Tags Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Set up FrankenPHP Hot Reload by defining Mercure hub URL and optional logging/reload strategies in HTML meta tags. Ensure Idiomorph is loaded before the hot-reload script for morphing support. ```html ``` -------------------------------- ### CssReloader.reload(filePattern) Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Hot-swaps changed stylesheets in the live DOM. It fetches the refreshed HTML document, identifies stylesheets matching the provided `RegExp` pattern, and updates or appends them as necessary, ensuring only relevant styles are reloaded. ```APIDOC ## `CssReloader.reload(filePattern)` — Hot-swap changed stylesheets Fetches the refreshed HTML document, finds all `` elements whose `href` matches the given `RegExp`, and updates only those link elements in the live DOM — leaving unrelated stylesheets untouched. Existing link elements are reused where possible (matched by path without digest); new links are appended to `` otherwise. ```js import { CssReloader } from './src/reloaders/css_reloader.js'; // Called automatically by the Mercure handler when a .css file changes. // The pattern targets only the changed file by base name: await CssReloader.reload(/application/); // Console (with logging enabled): // [frankenphp_hot_reloading] Reload css... // [frankenphp_hot_reloading] /assets/application-newdigest.css // Reload all stylesheets unconditionally: await CssReloader.reload(/./); ``` ``` -------------------------------- ### Hot-Swap Changed Stylesheets with CssReloader Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Fetches the refreshed HTML document, finds `` elements matching a pattern, and updates them in the live DOM. Reuses existing elements where possible or appends new ones. ```javascript import { CssReloader } from './src/reloaders/css_reloader.js'; // Called automatically by the Mercure handler when a .css file changes. // The pattern targets only the changed file by base name: await CssReloader.reload(/application/); // Console (with logging enabled): // [frankenphp_hot_reloading] Reload css... // [frankenphp_hot_reloading] /assets/application-newdigest.css // Reload all stylesheets unconditionally: await CssReloader.reload(/./); ``` -------------------------------- ### TurboHtmlReloader.reload() Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Triggers a full Turbo.visit() to the current URL, causing Hotwire Turbo to fetch the new page and perform its own DOM diffing and rendering. Scroll position is preserved by marking the navigation as already-scrolled before the render event fires. ```APIDOC ## TurboHtmlReloader.reload() ### Description Triggers a full `Turbo.visit()` to the current URL, causing Hotwire Turbo to fetch the new page and perform its own DOM diffing and rendering. Scroll position is preserved by marking the navigation as already-scrolled before the render event fires. ### Method `await TurboHtmlReloader.reload()` ### Parameters None ### Request Example ```javascript import { TurboHtmlReloader } from './src/reloaders/turbo_reloader.js'; // window.Turbo must be available (loaded via @hotwired/turbo): await TurboHtmlReloader.reload(); ``` ### Response None (throws an error if Turbo is not loaded) ### Error Handling - Throws `Error: Turbo is not loaded. Please make sure to load the Turbo library.` if `window.Turbo` is not available. ``` -------------------------------- ### Extract Base Asset Name from Path Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Strips directory prefix and file extension (including digest suffixes) from a path string. Used to derive RegExp for matching CSS link elements. ```javascript import { assetNameFromPath } from './src/helpers.js'; assetNameFromPath('/assets/application-abc123.css'); // → "application-abc123" assetNameFromPath('public/js/app.bundle.js'); // → "app" assetNameFromPath('/css/theme.css'); // → "theme" ``` -------------------------------- ### MorphHtmlReloader.reload() Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Fetches the latest server-rendered HTML and uses Idiomorph to reconcile the live document.body with the new content, preserving DOM nodes and their ephemeral state. Elements marked with data-frankenphp-hot-reload-preserve are never replaced. After morphing, all loaded Stimulus controllers are unloaded and re-registered. ```APIDOC ## MorphHtmlReloader.reload() ### Description Fetches the latest server-rendered HTML and uses Idiomorph to reconcile the live `document.body` with the new content, preserving DOM nodes (and their ephemeral state) wherever possible. Elements marked with `data-frankenphp-hot-reload-preserve` are never replaced. After morphing, all loaded Stimulus controllers are unloaded and re-registered to pick up any behavioral changes. ### Method `await MorphHtmlReloader.reload()` ### Parameters None ### Request Example ```javascript import { MorphHtmlReloader } from './src/reloaders/morph_html_reloader.js'; // Idiomorph must be available on window.Idiomorph before calling: await MorphHtmlReloader.reload(); ``` ### Response None (throws an error if Idiomorph is not loaded) ### Error Handling - Throws `Error: Idiomorph is not loaded. Please make sure to load the Idiomorph library.` if Idiomorph is not available on `window.Idiomorph`. ``` -------------------------------- ### Fetch and Parse Current HTML Document Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Fetches the current page URL with cache-busting and a hot-reloading marker, then parses the response body into a `Document` object. Used by HTML-aware reloaders to read the server's latest output. ```javascript import { reloadHtmlDocument } from './src/helpers.js'; const freshDoc = await reloadHtmlDocument(); // freshDoc is a complete Document with up-to-date and // Example: read updated stylesheet links from the refreshed document const links = freshDoc.head.querySelectorAll("link[rel='stylesheet']"); links.forEach(link => console.log(link.href)); // → https://example.com/assets/app-newdigest.css?reload=1718000000000 // Throws on non-2xx responses: // Error: 404 when fetching https://example.com/page?frankenphp_hot_reloading=true&reload=... ``` -------------------------------- ### assetNameFromPath(path) Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Extracts the base asset name from a file path by stripping directory prefixes and file extensions, including digest suffixes. This is useful for deriving regular expressions to match specific CSS files. ```APIDOC ## `assetNameFromPath(path)` — Extract base asset name from a file path Strips the directory prefix and file extension (including digest suffixes) from a path string, returning just the base name. Used by the Mercure event handler to derive a `RegExp` for matching CSS `` elements when a `.css` file changes. ```js import { assetNameFromPath } from './src/helpers.js'; assetNameFromPath('/assets/application-abc123.css'); // → "application-abc123" assetNameFromPath('public/js/app.bundle.js'); // → "app" assetNameFromPath('/css/theme.css'); // → "theme" ``` ``` -------------------------------- ### StimulusReloader.reload(changedFilePath) Source: https://context7.com/dunglas/frankenphp-hot-reload/llms.txt Hot-reloads a single Stimulus controller by parsing the import map, dynamically importing the new controller, and then unloading and re-registering it without interrupting other controllers. ```APIDOC ## StimulusReloader.reload(changedFilePath) ### Description Hot-reloads a single Stimulus controller. It parses the `