Suggestions? Importing JavaScript objects into .hooks.js files (Surface UI)

I kept my JS files inside assets/js folder and imported them from my hooks components as if that existed inside hooks folder.

Here is an example:

https://github.com/code-shoily/covid19/blob/mafinar/try-out-tailwind/lib/covid19_web/components/crd_pie_chart_component.hooks.js

Notice the location of the hooks.js (colocated) file as opposed to their JS imports (assets/js)

I’ve been doing that, but have been thinking about improving code organization beyond that (I should have been more explicit about that).

Some of the options that came to mind:

1. Allow colocated .js files. This has the disadvantage that you can only colocate one .js file besides the .hooks.js file.
2. Define .js import paths relative to the .hooks.js file. Possibly indicated with a symbol (e.g. €). For example:

// this is inside a .hooks.js file
import { example } from 'app.js' // Path relative to assets folder
import { eagle } from '€/animals.js' // Path relative to .hooks.js file

Using € might be a terrible choice, but just for argument’s sake.

3. Both. Allowing colocation AND path relative to .hooks.js.

I think it would work nicely if I can organize my code as follows, if there is a large amount of lines of code:

AppWeb/Live
|_________ helpers (folder)
|_________ aardvark.ex
|_________ aardvark.sface
|_________ aardvark.css
|_________ aardvark.hooks.js
|_________ aardvark.js

But also being able to use fewer files, if there aren’t as many lines of code.

AppWeb/Live
|_________ helpers (folder)
|_________ aardvark.ex
|_________ aardvark.hooks.js

I’m anticipating the maintenance of large projects. That’s why I’m interested in this topic atm.

By the way, I’m not trying to imply putting all files at the top level of AppWeb/Live, that’s also for argument’s sake only.