From 9d6778e9f8aacd19d39c4c8a28c6fb72c2443b7c Mon Sep 17 00:00:00 2001 From: Viet Dinh <54ckb0y789@gmail.com> Date: Tue, 14 May 2024 13:13:28 -0400 Subject: [PATCH] feat: hx-on-, hx-target completions --- example/pnpm-lock.yaml | 27 +++++--- src/jsx.d.ts | 123 ++++++++++++++++++++-------------- src/typed-html/jsx-runtime.ts | 2 +- 3 files changed, 88 insertions(+), 64 deletions(-) diff --git a/example/pnpm-lock.yaml b/example/pnpm-lock.yaml index d48a021..974d3ca 100644 --- a/example/pnpm-lock.yaml +++ b/example/pnpm-lock.yaml @@ -1,22 +1,27 @@ -lockfileVersion: '6.0' +lockfileVersion: '9.0' settings: autoInstallPeers: true excludeLinksFromLockfile: false -dependencies: - typed-htmx: - specifier: link:.. - version: link:.. +importers: -devDependencies: - hono: - specifier: ^3.11.12 - version: 3.11.12 + .: + dependencies: + typed-htmx: + specifier: link:.. + version: link:.. + devDependencies: + hono: + specifier: ^3.11.12 + version: 3.11.12 packages: - /hono@3.11.12: + hono@3.11.12: resolution: {integrity: sha512-TrxH75bc0m2UbvrhaXkoo32A9OhkJtvICAYgYWtxqLDOxBjRqSikyp4K7HTbnWkPeg9Z+2Q3nv0dN4o8kL6yLg==} engines: {node: '>=16.0.0'} - dev: true + +snapshots: + + hono@3.11.12: {} diff --git a/src/jsx.d.ts b/src/jsx.d.ts index bd678e6..b799a36 100644 --- a/src/jsx.d.ts +++ b/src/jsx.d.ts @@ -34,51 +34,69 @@ type HxSync = ":drop" | ":abort" | ":replace" | ":queue" | ":queue first" | ":qu /** * Any of the standard DOM events, or htmx-specific events. */ -type HxTriggers = keyof GlobalEventHandlersEventMap | HtmxEvents; +type HxTriggers = keyof GlobalEventHandlersEventMap | HtmxUtils.HtmxEvents; -type HtmxEvents = - | "htmx:abort" - | "htmx:afterOnLoad" - | "htmx:afterProcessNode" - | "htmx:afterRequest" - | "htmx:afterSettle" - | "htmx:afterSwap" - | "htmx:beforeCleanupElement" - | "htmx:beforeOnLoad" - | "htmx:beforeProcessNode" - | "htmx:beforeRequest" - | "htmx:beforeSwap" - | "htmx:beforeSend" - | "htmx:configRequest" - | "htmx:confirm" - | "htmx:historyCacheError" - | "htmx:historyCacheMiss" - | "htmx:historyCacheMissError" - | "htmx:historyCacheMissLoad" - | "htmx:historyRestore" - | "htmx:beforeHistorySave" - | "htmx:load" - | "htmx:noSSESourceError" - | "htmx:onLoadError" - | "htmx:oobAfterSwap" - | "htmx:oobBeforeSwap" - | "htmx:oobErrorNoTarget" - | "htmx:prompt" - | "htmx:pushedIntoHistory" - | "htmx:responseError" - | "htmx:sendError" - | "htmx:sseError" - | "htmx:sseOpen" - | "htmx:swapError" - | "htmx:targetError" - | "htmx:timeout" - | "htmx:validation:validate" - | "htmx:vaildation:failed" - | "htmx:validation:halted" - | "htmx:xhr:abort" - | "htmx:xhr:loadend" - | "htmx:xhr:loadstart" - | "htmx:xhr:progress" +/** @ignore */ +declare namespace HtmxUtils { + type HxOnMap = + { [K in keyof GlobalEventHandlersEventMap as `hx-on-${K}`]?: string; } & + { [K in HxOnHtmxEvents as `hx-on--${K}`]?: string; } + + type HxOnHtmxEvents = + | JsxHtmxEvents + | keyof { [K in keyof HxSubevents as `${K}-${HxSubevents[K]}`]: never } + + type JsxHtmxEvents = + | "abort" + | "after-on-load" + | "after-process-node" + | "after-request" + | "after-settle" + | "after-swap" + | "before-cleanup-element" + | "before-on-load" + | "before-process-node" + | "before-request" + | "before-swap" + | "before-send" + | "config-request" + | "confirm" + | "history-cache-error" + | "history-cache-miss" + | "history-cache-miss-error" + | "history-cache-miss-load" + | "history-restore" + | "before-history-save" + | "load" + | "no-sse-source-error" + | "on-load-error" + | "oob-after-swap" + | "oob-before-swap" + | "oob-error-no-target" + | "prompt" + | "pushed-into-history" + | "response-error" + | "send-error" + | "sse-error" + | "sse-open" + | "swap-error" + | "target-error" + | "timeout" + + type HxSubevents = { + validation: 'validate' | 'failed' | 'halted'; + xhr: 'abort' | 'loadend' | 'loadstart' | 'progress'; + } + + type KebabToCamel = + T extends `${infer Head}-${infer Rest}` + ? `${Head}${KebabToCamel>}` + : T + + type HtmxEvents = + | `htmx:${KebabToCamel}` + | keyof { [K in keyof HxSubevents as `htmx:${K}:${HxSubevents[K]}`]: never } +} /** * An event followed by one of these modifiers, e.g. `click once`. @@ -111,14 +129,15 @@ type HxTriggerModifier = * } * interface HtmlTag { * /** Describe your attribute *\/ - * ["my-extension-attr"]?: string; + * ["my-extension-attr"]?: "true" | "false"; * // Add any other attributes your extension uses here * } * } * } * *
- * Hello + * Hello + * // ^? *
* ``` */ @@ -298,12 +317,12 @@ interface HtmxBuiltinExtensions { * `hx-get`, `hx-post` and other request attributes can include path variables by * using the {@linkcode HtmxBuiltinExtensions.pathParams path-params} extension. * Once used as a path variable, it will not be included in the request body. - * ```jsx - * * // Only 'foo' will be included in the request body * ``` */ -interface HtmxAttributes { +interface HtmxAttributes extends HtmxUtils.HxOnMap { /** @ignore For React compatibility only. */ children?: {} | null; /** @ignore For React compatibility only. */ @@ -766,11 +785,11 @@ interface HtmxAttributes { /** @ignore */ declare namespace JSX { - interface HtmxExtensions extends HtmxBuiltinExtensions {} + interface HtmxExtensions extends HtmxBuiltinExtensions { } // typed-html - interface HtmlTag extends HtmxAttributes {} + interface HtmlTag extends HtmxAttributes { } } /** @ignore */ -interface HTMLElement extends HtmxAttributes {} +interface HTMLElement extends HtmxAttributes { } diff --git a/src/typed-html/jsx-runtime.ts b/src/typed-html/jsx-runtime.ts index 226ba85..6357521 100644 --- a/src/typed-html/jsx-runtime.ts +++ b/src/typed-html/jsx-runtime.ts @@ -1,5 +1,5 @@ -/// /// +/// import { createElement } from "typed-html"; import { jsxConfig } from "../index.js";