diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 00000000..f93419d4 --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,14 @@ +{ + "compilerOptions": { + "target": "es5", + "noEmit": true, + "checkJs": true, + "jsx": "react", + "strict": false, + "lib": [ "dom" ] + }, + "include": [ + "./src/htmx.js" + ], + "verbose": true +} diff --git a/package-lock.json b/package-lock.json index d0e7473f..3df21717 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "htmx.org", - "version": "1.4.0", + "version": "1.4.1", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5363,9 +5363,9 @@ } }, "postcss": { - "version": "7.0.35", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.35.tgz", - "integrity": "sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==", + "version": "7.0.36", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz", + "integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==", "dev": true, "requires": { "chalk": "^2.4.2", @@ -7239,6 +7239,12 @@ "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==", "dev": true }, + "typescript": { + "version": "4.3.5", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.3.5.tgz", + "integrity": "sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA==", + "dev": true + }, "ua-parser-js": { "version": "0.7.28", "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.28.tgz", diff --git a/package.json b/package.json index 7bbeb037..71d695b9 100644 --- a/package.json +++ b/package.json @@ -19,9 +19,11 @@ "dist/*.js.gz" ], "main": "dist/htmx.min.js", + "types": "src/htmx.d.ts", "unpkg": "dist/htmx.min.js", "scripts": { "test": "mocha-chrome test/index.html", + "test-types": "tsc --project ./jsconfig.json", "dist": "cp -r src/* dist/ && npm run-script uglify && gzip -k -f dist/htmx.min.js > dist/htmx.min.js.gz && exit", "www": "node scripts/www.js", "uglify": "uglifyjs -m eval -o dist/htmx.min.js dist/htmx.js" @@ -38,8 +40,9 @@ "fs-extra": "^9.1.0", "mocha": "^7.2.0", "mocha-chrome": "^2.2.0", + "sass": "^1.34.0", "sinon": "^9.2.4", - "uglify-js": "^3.13.7", - "sass": "^1.34.0" + "typescript": "^4.3.5", + "uglify-js": "^3.13.7" } } diff --git a/src/htmx.d.ts b/src/htmx.d.ts new file mode 100644 index 00000000..b964e3f7 --- /dev/null +++ b/src/htmx.d.ts @@ -0,0 +1,26 @@ +export interface HtmxApi { + config?: HtmxConfig + logger?: (a: HTMLElement, b: Event, c: any) => void | null +} + +export interface HtmxConfig { + historyEnabled?: boolean; + historyCacheSize?: number; + refreshOnHistoryMiss?: boolean; + defaultSwapStyle?: 'innerHTML' | string; + defaultSwapDelay?: number; + defaultSettleDelay?: number; + includeIndicatorStyles?: boolean; + indicatorClass?: 'htmx-indicator' | string; + requestClass?: 'htmx-request' | string; + settlingClass?: 'htmx-settling' | string; + swappingClass?: 'htmx-swapping' | string; + allowEval?: boolean; + attributesToSettle?: ["class", "style", "width", "height"] | string[]; + withCredentials?: boolean; + wsReconnectDelay?: 'full-jitter' | string; + disableSelector?: "[hx-disable], [data-hx-disable]" | string; + useTemplateFragments?: boolean; +} + +export declare var htmx: HtmxApi diff --git a/src/htmx.js b/src/htmx.js index 4c6bef38..7b5b67c6 100644 --- a/src/htmx.js +++ b/src/htmx.js @@ -1,7 +1,9 @@ //AMD insanity (function (root, factory) { + //@ts-ignore if (typeof define === 'function' && define.amd) { // AMD. Register as an anonymous module. + //@ts-ignore define([], factory); } else { // Browser globals @@ -153,9 +155,11 @@ return (function () { var responseNode = responseDoc.body; while (depth > 0) { depth--; + // @ts-ignore responseNode = responseNode.firstChild; } if (responseNode == null) { + // @ts-ignore responseNode = getDocument().createDocumentFragment(); } return responseNode; @@ -1221,6 +1225,7 @@ return (function () { function getWebSocketReconnectDelay(retryCount) { var delay = htmx.config.wsReconnectDelay; if (typeof delay === 'function') { + // @ts-ignore return delay(retryCount); } if (delay === 'full-jitter') { @@ -1638,9 +1643,11 @@ return (function () { if (this.status >= 200 && this.status < 400) { triggerEvent(getDocument().body, "htmx:historyCacheMissLoad", details); var fragment = makeFragment(this.response); + // @ts-ignore fragment = fragment.querySelector('[hx-history-elt],[data-hx-history-elt]') || fragment; var historyElement = getHistoryElement(); var settleInfo = makeSettleInfo(historyElement); + // @ts-ignore swapInnerHTML(historyElement, fragment, settleInfo) settleImmediately(settleInfo.tasks); currentPathForHistory = path; @@ -2465,7 +2472,9 @@ return (function () { try { selectionInfo = { elt: activeElt, + // @ts-ignore start: activeElt ? activeElt.selectionStart : null, + // @ts-ignore end: activeElt ? activeElt.selectionEnd : null }; } catch (e) { @@ -2480,7 +2489,9 @@ return (function () { selectionInfo.elt.id) { var newActiveElt = document.getElementById(selectionInfo.elt.id); if (newActiveElt) { + // @ts-ignore if (selectionInfo.start && newActiveElt.setSelectionRange) { + // @ts-ignore newActiveElt.setSelectionRange(selectionInfo.start, selectionInfo.end); } newActiveElt.focus(); @@ -2632,6 +2643,7 @@ return (function () { function getMetaConfig() { var element = getDocument().querySelector('meta[name="htmx-config"]'); if (element) { + // @ts-ignore return parseJSON(element.content); } else { return null; diff --git a/www/_includes/layout.njk b/www/_includes/layout.njk index c2338be1..d65db806 100644 --- a/www/_includes/layout.njk +++ b/www/_includes/layout.njk @@ -28,7 +28,7 @@
- + diff --git a/www/attributes/hx-trigger.md b/www/attributes/hx-trigger.md index 7e3e8e92..c5159db3 100644 --- a/www/attributes/hx-trigger.md +++ b/www/attributes/hx-trigger.md @@ -135,6 +135,10 @@ Multiple triggers can be provided, seprarated by commas. Each trigger gets its ``` This example will load `/news` immediate on the page load, and then again with a delay of one second after each click. +### Via Javascript + +The AJAX request can be triggered via Javascript [`htmx.trigger()`](/api#trigger), too. + ### Notes * `hx-trigger` is not inherited diff --git a/www/css/site.scss b/www/css/site.scss index ec20ddb4..aa3ba5ac 100644 --- a/www/css/site.scss +++ b/www/css/site.scss @@ -101,11 +101,11 @@ p { pre[class*="language-"] { font-size: 16px; margin-top: 24px !important; - margin-bottom: 24px !important; + margin-bottom: 24px !important; } @media(min-width:45rem) { - pre[class*="language-"] { + pre[class*="language-"] { margin-left: 48px !important; margin-right: 48px !important; } @@ -143,6 +143,7 @@ a { list-style: none; padding-left: 12px; } + margin-bottom: 1em; } .hamburger { @@ -329,25 +330,25 @@ h1,h2,h3,h4{ .nav ul{ padding-left: 0; li ul { - padding-left:12px; + padding-left:12px; } } @media(min-width:45em) { - // Menu + // Menu .menu, .navigation > div{ display:flex; align-items:center; - } + } .navigation{ flex:1; display:flex; justify-content: space-between; padding-left: calc(1em + 1.5vw); - } + } .navigation-items > *:not(:last-child){ margin-right: calc(.5em + .7vw); } @@ -357,9 +358,9 @@ h1,h2,h3,h4{ a{ margin:0 calc(.5em + .7vw); } - + } - + // Content .content .col:not(.nav) { padding-left: calc(1em + 1.5vw); @@ -367,18 +368,23 @@ h1,h2,h3,h4{ .content .nav > p, .content .nav #contents{ position: sticky; - + } - + .content .nav #contents{ top: 3.5em; } + .content .nav #contents > ul { + max-height: calc(100vh - 5rem); + overflow-y: scroll; + } + .content .nav > p { position: sticky; top: 2vh; } - + } @media(max-width:45rem) { diff --git a/www/extensions/preload.md b/www/extensions/preload.md index f817b196..a464e5d5 100644 --- a/www/extensions/preload.md +++ b/www/extensions/preload.md @@ -65,7 +65,7 @@ The default behavior for this extension is to begin loading a resource when the To preload links more aggressively, you can trigger the preload to happen when the user's mouse hovers over the link instead. To prevent many resources from being loaded when the user scrolls or moves the mouse across a large list of objects, a 100ms delay is built in to this action. If the user's mouse leaves the element *before* this timeout expires, then the resource is not preloaded. -Typical users hover over links for several hundred milliseconds before they click, which gives your server even more time to respond to the request than the `mousedown` option above. [Test your own hover timing here.](http://instantclick.io/click-test). However, be careful when using this option because it can increase server load by requesting resources uncnecessarily. +Typical users hover over links for several hundred milliseconds before they click, which gives your server even more time to respond to the request than the `mousedown` option above. [Test your own hover timing here.](http://instantclick.io/click-test). However, be careful when using this option because it can increase server load by requesting resources unnecessarily. ```html This will be preloaded when the user's mouse remains over it for more than 100ms. diff --git a/www/server-examples.md b/www/server-examples.md index 938aea6c..c9ecdfc6 100644 --- a/www/server-examples.md +++ b/www/server-examples.md @@ -37,6 +37,7 @@ These examples may make it a bit easier to get started using htmx with your plat ### Django - +- ### FastAPI