kalabasa / htmz Goto Github PK

from my site guestbook

You probably want to escape the REQUEST parameter in your htmz greeting example though, as otherwise folks can execute arbitrary JavaScriot on your site:
https://leanrada.com/htmz/demos/hello/greeting.html?name=%3Cscript%3Ealert%281%29%3C%2Fscript%3E
- Orang-Utan

If I understand the snippet correctly, this search and replaces the doc and replace specific sections with a specially formatted iframe.

If that's the case, then in theory it could be possible to add a script to this htmz for static website generators to add some dynamic capabilities to their site (but without having to add JS code to it).

Application for this technique could be for torsites that should really not have javascript enabled.

You still want to keep the snippet as it makes things easier without having to integrate a preprocessor. But basically this would be an extra optional script in this repo that developers can optionally call. It would read a html input and scan for a htmlz snippet (to indicate it is being used) and then do the search and replace of required tags with an iframe) before outputting to stdio

… which then can not be opened. Tested with the [GitHub] link of the doc page, on Firefox and Chrome.

You can delete this issue, it was due to an extension.

The default htmz snippet doesn't support multiple requests to the same resource URL. There are a couple workarounds to this, one is to make resource URL unique with query parameters, but ideally htmz would just handle this out of the box and make the same request twice. Below is an example of how to achieve this.

<script>
function htmz(frame){
  setTimeout(()=>{
    if(frame.contentWindow.location=='about:blank') return; //Don't load blank page, and avoid infinite loop.

    document.querySelector(frame.contentWindow.location.hash||null)?.replaceWith(...frame.contentDocument.body.childNodes);
    
    frame.contentWindow.location='about:blank'; //clear iframe after load.
  })
}
</script>
<iframe hidden name=htmz onload="htmz(this)"></iframe>

Without setting the location to about:blank after the replacement, a link would only load once and consecative clicks would be ignored since the resourceURL didn't change.

Anyway, Not sure if this merits a example, or maybe there is a cleaner technique.

In order to support older browser such as IE 11, you could rewrite the onclick handler to:

setTimeout(function(){(document.querySelector(contentWindow.location.hash||null)||{}).outerHTML=contentDocument.body.innerHTML})

Many websites give their subheadings an id and then make it or a ToC link to the subheading. This allows to send a link to a specific subheading. Your script breaks that.

Hello!

Thanks for this library! It's very cool.

Do you have a recommendation or an extension for not adding to the browser history when clicking on htmz links? I'd like my back button to (for example) go to what my user sees as the previous page rather than resetting a form to a previous state.

Thanks,
Louis

Is the $_REQUEST php global array the only one to use?

Using the htmz function defined in a script tag isn't working in either Chrome or Safari for me.

Code:

<iframe hidden src="/tasks/1#hello" id="hello" name=htmz onload="htmz(this)"></iframe>
<script type="text/javascript">
  function htmz(frame) {
    document.querySelector(frame.name) // use the iframe's name instead of the URL hash
      ?.replaceWith(...frame.contentDocument.body.children);
  }
</script>

Errors:

# Safari
TypeError: htmz is not a function. (In 'htmz(this)', 'htmz' is an instance of Window)
# Chrome
Uncaught TypeError: htmz is not a function
    at HTMLIFrameElement.onload

No Content Security Policy is being used. I'm not sure what could be wrong here. Any guidance?

With a <load-file> Web Component you have the choice of loading any content into DOM, or in shadowDOM to keep <style> scoped... and even move (global) style (or any Node for that matter) to shadowDOM
No need to define it before being used like your htmz function; any existing <load-file> will upgrade automagically.

/*
  defining the <load-file> Web Component,
  yes! the documenation is longer than the code
  License: https://unlicense.org/
*/
customElements.define("load-file", class extends HTMLElement {

  // declare default connectedCallback as async so await can be used
  async connectedCallback(
    // call connectedCallback with parameter to *replace* SVG (if <load-file> is not replaceWith)
    src = this.getAttribute("src"),
    // attach a shadowRoot if none exists (prevents displaying error when moving Nodes)
    // declare as parameter to save 4 Bytes: 'let '
    shadowRoot = this.shadowRoot || this.attachShadow({mode:"open"})
  ) {
      // load SVG file from src="" async, parse to text, add to shadowRoot.innerHTML
    shadowRoot.innerHTML = await (await fetch(src)).text()

    // append optional <tag [shadowRoot]> Elements from <load-file> innerHTML/lightDOM after parsed content
    shadowRoot.append(...this.querySelectorAll("[shadowRoot]"))

    // if "replaceWith" attribute exists
    // then replace <load-file> with loaded content <load-file>
    // childNodes instead of children to include #textNodes also
    this.hasAttribute("replaceWith") && this.replaceWith(...shadowRoot.childNodes)
  }
})

source: a DEV.to Post from 2021

Hey Lean, firstly let me say fantastic project and such an inspiring use of the web. I can feel the future of web development starting to take shape!

Lots of tools I write are basically just forms. However, we can't write them with "just HTML" because we often need to input a list of elements, for example data like this:

{
  "firstName": "Angus",
  "hobbies": [ "cooking", "running" ] 
}

And a form that could submit this could look like this:

<form method='post' action='/submit'>
  <input name='firstName' value='Angus' required>
  <input name='hobbies[]' value='cooking'>
  <input name='hobbies[]' value='running'>
  <button id='add-hobby' formaction='/add-hobby'>add hobby</button>
  <input type='submit'>
</form>

This nearly works, but sadly not quite as the form must be valid before you can submit it.

Can you think of a workaround for this? All I can think is:

• Nested forms (disallowed)
• Using a link instead of a button (can't be clicked twice in a row)
• Just do all validation on the backend, and return a half-completed form in the case of errors (might actually be ok?)

I wonder if anyone has any ideas? Small forms like this are so close to being HTML only, but this list-of-inputs thing stops me every time - meaning I have to duplicate rendering code on the client (then I might as well just write everything client side).

The loader extension is a bit too shallow: it will only show a loading spinner once the server has begun sending the first byte.

This means it is not a true loading indicator (like htmx's hx-indicator), which is fine but quite limiting in terms of functionality, especially when trying to mitigate the "laggy" feeling of hypermedia-driven applications.

(the loader extension also uses onload, which is deprecated. It should rather use onbeforeload).

I have two proposed solutions:

• improve the extension to make it 1-1 with hx-indicator. This will involve more code and a custom attribute, so more complex overall.
• leave the extension as is, and add "htmz vs htmx" examples.

What would you prefer? Depending on what you like best I can submit a PR!