Hanami-assets - feedback

questions
1

I spent some time playing with hanami-assets in the newly released beta 2 and, as @timriley suggested, I’m leaving some initial feedback here.

  1. For a brief moment I was surprised that the stylesheets at app/assets/css/app.css gets copied to public but is not watched by esbuild. I then realized that this behaviour is clearly described in the release notes of beta 2, but it still was a bit counterintuitive for me. Tim mentioned that this is inspired by Phoenix, but I’m pretty sure that in Phoenix assets not mentioned in the entrypoint don’t get copied at all, you get 404 and it’s obvious that you have to do something to make them available.
  2. Not a big deal, but bringing assets forced me to reinstate app directory I removed before. It’s not a big deal. I probably could just have assets slice and put them there instead, but I was thinking if I could have assets directory in root and keep my assets there - like in Phoenix. It seems not possible now, because paths are hardcoded in hanami/assets-js.
  3. My project currently uses Bulma from CDN. I wanted to replace it by Bulma by npm. However, it uses sass, so it required additional esbuild module. I don’t think there’s a way to inject additional modules to default esbuild config. I think it would be fine to be able to construct my own esbuild config, have hanami assets watch use it instead and just have a possibility to use hanami-assets esbuild plugin. So far I haven’t been able to figure out how to do it.

But overall I think new hanami-assets are great. Good job everyone involved!

2

@katafrakt Thanks for your feedback. I appreciate :pray:

  1. For a brief moment I was surprised […]

The philosophy is simple it requires an explanation. Static assets like images, fonts, favicon, etc… are copied to the public destination.

JavaScripts and Stylesheets have a different policy: they are compiled only if needed.

We borrowed the Entry Point (EP) concept from Esbuild.
Our EPs are conventionally named app.js and located under:

  • app/assets/js/**
  • slices/[slice]/assets/js/**

Tim mentioned that this is inspired by Phoenix

To be clear, from Phoenix we got the validation of the idea of using Esbuild. Please don’t use it as a reference.

Not a big deal, but bringing assets forced me to reinstate app directory I removed before.

That’s an interesting usage of Hanami, but not needed for assets.
We support assets in slices.

  1. My project currently uses Bulma from CDN…

The way I developed hanami-assets hiding Esbuild to a mere implementation detail.
But you’re right, the Esbuild script should be exposed for customizations like yours.

I assume we’ll need something like config/assets.js to be where magic happens.

What do you think?

3

Sure. It’s just that the current implementation hides a bit the fact that this is esbuild, so it was not immediately obvious to me that it’s the same concept. But once I got that, everything became clear.

This sounds good. However, this config needs to be “global” (one per whole app, not per slice), so I guess this would cement the fact that app directory is needed? Or maybe there should be a way to put this file anywhere and just point to it in Hanami config?

4

so I guess this would cement the fact that app directory is needed?

Not necessarily.

Or maybe there should be a way to put this file anywhere and just point to it in Hanami config?

What’s the point? :slight_smile:

5

Oh, wait, I feel dumb now. For some reason I assumed that it’s app/assets/config/assets.js, but it’s not. Sorry.