35 |
61 | `);
62 | };
63 |
--------------------------------------------------------------------------------
/demo/functions/logging-in.ts:
--------------------------------------------------------------------------------
1 | import Spinner from '@components/Spinner';
2 | import { html, view } from '@lib/html';
3 |
4 | export const onRequestGet: PagesFunction = async () =>
5 | view(html`
36 |
60 |
37 |
58 |
59 | ${Spinner('Logging in ...')}
`);
6 |
--------------------------------------------------------------------------------
/demo/functions/logout.ts:
--------------------------------------------------------------------------------
1 | import { Env, logout } from 'cloudflare-auth';
2 |
3 | export const onRequestPost: PagesFunction
5 |
14 | `;
15 |
--------------------------------------------------------------------------------
/demo/src/components/Stat.ts:
--------------------------------------------------------------------------------
1 | import { html, view } from '@lib/html';
2 |
3 | export default () => html`
4 |
6 |
13 |
7 |
12 | ${message}
8 |
11 |
5 |
68 | `;
69 |
--------------------------------------------------------------------------------
/demo/src/components/Table.ts:
--------------------------------------------------------------------------------
1 | import { html, view } from '@lib/html';
2 |
3 | type Item = {
4 | name: string;
5 | avatar: string;
6 | country: string;
7 | company: string;
8 | color: string;
9 | job: string;
10 | };
11 |
12 | // an array of null items is used to show the loading state
13 | export default (items: Item[] | null[]) => {
14 | return html`
15 |
6 |
25 |
26 |
7 |
20 |
21 | Downloads
22 | 31K
23 | Jan 1st - Feb 1st
24 |
27 |
46 |
47 |
28 |
41 |
42 | New Users
43 | 4,200
44 | ↗︎ 400 (22%)
45 |
48 |
67 |
49 |
62 |
63 | New Registers
64 | 1,200
65 | ↘︎ 90 (14%)
66 | 16 | Using _hyperscript to do multi-select 17 |
18 |
19 |
20 |
21 |
22 |
103 |
104 | `;
105 | };
106 |
--------------------------------------------------------------------------------
/demo/src/components/Toast.ts:
--------------------------------------------------------------------------------
1 | import { html } from '@lib/html';
2 |
3 | export default (
4 | message: string,
5 | alertClass = 'alert-success',
6 | remove = true
7 | ) => {
8 | return html`
9 | | 24 | 31 | | 32 |Name | 33 |Job | 34 |Favorite Color | 35 |36 | |
|---|---|---|---|---|
| 45 | 48 | | 49 |
50 |
51 |
66 |
52 |
59 |
53 |
58 |
60 |
65 | ${item.name}
61 |
62 | ${item.country}
63 |
64 | |
67 |
68 | ${item.company}
69 | 70 | ${item.job} 73 | |
74 | ${item.color} | 75 |76 | 77 | | 78 |
| 83 | | 84 | | 85 | | 86 | | 87 | |
| 96 | | Name | 97 |Job | 98 |Favorite Color | 99 |100 | |
13 |
17 | `;
18 | };
19 |
--------------------------------------------------------------------------------
/demo/src/layouts/DashLayout.ts:
--------------------------------------------------------------------------------
1 | import NavBar from '@components/NavBar';
2 | import { LayoutFunction, html } from '@lib/html';
3 |
4 | const _layout: LayoutFunction = async ({ children }) => {
5 | return html`${NavBar()} ${children} `;
6 | };
7 | export default _layout;
8 |
--------------------------------------------------------------------------------
/demo/src/layouts/RootLayout.ts:
--------------------------------------------------------------------------------
1 | import { html, LayoutFunction } from '@lib/html';
2 |
3 | // this is the layout for the entire site
4 | const _layout: LayoutFunction = ({ children }) => {
5 | const title = 'Cloudflare Pages + HTMX + Hyperscript';
6 | return html`
7 |
8 |
9 |
10 |
11 |
12 |
14 | ${message}
15 |
16 | Sub-page layout
7 | ${children} 8 | `; 9 | }; 10 | export default _layout; 11 | -------------------------------------------------------------------------------- /demo/src/lib/html.ts: -------------------------------------------------------------------------------- 1 | export * from '../../../index'; 2 | -------------------------------------------------------------------------------- /demo/static/assets/img/avatar-brice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stukennedy/cloudflare-htmx/975b1c1f661f16cab84cb61b3f322499fb6a14c2/demo/static/assets/img/avatar-brice.png -------------------------------------------------------------------------------- /demo/static/assets/img/avatar-hart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stukennedy/cloudflare-htmx/975b1c1f661f16cab84cb61b3f322499fb6a14c2/demo/static/assets/img/avatar-hart.png -------------------------------------------------------------------------------- /demo/static/assets/img/avatar-marjy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stukennedy/cloudflare-htmx/975b1c1f661f16cab84cb61b3f322499fb6a14c2/demo/static/assets/img/avatar-marjy.png -------------------------------------------------------------------------------- /demo/static/assets/img/avatar-yancy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stukennedy/cloudflare-htmx/975b1c1f661f16cab84cb61b3f322499fb6a14c2/demo/static/assets/img/avatar-yancy.png -------------------------------------------------------------------------------- /demo/static/assets/js/htmx.min.js: -------------------------------------------------------------------------------- 1 | (function (e, t) { 2 | if (typeof define === 'function' && define.amd) { 3 | define([], t); 4 | } else { 5 | e.htmx = t(); 6 | } 7 | })(typeof self !== 'undefined' ? self : this, function () { 8 | return (function () { 9 | 'use strict'; 10 | var v = { 11 | onLoad: b, 12 | process: tt, 13 | on: z, 14 | off: V, 15 | trigger: ut, 16 | ajax: _t, 17 | find: S, 18 | findAll: E, 19 | closest: T, 20 | values: function (e, t) { 21 | var r = At(e, t || 'post'); 22 | return r.values; 23 | }, 24 | remove: C, 25 | addClass: L, 26 | removeClass: O, 27 | toggleClass: A, 28 | takeClass: R, 29 | defineExtension: Gt, 30 | removeExtension: Yt, 31 | logAll: w, 32 | logger: null, 33 | config: { 34 | historyEnabled: true, 35 | historyCacheSize: 10, 36 | refreshOnHistoryMiss: false, 37 | defaultSwapStyle: 'innerHTML', 38 | defaultSwapDelay: 0, 39 | defaultSettleDelay: 100, 40 | includeIndicatorStyles: true, 41 | indicatorClass: 'htmx-indicator', 42 | requestClass: 'htmx-request', 43 | settlingClass: 'htmx-settling', 44 | swappingClass: 'htmx-swapping', 45 | allowEval: true, 46 | attributesToSettle: ['class', 'style', 'width', 'height'], 47 | }, 48 | parseInterval: f, 49 | _: e, 50 | createEventSource: function (e) { 51 | return new EventSource(e, { withCredentials: true }); 52 | }, 53 | createWebSocket: function (e) { 54 | return new WebSocket(e, []); 55 | }, 56 | }; 57 | var t = ['get', 'post', 'put', 'delete', 'patch']; 58 | var n = t 59 | .map(function (e) { 60 | return '[hx-' + e + '], [data-hx-' + e + ']'; 61 | }) 62 | .join(', '); 63 | function f(e) { 64 | if (e == undefined) { 65 | return undefined; 66 | } 67 | if (e.slice(-2) == 'ms') { 68 | return parseFloat(e.slice(0, -2)) || undefined; 69 | } 70 | if (e.slice(-1) == 's') { 71 | return parseFloat(e.slice(0, -1)) * 1e3 || undefined; 72 | } 73 | return parseFloat(e) || undefined; 74 | } 75 | function l(e, t) { 76 | return e.getAttribute && e.getAttribute(t); 77 | } 78 | function o(e, t) { 79 | return ( 80 | e.hasAttribute && (e.hasAttribute(t) || e.hasAttribute('data-' + t)) 81 | ); 82 | } 83 | function I(e, t) { 84 | return l(e, t) || l(e, 'data-' + t); 85 | } 86 | function c(e) { 87 | return e.parentElement; 88 | } 89 | function k() { 90 | return document; 91 | } 92 | function h(e, t) { 93 | if (t(e)) { 94 | return e; 95 | } else if (c(e)) { 96 | return h(c(e), t); 97 | } else { 98 | return null; 99 | } 100 | } 101 | function M(e, t) { 102 | var r = null; 103 | h(e, function (e) { 104 | return (r = I(e, t)); 105 | }); 106 | return r; 107 | } 108 | function d(e, t) { 109 | var r = 110 | e.matches || 111 | e.matchesSelector || 112 | e.msMatchesSelector || 113 | e.mozMatchesSelector || 114 | e.webkitMatchesSelector || 115 | e.oMatchesSelector; 116 | return r && r.call(e, t); 117 | } 118 | function r(e) { 119 | var t = /<([a-z][^\/\0>\x20\t\r\n\f]*)/i; 120 | var r = t.exec(e); 121 | if (r) { 122 | return r[1].toLowerCase(); 123 | } else { 124 | return ''; 125 | } 126 | } 127 | function i(e, t) { 128 | var r = new DOMParser(); 129 | var n = r.parseFromString(e, 'text/html'); 130 | var i = n.body; 131 | while (t > 0) { 132 | t--; 133 | i = i.firstChild; 134 | } 135 | if (i == null) { 136 | i = k().createDocumentFragment(); 137 | } 138 | return i; 139 | } 140 | function u(e) { 141 | var t = r(e); 142 | switch (t) { 143 | case 'thead': 144 | case 'tbody': 145 | case 'tfoot': 146 | case 'colgroup': 147 | case 'caption': 148 | return i('' + e + '
', 1);
158 | default:
159 | return i(e, 0);
160 | }
161 | }
162 | function D(e) {
163 | if (e) {
164 | e();
165 | }
166 | }
167 | function a(e, t) {
168 | return Object.prototype.toString.call(e) === '[object ' + t + ']';
169 | }
170 | function s(e) {
171 | return a(e, 'Function');
172 | }
173 | function g(e) {
174 | return a(e, 'Object');
175 | }
176 | function F(e) {
177 | var t = 'htmx-internal-data';
178 | var r = e[t];
179 | if (!r) {
180 | r = e[t] = {};
181 | }
182 | return r;
183 | }
184 | function p(e) {
185 | var t = [];
186 | if (e) {
187 | for (var r = 0; r < e.length; r++) {
188 | t.push(e[r]);
189 | }
190 | }
191 | return t;
192 | }
193 | function X(e, t) {
194 | if (e) {
195 | for (var r = 0; r < e.length; r++) {
196 | t(e[r]);
197 | }
198 | }
199 | }
200 | function m(e) {
201 | var t = e.getBoundingClientRect();
202 | var r = t.top;
203 | var n = t.bottom;
204 | return r < window.innerHeight && n >= 0;
205 | }
206 | function P(e) {
207 | return k().body.contains(e);
208 | }
209 | function y(e) {
210 | return e.trim().split(/\s+/);
211 | }
212 | function U(e, t) {
213 | for (var r in t) {
214 | if (t.hasOwnProperty(r)) {
215 | e[r] = t[r];
216 | }
217 | }
218 | return e;
219 | }
220 | function x(e) {
221 | try {
222 | return JSON.parse(e);
223 | } catch (e) {
224 | st(e);
225 | return null;
226 | }
227 | }
228 | function e(e) {
229 | return Xt(k().body, function () {
230 | return eval(e);
231 | });
232 | }
233 | function b(t) {
234 | var e = v.on('htmx:load', function (e) {
235 | t(e.detail.elt);
236 | });
237 | return e;
238 | }
239 | function w() {
240 | v.logger = function (e, t, r) {
241 | if (console) {
242 | console.log(t, e, r);
243 | }
244 | };
245 | }
246 | function S(e, t) {
247 | if (t) {
248 | return e.querySelector(t);
249 | } else {
250 | return S(k(), e);
251 | }
252 | }
253 | function E(e, t) {
254 | if (t) {
255 | return e.querySelectorAll(t);
256 | } else {
257 | return E(k(), e);
258 | }
259 | }
260 | function C(e, t) {
261 | e = N(e);
262 | if (t) {
263 | setTimeout(function () {
264 | C(e);
265 | }, t);
266 | } else {
267 | e.parentElement.removeChild(e);
268 | }
269 | }
270 | function L(e, t, r) {
271 | e = N(e);
272 | if (r) {
273 | setTimeout(function () {
274 | L(e, t);
275 | }, r);
276 | } else {
277 | e.classList.add(t);
278 | }
279 | }
280 | function O(e, t, r) {
281 | e = N(e);
282 | if (r) {
283 | setTimeout(function () {
284 | O(e, t);
285 | }, r);
286 | } else {
287 | e.classList.remove(t);
288 | }
289 | }
290 | function A(e, t) {
291 | e = N(e);
292 | e.classList.toggle(t);
293 | }
294 | function R(e, t) {
295 | e = N(e);
296 | X(e.parentElement.children, function (e) {
297 | O(e, t);
298 | });
299 | L(e, t);
300 | }
301 | function T(e, t) {
302 | e = N(e);
303 | if (e.closest) {
304 | return e.closest(t);
305 | } else {
306 | do {
307 | if (e == null || d(e, t)) {
308 | return e;
309 | }
310 | } while ((e = e && c(e)));
311 | }
312 | }
313 | function q(e, t) {
314 | if (t.indexOf('closest ') === 0) {
315 | return [T(e, t.substr(8))];
316 | } else if (t.indexOf('find ') === 0) {
317 | return [S(e, t.substr(5))];
318 | } else {
319 | return k().querySelectorAll(t);
320 | }
321 | }
322 | function H(e, t) {
323 | return q(e, t)[0];
324 | }
325 | function N(e) {
326 | if (a(e, 'String')) {
327 | return S(e);
328 | } else {
329 | return e;
330 | }
331 | }
332 | function j(e, t, r) {
333 | if (s(t)) {
334 | return { target: k().body, event: e, listener: t };
335 | } else {
336 | return { target: N(e), event: t, listener: r };
337 | }
338 | }
339 | function z(t, r, n) {
340 | Qt(function () {
341 | var e = j(t, r, n);
342 | e.target.addEventListener(e.event, e.listener);
343 | });
344 | var e = s(r);
345 | return e ? r : n;
346 | }
347 | function V(t, r, n) {
348 | Qt(function () {
349 | var e = j(t, r, n);
350 | e.target.removeEventListener(e.event, e.listener);
351 | });
352 | return s(r) ? r : n;
353 | }
354 | function W(e) {
355 | var t = h(e, function (e) {
356 | return I(e, 'hx-target') !== null;
357 | });
358 | if (t) {
359 | var r = I(t, 'hx-target');
360 | if (r === 'this') {
361 | return t;
362 | } else {
363 | return H(e, r);
364 | }
365 | } else {
366 | var n = F(e);
367 | if (n.boosted) {
368 | return k().body;
369 | } else {
370 | return e;
371 | }
372 | }
373 | }
374 | function _(e) {
375 | var t = v.config.attributesToSettle;
376 | for (var r = 0; r < t.length; r++) {
377 | if (e === t[r]) {
378 | return true;
379 | }
380 | }
381 | return false;
382 | }
383 | function B(t, r) {
384 | X(t.attributes, function (e) {
385 | if (!r.hasAttribute(e.name) && _(e.name)) {
386 | t.removeAttribute(e.name);
387 | }
388 | });
389 | X(r.attributes, function (e) {
390 | if (_(e.name)) {
391 | t.setAttribute(e.name, e.value);
392 | }
393 | });
394 | }
395 | function $(e, t) {
396 | var r = Kt(t);
397 | for (var n = 0; n < r.length; n++) {
398 | var i = r[n];
399 | try {
400 | if (i.isInlineSwap(e)) {
401 | return true;
402 | }
403 | } catch (e) {
404 | st(e);
405 | }
406 | }
407 | return e === 'outerHTML';
408 | }
409 | function J(e, t, r) {
410 | var n = '#' + t.id;
411 | var i = 'outerHTML';
412 | if (e === 'true') {
413 | } else if (e.indexOf(':') > 0) {
414 | i = e.substr(0, e.indexOf(':'));
415 | n = e.substr(e.indexOf(':') + 1, e.length);
416 | } else {
417 | i = e;
418 | }
419 | var a = k().querySelector(n);
420 | if (a) {
421 | var o;
422 | o = k().createDocumentFragment();
423 | o.appendChild(t);
424 | if (!$(i, a)) {
425 | o = t;
426 | }
427 | le(i, a, a, o, r);
428 | } else {
429 | t.parentNode.removeChild(t);
430 | it(k().body, 'htmx:oobErrorNoTarget', { content: t });
431 | }
432 | return e;
433 | }
434 | function Z(e, r) {
435 | X(E(e, '[hx-swap-oob], [data-hx-swap-oob]'), function (e) {
436 | var t = I(e, 'hx-swap-oob');
437 | if (t != null) {
438 | J(t, e, r);
439 | }
440 | });
441 | }
442 | function G(e) {
443 | X(E(e, '[hx-preserve], [data-hx-preserve]'), function (e) {
444 | var t = I(e, 'id');
445 | var r = k().getElementById(t);
446 | if (r != null) {
447 | e.parentNode.replaceChild(r, e);
448 | }
449 | });
450 | }
451 | function Y(n, e, i) {
452 | X(e.querySelectorAll('[id]'), function (e) {
453 | if (e.id && e.id.length > 0) {
454 | var t = n.querySelector(e.tagName + "[id='" + e.id + "']");
455 | if (t && t !== n) {
456 | var r = e.cloneNode();
457 | B(e, t);
458 | i.tasks.push(function () {
459 | B(e, r);
460 | });
461 | }
462 | }
463 | });
464 | }
465 | function K(e) {
466 | return function () {
467 | tt(e);
468 | Ye(e);
469 | Q(e);
470 | ut(e, 'htmx:load');
471 | };
472 | }
473 | function Q(e) {
474 | var t = '[autofocus]';
475 | var r = d(e, t) ? e : e.querySelector(t);
476 | if (r != null) {
477 | r.focus();
478 | }
479 | }
480 | function ee(e, t, r, n) {
481 | Y(e, r, n);
482 | while (r.childNodes.length > 0) {
483 | var i = r.firstChild;
484 | e.insertBefore(i, t);
485 | if (i.nodeType !== Node.TEXT_NODE && i.nodeType !== Node.COMMENT_NODE) {
486 | n.tasks.push(K(i));
487 | }
488 | }
489 | }
490 | function te(t) {
491 | var e = F(t);
492 | if (e.webSocket) {
493 | e.webSocket.close();
494 | }
495 | if (e.sseEventSource) {
496 | e.sseEventSource.close();
497 | }
498 | if (e.listenerInfos) {
499 | X(e.listenerInfos, function (e) {
500 | if (t !== e.on) {
501 | e.on.removeEventListener(e.trigger, e.listener);
502 | }
503 | });
504 | }
505 | if (t.children) {
506 | X(t.children, function (e) {
507 | te(e);
508 | });
509 | }
510 | }
511 | function re(e, t, r) {
512 | if (e.tagName === 'BODY') {
513 | return se(e, t);
514 | } else {
515 | var n = e.previousSibling;
516 | ee(c(e), e, t, r);
517 | if (n == null) {
518 | var i = c(e).firstChild;
519 | } else {
520 | var i = n.nextSibling;
521 | }
522 | F(e).replacedWith = i;
523 | r.elts = [];
524 | while (i && i !== e) {
525 | if (i.nodeType === Node.ELEMENT_NODE) {
526 | r.elts.push(i);
527 | }
528 | i = i.nextElementSibling;
529 | }
530 | te(e);
531 | c(e).removeChild(e);
532 | }
533 | }
534 | function ne(e, t, r) {
535 | return ee(e, e.firstChild, t, r);
536 | }
537 | function ie(e, t, r) {
538 | return ee(c(e), e, t, r);
539 | }
540 | function ae(e, t, r) {
541 | return ee(e, null, t, r);
542 | }
543 | function oe(e, t, r) {
544 | return ee(c(e), e.nextSibling, t, r);
545 | }
546 | function se(e, t, r) {
547 | var n = e.firstChild;
548 | ee(e, n, t, r);
549 | if (n) {
550 | while (n.nextSibling) {
551 | te(n.nextSibling);
552 | e.removeChild(n.nextSibling);
553 | }
554 | te(n);
555 | e.removeChild(n);
556 | }
557 | }
558 | function ue(e, t) {
559 | var r = M(e, 'hx-select');
560 | if (r) {
561 | var n = k().createDocumentFragment();
562 | X(t.querySelectorAll(r), function (e) {
563 | n.appendChild(e);
564 | });
565 | t = n;
566 | }
567 | return t;
568 | }
569 | function le(e, t, r, n, i) {
570 | switch (e) {
571 | case 'none':
572 | return;
573 | case 'outerHTML':
574 | re(r, n, i);
575 | return;
576 | case 'afterbegin':
577 | ne(r, n, i);
578 | return;
579 | case 'beforebegin':
580 | ie(r, n, i);
581 | return;
582 | case 'beforeend':
583 | ae(r, n, i);
584 | return;
585 | case 'afterend':
586 | oe(r, n, i);
587 | return;
588 | default:
589 | var a = Kt(t);
590 | for (var o = 0; o < a.length; o++) {
591 | var s = a[o];
592 | try {
593 | var u = s.handleSwap(e, r, n, i);
594 | if (u) {
595 | if (typeof u.length !== 'undefined') {
596 | for (var l = 0; l < u.length; l++) {
597 | var f = u[l];
598 | if (
599 | f.nodeType !== Node.TEXT_NODE &&
600 | f.nodeType !== Node.COMMENT_NODE
601 | ) {
602 | i.tasks.push(K(f));
603 | }
604 | }
605 | }
606 | return;
607 | }
608 | } catch (e) {
609 | st(e);
610 | }
611 | }
612 | se(r, n, i);
613 | }
614 | }
615 | var fe = /