Generate .d.ts file in build script (#2653)

* Generate .d.ts file in build script

Resolves: #2629

* Streamline configuration options

Delete the JSConfig so we don't have to un-specify options when checking
vs generating (and also to remove a config file). Steamline the options
by re-using the NPM commands.

* Remove type generating from dev script

dist/htmx.d.ts

@@ -0,0 +1,195 @@
+declare namespace htmx {
+    const onLoad: (callback: (elt: Node) => void) => EventListener;
+    const process: (elt: string | Element) => void;
+    const on: (arg1: string | EventTarget, arg2: string | EventListener, arg3?: EventListener) => EventListener;
+    const off: (arg1: string | EventTarget, arg2: string | EventListener, arg3?: EventListener) => EventListener;
+    const trigger: (elt: string | EventTarget, eventName: string, detail?: any) => boolean;
+    const ajax: (verb: HttpVerb, path: string, context: string | Element | HtmxAjaxHelperContext) => Promise<void>;
+    const find: (eltOrSelector: string | ParentNode, selector?: string) => Element;
+    const findAll: (eltOrSelector: string | ParentNode, selector?: string) => NodeListOf<Element>;
+    const closest: (elt: string | Element, selector: string) => Element;
+    function values(elt: Element, type: HttpVerb): any;
+    const remove: (elt: Node, delay?: number) => void;
+    const addClass: (elt: string | Element, clazz: string, delay?: number) => void;
+    const removeClass: (node: string | Node, clazz: string, delay?: number) => void;
+    const toggleClass: (elt: string | Element, clazz: string) => void;
+    const takeClass: (elt: string | Node, clazz: string) => void;
+    const swap: (target: string | Element, content: string, swapSpec: HtmxSwapSpecification, swapOptions?: SwapOptions) => void;
+    const defineExtension: (name: string, extension: any) => void;
+    const removeExtension: (name: string) => void;
+    const logAll: () => void;
+    const logNone: () => void;
+    const logger: any;
+    namespace config {
+        const historyEnabled: boolean;
+        const historyCacheSize: number;
+        const refreshOnHistoryMiss: boolean;
+        const defaultSwapStyle: HtmxSwapStyle;
+        const defaultSwapDelay: number;
+        const defaultSettleDelay: number;
+        const includeIndicatorStyles: boolean;
+        const indicatorClass: string;
+        const requestClass: string;
+        const addedClass: string;
+        const settlingClass: string;
+        const swappingClass: string;
+        const allowEval: boolean;
+        const allowScriptTags: boolean;
+        const inlineScriptNonce: string;
+        const inlineStyleNonce: string;
+        const attributesToSettle: string[];
+        const withCredentials: boolean;
+        const timeout: number;
+        const wsReconnectDelay: "full-jitter" | ((retryCount: number) => number);
+        const wsBinaryType: BinaryType;
+        const disableSelector: string;
+        const scrollBehavior: 'auto' | 'instant' | 'smooth';
+        const defaultFocusScroll: boolean;
+        const getCacheBusterParam: boolean;
+        const globalViewTransitions: boolean;
+        const methodsThatUseUrlParams: (HttpVerb)[];
+        const selfRequestsOnly: boolean;
+        const ignoreTitle: boolean;
+        const scrollIntoViewOnBoost: boolean;
+        const triggerSpecsCache: any | null;
+        const disableInheritance: boolean;
+        const responseHandling: HtmxResponseHandlingConfig[];
+        const allowNestedOobSwaps: boolean;
+    }
+    const parseInterval: (str: string) => number;
+    const _: (str: string) => any;
+    const version: string;
+}
+type HttpVerb = 'get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch';
+type SwapOptions = {
+    select?: string;
+    selectOOB?: string;
+    eventInfo?: any;
+    anchor?: string;
+    contextElement?: Element;
+    afterSwapCallback?: swapCallback;
+    afterSettleCallback?: swapCallback;
+};
+type swapCallback = () => any;
+type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string;
+type HtmxSwapSpecification = {
+    swapStyle: HtmxSwapStyle;
+    swapDelay: number;
+    settleDelay: number;
+    transition?: boolean;
+    ignoreTitle?: boolean;
+    head?: string;
+    scroll?: 'top' | 'bottom';
+    scrollTarget?: string;
+    show?: string;
+    showTarget?: string;
+    focusScroll?: boolean;
+};
+type ConditionalFunction = ((this: Node, evt: Event) => boolean) & {
+    source: string;
+};
+type HtmxTriggerSpecification = {
+    trigger: string;
+    pollInterval?: number;
+    eventFilter?: ConditionalFunction;
+    changed?: boolean;
+    once?: boolean;
+    consume?: boolean;
+    delay?: number;
+    from?: string;
+    target?: string;
+    throttle?: number;
+    queue?: string;
+    root?: string;
+    threshold?: string;
+};
+type HtmxElementValidationError = {
+    elt: Element;
+    message: string;
+    validity: ValidityState;
+};
+type HtmxHeaderSpecification = Record<string, string>;
+type HtmxAjaxHelperContext = {
+    source?: Element | string;
+    event?: Event;
+    handler?: HtmxAjaxHandler;
+    target: Element | string;
+    swap?: HtmxSwapStyle;
+    values?: any | FormData;
+    headers?: Record<string, string>;
+    select?: string;
+};
+type HtmxRequestConfig = {
+    boosted: boolean;
+    useUrlParams: boolean;
+    formData: FormData;
+    /**
+     * formData proxy
+     */
+    parameters: any;
+    unfilteredFormData: FormData;
+    /**
+     * unfilteredFormData proxy
+     */
+    unfilteredParameters: any;
+    headers: HtmxHeaderSpecification;
+    target: Element;
+    verb: HttpVerb;
+    errors: HtmxElementValidationError[];
+    withCredentials: boolean;
+    timeout: number;
+    path: string;
+    triggeringEvent: Event;
+};
+type HtmxResponseInfo = {
+    xhr: XMLHttpRequest;
+    target: Element;
+    requestConfig: HtmxRequestConfig;
+    etc: HtmxAjaxEtc;
+    boosted: boolean;
+    select: string;
+    pathInfo: {
+        requestPath: string;
+        finalRequestPath: string;
+        responsePath: string | null;
+        anchor: string;
+    };
+    failed?: boolean;
+    successful?: boolean;
+};
+type HtmxAjaxEtc = {
+    returnPromise?: boolean;
+    handler?: HtmxAjaxHandler;
+    select?: string;
+    targetOverride?: Element;
+    swapOverride?: HtmxSwapStyle;
+    headers?: Record<string, string>;
+    values?: any | FormData;
+    credentials?: boolean;
+    timeout?: number;
+};
+type HtmxResponseHandlingConfig = {
+    code?: string;
+    swap: boolean;
+    error?: boolean;
+    ignoreTitle?: boolean;
+    select?: string;
+    target?: string;
+    swapOverride?: string;
+    event?: string;
+};
+type HtmxBeforeSwapDetails = HtmxResponseInfo & {
+    shouldSwap: boolean;
+    serverResponse: any;
+    isError: boolean;
+    ignoreTitle: boolean;
+    selectOverride: string;
+};
+type HtmxAjaxHandler = (elt: Element, responseInfo: HtmxResponseInfo) => any;
+type HtmxSettleTask = (() => void);
+type HtmxSettleInfo = {
+    tasks: HtmxSettleTask[];
+    elts: Element[];
+    title?: string;
+};
+type HtmxExtension = any;

jsconfig.json

@@ -1,19 +0,0 @@
-{
-  "compilerOptions": {
-    "allowJs": true,
-    "declaration": true,
-    "noEmit": false,
-    "emitDeclarationOnly": true,
-    "outFile": "src/htmx.d.ts",
-    "target": "es6",
-    "checkJs": true,
-    "lib": [
-      "dom",
-      "dom.iterable"
-    ]
-  },
-  "include": [
-    "./src/htmx.js"
-  ],
-  "verbose": true
-}

package.json

@@ -25,11 +25,12 @@
   "unpkg": "dist/htmx.min.js",
   "web-types": "editors/jetbrains/htmx.web-types.json",
   "scripts": {
-    "dist": "./scripts/dist.sh",
+    "dist": "./scripts/dist.sh && npm run types-generate",
     "lint": "eslint src/htmx.js test/attributes/ test/core/ test/util/",
-    "lint-fix": "eslint src/htmx.js test/attributes/ test/core/ test/util/ --fix",
     "format": "eslint --fix src/htmx.js test/attributes/ test/core/ test/util/",
-    "test": "npm run lint && tsc --project ./jsconfig.json --noEmit true --emitDeclarationOnly false && mocha-chrome test/index.html",
+    "types-check": "tsc src/htmx.js --noEmit --checkJs --target es6 --lib dom,dom.iterable",
+    "types-generate": "tsc src/htmx.js --declaration --emitDeclarationOnly --allowJs --outDir dist",
+    "test": "npm run lint && npm run types-check && mocha-chrome test/index.html",
     "type-declarations": "tsc --project ./jsconfig.json",
     "ws-tests": "cd ./test/ws-sse && node ./server.js",
     "www": "bash ./scripts/www.sh"
@@ -64,6 +65,7 @@
     }
   },
   "devDependencies": {
+    "@types/node": "20.0.0",
     "chai": "^4.3.10",
     "chai-dom": "^1.12.0",
     "eslint": "^8.56.0",

scripts/dist.sh

@@ -2,7 +2,7 @@
 # This script is intended to be run from npm, via `npm run dist`
 set -euo pipefail
 
-HTMX_SRC=src/htmx.js
+HTMX_SRC="src/htmx.js"
 
 # Clean the dist directory
 rm -rf dist/*
@@ -10,13 +10,13 @@ rm -rf dist/*
 # Regular IIFE script
 cp $HTMX_SRC dist/htmx.js
 
-# Minified script
+# Generate minified script
 uglifyjs -m eval -o dist/htmx.min.js dist/htmx.js
 
-# Gzipped script
+# Generate gzipped script
 gzip -9 -k -f dist/htmx.min.js > dist/htmx.min.js.gz
 
-# AMD script
+# Generate AMD script
 cat > dist/htmx.amd.js << EOF
 define(() => {
 $(cat $HTMX_SRC)
@@ -24,13 +24,13 @@ return htmx
 })
 EOF
 
-# CJS script
+# Generate CJS script
 cat > dist/htmx.cjs.js << EOF
 $(cat $HTMX_SRC)
 module.exports = htmx;
 EOF
 
-# ESM script
+# Generate ESM script
 cat > dist/htmx.esm.js << EOF
 $(cat $HTMX_SRC)
 export default htmx