bit-badger/myPrayerJournal
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases 36 Activity

Move HTMX to its own project

Browse Source
This commit is contained in:
Daniel J. Summers 2021-10-03 23:26:37 -04:00
parent 82ab11c727
commit 6dc1ad746c
4 changed files with 8 additions and 260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/MyPrayerJournal/Server/Handlers.fs
View File

@ -11,18 +11,7 @@ open MyPrayerJournal.Data.Extensions
/// Send a partial result if this is not a full page load /// Send a partial result if this is not a full page load
let partialIfNotRefresh content : HttpHandler = let partialIfNotRefresh content : HttpHandler =
fun next ctx -> task { fun next ctx -> task {
let hdrs = Headers.fromRequest ctx match ctx.Request.IsHtmx && not ctx.Request.IsHtmxRefresh with
let isHtmx =
hdrs
|> List.filter HtmxReqHeader.isRequest
|> List.tryHead
|> Option.isSome
let isRefresh =
hdrs
|> List.filter HtmxReqHeader.isHistoryRestoreRequest
|> List.tryHead
|> function Some (HistoryRestoreRequest hist) -> hist | _ -> false
match isHtmx && not isRefresh with
| true -> return! ctx.WriteHtmlViewAsync content | true -> return! ctx.WriteHtmlViewAsync content
| false -> return! Views.Layout.view content |> ctx.WriteHtmlViewAsync | false -> return! Views.Layout.view content |> ctx.WriteHtmlViewAsync
} }
@ -32,7 +21,7 @@ module Vue =
/// The application index page /// The application index page
let app : HttpHandler = let app : HttpHandler =
Headers.toResponse (Trigger "menu-refresh") withHxTrigger "menu-refresh"
>=> partialIfNotRefresh (ViewEngine.HtmlElements.str "It works") >=> partialIfNotRefresh (ViewEngine.HtmlElements.str "It works")
@ -110,8 +99,7 @@ module private Helpers =
/// Trigger a menu item refresh /// Trigger a menu item refresh
let withMenuRefresh : HttpHandler = let withMenuRefresh : HttpHandler =
// let trigger = //string ctx.Request.Path |> sprintf "{ \"menu-refresh\": \"%s\" }" :> obj |> TriggerAfterSwap withHxTriggerAfterSettle "menu-refresh"
Headers.toResponse (TriggerAfterSettle "menu-refresh")
/// Render a component result /// Render a component result
let renderComponent nodes : HttpHandler = let renderComponent nodes : HttpHandler =
@ -120,7 +108,6 @@ module private Helpers =
} }
/// Strongly-typed models for post requests /// Strongly-typed models for post requests
module Models = module Models =
@ -174,10 +161,7 @@ module Components =
// GET /components/nav-items // GET /components/nav-items
let navItems : HttpHandler = let navItems : HttpHandler =
fun next ctx -> task { fun next ctx -> task {
let url = let url = ctx.Request.Headers.HxCurrentUrl
Headers.fromRequest ctx
|> List.tryFind HtmxReqHeader.isCurrentUrl
|> function Some (CurrentUrl u) -> Some u | _ -> None
let isAuthorized = ctx |> (user >> Option.isSome) let isAuthorized = ctx |> (user >> Option.isSome)
return! renderComponent (Views.Navigation.currentNav isAuthorized false url) next ctx return! renderComponent (Views.Navigation.currentNav isAuthorized false url) next ctx
} }

102
src/MyPrayerJournal/Server/Htmx.fs
View File

