diff --git a/README.md b/README.md index 6444f5fa..58eedc2a 100644 --- a/README.md +++ b/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: -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 diff --git a/package.json b/package.json index 5ec1177d..c9965cf5 100644 --- a/package.json +++ b/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" }, diff --git a/src/htmx.js b/src/htmx.js index 21864efe..5cf44864 100644 --- a/src/htmx.js +++ b/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); diff --git a/www/README.md b/www/README.md index ee7ba8fe..489edcfe 100644 --- a/www/README.md +++ b/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 -**macOS 64-bit users may need to run `npm rebuild node-sass` to get the documentation site working.** \ No newline at end of file +**macOS 64-bit users may need to run `npm rebuild node-sass` to get the documentation site working.** diff --git a/www/attributes/hx-swap-oob.md b/www/attributes/hx-swap-oob.md index a62cbf7a..599d1c14 100644 --- a/www/attributes/hx-swap-oob.md +++ b/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. diff --git a/www/docs.md b/www/docs.md index 94734452..29470943 100644 --- a/www/docs.md +++ b/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 + + ## [AJAX](#ajax) The core of htmx is a set of attributes that allow you to issue AJAX requests directly from HTML: diff --git a/www/events.md b/www/events.md index b907d9ce..0be5f716 100644 --- a/www/events.md +++ b/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`) ### 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 diff --git a/www/reference.md b/www/reference.md index c3ef535a..039b4f21 100644 --- a/www/reference.md +++ b/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