Merge branch 'dev' into v2-merge

src/htmx.d.ts

@@ -36,6 +36,8 @@ declare namespace htmx {
         const allowEval: boolean;
         const allowScriptTags: boolean;
         const inlineScriptNonce: string;
+        const inlineStyleNonce: string;
+        const attributesToSettle: string[];
         const withCredentials: boolean;
         const timeout: number;
         const wsReconnectDelay: "full-jitter" | ((retryCount: number) => number);
@@ -48,26 +50,19 @@ declare namespace htmx {
         const methodsThatUseUrlParams: (HttpVerb)[];
         const selfRequestsOnly: boolean;
         const ignoreTitle: boolean;
+        const scrollIntoViewOnBoost: boolean;
         const triggerSpecsCache: any | null;
         const disableInheritance: boolean;
+        const responseHandling: HtmxResponseHandlingConfig[];
         const allowNestedOobSwaps: boolean;
-        const defaultErrorSwapStyle: HtmxSwapStyle;
-        const defaultErrorTarget: string;
-        const httpErrorCodesToSwap: number[];
-        const layoutQueuesEnabled: boolean;
-        const cleanUpThrottlingEnabled: boolean;
-        const disabledEvents: any;
     }
     const parseInterval: (str: string) => number;
     const _: (str: string) => any;
-    const readLayout: (callback: any) => void;
-    const writeLayout: (callback: any) => void;
-    const querySelectorAllExt: (elt: string | Element | Node | Document, selector: string, global?: boolean) => (Node | Window)[];
-    const querySelectorExt: (eltOrSelector: string | Node, selector?: string) => Node | Window;
     const version: string;
 }
 type HttpVerb = 'get' | 'head' | 'post' | 'put' | 'delete' | 'connect' | 'options' | 'trace' | 'patch';
 type SwapOptions = {
+    select?: string;
     selectOOB?: string;
     eventInfo?: any;
     anchor?: string;
@@ -76,10 +71,9 @@ type SwapOptions = {
     afterSettleCallback?: swapCallback;
 };
 type swapCallback = () => any;
-type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | 'mirror' | string;
+type HtmxSwapStyle = 'innerHTML' | 'outerHTML' | 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend' | 'delete' | 'none' | string;
 type HtmxSwapSpecification = {
     swapStyle: HtmxSwapStyle;
-    defaultSwapStyle?: HtmxSwapStyle;
     swapDelay: number;
     settleDelay: number;
     transition?: boolean;
@@ -121,12 +115,12 @@ type HtmxAjaxHelperContext = {
     handler?: HtmxAjaxHandler;
     target: Element | string;
     swap?: HtmxSwapStyle;
-    errorTarget?: Element | string;
-    errorSwap?: HtmxSwapStyle;
     values?: any | FormData;
     headers?: Record<string, string>;
+    select?: string;
 };
 type HtmxRequestConfig = {
+    boosted: boolean;
     useUrlParams: boolean;
     formData: FormData;
     /**
@@ -152,6 +146,8 @@ type HtmxResponseInfo = {
     target: Element;
     requestConfig: HtmxRequestConfig;
     etc: HtmxAjaxEtc;
+    boosted: boolean;
+    select: string;
     pathInfo: {
         requestPath: string;
         finalRequestPath: string;
@@ -160,25 +156,34 @@ type HtmxResponseInfo = {
     };
     failed?: boolean;
     successful?: boolean;
-    defaultHandler: (elt: Element, responseInfo: HtmxResponseInfo) => void;
 };
 type HtmxAjaxEtc = {
     returnPromise?: boolean;
     handler?: HtmxAjaxHandler;
+    select?: string;
     targetOverride?: Element;
     swapOverride?: HtmxSwapStyle;
-    errorTargetOverride?: Element;
-    errorSwapOverride?: HtmxSwapStyle;
     headers?: Record<string, string>;
     values?: any | FormData;
     credentials?: boolean;
     timeout?: number;
 };
+type HtmxResponseHandlingConfig = {
+    code?: string;
+    swap: boolean;
+    error?: boolean;
+    ignoreTitle?: boolean;
+    select?: string;
+    target?: string;
+    swapOverride?: string;
+    event?: string;
+};
 type HtmxBeforeSwapDetails = HtmxResponseInfo & {
     shouldSwap: boolean;
     serverResponse: any;
     isError: boolean;
     ignoreTitle: boolean;
+    selectOverride: string;
 };
 type HtmxAjaxHandler = (elt: Element, responseInfo: HtmxResponseInfo) => any;
 type HtmxSettleTask = (() => void);

src/htmx.js

@@ -164,6 +164,12 @@ var htmx = (function() {
        * @default ''
        */
       inlineScriptNonce: '',
+      /**
+       * If set, the nonce will be added to inline styles.
+       * @type string
+       * @default ''
+       */
+      inlineStyleNonce: '',
       /**
        * Allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates.
        * @type boolean
@@ -293,7 +299,7 @@ var htmx = (function() {
     querySelectorAllExt: null,
     /** @type {typeof querySelectorExt} */
     querySelectorExt: null,
-    version: '2.0.0-beta3'
+    version: '2.0.0-beta4'
   }
   // Tsc madness part 2
   htmx.onLoad = onLoadHelper
@@ -4852,8 +4858,9 @@ var htmx = (function() {
 
   function insertIndicatorStyles() {
     if (htmx.config.includeIndicatorStyles !== false) {
+      const nonceAttribute = htmx.config.inlineStyleNonce ? ` nonce="${htmx.config.inlineStyleNonce}"` : ''
       getDocument().head.insertAdjacentHTML('beforeend',
-        '<style>\
+        '<style' + nonceAttribute + '>\
       .' + htmx.config.indicatorClass + '{opacity:0}\
       .' + htmx.config.requestClass + ' .' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\
       .' + htmx.config.requestClass + '.' + htmx.config.indicatorClass + '{opacity:1; transition: opacity 200ms ease-in;}\

test/core/security.js

@@ -120,7 +120,49 @@ describe('security options', function() {
     btn.click()
   })
 
-  it("can't make egress cross site requests when htmx.config.selfRequestsOnly is enabled", function(done) {
+  it('can disable hx-on on a single elt', function() {
+    var btn = make("<button hx-disable hx-on:click='window.foo = true'>Foo</button>")
+    btn.click()
+    should.equal(window.foo, undefined)
+    delete window.foo
+  })
+
+  it('can disable hx-on on a parent elt', function() {
+    var div = make("<div hx-disable><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>")
+    var btn = byId('b1')
+    btn.click()
+    should.equal(window.foo, undefined)
+    delete window.foo
+  })
+
+  it('can disable hx-on on a single elt dynamically', function() {
+    var btn = make("<button hx-on:click='window.foo = true'>Foo</button>")
+    btn.click()
+    should.equal(window.foo, true)
+    delete window.foo
+
+    btn.setAttribute('hx-disable', '')
+
+    btn.click()
+    should.equal(window.foo, undefined)
+    delete window.foo
+  })
+
+  it('can disable hx-on on a parent elt dynamically', function() {
+    var div = make("<div><button id='b1' hx-on:click='window.foo = true'>Foo</button></div>")
+    var btn = byId('b1')
+    btn.click()
+    should.equal(window.foo, true)
+    delete window.foo
+
+    div.setAttribute('hx-disable', '')
+
+    btn.click()
+    should.equal(window.foo, undefined)
+    delete window.foo
+  })
+
+  it("can't make egress cross site requests when htmx.config.selfRequestsOnly is true", function(done) {
     this.timeout(4000)
     // should trigger send error, rather than reject
     var listener = htmx.on('htmx:invalidPath', function() {

www/content/_index.md

@@ -2,9 +2,32 @@
 insert_anchor_links = "left"
 +++
 
+<style type="text/css">
+body.lmao .dark-hero .main {
+    display:none;
+}
+body.lmao .dark-hero .wuw {
+    display:block;
+    padding-top: 24px;
+}
+body .dark-hero .wuw {
+    display:none;
+}
+</style>
+<script type="application/javascript">
+if(window.location.search=="?wuw=true") {
+  document.body.classList.add('lmao');
+}
+</script>
+
 <div class="dark-hero full-width" classes="add appear">
-  <span class="logo dark">&lt;<span class="blue">/</span>&gt; <span class="no-mobile">htm<span class="blue">x</span></span></span>
-  <sub class="no-mobile"><i>high power tools for HTML</i></sub>
+  <div class="main">
+      <span class="logo dark">&lt;<span class="blue">/</span>&gt; <span class="no-mobile">htm<span class="blue">x</span></span></span>
+      <sub class="no-mobile"><i>high power tools for HTML</i></sub>
+  </div>
+  <div class="wuw">
+     <img src="/img/wuw.png">
+  </div>
 </div>
 
 <div style="border: 1px solid lightgrey; margin:24px;padding:12px;border-radius: 8px; background-color: whitesmoke; filter: drop-shadow(3px 3px darkgray)">
@@ -37,7 +60,7 @@ By removing these constraints, htmx completes HTML as a [hypertext](https://en.w
 <h2>quick start</h2>
 
 ```html
-  <script src="https://unpkg.com/htmx.org@2.0.0-beta3"></script>
+  <script src="https://unpkg.com/htmx.org@2.0.0-beta4"></script>
   <!-- have a button POST a click via AJAX -->
   <button hx-post="/clicked" hx-swap="outerHTML">
     Click Me
@@ -131,7 +154,7 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
       <a data-github-account="sekunho" href="https://twitter.com/sekunho_/"><img src="/img/sekun-doggo.jpg" alt="Hiro The Doggo" style="border: 2px solid lightgray; border-radius:20px; width:100%;max-width:150px"></a>
 </td>
 <td>
-        <a href="https://dasfilter.shop/pages/partner-program">
+        <a href="https://dasfilter.shop/pages/affiliates">
           <img alt="Das Filter" src="/img/das-filter.svg" style="width:100%;max-width:300px">
         </a>
 </td>
@@ -188,6 +211,11 @@ Thank you to all our generous <a href="https://github.com/sponsors/bigskysoftwar
           <img alt="VPS Server Hosting in the Cloud: Cost Efficiency" src="/img/vps-server-logo.svg" style="width:100%;max-width:250px">
         </a>
 </td>
+<td>
+        <a data-github-account="appleple" href="https://www.a-blogcms.jp/">
+          <img src="/img/ablogcms_logo.svg" style="width:100%;max-width:250px">
+        </a>
+</td>
 </tr>
 </table>
 </div>

www/content/api.md

@@ -120,6 +120,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
 * `allowEval:true` - boolean: allows the use of eval-like functionality in htmx, to enable `hx-vars`, trigger conditions & script tag evaluation.  Can be set to `false` for CSP compatibility.
 * `allowScriptTags:true` - boolean: allows script tags to be evaluated in new content
 * `inlineScriptNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline scripts
+* `inlineStyleNonce:''` - string: the [nonce](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/nonce) to add to inline styles
 * `withCredentials:false` - boolean: allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates
 * `timeout:0` - int: the number of milliseconds a request can take before automatically being terminated
 * `wsReconnectDelay:'full-jitter'` - string/function: the default implementation of `getWebSocketReconnectDelay` for reconnecting after unexpected connection loss by the event code `Abnormal Closure`, `Service Restart` or `Try Again Later`