https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • l
    this is a great little solution, thank you
  • l
    the 
    hx-trigger
    syntax is so good it makes me wonder whether there could be an attribute executes some client-side js/hyperscript in place of the typical 
    hx-get
    , 
    hx-put
    network call
    Copy code
    hx-trigger="load delay:2s" hx-execute="() => this.innerText = 'Save'"
    to avoid the round trip while still staying roughly within the HTMX paradigm
  • g
    hx-get="javascript:this.innerText = 'Save'"
    (doesn't currently work)
  • m
    yep, will get to it at some point here!
  • e
    Has anyone used htmx with importmap yet?
  • e
    I'm testing out importmap in my app, and it's great. But it seems to be causing issues with the JS api for htmx
  • e
    I think it's because the export defined in the JS I'm importing via CDN here: https://ga.jspm.io/npm:htmx.org@1.8.5/dist/htmx.min.js seems to be a placeholder instead of a real export. 
    var exports={}
    I have no idea where that comes from though
  • e
    So when I do 
    import htmx from "htmx.org"
    it sets 
    htmx
    to 
    {}
    instead of having 
    ajax
    , etc defined in there
  • e
    Actually.... I don't even understand how I'm able to do 
    import htmx from "htmx.org"
    in the npm/webpack ecosystem. From what I can see in here: https://raw.githubusercontent.com/bigskysoftware/htmx/master/dist/htmx.min.js there's no exports
  • e
    Oh interesting. I think I see...
  • e
    This line https://github.com/bigskysoftware/htmx/blob/f44b04f1a1afbd79c589e97130dad677c2ccd0cd/src/htmx.js#L4 is defining an amd module. Webpack must be doing some magic to convert that to an ES module
  • m
    \> tfw u have been programmings in the javascript for over a decade \> tfw u have no idea how any of the packaging stuff works \> tfw
  • e
    haha
  • e
    I'm in the same boat. This stuff is all new to me. But I think importmap should be simplifying things
  • e
    I think I see what's wrong here. I'll be submitting a PR soon
  • e
  • e
    Basically, in HTML you can now do this:
    Copy code
    <script type="importmap">
  {
    "imports": {
      "square": "./module/shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>
    And then in you JS, you can do
    Copy code
    import square from "square"
import circle from "circle"
    and it'll work. No bundling needed.
  • e
    Without importmap, you can already do
    Copy code
    import circle from "https://example.com/shapes/circle.js"
    But the problem is that's not caching-friendly basically. You want to be able to add a digest/fingerprint to that url name. importmap lets you do that, without having to go changing imports all over the place
  • e
    @mysterious-toddler-20573 Is IE11 still supported? 😬 That complicates my PR
  • e
  • e
    So when is htmx 2 coming? 😂 2025?!
  • m
    at the earliest
  • e
    Wow, okay
  • m
    (i hope end of summer)
  • g
    Any thoughts on hx-push-url being able to target query params?
  • g
    Or are we invoking 7b? 🤣 Just saw the FAQ 🤌
  • m
    tell me more
  • i
    Trying to use HTMX to swap one image for another, and would like the new image to fade in on top of the old one before the old image is removed. Is that possible, or do I need to do some _hyperscript wizardry?
  • i
    Figured it out with a bit of hyperscript
  • e
    @mysterious-toddler-20573 I set up a rollup build system and fixed the import system. https://github.com/bigskysoftware/htmx/pull/1250
1...101610171018...1146Latest