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

coen.bakker · July 6, 2022, 5:58pm

Recently I have started using Surface UI. The ability to colocate my view/component and its hooks has helped me organize my project better.

I like to keep my .hooks.js files nice and tidy, though. So I would like to be able to import objects from other .js files. For example, by providing the relative path of the .js file (relative to the .hooks.js file). Or by colocation. In the latter case you’d get:

Any advice how to go about implementing this? I will also dive into the code base of Surface to see if I can borrow any solutions from there, but I could use some help looking for a solution in the right direction.

Thank you.

code-shoily · July 7, 2022, 1:24am

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:

github.com

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

import Plotly from "../plotly-custom";

import { makeChart } from "../helpers";

const colors = ["#f1c40f", "#2980b9", "#e74c3c", "#27ae60"];

const CRDPieChart = {
  newCases: [],
  recoveries: [],
  deaths: [],
  mounted() {
    let data = JSON.parse(this.el.dataset.statistics);

    var layout = {
      margin: { t: 0, b: 30, l: 30, r: 10 },
      showlegend: true,
    };

    var config = config || {
      responsive: true,

This file has been truncated. show original

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

coen.bakker · July 7, 2022, 4:03pm

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:

Allow colocated .js files. This has the disadvantage that you can only colocate one .js file besides the .hooks.js file.
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.

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

coen.bakker · July 7, 2022, 4:18pm

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

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.