cloudflare-htmx - npm Package Compare versions

Comparing version 1.1.3 to 1.2.0

demo/functions/dashboard/[paramId]/index.ts

		@@ -1,6 +0,6 @@
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		export const onRequestPost: PagesFunction = async ({ request }) => {
		const url = new URL(request.url);
		return htmlResponse(html`<div class="mockup-code text-left">
		return view(html`<div class="mockup-code text-left">
		<pre data-prefix=">" class="text-accent w-48"><code>${url}</code></pre>
		@@ -14,3 +14,3 @@ <pre data-prefix="$"><code>npm i daisyui</code></pre>
		export const onRequestGet: PagesFunction = async ({ params }) => {
		return htmlResponse(html` <div class="h-screen p-10 text-center">
		return view(html` <div class="h-screen p-10 text-center">
		<div class="mockup-phone border-primary">
		@@ -17,0 +17,0 @@ <div class="camera"></div>

demo/functions/dashboard/index.ts

		import Stat from '@components/Stat';
		import Table from '@components/Table';

		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		@@ -45,3 +45,3 @@ const timer = (ms: number) => new Promise((res) => setTimeout(res, ms));
		];
		return htmlResponse(Table(items));
		return view(Table(items));
		};
		@@ -52,3 +52,3 @@
		const url = new URL(request.url);
		return htmlResponse(html`
		return view(html`
		<div class="w-full h-screen p-10 text-center">
		@@ -55,0 +55,0 @@ <div class="text-2xl text-secondary mb-4">Cloudflare + HTMX</div>

demo/functions/index.ts

		import Toast from '@components/Toast';
		import { Env, isAuthorised, login } from 'cloudflare-auth';

		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';
		import { authConfig } from '@lib/constants';
		@@ -12,3 +12,3 @@
		if (!email) {
		return htmlResponse(Toast('Email not specified'));
		return view(Toast('Email not specified'));
		}
		@@ -18,3 +18,3 @@ const token = await login(email, env);
		try {
		return htmlResponse(
		return view(
		Toast(
		@@ -26,3 +26,3 @@ 'Click to login: <a href="' + magicLink + '">' + magicLink + '</a>',
		} catch {
		return htmlResponse(Toast('Magic link failed to send!', 'alert-failure'));
		return view(Toast('Magic link failed to send!', 'alert-failure'));
		}
		@@ -38,3 +38,3 @@ };
		}
		return htmlResponse(html`
		return view(html`
		<div class="w-full h-screen p-10 text-center">
		@@ -41,0 +41,0 @@ <div class="flex justify-center pt-24 lg:pt-64">

demo/functions/logging-in.ts

		import Spinner from '@components/Spinner';
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		export const onRequestGet: PagesFunction = async () =>
		htmlResponse(html`
		<div class="h-screen">${Spinner('Logging in ...')}</div>
		`);
		view(html` <div class="h-screen">${Spinner('Logging in ...')}</div> `);

demo/functions/verify.ts

		import Spinner from '@components/Spinner';
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';
		import { authConfig } from '@lib/constants';
		@@ -19,3 +19,3 @@ import { verify, Env } from 'cloudflare-auth';
		const url = new URL(request.url);
		return htmlResponse(html`
		return view(html`
		<form class="h-screen" hx-post="/verify" hx-trigger="load">
		@@ -22,0 +22,0 @@ <input

demo/src/components/NavBar.ts

		@@ -1,2 +0,2 @@
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		@@ -3,0 +3,0 @@ /*

demo/src/components/Stat.ts

		@@ -1,2 +0,2 @@
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		@@ -3,0 +3,0 @@ export default () => html`

demo/src/components/Table.ts

		@@ -1,2 +0,2 @@
		import { html, htmlResponse } from '@lib/html';
		import { html, view } from '@lib/html';

		@@ -3,0 +3,0 @@ type Item = {

index.ts

		const HEADERS = { headers: { 'content-type': 'text/html;charset=UTF-8' } };

		export const html = String.raw;
		export const htmlResponse = (dom: string) => new Response(dom, HEADERS);
		export const view = (...domArgs: string[]) =>
		new Response(domArgs.join('\n'), HEADERS);

		@@ -19,3 +20,3 @@ export type LayoutFunction<Env = any, Params extends string = any> = ({
		export const applyLayout =
		(layout: LayoutFunction): PagesFunction =>
		(layout: LayoutFunction, isRoot: boolean): PagesFunction =>
		async ({ request, env, params, next }) => {
		@@ -27,3 +28,4 @@ const url = new URL(request.url);
		method !== 'GET' \|\|
		url.pathname.match(/_[^/]+$/)
		url.pathname.match(/_[^/]+$/) \|\|
		(isRoot && request.headers.get('HX-Boosted') === 'true')
		) {
		@@ -30,0 +32,0 @@ return next();

package.json

		{
		"name": "cloudflare-htmx",
		"version": "1.1.3",
		"version": "1.2.0",
		"description": "HTMX library for Cloudflare Pages",
		@@ -5,0 +5,0 @@ "main": "index.ts",

ReadMe.md

		@@ -22,3 +22,3 @@ # Cloudflare Pages + HTMX
		- Endpoints should return HTML strings wrapped in a `new Response()`.
		- `import { html, htmlResponse } from "@lib/html"` declaration allows a string template to be syntax highlighted in VS Code
		- `import { html, view } from "@lib/html"` declaration allows a string template to be syntax highlighted in VS Code
		- Use `_middleware.ts` files at any level of the folder structure to apply a layout. You should use this to at least apply your root level HTML wrapper.
		@@ -25,0 +25,0 @@ e.g.

templates/basic/functions/index.ts

		@@ -1,2 +0,2 @@
		import { html, htmlResponse } from 'cloudflare-htmx';
		import { html, view } from 'cloudflare-htmx';

		@@ -6,7 +6,7 @@ const timer = (ms: number) => new Promise((res) => setTimeout(res, ms));
		await timer(1000);
		return htmlResponse(html`<h2>Loaded!</h2>`);
		return view(html`<h2>Loaded!</h2>`);
		};

		export const onRequestGet: PagesFunction = async ({ request }) => {
		return htmlResponse(html`
		return view(html`
		<h1>Welcome to HTMX</h1>
		@@ -13,0 +13,0 @@ <div hx-post="/">Loading...</div>

New alerts