add documentation for the extension attributes

lsp/src/htmx/attributes/class-tools/classes.md

@@ -1 +1,15 @@
-TODO
+A classes attribute value consists of “runs”, which are separated by an & character. All class operations within a given run will be applied sequentially, with the delay specified.
+
+Within a run, a , character separates distinct class operations.
+
+A class operation is an operation name add, remove, or toggle, followed by a CSS class name, optionally followed by a colon : and a time delay.
+
+<div hx-ext="class-tools">
+    <div classes="add foo"/> <!-- adds the class "foo" after 100ms -->
+    <div class="bar" classes="remove bar:1s"/> <!-- removes the class "bar" after 1s -->
+    <div class="bar" classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s
+                                                                then adds the class "foo" 1s after that -->
+    <div class="bar" classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds
+                                                                 class "foo" after 1s  -->
+    <div classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->
+</div>

lsp/src/htmx/attributes/class-tools/data-classes.md

@@ -0,0 +1,15 @@
+A data-classes attribute value consists of “runs”, which are separated by an & character. All class operations within a given run will be applied sequentially, with the delay specified.
+
+Within a run, a , character separates distinct class operations.
+
+A class operation is an operation name add, remove, or toggle, followed by a CSS class name, optionally followed by a colon : and a time delay.
+
+<div hx-ext="class-tools">
+    <div data-classes="add foo"/> <!-- adds the class "foo" after 100ms -->
+    <div class="bar" data-classes="remove bar:1s"/> <!-- removes the class "bar" after 1s -->
+    <div class="bar" data-classes="remove bar:1s, add foo:1s"/> <!-- removes the class "bar" after 1s
+                                                                then adds the class "foo" 1s after that -->
+    <div class="bar" data-classes="remove bar:1s & add foo:1s"/> <!-- removes the class "bar" and adds
+                                                                 class "foo" after 1s  -->
+    <div data-classes="toggle foo:1s"/> <!-- toggles the class "foo" every 1s -->
+</div>

lsp/src/htmx/attributes/client-side-templates/handlebars-template.md

@@ -1 +1,10 @@
-TODO
+Looks up a handlebars <script> tag by ID for the template content
+
+Usage:
+
+<div hx-ext="client-side-templates">
+  <button hx-get="/some_json"
+          handlebars-template="my-handlebars-template">
+     Handle with handlebars
+  </button>
+</div>

lsp/src/htmx/attributes/client-side-templates/mustache-array-template.md