@ -1,102 +0,0 @@
module Giraffe.Htmx
open System
/// HTMX request header values
type HtmxReqHeader =
/// Indicates that the request is via an element using `hx-boost`
| Boosted of string
/// The current URL of the browser
| CurrentUrl of Uri
/// `true` if the request is for history restoration after a miss in the local history cache
| HistoryRestoreRequest of bool
/// The user response to an hx-prompt
| Prompt of string
/// Always `true`
| Request of bool
/// The `id` of the target element if it exists
| Target of string
/// The `id` of the triggered element if it exists
| Trigger of string
/// The `name` of the triggered element if it exists
| TriggerName of string
/// Functions for manipulating htmx request headers
module HtmxReqHeader =
/// True if this is an `HX-Boosted` header, false if not
let isBoosted = function Boosted _ -> true | _ -> false
/// True if this is an `HX-Current-URL` header, false if not
let isCurrentUrl = function CurrentUrl _ -> true | _ -> false
/// True if this is an `HX-History-Restore-Request` header, false if not
let isHistoryRestoreRequest = function HistoryRestoreRequest _ -> true | _ -> false
/// True if this is an `HX-Prompt` header, false if not
let isPrompt = function Prompt _ -> true | _ -> false
/// True if this is an `HX-Request` header, false if not
let isRequest = function Request _ -> true | _ -> false
/// True if this is an `HX-Target` header, false if not
let isTarget = function Target _ -> true | _ -> false
/// True if this is an `HX-Trigger` header, false if not
let isTrigger = function Trigger _ -> true | _ -> false
/// True if this is an `HX-Trigger-Name` header, false if not
let isTriggerName = function TriggerName _ -> true | _ -> false
/// HTMX response header values
type HtmxResHeader =
/// Pushes a new url into the history stack
| Push of bool
/// Can be used to do a client-side redirect to a new location
| Redirect of string
/// If set to `true` the client side will do a a full refresh of the page
| Refresh of bool
/// Allows you to trigger client side events
| Trigger of obj
/// Allows you to trigger client side events after changes have settled
| TriggerAfterSettle of obj
/// Allows you to trigger client side events after DOM swapping occurs
| TriggerAfterSwap of obj
module Headers =
open Microsoft.AspNetCore.Http
open Microsoft.Extensions.Primitives
/// Get the HTMX headers from the request context
let fromRequest (ctx : HttpContext) =
ctx.Request.Headers.Keys
|> Seq.filter (fun key -> key.StartsWith "HX-")
|> Seq.map (fun key ->
let v = ctx.Request.Headers.[key].[0]
match key with
| "HX-Boosted" -> v |> (Boosted >> Some)
| "HX-Current-URL" -> v |> (Uri >> CurrentUrl >> Some)
| "HX-History-Restore-Request" -> v |> (bool.Parse >> HistoryRestoreRequest >> Some)
| "HX-Prompt" -> v |> (Prompt >> Some)
| "HX-Request" -> v |> (bool.Parse >> Request >> Some)
| "HX-Target" -> v |> (Target >> Some)
| "HX-Trigger" -> v |> (HtmxReqHeader.Trigger >> Some)
| "HX-Trigger-Name" -> v |> (TriggerName >> Some)
| _ -> None
)
|> Seq.filter Option.isSome
|> Seq.map Option.get
|> List.ofSeq
/// Add an htmx header to the response
let toResponse (hdr : HtmxResHeader) : HttpHandler =
let toJson (it : obj) =
match it with
| :? string as x -> x
| _ -> "" // TODO: serialize object
fun next ctx -> task {
match hdr with
| Push push -> "HX-Push", string push
| Redirect url -> "HX-Redirect", url
| Refresh refresh -> "HX-Refresh", string refresh
| Trigger trig -> "HX-Trigger", toJson trig
| TriggerAfterSettle trig -> "HX-Trigger-After-Settle", toJson trig
| TriggerAfterSwap trig -> "HX-Trigger-After-Swap", toJson trig
|> function (k, v) -> ctx.Response.Headers.Add (k, StringValues v)
return! next ctx
}

6
src/MyPrayerJournal/Server/MyPrayerJournal.Server.fsproj
View File

@ -4,8 +4,6 @@
<Version>3.0.0.0</Version> <Version>3.0.0.0</Version>
</PropertyGroup> </PropertyGroup>
<ItemGroup> <ItemGroup>
<Compile Include="ViewEngine.Htmx.fs" />
<Compile Include="Htmx.fs" />
<Compile Include="Domain.fs" /> <Compile Include="Domain.fs" />
<Compile Include="Data.fs" /> <Compile Include="Data.fs" />
<Compile Include="Dates.fs" /> <Compile Include="Dates.fs" />
@ -20,6 +18,10 @@
<PackageReference Include="LiteDB" Version="5.0.11" /> <PackageReference Include="LiteDB" Version="5.0.11" />
<PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.10" /> <PackageReference Include="Microsoft.AspNetCore.Authentication.JwtBearer" Version="5.0.10" />
</ItemGroup> </ItemGroup>
<ItemGroup>
<ProjectReference Include="../../../../Giraffe.Htmx/src/Htmx/Giraffe.Htmx.fsproj" />
<ProjectReference Include="../../../../Giraffe.Htmx/src/ViewEngine.Htmx/Giraffe.ViewEngine.Htmx.fsproj" />
</ItemGroup>
<ItemGroup> <ItemGroup>
<Folder Include="wwwroot\" /> <Folder Include="wwwroot\" />
</ItemGroup> </ItemGroup>

136
src/MyPrayerJournal/Server/ViewEngine.Htmx.fs
View File

