Apologies if this has been resolved already. I’m doing an NPM import of htmx, and bundling the final script with webpack. When I do so, nothing happens, and no error messages are shown. If I just download the src from unpkg -in the header- it all works beautifully. I saw some old threads about this situation but couldn’t find a solution. Should I avoid the import all together? Or is there a proper way to make it work?

@User

npm install htmlx.org

js
const htmlx = require('htmlx.org') 
//or 
import htmlx from 'htmlx.org'

window.htmlx = htmlx

thats what worked for me, unfortunately I had to go back to using the cdn because I couldnt access the htmlx functions (in typescript) and I was running out of time

sorry folks

@User has been doing some work on hyperscript w/ a build tool

@colossal-glass-79762 thank you so much. I’m bookmarking your answer and will try it tomorrow. I’m not using typescript, so I’m hoping I can work with it just like that. THANSK.

I hate them, but probably necessary

Im not a fan either, but sometimes you cant escape from it...

What time is your presentation today?

11:15 MT

Perfect! Thx!

Carson's talk starts in about 5 mins:

people framework warring in chat lmao

Dammit I shilled htmx as hard as I could in the YouTube chat… sorry @mysterious-toddler-20573 🙈

🙂

I have noticed a slightly peculiar behavior with HTMX. When I use hx-boost on an anchor tag (as is intended) the page scrolls to the bottom. But when I do the same thing with hx-get. This doesn't happen. Is there any way to prevent this scrolling from happening? (ps: I also have an hx-target attribute present on the anchor tag but I don't know whether that is relevant or not).

Great talk 👏👏👏

🙂 fun

I find the json vs html payload "argument" pointless, nothing about using htmx prevents you from shipping json with the response and doing client side interactions, Ive done it a number of times and it works well.

In order to make back button support work as expected, it's important to undo all DOM changes that your JS widgets made to the DOM on load, so that htmx takes a snapshot of the pristine html that was initially rendered, before the JS widgets did their respective DOM mutation tasks. This allows the following flow to happen: 1. On html load (either from full page refresh or htmx page fragment load), initialise the loaded html with JS widgets as needed, in a

load

event handler 2. on navigating to another page, just before htmx takes a snapshot of the current DOM, clean-up/destroy all the extra mark-up that the JS widgets created, inside a

htmx:beforeHistorySave

event handler 3. now when the user clicks the back button, htmx will restore the previously saved DOM state and then fire the

load

event again, which will trigger the event handler defined in step 1 above and your JS widgets will created again... resulting in a properly functioning "previous" html page

Here's what this looks like in practice in our htmx apps: 1. We have the following catch-all

load

event handler in the head section of our base html template, where we initialise all the JS widgets we use in the app. Each of the functions in this handler then checks if the

target

element contains any html elements that should be initialised with the particular JS widget and then proceeds to do the initialisation as needed:

htmx.onLoad(function(target) { 

  initializeButtonsets(target);
  initializeDatatables(target);     
  initializeSelect2(target);
  initializeMultiSelects(target);
  initializeTinyMCE(target);
  initializeDatePickers(target);
  ...
});

2. On the flipside of this, we also listen for the

htmx:beforeHistorySave

event, where we teardown/destroy/undo all the DOM changes the JS widgets did on page load (full disclaimer - we still use a ton of jQuery-based JS widgets, which we are slowly busy migrating to vanilla JS equivalents):

// Destroy widgets added to the DOM, before taking the history snapshot
// in order for the widgets to be created again without problems on back button clicks
htmx.on("htmx:beforeHistorySave", function() {

  $('#content .buttonset').buttonset('destroy');
  $('#content table.standard, #content table.readOnly').dataTable().fnDestroy();            
  $('#content .select2, #content .select2-allowClear, #content .select2-focus').select2('destroy');
  $('#content select.multiselect').multiselect('destroy');            
  if (window.tinymce) tinymce.remove();            
  $('#content input.hasDatepicker').datepicker('destroy');
  ...
   
});

I hope this helps

absolute king

I will pare this down for the docs, thank you!

Love this reaction to your talk @User 👊 https://twitter.com/gilzow/status/1448711391423172614

Yup, was a good talk. Had to watch it while being in a bar with my gf tho

Sadly I missed it (#blamewife) but will watch when JetBrains publishes the YouTube link

From around 4:29:00:

Great job @mysterious-toddler-20573, especially the questions and discussion afterwards!!

thank you ben!