@@ -1 +1,20 @@
-TODO
+Look up a mustache template by ID for the template content which is rendered for each element in the array
+
+Example for an API that returns an array:
+
+<div hx-ext="client-side-templates">
+  <button hx-get="https://jsonplaceholder.typicode.com/users"
+          hx-swap="innerHTML"
+          hx-target="#content"
+          mustache-array-template="foo">
+    Click Me
+  </button>
+
+  <p id="content">Start</p>
+
+  <template id="foo">
+    {{#data}}
+    <p> {{name}} at {{email}} is with {{company.name}}</p>
+    {{/data}}
+  </template>
+</div>

lsp/src/htmx/attributes/client-side-templates/mustache-template.md

@@ -1 +1,18 @@
-TODO
+Look up a mustache template by ID for the template content
+
+Example:
+
+<div hx-ext="client-side-templates">
+    <button hx-get="https://jsonplaceholder.typicode.com/todos/1"
+          hx-swap="innerHTML"
+          hx-target="#content"
+          mustache-template="foo">
+    Click Me
+  </button>
+
+  <p id="content">Start</p>
+
+  <template id="foo">
+    <p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p>
+  </template>
+</div>

lsp/src/htmx/attributes/client-side-templates/nunjucks-template.md

@@ -1 +1,10 @@
-TODO
+Resolves the template by name via `nunjucks.render()
+
+Usage:
+
+<div hx-ext="client-side-templates">
+  <button hx-get="/some_json"
+          nunjucks-template="my-nunjucks-template">
+     Handle with nunjucks
+  </button>
+</div>

lsp/src/htmx/attributes/client-side-templates/xslt-template.md

@@ -1 +1,9 @@
-TODO
+Looks up an XSLT <script> tab by ID for the template content
+
+Example:
+<div hx-ext="client-side-templates">
+  <button hx-get="/some_xml" 
+          xslt-template="my-xslt-template">
+     Handle with XSLT
+  </button>
+</div>

lsp/src/htmx/attributes/head-support/hx-head.md

@@ -1 +1,44 @@
-TODO
+Use this to override the behaviour of the <head> in the response.
+
+Can be:
+- merge: default behaviour
+- append: append the elements to the existing <head>
+- re-eval: remove and append on every request
+
+Example
+
+As an example, consider the following head tag in an existing document:
+
+<head>
+    <link rel="stylesheet" href="https://the.missing.style">
+    <link rel="stylesheet" href="/css/site1.css">
+    <script src="/js/script1.js"></script>
+    <script src="/js/script2.js"></script>
+</head>
+
+If htmx receives a request containing this new head tag:
+
+<head>
+    <link rel="stylesheet" href="https://the.missing.style">
+    <link rel="stylesheet" href="/css/site2.css">
+    <script src="/js/script2.js"></script>
+    <script src="/js/script3.js"></script>
+</head>
+
+Then the following operations will occur:
+
+    <link rel="stylesheet" href="https://the.missing.style"> will be left alone
+    <link rel="stylesheet" href="/css/site1.css"> will be removed from the head
+    <link rel="stylesheet" href="/css/site2.css"> will be added to the head
+    <script src="/js/script1.js"></script> will be removed from the head
+    <script src="/js/script2.js"></script> will be left alone
+    <script src="/js/script3.js"></script> will be added to the head
+
+The final head element will look like this:
+
+<head>
+    <link rel="stylesheet" href="https://the.missing.style">
+    <script src="/js/script2.js"></script>
+    <link rel="stylesheet" href="/css/site2.css">
+    <script src="/js/script3.js"></script>
+</head>

lsp/src/htmx/attributes/include-vals/include-vals.md

@@ -1 +1,8 @@
-TODO
+ The value of this attribute is one or more name/value pairs, which will be evaluated as the fields in a javascript object literal.
+
+Usage:
+<div hx-ext="include-vals">
+    <div hx-get="/test" include-vals="included:true, computed: computeValue()">
+      Will Include Additional Values
+    </div>
+</div>

lsp/src/htmx/attributes/loading-states/data-loading-aria-busy.md

@@ -1 +1,4 @@
-TODO
+Adds `aria-busy="true"` to the element for the duration of the request
+
+Example:
+<button data-loading-aria-busy>Submit</button>

lsp/src/htmx/attributes/loading-states/data-loading-class-remove.md

@@ -1 +1,6 @@
-TODO
+Removes, then adds back, CSS classes from the element while loading.
+
+Example:
+<div class="p-8 bg-gray-100 transition-all ease-in-out duration-600" data-loading-class-remove="bg-gray-100">
+  ...
+</div>

lsp/src/htmx/attributes/loading-states/data-loading-class.md

@@ -1 +1,5 @@
-TODO
+Adds, then removes, CSS classes to the element while loading
+
+<div class="transition-all ease-in-out duration-600" data-loading-class="bg-gray-100 opacity-80">
+  ...
+</div>

lsp/src/htmx/attributes/loading-states/data-loading-delay.md

@@ -1 +1,7 @@
-TODO
+This attribute ensures that the loading state changes are applied only after 200ms if the request is not finished. The default delay can be modified through the attribute value and expressed in milliseconds:
+
+Example:
+<button type="submit" data-loading-disable data-loading-delay="1000">Submit</button>
+
+Note:
+You can place the `data-loading-delay` attribute directly on the element you want to disable, or in any parent element.

lsp/src/htmx/attributes/loading-states/data-loading-disable.md

@@ -1 +1,4 @@
-TODO
+Disables an element for the duration of the request.
+
+Example:
+<button data-loading-disable>Submit</button>

lsp/src/htmx/attributes/loading-states/data-loading-path.md

@@ -1 +1,11 @@
-TODO
+Allows filtering the processing of loading states only for specific requests based on the request path.
+
+<form hx-post="/save">
+  <button type="submit" data-loading-disable data-loading-path="/save">Submit</button>
+</form>
+
+You can place the data-loading-path attribute directly on the loading state element, or in any parent element.
+
+<form hx-post="/save" data-loading-path="/save">
+  <button type="submit" data-loading-disable>Submit</button>
+</form>

lsp/src/htmx/attributes/loading-states/data-loading-states.md

@@ -1 +1,16 @@
-TODO
+This attribute is optional and it allows defining a scope for the loading states so only elements within that scope are processed.
+
+Example:
+<div data-loading-states>
+  <div hx-get=""></div>
+  <div data-loading>loading</div>
+</div>
+
+<div data-loading-states>
+  <div hx-get=""></div>
+  <div data-loading>loading</div>
+</div>
+
+<form data-loading-states hx-post="">
+  <div data-loading>loading</div>
+</form>

lsp/src/htmx/attributes/loading-states/data-loading-target.md

@@ -1 +1,13 @@
-TODO
+Allows setting a different target to apply the loading states. The attribute value can be any valid CSS selector. The example below disables the submit button and shows the loading state when the form is submitted.
+
+Example:
+
+<form hx-post="/save"
+  data-loading-target="#loading"
+  data-loading-class-remove="hidden">
+
+  <button type="submit" data-loading-disable>Submit</button>
+
+</form>
+
+<div id="loading" class="hidden">Loading ...</div>

lsp/src/htmx/attributes/loading-states/data-loading.md

@@ -1 +1,9 @@
-TODO
+Shows the element. The default style is inline-block, but it’s possible to use any display style by specifying it in the attribute value.
+
+Examples:
+
+<div data-loading>loading</div>
+
+<div data-loading="block">loading</div>
+
+<div data-loading="flex">loading</div>

lsp/src/htmx/attributes/path-deps/path-deps.md

@@ -1 +1,21 @@
-TODO
+Set the path dependency of the current div. 
+Use together with hx-trigger="path-deps".
+
+Usage:
+
+<div hx-get="/example"
+     hx-trigger="path-deps"
+     path-deps="/foo/bar">
+  ...
+</div>
+
+This div will fire a GET request to /example when any other element issues a mutating request (that is, a non-GET request like a POST) to /foo/bar or any sub-paths of that path.
+
+You can use a * to match any path component:
+
+<div hx-get="/example"
+     hx-trigger="path-deps"
+     path-deps="/contacts/*">
+    ...
+</div>
+

lsp/src/htmx/attributes/preload/preload-images.md

@@ -1 +1,8 @@
-TODO
+After an HTML page (or page fragment) is preloaded, also preload the linked image resources.
+
+<div hx-ext="preload">
+    <a href="/my-next-page" preload="mouseover" preload-images="true">Next Page</a>
+</div>
+
+NOTE:
+This does not load images from or run Javascript or CSS content.

lsp/src/htmx/attributes/preload/preload.md

@@ -1 +1,27 @@
-TODO
+The element with this attribute will start preloading the data at the location as soon as the `mousedown` event begins.
+
+Example:
+
+<body hx-ext="preload">
+    <h1>What Works</h2>
+    <a href="/server/1" preload>WILL BE requested using a standard XMLHttpRequest() and default options (below)</a>
+    <button hx-get="/server/2" preload>WILL BE requested with additional htmx headers.</button>
+
+    <h1>What WILL NOT WORK</h1>
+    <a href="/server/3">WILL NOT be preloaded because it does not have an explicit "preload" attribute</a>
+    <a hx-post="/server/4" preload>WILL NOT be preloaded because it is an HX-POST transaction.</a>
+</body>
+
+If other preload triggers need to be used this can be done using
+preload="event-name" with some default events
+
+Examples:
+<a href="/server/1" preload="mousedown">This will be preloaded when the user begins to click.</a>
+<a href="/server/1" preload="mouseover">This will be preloaded when the user's mouse remains over it for more than 100ms.</a>
+<body hx-ext="preload">
+    <button hx-get="/server" preload="preload:init" hx-target="idLoadMore">Load More</a>
+    <div id="idLoadMore">
+        Content for this DIV will be preloaded as soon as the page is ready.
+        Clicking the button above will swap it into the DOM.
+    </div>
+</body>

lsp/src/htmx/attributes/remove-me/remove-me.md

@@ -1 +1,7 @@
-TODO
+Remove this element after a specified time
+
+Example:
+<div hx-ext="remove-me">
+    <!-- Removes this div after 1 second -->
+    <div remove-me="1s">To Be Removed...</div>
+</div>

lsp/src/htmx/attributes/response-targets/hx-target-error.md

@@ -1 +1,13 @@
-TODO
+when a 5xx or 4xx error is returned. Target a different element.
+
+<div hx-ext="response-targets">
+    <div id="response-div"></div>
+    <button hx-post="/register"
+            hx-target="#response-div"
+            hx-target-error="#any-errors">
+        Register!
+    </button>
+    <div id="any-errors"></div>
+</div>
+
+2xx codes will be handled as normal. However, when the response code is 5xx or 4xx, the response from /register will replace the contents of the div with the id any-errors.

lsp/src/htmx/attributes/sse/sse-connect.md

@@ -1 +1,4 @@
-TODO
+Subscribe to server-sent-events at the <url>
+
+Usage:
+<div hx-ext="sse" sse-connect="/chatroom" sse-swap="message"></div>

lsp/src/htmx/attributes/sse/sse-swap.md

@@ -1 +1,6 @@
-TODO
+Swap when a message with <name> is sent by the server.
+
+<div hx-ext="sse" sse-connect="/chatroom" sse-swap="message">
+    Contents of this box will be updated in real time
+    with every SSE message received from the chatroom.
+</div>

lsp/src/htmx/attributes/ws/ws-connect.md

@@ -1 +1,11 @@
-TODO
+Connect to <url> using the websocket protocol
+
+<div hx-ext="ws" ws-connect="/chatroom">
+    <div id="notifications"></div>
+    <div id="chat_room">
+        ...
+    </div>
+    <form id="form" ws-send>
+        <input name="chat_message">
+    </form>
+</div>

lsp/src/htmx/attributes/ws/ws-send.md

@@ -1 +1,11 @@
-TODO
+Send a message to the nearest websocket based on the trigger value for the element
+
+<div hx-ext="ws" ws-connect="/chatroom">
+    <div id="notifications"></div>
+    <div id="chat_room">
+        ...
+    </div>
+    <form id="form" ws-send>
+        <input name="chat_message">
+    </form>
+</div>

lsp/src/htmx/mod.rs

@@ -81,7 +81,8 @@ pub fn hx_hover(text_params: TextDocumentPositionParams) -> Option<HxCompletion>
 
 pub static HX_EXTENSIONS: phf::Map<&'static str, &'static [HxCompletion]> = phf::phf_map! {
     "class-tools" => build_completion![
-        ("classes", "./attributes/class-tools/classes.md")
+        ("classes", "./attributes/class-tools/classes.md"),
+        ("data-classes", "./attributes/class-tools/data-classes.md")
     ] as &[_],
     "client-side-templates" => build_completion![
         ("handlebars-template", "./attributes/client-side-templates/handlebars-template.md"),