@ -1,136 +0,0 @@
module Giraffe.ViewEngine.Htmx
/// Valid values for the `hx-encoding` attribute
[<RequireQualifiedAccess>]
module HxEncoding =
/// A standard HTTP form
let Form = "application/x-www-form-urlencoded"
/// A multipart form (used for file uploads)
let MultipartForm = "multipart/form-data"
// TODO: hx-header helper
/// Values / helpers for the `hx-params` attribute
[<RequireQualifiedAccess>]
module HxParams =
/// Include all parameters
let All = "*"
/// Include no parameters
let None = "none"
/// Include the specified parameters
let With fields = fields |> List.reduce (fun acc it -> $"{acc},{it}")
/// Exclude the specified parameters
let Except fields = With fields |> sprintf "not %s"
// TODO: hx-request helper
/// Valid values for the `hx-swap` attribute (may be combined with swap/settle/scroll/show config)
[<RequireQualifiedAccess>]
module HxSwap =
/// The default, replace the inner html of the target element
let InnerHtml = "innerHTML"
/// Replace the entire target element with the response
let OuterHtml = "outerHTML"
/// Insert the response before the target element
let BeforeBegin = "beforebegin"
/// Insert the response before the first child of the target element
let AfterBegin = "afterbegin"
/// Insert the response after the last child of the target element
let BeforeEnd = "beforeend"
/// Insert the response after the target element
let AfterEnd = "afterend"
/// Does not append content from response (out of band items will still be processed).
let None = "none"
/// Helpers for the `hx-trigger` attribute
[<RequireQualifiedAccess>]
module HxTrigger =
/// Append a filter to a trigger
let private appendFilter filter (trigger : string) =
match trigger.Contains "[" with
| true ->
let parts = trigger.Split ('[', ']')
sprintf "%s[%s&&%s]" parts.[0] parts.[1] filter
| false -> sprintf "%s[%s]" trigger filter
/// Trigger the event on a click
let Click = "click"
/// Trigger the event on page load
let Load = "load"
/// Helpers for defining filters
module Filter =
/// Only trigger the event if the `ALT` key is pressed
let Alt = appendFilter "altKey"
/// Only trigger the event if the `CTRL` key is pressed
let Ctrl = appendFilter "ctrlKey"
/// Only trigger the event if the `SHIFT` key is pressed
let Shift = appendFilter "shiftKey"
/// Only trigger the event if `CTRL+ALT` are pressed
let CtrlAlt = Ctrl >> Alt
/// Only trigger the event if `CTRL+SHIFT` are pressed
let CtrlShift = Ctrl >> Shift
/// Only trigger the event if `CTRL+ALT+SHIFT` are pressed
let CtrlAltShift = CtrlAlt >> Shift
/// Only trigger the event if `ALT+SHIFT` are pressed
let AltShift = Alt >> Shift
// TODO: more stuff for the hx-trigger helper
// TODO: hx-vals helper
[<AutoOpen>]
module HtmxAttrs =
/// Progressively enhances anchors and forms to use AJAX requests
let _hxBoost = attr "hx-boost" "true"
/// Shows a confim() dialog before issuing a request
let _hxConfirm = attr "hx-confirm"
/// Issues a DELETE to the specified URL
let _hxDelete = attr "hx-delete"
/// Disables htmx processing for the given node and any children nodes
let _hxDisable = flag "hx-disable"
/// Changes the request encoding type
let _hxEncoding = attr "hx-encoding"
/// Extensions to use for this element
let _hxExt = attr "hx-ext"
/// Issues a GET to the specified URL
let _hxGet = attr "hx-get"
/// Adds to the headers that will be submitted with the request
let _hxHeaders = attr "hx-headers"
/// The element to snapshot and restore during history navigation
let _hxHistoryElt = flag "hx-history-elt"
/// Includes additional data in AJAX requests
let _hxInclude = attr "hx-include"
/// The element to put the htmx-request class on during the AJAX request
let _hxIndicator = attr "hx-indicator"
/// Filters the parameters that will be submitted with a request
let _hxParams = attr "hx-params"
/// Issues a PATCH to the specified URL
let _hxPatch = attr "hx-patch"
/// Issues a POST to the specified URL
let _hxPost = attr "hx-post"
/// Preserves an element between requests
let _hxPreserve = attr "hx-preserve" "true"
/// Shows a prompt before submitting a request
let _hxPrompt = attr "hx-prompt"
/// Pushes the URL into the location bar, creating a new history entry
let _hxPushUrl = flag "hx-push-url"
/// Issues a PUT to the specified URL
let _hxPut = attr "hx-put"
/// Configures various aspects of the request
let _hxRequest = attr "hx-request"
/// Selects a subset of the server response to process
let _hxSelect = attr "hx-select"
/// Establishes and listens to Server Sent Event (SSE) sources for events
let _hxSse = attr "hx-sse"
/// Marks content in a response as being "Out of Band", i.e. swapped somewhere other than the target
let _hxSwapOob = attr "hx-swap-oob"
/// Controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeEnd')
let _hxSwap = attr "hx-swap"
/// Specifies the target element to be swapped
let _hxTarget = attr "hx-target"
/// Specifies the event that triggers the request
let _hxTrigger = attr "hx-trigger"
/// Adds to the parameters that will be submitted with the request
let _hxVals = attr "hx-vals"
/// Establishes a WebSocket or sends information to one
let _hxWs = attr "hx-ws"