Merge remote-tracking branch 'origin/master' into dev

README.md

@@ -74,20 +74,25 @@ keep the core htmx code tidy
 
 ### hacking guide
 
-to develop htmx locally, you will need to install the development dependencies:
+To develop htmx locally, you will need to install the development dependencies.
+Use node 15 and run:
 
-* `npm install`
+```
+npm install
+```
 
-and then run a web server in the root (easiest with python):
+Then, run a web server in the root.
+This is easiest with Python:
 
-* `python3 -m http.server
-`
+```
+python3 -m http.server
+```
 
-you can then run the test suite by navigating to:
+You can then run the test suite by navigating to:
 
 <http://0.0.0.0:8000/test/>
 
-at this point you can modify `/src/htmx.js` to add features, and then add tests in the appropriate area under `/test`
+At this point you can modify `/src/htmx.js` to add features, and then add tests in the appropriate area under `/test`.
 
 * `/test/index.html` - the root test page from which all other tests are included
 * `/test/attributres` - attribute specific tests

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

@@ -1378,7 +1378,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-swap-oob.md

@@ -37,3 +37,4 @@ If a selector is given, all elements matched by that that selector will be swapp
 ### 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/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