### Initialize a New Falco Web Project Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md These shell commands guide the user through creating a new F# web project named 'HelloWorld' using the .NET CLI and navigating into its directory, serving as the starting point for a Falco application. ```shell > dotnet new web -lang F# -o HelloWorld > cd HelloWorldApp ``` -------------------------------- ### Apply HTMX `hx-select-oob` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# example demonstrates how to use the `Hx.selectOob` attribute in Falco.Htmx. It configures a button to select content for both in-band (`#info-detail`) and out-of-band (`#alert`) updates from the response of a GET request to `/info`. ```fsharp Elem.div [ Attr.id "alert" ] [] Elem.button [ Hx.get "/info"; Hx.select "#info-detail"; Hx.swapOuterHtml; Hx.selectOob "#alert" ] [ Text.raw "Get Info" ] ``` -------------------------------- ### Apply HTMX `hx-put` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# example demonstrates how to use the `Hx.put` attribute in Falco.Htmx to configure an HTML button to send a PUT request to the `/messages` endpoint when clicked. ```fsharp Elem.button [ Hx.put "/messages" ] [ Text.raw "Put to Messages" ] ``` -------------------------------- ### Apply HTMX `hx-swap` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# example shows how to use the `Hx.swapOuterHtml` attribute in Falco.Htmx. It configures a button to replace its entire outer HTML with the response from a POST request to `/like`. ```fsharp Elem.button [ Hx.post "/like"; Hx.swapOuterHtml ] [ Text.raw "Like" ] ``` -------------------------------- ### Register HTTP Routes in Falco Application Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# code defines the `endpoints` list, mapping HTTP GET requests to specific `HttpHandler` functions. It registers the root path ('/') to `handleIndex` and the '/click' path to `handleClick`, making these routes accessible in the Falco application. ```fsharp let endpoints = [ get "/" handleIndex get "/click" handleClick ] ``` -------------------------------- ### Apply HTMX `hx-select` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# example demonstrates how to use the `Hx.select` attribute in Falco.Htmx. It configures a button to extract only the content matching the CSS selector `#info-detail` from the response of a GET request to `/info` before swapping it into the current element's outer HTML. ```fsharp Elem.button [ Hx.get "/info"; Hx.select "#info-detail"; Hx.swapOuterHtml ] [ Text.raw "Get Info" ] ``` -------------------------------- ### Create a Basic HTMX Button with Falco.Htmx Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# code demonstrates how to define an HTML button element using Falco.Markup and apply htmx attributes via Falco.Htmx. The button is configured to make a GET request to '/click-me', swap the outer HTML of the target element '#wrapper' upon response. ```fsharp open Falco.Markup open Falco.Htmx let demo = Elem.button [ Hx.get "/click-me" Hx.swapOuterHtml Hx.targetCss "#wrapper" ] [ Text.raw "Reset" ] ``` -------------------------------- ### Apply HTMX `hx-trigger` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md These F# examples illustrate various ways to use the `Hx.trigger` attribute in Falco.Htmx. They show how to trigger an htmx request on a 'mouseenter' event, with modifiers like `Once`, and with filters like `ctrlKey`. ```fsharp Elem.div [ Hx.post "/mouse-enter"; Hx.trigger "mouseenter" ] [ Text.raw "Here mouse, mouse!" ] // Trigger modifiers Elem.div [ Hx.post "/mouse-enter"; Hx.trigger ("mouseenter", [HxTrigger.Once]) ] [ Text.raw "Here mouse, mouse!" ] // Trigger filters Elem.div [ Hx.post "/mouse-enter"; Hx.trigger ("mouseenter", [HxTrigger.Once], "ctrlKey") ] [ Text.raw "Here mouse, mouse!" ] ``` -------------------------------- ### Apply HTMX `hx-target` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# example demonstrates how to use the `Hx.target` attribute in Falco.Htmx. It configures an input field within a form to target the HTML element with `id="search-results"` for updates when an htmx request is made. ```fsharp Elem.form [] [ Elem.input [ Hx.get "/search"; Hx.target "#search-results" ] ] Elem.div [ Attr.id "search-results" ] [] ``` -------------------------------- ### Apply HTMX `hx-swap-oob` Attribute in Falco Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md These F# examples demonstrate various ways to use the `Hx.swapOob` attribute in Falco.Htmx for out-of-band swaps. They show how to explicitly enable OOB swapping, specify the swap type (e.g., `OuterHTML`, `InnerHTML`), and include a selector for the target element. ```fsharp Elem.div [ Attr.id "message"; Hx.swapOobOn ] [ Text.raw "Swap me directly" ] // Equivalent to: Elem.div [ Attr.id "message"; Hx.swapOob HxSwap.OuterHTML ] [ Text.raw "Swap me directly" ] // With a selector: Elem.div [ Attr.id "message"; Hx.swapOob (HxSwap.InnerHTML, "#falco") ] [ Text.raw "Swap me directly" ] ``` -------------------------------- ### Define Falco HTTP Handler for Main Page with HTMX Script Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# function defines an `HttpHandler` for the application's root path. It constructs an HTML page including the htmx CDN script and a button configured to trigger an htmx GET request to '/click' and swap its outer HTML upon response. ```fsharp let handleIndex : HttpHandler = let html = Elem.html [] [ Elem.head [] [ Elem.script [ Attr.src HtmxScript.cdnSrc ] [] ] Elem.body [] [ Text.h1 "Example: Hello World" Elem.button [ Hx.get "/click" Hx.swapOuterHtml ] [ Text.raw "Click Me" ] ] ] Response.ofHtml html ``` -------------------------------- ### Synchronize Requests with HTMX hx-sync in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Illustrates how to use `Hx.sync` in Falco F# to synchronize requests from multiple elements. This example shows aborting a form submission if a validation request is already in progress, preventing race conditions and ensuring data integrity. ```fsharp Elem.form [ Hx.post "/store" ] [ Elem.input [ Attr.name "title"; Hx.post "/validate"; Hx.trigger "change"; Hx.sync ("form", HxSync.Abort) ] ] ``` -------------------------------- ### Inherit HTMX Attributes with hx-inherit in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to make an HTMX attribute inheritable by child elements using `Hx.inherit'` in Falco F#. This example shows `hx-target` being inherited by links within a container, reducing redundancy in attribute declarations. ```fsharp Elem.div [ Hx.targerCss "#tab-container"; Hx.inherit' "hx-target" ] [ Elem.a [ Hx.boostOn; Attr.href "/tab1" ] [ Text.raw "Tab 1" ] Elem.a [ Hx.boostOn; Attr.href "/tab2" ] [ Text.raw "Tab 2" ] Elem.a [ Hx.boostOn; Attr.href "/tab3" ] [ Text.raw "Tab 3" ] ] ``` -------------------------------- ### Set Up a Minimal Falco Web Application Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# code provides the foundational structure for a Falco web application. It imports essential namespaces, initializes the web application builder, builds the application, and sets up routing with an empty list of endpoints, ready for further configuration. ```fsharp open Falco open Falco.Htmx open Falco.Markup open Falco.Routing open Microsoft.AspNetCore.Builder let bldr = WebApplication.CreateBuilder() let wapp = bldr.Build() let endpoints = [ ] wapp.UseRouting() .UseFalco(endpoints) .Run() ``` -------------------------------- ### Add Falco and Falco.Htmx NuGet Packages Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md These shell commands use the .NET CLI to add the necessary Falco and Falco.Htmx NuGet packages to the current project, enabling the use of the framework and its htmx integration. ```shell > dotnet add package Falco > dotnet add package Falco.Htmx ``` -------------------------------- ### Execute the Falco Web Application Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This shell command compiles and runs the Falco web application, making it accessible via a web browser, typically at `https://localhost:5001`. ```shell > dotnet run ``` -------------------------------- ### Configure HTMX hx-boost Attribute in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to enable HTMX boosting for a link using `Hx.boostOn` in Falco F#, allowing navigation to be handled via AJAX without full page reloads. ```fsharp Elem.div [ Hx.boostOn ] [ Elem.a [ Attr.href "/blog" ] [ Text.raw "Blog" ] ] ``` -------------------------------- ### Display Loading Indicators with HTMX hx-indicator in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Illustrates how to display a loading indicator during an HTMX request using `Hx.indicator` in Falco F#. This provides visual feedback to the user while content is being loaded, improving perceived performance. ```fsharp Elem.div [] [ Elem.button [ Hx.post "/example"; Hx.indicator "#spinner" ] [ Text.raw "Post It!" ] Elem.img [ Attr.id "spinner"; Attr.class' "htmx-indicator"; Attr.src "/img/bars.svg" ] ] ``` -------------------------------- ### Define Falco HTTP Handler for HTMX Click Response Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md This F# function defines an `HttpHandler` that returns a simple HTML heading. This handler is intended to be called by an htmx request, providing content to dynamically update a part of the web page. ```fsharp let handleClick : HttpHandler = let html = Text.h2 "Hello, World from the Server!" Response.ofHtml html ``` -------------------------------- ### Control Browser History with HTMX hx-push-url in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows various ways to use `Hx.pushUrl` in Falco F# to manipulate the browser's history. It can be enabled, disabled, or set to a specific URL after an AJAX request, providing fine-grained control over the browser's back/forward stack. ```fsharp Elem.div [ Hx.get "/account"; Hx.pushUrl true ] [ Text.raw "Go to My Account" ] // Or short form: Elem.div [ Hx.get "/account"; Hx.pushUrlOn ] [ Text.raw "Go to My Account" ] // Or specify URL: Elem.div [ Hx.get "/account"; Hx.pushUrl "/my-account" ] [ Text.raw "Go to My Account" ] ``` -------------------------------- ### Control Parameter Inclusion with HTMX hx-params in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows how to use `Hx.params` in Falco F# to control which parameters are included in an HTMX request. Using `*` includes all parameters, while other options allow filtering or excluding specific parameters. ```fsharp Elem.div [ Hx.get "/example"; Hx.params "*" ] [ Text.raw "Get Some HTML, Including Params" ] ``` -------------------------------- ### Use HTMX Extensions with hx-ext in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Illustrates how to enable or disable HTMX extensions for specific elements or their children using `Hx.ext` in Falco F#. This allows granular control over extension behavior, enabling or ignoring them in different parts of the DOM tree. ```fsharp Elem.div [ Hx.ext "example" ] [ Text.raw "Example extension is used in this part of the tree..." Elem.div [ Hx.ext "ignore:example" ] [ Text.raw "... but it will not be used in this part." ] ] ``` -------------------------------- ### Add Custom Headers to HTMX Requests with hx-headers in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows how to add static or dynamic custom headers to an HTMX request using `Hx.headers` in Falco F#. This is useful for authentication tokens, custom request metadata, or other server-side processing requirements. ```fsharp Elem.div [ Hx.get "/example"; Hx.headers [ "myHeader", "My Value" ] ] [ Text.raw "Get Some HTML, Including A Custom Header in the Request" ] // Or to evaluate a dynamic value: Elem.div [ Hx.get "/example"; Hx.headers ([ "myHeader", "calculateValue()" ], true) ] [ Text.raw "Get Some HTML, Including A Custom Header in the Request" ] // ^-- produces hx-headers='js:{\"myHeader\": calculateValue()}' ``` -------------------------------- ### Require User Confirmation with HTMX hx-confirm in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to prompt the user for confirmation before an HTMX request is sent using `Hx.confirm` in Falco F#. This is useful for destructive actions like deletion, providing a safeguard against accidental operations. ```fsharp Elem.button [ Hx.delete "/account"; Hx.confirm "Are you sure you wish to delete your account?" ] [ Text.raw "Delete My Account" ] ``` -------------------------------- ### Include Elements in HTMX Requests with hx-include in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to include values from other elements in an HTMX request using `Hx.includeCss` or `Hx.include'` in Falco F#. This is useful for sending data from multiple form fields or non-form elements as part of a single request. ```fsharp Elem.button [ Hx.post "/register"; Hx.includeCss "[name=email]" ] [ Text.raw "Register!" ] Elem.span [] [ Text.raw "Enter email: " Elem.input [ Attr.name "email"; Attr.type' "email" ] [] ] // Hx.includeCss "[name=email]" is equivalent to: Elem.button [ Hx.post "/register"; Hx.include' (HxTarget.Css "[name=email]") ] [ Text.raw "Register!" ] Elem.span [] [ Text.raw "Enter email: " Elem.input [ Attr.name "email"; Attr.type' "email" ] [] ] ``` -------------------------------- ### Mark History Element with HTMX hx-history-elt in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows how to mark an element as the history element using `Hx.historyElt` in Falco F#. This attribute indicates which element's outer HTML should be saved to history, allowing specific parts of the page to be restored. ```fsharp Elem.div [ Hx.historyElt ] [] ``` -------------------------------- ### Add Values to HTMX Requests with hx-vals in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Illustrates how to add static or dynamic values to an HTMX request using `Hx.vals` in Falco F#. This allows sending additional data that isn't part of form inputs, either as a fixed string or evaluated JavaScript. ```fsharp Elem.div [ Hx.get "/example"; Hx.vals "{\"myVal\": \"My Value\"}" ] [ Text.raw "Get Some HTML, Including A Value in the Request" ] // Or with a dynamic value: Elem.div [ Hx.get "/example"; Hx.vals "js:{myVal: calculateValue()}" ] [ Text.raw "Get Some HTML, Including a Dynamic Value from Javascript in the Request" ] ``` -------------------------------- ### Set Request Encoding with HTMX hx-encoding in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to set the encoding type for an HTMX request, such as `multipart/form-data`, using `Hx.encodingMultipart` in Falco F#. This is typically used for file uploads or other complex form data submissions. ```fsharp Elem.form [ Hx.encodingMultipart ] [ (* ... form controls ... *) ] ``` -------------------------------- ### Disable Elements During Requests with HTMX hx-disabled-elt in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Illustrates how to disable an element during an HTMX request using `Hx.disabledThis` or `Hx.disabled` in Falco F#. This prevents multiple submissions or interactions while a request is pending, improving user experience and preventing errors. ```fsharp Elem.button [ Hx.post "/example"; Hx.disabledThis ] [ Text.raw "Post It!" ] // Equivalent to: Elem.button [ Hx.post "/example"; Hx.disabled HxTarget.This ] [ Text.raw "Post It!" ] ``` -------------------------------- ### Disable Elements with HTMX hx-disable in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows how to disable an element using `Hx.disable` in Falco F#. This prevents user interaction with the element, often used to temporarily block input or actions. ```fsharp Elem.div [ Hx.disable ] [] ``` -------------------------------- ### Prevent HTMX Attribute Inheritance with hx-disinherit in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Shows how to prevent a specific HTMX attribute from being inherited by child elements using `Hx.disinherit` in Falco F#. This allows overriding inherited behavior for specific sub-elements, providing granular control over HTMX attribute propagation. ```fsharp Elem.div [ Hx.boostOn; Hx.select "#content"; Hx.targetCss "#content"; Hx.disinherit "hx-target" ] [ Elem.button [ Hx.get "/test" ] [] ] ``` -------------------------------- ### Disable Browser History with HTMX hx-history in Falco F# Source: https://github.com/falcoframework/falco.htmx/blob/main/readme.md Demonstrates how to disable HTMX's history mechanism for an element using `Hx.historyOff` in Falco F#. This prevents HTMX from pushing new states to the browser history, useful for transient UI elements. ```fsharp Elem.div [ Hx.historyOff ] [] ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.