Merge remote-tracking branch 'upstream/master'

package.json

@@ -25,7 +25,7 @@
   "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",
+    "dist": "cp -r src/* dist/ && npm run-script uglify && gzip -9 -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"
   },

src/htmx.js

@@ -1000,7 +1000,7 @@ return (function () {
                                     triggerSpec.delay = parseInterval(consumeUntil(tokens, WHITESPACE_OR_COMMA));
                                 } else if (token === "from" && tokens[0] === ":") {
                                     tokens.shift();
-                                    let from_arg = consumeUntil(tokens, WHITESPACE_OR_COMMA);
+                                    var from_arg = consumeUntil(tokens, WHITESPACE_OR_COMMA);
                                     if (from_arg === "closest" || from_arg === "find") {
                                         tokens.shift();
                                         from_arg +=
@@ -1527,7 +1527,7 @@ return (function () {
         }
 
         function evalScript(script) {
-            if (script.type === "text/javascript" || script.type === "") {
+            if (script.type === "text/javascript" || script.type === "module" || script.type === "") {
                 var newScript = getDocument().createElement("script");
                 forEach(script.attributes, function (attr) {
                     newScript.setAttribute(attr.name, attr.value);

www/README.md

@@ -1,10 +1,13 @@
 ## Running The Website Locally
 
-The htmx.org website is built on [eleventy](https://www.11ty.dev/).  To run the site, run
+The htmx.org website is built on [eleventy](https://www.11ty.dev/).
+To run the site, use node 15 and run:
 
-* `npm install`
-* `npx eleventy --serve`
+```
+npm install
+npx eleventy --serve
+```
 
 The site should then be available at <http://localhost:8080>
 
-**macOS 64-bit users may need to run `npm rebuild node-sass` to get the documentation site working.**
+**macOS 64-bit users may need to run `npm rebuild node-sass` to get the documentation site working.**

www/attributes/hx-preserve.md

@@ -5,8 +5,10 @@ title: </> htmx - hx-preserve
 
 ## `hx-preserve`
 
-The `hx-preserve` attribute allows you to keep a section of content unchanged between HTML replacement.  When hx-preserve is set to `true`, an element is preserved (by id) even if the surrounding HTML is updated by htmx.  An element *must* have an `id` to be preserved 
-properly.
+The `hx-preserve` attribute allows you to keep an element unchanged during HTML replacement.
+Elements with `hx-preserve` set are preserved by `id` when htmx updates any ancestor element.
+You *must* set an unchanging `id` on elements for `hx-preserve` to work.
+The response requires an element with the same `id`, but its type and other attributes are ignored.
 
 Here is an example of a youtube embed, which would be unaffected an htmx request:
 

www/attributes/hx-swap-oob.md

@@ -37,3 +37,4 @@ If a selector is given, the elements matching that selector will be swapped.  If
 ### Notes
 
 * `hx-swap-oob` is not inherited
+* Out of band elements must be in the top level of the response, and not children of the top level elements.

www/docs.md

@@ -114,6 +114,35 @@ For added security, you can load the script using [Subresource Integrity (SRI)](
 
 If you are migrating to htmx from intercooler.js, please see the [migration guide here](/migration-guide).
 
+### webpack
+
+If you are using webpack, you have to do the following steps:
+
+1. Install `htmx` via your favourite package manager (like npm or yarn)
+2. Add the import to your `index.js`
+   
+``` js   
+    import 'htmx.org';
+```
+
+If you want to use the global `htmx` variable (recommended), you have to inject it to the window scope.
+
+3. Create a custom JS file
+4. Import this file to your `index.js` (below the import from step 2) 
+
+``` js   
+    import 'path/to/my_custom.js';
+```
+
+5. Add the following line
+
+``` js   
+    window.htmx = require('htmx.org');
+```
+
+6. Rebuild your bundle
+
+
 ## <a name="ajax"></a> [AJAX](#ajax)
 
 The core of htmx is a set of attributes that allow you to issue AJAX requests directly from HTML:

www/events.md

@@ -40,7 +40,7 @@ can be paired with [`htmx:beforeRequest`](#htmx:beforeRequest) to wrap behavior
 * `detail.xhr` - the `XMLHttpRequest`
 * `detail.target` - the target of the request
 * `detail.requestConfig` - the configuration of the AJAX request
-* `detail.succesful` - true if the response has a 20x status code or is marked `detail.isError = false` in the 
+* `detail.successful` - true if the response has a 20x status code or is marked `detail.isError = false` in the 
    `htmx:beforeSwap` event, else false
 * `detail.failed` - true if the response does not have a 20x status code or is marked `detail.isError = true` in the 
    `htmx:beforeSwap` event, else false
@@ -175,7 +175,7 @@ for the content to restore, but the response is an error (e.g. `404`)
 
 ### <a name="htmx:historyCacheMissLoad"></a> Event - [`htmx:historyCacheMissLoad`](#htmx:historyCacheMissLoad)
 
-This event is triggered when a cache miss occurs and a response has been retrieved succesfully from the server
+This event is triggered when a cache miss occurs and a response has been retrieved successfully from the server
 for the content to restore
 
 ##### Details

www/index.md

@@ -53,7 +53,7 @@ Read the [docs introduction](/docs#introduction) for a more in-depth... introduc
 
 Thank you to our corporate sponsors!
 
-<div class="row">
+<div class="row" style="text-align: center">
 <div class="col 2" style="padding: 0">
 
 [![CommSpace](/img/commspace.svg)](https://www.commspace.co.za/)
@@ -62,6 +62,8 @@ Thank you to our corporate sponsors!
 
 <div class="col 2" style="padding: 0">
 
+<a href="https://bigsky.software"><img src="/img/bss.png" style="width:250px"></a>
+
 </div>
 
 <div class="col 2" style="padding: 0">
@@ -72,7 +74,7 @@ Thank you to our corporate sponsors!
 If you use htmx commercially & wish to support the 
 project you can sponsor us via [Github](https://github.com/sponsors/bigskysoftware)
 
-For htmx consulting or training [email us](mailto:htmx@bigsky.software)
+For htmx consulting, [email us](mailto:htmx@bigsky.software)
 
 ## haiku
 

www/reference.md

@@ -119,7 +119,7 @@ title: </> htmx - Attributes
 | [`htmx:historyCacheError`](/events#htmx:historyCacheError)  | triggered on an error during cache writing
 | [`htmx:historyCacheMiss`](/events#htmx:historyCacheMiss)  | triggered on a cache miss in the history subsystem
 | [`htmx:historyCacheMissError`](/events#htmx:historyCacheMissError)  | triggered on a unsuccessful remote retrieval 
-| [`htmx:historyCacheMissLoad`](/events#htmx:historyCacheMissLoad)  | triggered on a succesful remote retrieval 
+| [`htmx:historyCacheMissLoad`](/events#htmx:historyCacheMissLoad)  | triggered on a successful remote retrieval 
 | [`htmx:historyRestore`](/events#htmx:historyRestore)  | triggered when htmx handles a history restoration action
 | [`htmx:beforeHistorySave`](/events#htmx:beforeHistorySave)  | triggered before content is saved to the history cache
 | [`htmx:load`](/events#htmx:load)  | triggered when new content is added to the DOM