my javascript build-fu is terrible

are you any good at it?

I want to keep htmx really simple single-file, and build-tool agnostic, but there are a of different standards

:/

no to be honest i am not. however i can code a sample minimum project with webpack maybe this evening or tomorrow so someone could take a look.

OK

sounds good, sorry

I have been avoiding javascript build tools for a decade now

I'm sure @User could weigh in re webpack.

@User So you're saying that you've bundled up htmx with webpack, and loading it via dynamic import then causes it to not work?

@User yes

actually; its bundled with the main.js file already. The dynamic import can contain some other javascript code

But if the dynamic import is invoked, htmx doesn't work for some reason; as if no events are registered etc

i am actually writing a simple index.html/webpack config to try to reproduce it

@User Even if the dynamic import doesn't do anything besides a

console.log

?

@User yes, it can even be an empty js file

Can you clarify how you're importing htmx, via dynamic import or the main file?

in main.js file; like so:

import "htmx.org"

var Routes = {
 '/somepage': () => import('somepage.js'); //somepage.js is an empty js file.
};

document.addEventListener("DOMContentLoaded", function() {
    var currentRoute = document.body.getAttribute("data-page-route"); //this will be /somepage
    if (currentRoute in Routes) {
        Routes[currentRoute]().then((m) => {
            // this loads somepage.js which is an empty file
            console.log('loaded script for ${currentRoute}');
        });
    }
});

So probably @User you'll need to manually call some entrypoint to execute the htmx code

When you load legacy JS as ES modules, you generally need to shim them in some way to execute the "init" or whatever method that normally runs automatically

I'd need to look at the htmx code more to do more with it

I believe htmx simply uses a self executing function to initialise itself.

Which then executes the

ready

function: https://github.com/bigskysoftware/htmx/blob/dev/src/htmx.js#L1663-L1669

Probably you'd need to add a manual trigger or fake "ready" because if the script is async loaded in, it could be loaded in at any time

@User -> https://webpack.js.org/guides/shimming/

When I load new elements through htmx into a page, is there a way to initialize only those elements for hyperscript? If I call

_hypserscript.start()

it duplicates event listeners on existing elements.

@User you shouldn't need to call it on new elements

just FYI, for my usecase at least for webpack I managed to get it to work by: a) removing the ready(callback) call from here: https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L1699 b) adding the code present in the ready callback as part of a public api returned from htmx as an "initialize" function c) calling it like so:

document.addEventListener("DOMContentLoaded", function () { 
    var currentRoute = document.body.getAttribute("data-page-route");
    if (currentRoute in Routes) {
        Routes[currentRoute]().then((m) => {
            htmx.initialize();
        });
    }
});

why does this need special treatment for webpack? i don't know - it works under rollup. But then rollup blows for rest of my code... to summarize YUCK all the webpack/rollup w/e build tools - incosistent blackboxes that do nothing but waste time ; (

whyIMadeHtmxNotRequireAnyJavascriptBuildTools.txt