├── .gitignore
├── .vscode
    ├── extensions.json
    └── launch.json
├── README.md
├── example
    ├── .gitignore
    ├── README.md
    ├── astro.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── public
    │   └── favicon.svg
    ├── src
    │   ├── components
    │   │   └── Card.astro
    │   ├── env.d.ts
    │   ├── layouts
    │   │   └── Layout.astro
    │   └── pages
    │   │   ├── about.astro
    │   │   └── index.astro
    └── tsconfig.json
├── package-lock.json
├── package.json
└── src
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | dist


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["astro-build.astro-vscode"],
3 |   "unwantedRecommendations": []
4 | }
5 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.2.0",
 3 |   "configurations": [
 4 |     {
 5 |       "command": "./node_modules/.bin/astro dev",
 6 |       "name": "Development server",
 7 |       "request": "launch",
 8 |       "type": "node-terminal"
 9 |     }
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # astro-htmx
 2 | 
 3 | This **[Astro integration](https://astro.build/integrations/)** adds [HTMX.org](https://htmx.org) to your project so that you can use HTMX.org anywhere on your page.
 4 | 
 5 | - <strong>[Inst**al**lation](#installation)</strong>
 6 | - <strong>[Usage](#usage)</strong>
 7 | - <strong>[Configuration](#configuration)</strong>
 8 | - <strong>[Examples](#examples)</strong>
 9 | - <strong>[Troubleshooting](#troubleshooting)</strong>
10 | - <strong>[Contributing](#contributing)</strong>
11 | - <strong>[Changelog](#changelog)</strong>
12 | 
13 | ## Installation
14 | 
15 | ### Manual Install
16 | 
17 | First, install the `astro-htmx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
18 | 
19 | ```sh
20 | npm install astro-htmx htmx.org
21 | ```
22 | 
23 | Then, apply this integration to your `astro.config.*` file using the `integrations` property:
24 | 
25 | ```diff lang="js" "htmx()"
26 |   // astro.config.mjs
27 |   import { defineConfig } from 'astro/config';
28 | + import htmx from 'astro-htmx';
29 | 
30 |   export default defineConfig({
31 |     // ...
32 |     integrations: [htmx()],
33 |     //             ^^^^^^^^
34 |   });
35 | ```
36 | 
37 | ## Usage
38 | 
39 | Once the integration is installed, you can use [HTMX.org](https://htmx.org) directives and syntax inside any Astro component. The HTMX.org script is automatically added and enabled on every page of your website.
40 | 
41 | Check [Astro Integration Documentation](https://astro.build/integrations/) for more on integrations.
42 | 
43 | ## Limitations
44 | 
45 | The HTMX.org integration does not give you control over how the script is loaded or initialized. If you require this control, consider [installing and using HTMX.org manually](https://htmx.org/docs/#installing). Astro supports all officially documented HTMX.org manual setup instructions, using `<script>` tags inside of an Astro component.
46 | 
47 | ```astro
48 | ---
49 | // src/pages/index.astro
50 | ---
51 | 
52 | <!-- Example: Load HTMX on a single page. -->
53 | <script>
54 |   import "htmx.org";
55 | </script>
56 | ```
57 | 
58 | ## Configuration
59 | 
60 | The HTMX.org integration does not support any custom configuration at this time.
61 | 
62 | ## Examples
63 | 
64 | - The [Astro HTMX example](https://github.com/xstevenyung/astro-htmx/tree/main/example) shows how to use HTMX in an Astro project.
65 | 
66 | ## Contributing
67 | 
68 | This package is maintained by [xstevenyung](https://github.com/xstevenyung). You're welcome to submit an issue or PR!
69 | 
70 | [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
71 | [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
72 | [htmx]: https://htmx.org/
73 | 


--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
 1 | # build output
 2 | dist/
 3 | 
 4 | # generated types
 5 | .astro/
 6 | 
 7 | # dependencies
 8 | node_modules/
 9 | 
10 | # logs
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # environment variables
17 | .env
18 | .env.production
19 | 
20 | # macOS-specific files
21 | .DS_Store
22 | 


--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
 1 | # Astro Starter Kit: Basics
 2 | 
 3 | ```sh
 4 | npm create astro@latest -- --template basics
 5 | ```
 6 | 
 7 | [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/basics)
 8 | [![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/basics)
 9 | [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/basics/devcontainer.json)
10 | 
11 | > 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun!
12 | 
13 | ![just-the-basics](https://github.com/withastro/astro/assets/2244813/a0a5533c-a856-4198-8470-2d67b1d7c554)
14 | 
15 | ## 🚀 Project Structure
16 | 
17 | Inside of your Astro project, you'll see the following folders and files:
18 | 
19 | ```text
20 | /
21 | ├── public/
22 | │   └── favicon.svg
23 | ├── src/
24 | │   ├── components/
25 | │   │   └── Card.astro
26 | │   ├── layouts/
27 | │   │   └── Layout.astro
28 | │   └── pages/
29 | │       └── index.astro
30 | └── package.json
31 | ```
32 | 
33 | Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
34 | 
35 | There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components.
36 | 
37 | Any static assets, like images, can be placed in the `public/` directory.
38 | 
39 | ## 🧞 Commands
40 | 
41 | All commands are run from the root of the project, from a terminal:
42 | 
43 | | Command                   | Action                                           |
44 | | :------------------------ | :----------------------------------------------- |
45 | | `npm install`             | Installs dependencies                            |
46 | | `npm run dev`             | Starts local dev server at `localhost:4321`      |
47 | | `npm run build`           | Build your production site to `./dist/`          |
48 | | `npm run preview`         | Preview your build locally, before deploying     |
49 | | `npm run astro ...`       | Run CLI commands like `astro add`, `astro check` |
50 | | `npm run astro -- --help` | Get help using the Astro CLI                     |
51 | 
52 | ## 👀 Want to learn more?
53 | 
54 | Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).
55 | 


--------------------------------------------------------------------------------
/example/astro.config.mjs:
--------------------------------------------------------------------------------
1 | import { defineConfig } from "astro/config";
2 | import htmx from "astro-htmx";
3 | 
4 | // https://astro.build/config
5 | export default defineConfig({
6 |   integrations: [htmx()],
7 | });
8 | 


--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "galactic-giant",
 3 |   "type": "module",
 4 |   "version": "0.0.1",
 5 |   "scripts": {
 6 |     "dev": "astro dev",
 7 |     "start": "astro dev",
 8 |     "build": "astro build",
 9 |     "preview": "astro preview",
10 |     "astro": "astro"
11 |   },
12 |   "dependencies": {
13 |     "astro": "^4.9.2",
14 |     "astro-htmx": "file:.."
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/example/public/favicon.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
 2 |     <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
 3 |     <style>
 4 |         path { fill: #000; }
 5 |         @media (prefers-color-scheme: dark) {
 6 |             path { fill: #FFF; }
 7 |         }
 8 |     </style>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/example/src/components/Card.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | interface Props {
 3 | 	title: string;
 4 | 	body: string;
 5 | 	href: string;
 6 | }
 7 | 
 8 | const { href, title, body } = Astro.props;
 9 | ---
10 | 
11 | <li class="link-card">
12 | 	<a href={href}>
13 | 		<h2>
14 | 			{title}
15 | 			<span>&rarr;</span>
16 | 		</h2>
17 | 		<p>
18 | 			{body}
19 | 		</p>
20 | 	</a>
21 | </li>
22 | <style>
23 | 	.link-card {
24 | 		list-style: none;
25 | 		display: flex;
26 | 		padding: 1px;
27 | 		background-color: #23262d;
28 | 		background-image: none;
29 | 		background-size: 400%;
30 | 		border-radius: 7px;
31 | 		background-position: 100%;
32 | 		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
33 | 		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
34 | 	}
35 | 	.link-card > a {
36 | 		width: 100%;
37 | 		text-decoration: none;
38 | 		line-height: 1.4;
39 | 		padding: calc(1.5rem - 1px);
40 | 		border-radius: 8px;
41 | 		color: white;
42 | 		background-color: #23262d;
43 | 		opacity: 0.8;
44 | 	}
45 | 	h2 {
46 | 		margin: 0;
47 | 		font-size: 1.25rem;
48 | 		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
49 | 	}
50 | 	p {
51 | 		margin-top: 0.5rem;
52 | 		margin-bottom: 0;
53 | 	}
54 | 	.link-card:is(:hover, :focus-within) {
55 | 		background-position: 0;
56 | 		background-image: var(--accent-gradient);
57 | 	}
58 | 	.link-card:is(:hover, :focus-within) h2 {
59 | 		color: rgb(var(--accent-light));
60 | 	}
61 | </style>
62 | 


--------------------------------------------------------------------------------
/example/src/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="astro/client" />
2 | 


--------------------------------------------------------------------------------
/example/src/layouts/Layout.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import { ViewTransitions } from "astro:transitions";
 3 | 
 4 | interface Props {
 5 |   title: string;
 6 | }
 7 | 
 8 | const { title } = Astro.props;
 9 | ---
10 | 
11 | <!doctype html>
12 | <html lang="en">
13 |   <head>
14 |     <meta charset="UTF-8" />
15 |     <meta name="description" content="Astro description" />
16 |     <meta name="viewport" content="width=device-width" />
17 |     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
18 |     <meta name="generator" content={Astro.generator} />
19 |     <title>{title}</title>
20 |     <ViewTransitions />
21 |   </head>
22 |   <body>
23 |     <nav>
24 |       <a href="/">Home</a>
25 |       <a href="/about">About</a>
26 |     </nav>
27 | 
28 |     <slot />
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/example/src/pages/about.astro:
--------------------------------------------------------------------------------
1 | ---
2 | import Layout from "../layouts/Layout.astro";
3 | ---
4 | 
5 | <Layout title="About">
6 |   <h1>About</h1>
7 | </Layout>
8 | 


--------------------------------------------------------------------------------
/example/src/pages/index.astro:
--------------------------------------------------------------------------------
 1 | ---
 2 | import Layout from "../layouts/Layout.astro";
 3 | 
 4 | let isSubmitted = false;
 5 | if (Astro.request.method === "POST") {
 6 |   isSubmitted = true;
 7 | }
 8 | ---
 9 | 
10 | <Layout title="Welcome to Astro.">
11 |   <main>
12 |     <form hx-post="" hx-swap="innerHTML" hx-select="form">
13 |       {isSubmitted && <p>Submitted</p>}
14 |       <button type="submit">Submit</button>
15 |     </form>
16 |   </main>
17 | </Layout>
18 | 


--------------------------------------------------------------------------------
/example/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "astro/tsconfigs/strict"
3 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "astro-htmx",
 3 |   "version": "1.0.6",
 4 |   "license": "MIT",
 5 |   "type": "module",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "https://github.com/xstevenyung/astro-htmx.git"
 9 |   },
10 |   "exports": {
11 |     ".": "./src/index.js",
12 |     "./package.json": "./package.json"
13 |   },
14 |   "keywords": [
15 |     "astro",
16 |     "withastro",
17 |     "astro-integration",
18 |     "astro-component"
19 |   ],
20 |   "devDependencies": {
21 |     "astro": "^4.9.2",
22 |     "htmx.org": "^1.9.0"
23 |   },
24 |   "peerDependencies": {
25 |     "astro": ">= 3.0.0",
26 |     "htmx.org": ">= 1.9.0"
27 |   }
28 | }


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | export default function createPlugin() {
 2 |   return {
 3 |     name: "astro-htmx",
 4 |     hooks: {
 5 |       "astro:config:setup": ({ injectScript }) => {
 6 |         injectScript(
 7 |           "page",
 8 |           `import * as htmx from "htmx.org";
 9 |           document.addEventListener('astro:after-swap', () => {
10 |             htmx.process(document.body)
11 |           })
12 |           window.htmx = htmx;`
13 |         );
14 |       },
15 |     },
16 |   };
17 | }
18 | 


--------------------------------------------------------------------------------