_hyperscript
_hyperscript copied to clipboard
bigskysoftware
Doesn't work when bundling
Make a new folder and run these four commands to set up a basic bundle with esbuild (webpack competitor):
npm install htmx.org hyperscript.org esbuild
echo 'require("htmx.org/dist/htmx.js"); require("hyperscript.org/dist/_hyperscript.js");' > app.js
npm exec -- esbuild app.js --bundle --outfile=bundle.js
echo '<html><head><script type="text/javascript" src="bundle.js"></script></head></html>' > index.html
... and then open index.html in the browser. htmx successfully loads and works, but hyperscript breaks with a couple of these errors:
Uncaught ReferenceError: _hyperscript is not defined
It looks like hyperscript's module loading wrapper is only applied to the runtime, and not the individual commands.
I get the same error. But I am also unsure if I used your code. I pulled in the dist from the _hyperscript repo on your branch, but only after I was unsuccessful building it myself. I tried running npm run dist on your branch but I get an error:
$ npm run dist
> [email protected] dist
> npm run clear && npm run copy && npm run concat && npm run uglify && npm run gzip
> [email protected] clear
> rm -rf dist/*
> [email protected] copy
> cp -r src/* dist/
> [email protected] concat
> npm run concat:hyperscript && npm run concat:w9y
> [email protected] concat:hyperscript
> concat src/lib/core.js src/lib/web.js -o dist/_hyperscript.js
sh: concat: command not found
I'm not sure why concat isn't installing for me 🤷
If you can do a build and push it on your branch I can try again. But it's pretty straightforward - just the four commands above.
Just tried it on my end and it unfortunately doesn't work.
I was actually experimenting with microbundle without telling Carson --- you can try one of the builds in https://github.com/dz4k/_hyperscript/blob/microbundle/dist/. There are ES Module builds there that would probably work better with a bundler..
Is there a fix or workaround for this problem? I'm using Parcel to bundle hyperscript v0.9.7 and it's not working either.
I had a similar issue, but using webpack. I solved it with the following:
index.js
import 'htmx.org';
import 'hyperscript.org';
import './custom.js';
custom.js
window._hyperscript = require('hyperscript.org');
window._hyperscript.browserInit();
Bundling also causes hyperscript elements to not (re-)initialize properly when using with htmx and hitting the backwards cache. hyperscript elements are not initialized, including for all consecutive htmx requests.
