From dbcd3bf13544a913b96f34c855931131c7c1f390 Mon Sep 17 00:00:00 2001 From: Piotr Tomiak Date: Thu, 12 Dec 2024 12:15:24 +0100 Subject: [PATCH] Automatically generate Web Types for the package based on current documentation --- editors/jetbrains/htmx.web-types.json | 477 +++++++++++++++++++++----- package-lock.json | 4 +- package.json | 7 +- scripts/generate-web-types.mjs | 144 ++++++++ www/content/attributes/hx-disable.md | 2 +- 5 files changed, 543 insertions(+), 91 deletions(-) create mode 100644 scripts/generate-web-types.mjs diff --git a/editors/jetbrains/htmx.web-types.json b/editors/jetbrains/htmx.web-types.json index 2eafead83..500c1f3de 100644 --- a/editors/jetbrains/htmx.web-types.json +++ b/editors/jetbrains/htmx.web-types.json @@ -1,7 +1,7 @@ { - "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json", + "$schema": "https://json.schemastore.org/web-types", "name": "htmx", - "version": "1.0.0", + "version": "2.0.3", "js-types-syntax": "typescript", "description-markup": "markdown", "contributions": { @@ -9,7 +9,7 @@ "attributes": [ { "name": "hx-boost", - "description": "The **hx-boost** attribute allows you to \"boost\" normal anchors and form tags to use AJAX instead. This has the [nice fallback](https://en.wikipedia.org/wiki/Progressive_enhancement) that, if the user does not have javascript enabled, the site will continue to work.", + "description": "The `hx-boost` attribute allows you to \"boost\" normal anchors and form tags to use AJAX instead. This\nhas the [nice fallback](https://en.wikipedia.org/wiki/Progressive_enhancement) that, if the user does not \nhave javascript enabled, the site will continue to work.\n\nFor anchor tags, clicking on the anchor will issue a `GET` request to the url specified in the `href` and\nwill push the url so that a history entry is created. The target is the `` tag, and the `innerHTML`\nswap strategy is used by default. All of these can be modified by using the appropriate attributes, except\nthe `click` trigger.", "description-sections": { "Inherited": "" }, @@ -17,7 +17,7 @@ }, { "name": "hx-confirm", - "description": "The **hx-confirm** attribute allows you to confirm an action before issuing a request. This can be useful in cases where the action is destructive and you want to ensure that the user really wants to do it.", + "description": "The `hx-confirm` attribute allows you to confirm an action before issuing a request. This can be useful\nin cases where the action is destructive and you want to ensure that the user really wants to do it.\n\nHere is an example:\n\n```html\n\n```", "description-sections": { "Inherited": "" }, @@ -25,227 +25,280 @@ }, { "name": "hx-delete", - "description": "The **hx-delete** attribute will cause an element to issue a **DELETE** to the specified URL and swap the HTML into the DOM using a swap strategy.", + "description": "The `hx-delete` attribute will cause an element to issue a `DELETE` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n\n```", "description-sections": { - "Not inherited": "" + "Not Inherited": "" }, "doc-url": "https://htmx.org/attributes/hx-delete/" }, { "name": "hx-disable", - "description": "The **hx-disable** attribute disables htmx processing for the given node and any children nodes", + "description": "The `hx-disable` attribute will disable htmx processing for a given element and all its children. This can be \nuseful as a backup for HTML escaping, when you include user generated content in your site, and you want to \nprevent malicious scripting attacks.\n\nThe value of the tag is ignored, and it cannot be reversed by any content beneath it.", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-disable" + "doc-url": "https://htmx.org/attributes/hx-disable/" }, { - "name": "hx-encoding", - "description": "The **hx-encoding** attribute changes the request encoding type", + "name": "hx-disabled-elt", + "description": "The `hx-disabled-elt` attribute allows you to specify elements that will have the `disabled` attribute\nadded to them for the duration of the request. The value of this attribute can be:\n\n* A CSS query selector of the element to disable.\n* `this` to disable the element itself\n* `closest ` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest fieldset` will disable the closest to the element `fieldset`).\n* `find ` which will find the first child descendant element that matches the given CSS selector\n* `next` which resolves to [element.nextElementSibling](https://developer.mozilla.org/docs/Web/API/Element/nextElementSibling)\n* `next ` which will scan the DOM forward for the first element that matches the given CSS selector\n (e.g. `next button` will disable the closest following sibling `button` element)\n* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)\n* `previous ` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous input` will disable the closest previous sibling `input` element)", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-encoding" + "doc-url": "https://htmx.org/attributes/hx-disabled-elt/" }, { - "name": "hx-ext", - "description": "The **hx-ext** attribute enables extensions for an element", + "name": "hx-disinherit", + "description": "The default behavior for htmx is to \"inherit\" many attributes automatically: that is, an attribute such as\n[hx-target](@/attributes/hx-target.md) may be placed on a parent element, and all child elements will inherit\nthat target.\n\nThe `hx-disinherit` attribute allows you to control this automatic attribute inheritance. An example scenario is to \nallow you to place an `hx-boost` on the `body` element of a page, but overriding that behavior in a specific part\nof the page to allow for more specific behaviors.", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-disinherit/" + }, + { + "name": "hx-encoding", + "description": "The `hx-encoding` attribute allows you to switch the request encoding from the usual `application/x-www-form-urlencoded`\nencoding to `multipart/form-data`, usually to support file uploads in an ajax request.\n\nThe value of this attribute should be `multipart/form-data`.", "description-sections": { - "Not Inherited": "" + "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-ext" + "doc-url": "https://htmx.org/attributes/hx-encoding/" + }, + { + "name": "hx-ext", + "description": "The `hx-ext` attribute enables an htmx [extension](https://htmx.org/extensions) for an element and all its children.\n\nThe value can be a single extension name or a comma separated list of extensions to apply.", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-ext/" }, { "name": "hx-get", - "description": "The **hx-get** attribute issues a `GET` to the specified URL", + "description": "The `hx-get` attribute will cause an element to issue a `GET` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n \n```", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-get" + "doc-url": "https://htmx.org/attributes/hx-get/" }, { "name": "hx-headers", - "description": "The **hx-headers** attribute adds to the headers that will be submitted with the request", + "description": "The `hx-headers` attribute allows you to add to the headers that will be submitted with an AJAX request.\n\nBy default, the value of this attribute is a list of name-expression values in [JSON (JavaScript Object Notation)](https://www.json.org/json-en.html) \nformat.", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-headers" + "doc-url": "https://htmx.org/attributes/hx-headers/" }, { "name": "hx-history-elt", - "description": "The **hx-history-elt** attribute specifies the element to snapshot and restore during history navigation", + "description": "The `hx-history-elt` attribute allows you to specify the element that will be used to snapshot and\nrestore page state during navigation. By default, the `body` tag is used. This is typically\ngood enough for most setups, but you may want to narrow it down to a child element. Just make\nsure that the element is always visible in your application, or htmx will not be able to restore\nhistory navigation properly.", "description-sections": { - "Inherited": "" + "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-history-elt" + "doc-url": "https://htmx.org/attributes/hx-history-elt/" + }, + { + "name": "hx-history", + "description": "Set the `hx-history` attribute to `false` on any element in the current document, or any html fragment loaded into the current document by htmx, to prevent sensitive data being saved to the localStorage cache when htmx takes a snapshot of the page state.\n\nHistory navigation will work as expected, but on restoration the URL will be requested from the server instead of the history cache.", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-history/" }, { "name": "hx-include", - "description": "The **hx-include** attribute specifies additional values/inputs to include in AJAX requests", + "description": "The `hx-include` attribute allows you to include additional element values in an AJAX request. The value of this\nattribute can be:\n\n* A CSS query selector of the elements to include.\n* `this` which will include the descendants of the element.\n* `closest ` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest tr` will target the closest table row to the element).\n* `find ` which will find the first child descendant element that matches the given CSS selector.\n* `next ` which will scan the DOM forward for the first element that matches the given CSS selector.\n (e.g. `next .error` will target the closest following sibling element with `error` class)\n* `previous ` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous .error` will target the closest previous sibling with `error` class)", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-include" + "doc-url": "https://htmx.org/attributes/hx-include/" }, { "name": "hx-indicator", - "description": "The **hx-indicator** attribute specifies the element to put the `htmx-request` class on during the AJAX request, displaying it as a request indicator", + "description": "The `hx-indicator` attribute allows you to specify the element that will have the `htmx-request` class\nadded to it for the duration of the request. This can be used to show spinners or progress indicators\nwhile the request is in flight.\n\nThe value of this attribute is a CSS query selector of the element or elements to apply the class to,\nor the keyword [`closest`](https://developer.mozilla.org/docs/Web/API/Element/closest), followed by a CSS selector, \nwhich will find the closest ancestor element or itself, that matches the given CSS selector (e.g. `closest tr`);", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-indicator" - }, - { - "name": "hx-disinherit", - "description": "The **hx-disinherit** attribute allows you to control and disable automatic attribute inheritance for child nodes", - "description-sections": { - "Inherited": "" + "doc-url": "https://htmx.org/attributes/hx-indicator/" + }, + { + "name": "hx-inherit", + "description": "The default behavior for htmx is to \"inherit\" many attributes automatically: that is, an attribute such as\n[hx-target](@/attributes/hx-target.md) may be placed on a parent element, and all child elements will inherit\nthat target. Some people do not like this feature and instead prefer to explicitly specify inheritance for attributes.\n\nTo support this mode of development, htmx offers the `htmx.config.disableInheritance` setting, which can be set to\n`true` to prevent inheritance from being the default behavior for any of the htmx attributes.", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-inherit/" + }, + { + "name": "hx-on", + "pattern": { + "or": [ + { + "items": [ + "/js/events" + ], + "template": [ + "hx-on:", + "#...", + "#item:JS event" + ] + }, + { + "items": [ + "/js/htmx-events" + ], + "template": [ + "hx-on::", + "#...", + "#item:HTMX event" + ] + } + ] }, - "doc-url": "https://htmx.org/attributes/hx-disinherit" + "description": "The `hx-on*` attributes allow you to embed scripts inline to respond to events directly on an element; similar to the \n[`onevent` properties](https://developer.mozilla.org/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) found in HTML, such as `onClick`.\n\nThe `hx-on*` attributes improve upon `onevent` by enabling the handling of any arbitrary JavaScript event,\nfor enhanced [Locality of Behaviour (LoB)](/essays/locality-of-behaviour/) even when dealing with non-standard DOM events. For example, these\nattributes allow you to handle [htmx events](/reference#events).", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-on/" }, { "name": "hx-params", - "description": "The **hx-params** attribute allows you filter the parameters that will be submitted with a request", + "description": "The `hx-params` attribute allows you to filter the parameters that will be submitted with an AJAX request.\n\nThe possible values of this attribute are:\n\n* `*` - Include all parameters (default)\n* `none` - Include no parameters\n* `not ` - Include all except the comma separated list of parameter names\n* `` - Include all the comma separated list of parameter names", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-params" + "doc-url": "https://htmx.org/attributes/hx-params/" }, { "name": "hx-patch", - "description": "The **hx-patch** attribute issues a `PATCH` to the specified URL", + "description": "The `hx-patch` attribute will cause an element to issue a `PATCH` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n\n```", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-patch" + "doc-url": "https://htmx.org/attributes/hx-patch/" }, { "name": "hx-post", - "description": "The **hx-post** attribute issues a `POST` to the specified URL", + "description": "The `hx-post` attribute will cause an element to issue a `POST` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n\n```", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-post" + "doc-url": "https://htmx.org/attributes/hx-post/" }, { "name": "hx-preserve", - "description": "The **hx-preserve** attribute preserves an element between requests (requires the `id` be stable)", + "description": "The `hx-preserve` attribute allows you to keep an element unchanged during HTML replacement.\nElements with `hx-preserve` set are preserved by `id` when htmx updates any ancestor element.\nYou *must* set an unchanging `id` on elements for `hx-preserve` to work.\nThe response requires an element with the same `id`, but its type and other attributes are ignored.\n\n## Notes", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-preserve" + "doc-url": "https://htmx.org/attributes/hx-preserve/" }, { "name": "hx-prompt", - "description": "The **hx-prompt** attribute shows a prompt before submitting a request", + "description": "The `hx-prompt` attribute allows you to show a prompt before issuing a request. The value of\nthe prompt will be included in the request in the `HX-Prompt` header.\n\nHere is an example:\n\n```html\n\n```", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-prompt" + "doc-url": "https://htmx.org/attributes/hx-prompt/" }, { "name": "hx-push-url", - "description": "The **hx-push-url** attribute pushes the URL into the location bar, creating a new history entry", + "description": "The `hx-push-url` attribute allows you to push a URL into the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).\nThis creates a new history entry, allowing navigation with the browser’s back and forward buttons.\nhtmx snapshots the current DOM and saves it into its history cache, and restores from this cache on navigation.\n\nThe possible values of this attribute are:\n\n1. `true`, which pushes the fetched URL into history.\n2. `false`, which disables pushing the fetched URL if it would otherwise be pushed due to inheritance or [`hx-boost`](/attributes/hx-boost).\n3. A URL to be pushed into the location bar.\n This may be relative or absolute, as per [`history.pushState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState).", "description-sections": { - "Not Inherited": "" + "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-push-url" + "doc-url": "https://htmx.org/attributes/hx-push-url/" }, { "name": "hx-put", - "description": "The **hx-put** attribute issues a `PUT` to the specified URL", + "description": "The `hx-put` attribute will cause an element to issue a `PUT` to the specified URL and swap\nthe HTML into the DOM using a swap strategy:\n\n```html\n\n```", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-put" + "doc-url": "https://htmx.org/attributes/hx-put/" }, { - "name": "hx-request", - "description": "The **hx-request** attribute configures various aspects of the request", + "name": "hx-replace-url", + "description": "The `hx-replace-url` attribute allows you to replace the current url of the browser [location history](https://developer.mozilla.org/en-US/docs/Web/API/History_API).\n\nThe possible values of this attribute are:\n\n1. `true`, which replaces the fetched URL in the browser navigation bar.\n2. `false`, which disables replacing the fetched URL if it would otherwise be replaced due to inheritance.\n3. A URL to be replaced into the location bar.\n This may be relative or absolute, as per [`history.replaceState()`](https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState).", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-request" + "doc-url": "https://htmx.org/attributes/hx-replace-url/" }, { - "name": "hx-select", - "description": "The **hx-select** attribute selects a subset of the server response to process", + "name": "hx-request", + "description": "The `hx-request` attribute allows you to configure various aspects of the request via the following attributes:\n \n* `timeout` - the timeout for the request, in milliseconds\n* `credentials` - if the request will send credentials\n* `noHeaders` - strips all headers from the request\n\nThese attributes are set using a JSON-like syntax:\n\n```html\n
\n ...\n
\n```", + "description-sections": {}, + "doc-url": "https://htmx.org/attributes/hx-request/" + }, + { + "name": "hx-select-oob", + "description": "The `hx-select-oob` attribute allows you to select content from a response to be swapped in via an out-of-band swap. \nThe value of this attribute is comma separated list of elements to be swapped out of band. This attribute is almost\nalways paired with [hx-select](@/attributes/hx-select.md).\n\nHere is an example that selects a subset of the response content:\n\n```html\n
\n
\n \n
\n```", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-select" + "doc-url": "https://htmx.org/attributes/hx-select-oob/" }, { - "name": "hx-sse", - "description": "The **hx-sse** attribute connects the DOM to a SSE source", + "name": "hx-select", + "description": "The `hx-select` attribute allows you to select the content you want swapped from a response. The value of\nthis attribute is a CSS query selector of the element or elements to select from the response.\n\nHere is an example that selects a subset of the response content:\n\n```html\n
\n \n
\n```", "description-sections": { - "Not Inherited": "" + "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-sse" + "doc-url": "https://htmx.org/attributes/hx-select/" }, { "name": "hx-swap-oob", - "description": "The **hx-swap-oob** attribute marks content in a response as being \"Out of Band\", i.e. swapped somewhere other than the target", + "description": "The `hx-swap-oob` attribute allows you to specify that some content in a response should be\nswapped into the DOM somewhere other than the target, that is \"Out of Band\". This allows you to piggy back updates to other element updates on a response.\n\nConsider the following response HTML:\n\n```html\n
\n ...\n
\n
\n Saved!\n
", "description-sections": { "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-swap-oob" + "doc-url": "https://htmx.org/attributes/hx-swap-oob/" }, { "name": "hx-swap", - "description": "The **hx-swap** attribute controls how the response content is swapped into the DOM (e.g. 'outerHTML' or 'beforeend')", + "description": "The `hx-swap` attribute allows you to specify how the response will be swapped in relative to the\n[target](@/attributes/hx-target.md) of an AJAX request. If you do not specify the option, the default is\n`htmx.config.defaultSwapStyle` (`innerHTML`).\n\nThe possible values of this attribute are:\n\n* `innerHTML` - Replace the inner html of the target element\n* `outerHTML` - Replace the entire target element with the response\n* `textContent` - Replace the text content of the target element, without parsing the response as HTML\n* `beforebegin` - Insert the response before the target element\n* `afterbegin` - Insert the response before the first child of the target element\n* `beforeend` - Insert the response after the last child of the target element\n* `afterend` - Insert the response after the target element\n* `delete` - Deletes the target element regardless of the response\n* `none`- Does not append content from response (out of band items will still be processed).", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-swap" + "doc-url": "https://htmx.org/attributes/hx-swap/" }, { "name": "hx-sync", - "description": "The **hx-sync** attribute controls requests made by different elements are synchronized with one another", + "description": "The `hx-sync` attribute allows you to synchronize AJAX requests between multiple elements.\n\nThe `hx-sync` attribute consists of a CSS selector to indicate the element to synchronize on, followed optionally\nby a colon and then by an optional syncing strategy. The available strategies are:\n\n* `drop` - drop (ignore) this request if an existing request is in flight (the default)\n* `abort` - drop (ignore) this request if an existing request is in flight, and, if that is not the case, \n *abort* this request if another request occurs while it is still in flight\n* `replace` - abort the current request, if any, and replace it with this request\n* `queue` - place this request in the request queue associated with the given element", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-sync" + "doc-url": "https://htmx.org/attributes/hx-sync/" }, { "name": "hx-target", - "description": "The **hx-target** attribute specifies the target element to be swapped", + "description": "The `hx-target` attribute allows you to target a different element for swapping than the one issuing the AJAX\nrequest. The value of this attribute can be:\n\n* A CSS query selector of the element to target.\n* `this` which indicates that the element that the `hx-target` attribute is on is the target.\n* `closest ` which will find the [closest](https://developer.mozilla.org/docs/Web/API/Element/closest)\n ancestor element or itself, that matches the given CSS selector\n (e.g. `closest tr` will target the closest table row to the element).\n* `find ` which will find the first child descendant element that matches the given CSS selector.\n* `next` which resolves to [element.nextElementSibling](https://developer.mozilla.org/docs/Web/API/Element/nextElementSibling)\n* `next ` which will scan the DOM forward for the first element that matches the given CSS selector.\n (e.g. `next .error` will target the closest following sibling element with `error` class)\n* `previous` which resolves to [element.previousElementSibling](https://developer.mozilla.org/docs/Web/API/Element/previousElementSibling)\n* `previous ` which will scan the DOM backwards for the first element that matches the given CSS selector.\n (e.g `previous .error` will target the closest previous sibling with `error` class)", "description-sections": { "Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-target" + "doc-url": "https://htmx.org/attributes/hx-target/" }, { "name": "hx-trigger", - "description": "The **hx-trigger** attribute specifies specifies the event that triggers the request", + "description": "The `hx-trigger` attribute allows you to specify what triggers an AJAX request. A trigger\nvalue can be one of the following:\n\n* An event name (e.g. \"click\" or \"my-custom-event\") followed by an event filter and a set of event modifiers\n* A polling definition of the form `every `\n* A comma-separated list of such events", "description-sections": { - "Inherited": "" + "Not Inherited": "" }, - "doc-url": "https://htmx.org/attributes/hx-trigger" + "doc-url": "https://htmx.org/attributes/hx-trigger/" }, { - "name": "hx-vals", - "description": "The **hx-vals** attribute specifies values to add to the parameters that will be submitted with the request in JSON form", + "name": "hx-validate", + "description": "The `hx-validate` attribute will cause an element to validate itself by way of the [HTML5 Validation API](@/docs.md#validation)\nbefore it submits a request.\n\nOnly `
` elements validate data by default, but other elements do not. Adding `hx-validate=\"true\"` to ``, `