itsscb/htmx
1
0
Fork 0
mirror of https://github.com/bigskysoftware/htmx.git synced 2025-09-28 05:21:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update installation instructions (#851)

Browse Source 
As per #800.

* Recommend downloading htmx as the main way of installing it.
* Cover npm installation in a bit more detail.
* Note the downsides of unpkg.com and always recommend with the integrity SHA.
* Use `<script defer>` in all `<script>` examples. This tells the browser to defer the parsing and processing of the script until all content is on display, increasing performance. [See HTML spec diagram](https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer).
This commit is contained in:
Adam Johnson 2022-04-07 20:40:37 +01:00 committed by GitHub
parent 904d5e12a9
commit 0b52a8c6a3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 35 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -34,8 +34,7 @@ By removing these arbitrary constraints htmx completes HTML as a
## quick start
```html
<!-- Load from unpkg -->
<script src="https://unpkg.com/htmx.org@1.7.0" ></script>
<script src="htmx.min.js" defer></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me

41
www/docs.md
View File

@ -100,22 +100,45 @@ It's worth mentioning that, if you prefer, you can use the `data-` prefix when u
## <a name="installing"></a> [Installing](#installing)
Htmx is a dependency-free javascript library.
Three different ways to add it to your project are described below.
It can be used via [NPM](https://www.npmjs.com/) as "`htmx.org`" or downloaded or included from
[unpkg](https://unpkg.com/browse/htmx.org/) or your other favorite NPM-based CDN:
If you are migrating to htmx from intercooler.js, please see the [migration guide](/migration-guide).
### Download a copy
The simplest, recommended way to install htmx is to copy it into your project.
Download `htmx.min.js` [from unpkg.com](https://unpkg.com/browse/htmx.org/dist/) and add it to the appropriate directory in your project.
Then, include it where necessary with a `<script>` tag:
``` html
<script src="https://unpkg.com/htmx.org@1.7.0"></script>
<script src="/path/to/htmx.min.js" defer></script>
```
For added security, you can load the script using [Subresource Integrity (SRI)](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
You can also add extensions this way, by downloading them from the `ext/` directory.
### With npm
For more advanced configuration, you can install htmx with [npm](https://www.npmjs.com/):
``` sh
npm install htmx.org
```
After installing, you’ll need to use appropriate tooling to use `node_modules/htmx.org/dist/htmx.js` (or `.min.js`).
For example, you might bundle htmx with some extensions and project-specific code.
## Via unpkg.com
For prototyping or testing, you can use the npm package via the unpkg.com CDN.
Avoid using unpkg.com or other JavaScript CDN’s in production, for [many good reasons](https://blog.wesleyac.com/posts/why-not-javascript-cdn) such as performance and robustness.
To use htmx from unpkg.com, use this `<script>` tag:
``` html
<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous"></script>
<script src="https://unpkg.com/htmx.org@1.7.0" integrity="sha384-EzBXYPt0/T6gxNp0nuPtLkmRpmDBbjg6WmCUZRLXBBwYYmwAUxzlSGej0ARHX0Bo" crossorigin="anonymous" defer></script>
```
If you are migrating to htmx from intercooler.js, please see the [migration guide here](/migration-guide).
### <a name="webpack">[webpack](#webpack)
If you are using webpack to manage your javascript:
@ -1048,7 +1071,7 @@ site that will install:
Simply add the following script tag to your demo/fiddle/whatever:
```html
<script src="https://demo.htmx.org"></script>
<script src="https://demo.htmx.org" defer></script>
```
This helper allows you to add mock responses by adding `template` tags with a `url` attribute to indicate which URL.
@ -1067,7 +1090,7 @@ Here is an example of the code in action:
```html
<!-- load demo environment -->
<script src="https://demo.htmx.org"></script>
<script src="https://demo.htmx.org" defer></script>
<!-- post to /foo -->
<button hx-post="/foo" hx-target="#result">

2
www/extensions.md
View File

@ -17,7 +17,7 @@ Using an extension involves two steps:
Here is an example
```html
<script src="https://unpkg.com/htmx.org@0.0.8/dist/ext/debug.js"></script>
<script src="/path/to/ext/debug.js" defer></script>
<button hx-post="/example" hx-ext="debug">This Button Uses The Debug Extension</button>
```

3
www/index.md
View File

@ -33,8 +33,7 @@ By removing these arbitrary constraints, htmx completes HTML as a [hypertext](ht
## quick start
```html
<!-- Load from unpkg -->
<script src="https://unpkg.com/htmx.org@1.7.0"></script>
<script src="htmx.min.js" defer></script>
<!-- have a button POST a click via AJAX -->
<button hx-post="/clicked" hx-swap="outerHTML">
Click Me