From 70b7ccd5bf342fc2c535a4b3c0600a8cb9e21340 Mon Sep 17 00:00:00 2001 From: GavinRay97 Date: Sat, 30 May 2020 16:45:30 -0400 Subject: [PATCH 1/5] Nunjucks render inline take two --- src/ext/client-side-templates.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/ext/client-side-templates.js b/src/ext/client-side-templates.js index 66e84350..9d47d270 100644 --- a/src/ext/client-side-templates.js +++ b/src/ext/client-side-templates.js @@ -24,9 +24,14 @@ htmx.defineExtension('client-side-templates', { if (nunjucksTemplate) { var data = JSON.parse(text); var templateName = nunjucksTemplate.getAttribute('nunjucks-template'); - return nunjucks.render(templateName, data); - } + var template = htmx.find('#' + templateName); + if (template) { + return nunjucks.renderString(template.innerHTML, data); + } else { + return nunjucks.render(templateName, data); + } + } return text; } -}); \ No newline at end of file +}); From 87175afafbd6f92d11e2edb2ec68291004338e74 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Viktor=20Sz=C3=A9pe?= Date: Sun, 31 May 2020 13:24:11 +0200 Subject: [PATCH 2/5] Uniform badges :) :) :) --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index c3b1dccc..97974b9b 100644 --- a/README.md +++ b/README.md @@ -2,9 +2,9 @@ *high power tools for HTML* -[![Gitter](https://badges.gitter.im/intercooler-js/Lobby.svg)](https://gitter.im/intercooler-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) -[![Netlify Status](https://api.netlify.com/api/v1/badges/dba3fc85-d9c9-476a-a35a-e52a632cef78/deploy-status)](https://app.netlify.com/sites/htmx/deploys) -[![Circle CI](https://circleci.com/gh/bigskysoftware/htmx.svg?style=svg)]() +[![Gitter](https://img.shields.io/gitter/room/intercooler-js/Lobby.svg)](https://gitter.im/intercooler-js/Lobby?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge) +[![Netlify](https://img.shields.io/netlify/dba3fc85-d9c9-476a-a35a-e52a632cef78)](https://app.netlify.com/sites/htmx/deploys) +[![Circle CI](https://circleci.com/gh/bigskysoftware/htmx.svg?style=shield)](https://app.circleci.com/pipelines/github/bigskysoftware/htmx) ## introduction @@ -53,4 +53,4 @@ keep the core htmx code tidy *javascript fatigue:
longing for a hypertext
-already in hand* \ No newline at end of file +already in hand* From 1fb51947a90d4866b8fdae915258f2af8f5b897a Mon Sep 17 00:00:00 2001 From: carson Date: Thu, 4 Jun 2020 07:06:18 -0700 Subject: [PATCH 3/5] include rails extension --- www/extensions.md | 1 + 1 file changed, 1 insertion(+) diff --git a/www/extensions.md b/www/extensions.md index 29ebcdfb..ea507f46 100644 --- a/www/extensions.md +++ b/www/extensions.md @@ -38,6 +38,7 @@ The following extensions that are tested and distributed with htmx: | [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx | [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies) | [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements +| [`remove-me`](/extensions/rails-method) | includes the `_method` parameter in requests for rails compatibility | [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time | [`include-vals`](/extensions/include-vals) | allows you to include additional values in a request From 182d2efc4c0c70ffc154bad54695169f9d04f2e1 Mon Sep 17 00:00:00 2001 From: carson Date: Thu, 4 Jun 2020 07:09:00 -0700 Subject: [PATCH 4/5] include rails extension --- www/extensions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/extensions.md b/www/extensions.md index ea507f46..352dc603 100644 --- a/www/extensions.md +++ b/www/extensions.md @@ -38,7 +38,7 @@ The following extensions that are tested and distributed with htmx: | [`debug`](/extensions/debug) | an extension for debugging of a particular element using htmx | [`path-deps`](/extensions/path-deps) | an extension for expressing path-based dependencies [similar to intercoolerjs](http://intercoolerjs.org/docs.html#dependencies) | [`class-tools`](/extensions/class-tools) | an extension for manipulating timed addition and removal of classes on HTML elements -| [`remove-me`](/extensions/rails-method) | includes the `_method` parameter in requests for rails compatibility +| [`rails-method`](/extensions/rails-method) | includes the `_method` parameter in requests for rails compatibility | [`remove-me`](/extensions/remove-me) | allows you to remove an element after a given amount of time | [`include-vals`](/extensions/include-vals) | allows you to include additional values in a request From c5a3d413ac45aeaf9ae6ce9d636fecc33c9b49d3 Mon Sep 17 00:00:00 2001 From: carson Date: Sun, 7 Jun 2020 05:54:29 -0700 Subject: [PATCH 5/5] improve documentation --- www/extensions.md | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/www/extensions.md b/www/extensions.md index 352dc603..ebefe369 100644 --- a/www/extensions.md +++ b/www/extensions.md @@ -5,17 +5,26 @@ title: htmx - high power tools for html ## htmx Extensions -Htmx has an extension mechanism for defining and using extensions to the default behavior in a simple and obvious manner. +Htmx provides an extension mechanism for defining and using extensions within htmx-based applications. ## [Using Extensions](#using) -To use an extension you use the [hx-ext](/attributes/hx-ext) attribute: +Using an extension involves two steps: + + * include the extension definition, which will add it to the `htmx` extension registry + * reference the extension via the [hx-ext](/attributes/hx-ext) attribute + +Here is an example ```html + ``` -Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire swath of the dom, +This loads the debug extension off of the `unpkg` CDN and then adds the debug extension to the given button. (This +will print out extensive logging for the button, for debugging purposes.) + +Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire part of the DOM, and on the `body` tag for it to apply to all htmx requests. **Tip:** To use multiple extensions on one element, separate them with a comma: @@ -26,7 +35,10 @@ and on the `body` tag for it to apply to all htmx requests. ## [Included Extensions](#included) -The following extensions that are tested and distributed with htmx: +htmx includes a set of extensions out of the box that address common developer needs. These extensions are tested +against `htmx` in each distribution + +### Included Extensions List
@@ -46,7 +58,7 @@ The following extensions that are tested and distributed with htmx: ## [Defining an Extensions](#defining) -To define an extension you need to call the `htmx.defineExtension()` function: +To define an extension you call the `htmx.defineExtension()` function: ```html ``` -Extensions should have names that are dash separated like above and that are reasonably short and descriptive. +Typically, this is done in a stand-alone javascript file, rather than in an inline `script` tag. -Extensions can override the following default extension fields: +Extensions should have names that are dash separated and that are reasonably short and descriptive. + +Extensions can override the following default extension points to add or change functionality: ```javascript {