Adding additional JavaScript static files

[SHxKM]

So right now adding additional <script></script> referencing static like so does nothing:

<script src="{% static 'js/hyperscript.min.js' %}" type="application/javascript"></script>

I made sure to include hyperscript.min.js under assets/js. My esbuild.config.mjs is left unchanged but I guess the esbuild-copy-static-files is meant to automate copying those files. I'm sure there's something I'm missing, would love a pointer to the right direction.

[SHxKM]

Curiously, at least when running locally this (omitting the /js from src) works, but somehow I'm sure this is not intended.

<script src="{% static 'hyperscript.min.js' %}" type="application/javascript"></script>
<script src="{% static 'htmx.min.js' %}" type="application/javascript"></script>

[nickjj]

Based on the paths of the files you've supplied so far like htmx, you don't need to add 3rd party dependencies manually. You can leave the esbuild config alone and add those dependencies to the package.json file and then run ./run yarn:install. This file is similar to your requirements file for Python, but for Node dependencies. For example, here's hyperscript: https://www.npmjs.com/package/hyperscript

[SHxKM]

Oh that's nice. Unfortunately it doesn't seem to work. Still getting those 404s locally when referencing those paths:

<script src="{% static 'js/hyperscript.min.js' %}" type="application/javascript"></script>
<script src="{% static 'js/htmx.min.js' %}" type="application/javascript"></script>

Need I change anything in esbuild.config.mjs to make this work? Just read that you wrote I can leave the config file alone, will continue to investigate why it's not working.

One direction is after modifying package.json and running ./run yarn:install, there is no indication of any files named htmx or hyperscript anywhere locally.

[nickjj]

You wouldn't reference them in script tags after NPM installing them. You can import them as a dependency into whatever JS file(s) need to use it.

For example, after NPM installing it:

import * as hyperscript from 'hyperscript.org';
hyperscript.browserInit();

Most libraries have instructions in their readme file in how to use it when using any bundling tool such as esbuild or webpack. It usually comes down to importing the library. The libs you used as an example don't because they are 7+ years old but I found that snippet here when Googling bigskysoftware/_hyperscript#162 (comment), if that doesn't work you can try the method above it.

[SHxKM]

Maybe because I didn't run yarn:build:js? but running ./run yarn:build:js that gives an error:

❯ ./run yarn:build:js
node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '/Users/xxx/development/xxx/esbuild.config.mjs'
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

[nickjj]

You never have to run yarn:build:js manually, it's not meant to be run by a human.

[SHxKM]

@nickjj What you're saying is that I don't need to reference in my .html files either? because I did try that, and no 404, but it seems that their functionality is lost.

These two libraries work "directly" on the html file, so I'm not sure what you mean by:

import * as hyperscript from 'hyperscript.org';
hyperscript.browserInit();

I'm not referencing them in any JS files, my layman's way is to include the CDN reference/put in static, and just do:

<div hx-get="foo"></div>

hx-get is a function of `htmx.

OK just read your udated answer:

Most libraries have instructions in their readme file in how to use it when using any bundling tool such as esbuild or webpack. It usually comes down to importing the library. The libs you used as an example don't because they are 7+ years old but I found that snippet here when Googling bigskysoftware/_hyperscript#162 (comment), if that doesn't work you can try the method above it.

Those two libs are actually actively maintained. So what you're saying is that I have to declare a new JS file, import those libraries from there, and include that JS file in .html page?

[nickjj]

You mentioned htmx, but the package on NPM is called htmlx.org, did you add that to your package.json file? This package name is mentioned in their docs https://github.com/bigskysoftware/htmx in the quick start.

These two libraries work "directly" on the html file, so I'm not sure what you mean by

Typically you have JS files that reference that library. That's where you'd add your import. Similar to how you'd import a Python package in a Python file before using it.

I'm not referencing them in any JS files, my layman's way is to include the CDN reference/put in static

If you want to use a CDN, feel free to reference them in script tags and then use them as needed. That is an alternative to the method I've described.

[SHxKM]

Thank you so much @nickjj!

Adding this to app.js works:

import * as hyperscript from 'hyperscript.org';
import htmx from 'htmx.org'
hyperscript.browserInit();

Yes, I'm using htmx.org

[nickjj]

No problem you can do the same thing with htmx, it's in their docs at: https://htmx.org/docs/#installing

It's listed under Webpack https://htmx.org/docs/#webpack but the same thing should work with esbuild. You probably want the global variable method too, maybe something like this will work:

import 'htmx.org';
window.htmx = require('htmx.org');

If that doesn't work you can follow their exact instructions with the custom file method.

[SHxKM]

@nickjj searched this repo and links on your website but couldn’t find anything, anywhere I can buy you a coffee?

[nickjj]

It's all good, but if you feel compelled my PayPal or Zelle email is [email protected].