Hanami 1.3 > Hanami 2.2 : tips & notes about my journey

1

As a long time Hanami user (8 years) for my SaaS company, I’m currently working on the migration from 1.3 to 2.2. Thanks to the team for this amazing piece of software :hugs:

With a quite big codebase and many things that work quite well, my first step is to keep most of the things in place, while embrassing some new concepts.

I’m making good progress, and I take notes along the way. I think that they may interest some fellow migrators like me, so here it is, I’ll add stuff in this thread.

3 Likes
2

Use case #1: compiling scss files

I like using scss files, useful for class nesting, variables, and few other things. Hanami 1 did that out of the box IIRC, so I wanted to be able to do it in Hanami 2, while keeping the official assets pipeline

After a few search in the guide + forum + a bit of ChatGPT, here is what works for me:

  • Add the dedicated plugin for esbuild (this will update package.json)

npm install --save-dev esbuild-sass-plugin sass

  • Load the plugin for asset compilation in app/config/assets.js (or slices/your_slice/config/assets.js if you want to configure one specific slice only)
import * as assets from "hanami-assets";
import { sassPlugin } from "esbuild-sass-plugin";

await assets.run({
  esbuildOptionsFn: (args, esbuildOptions) => {
    // Modify the esbuild options to include the sass plugin
    esbuildOptions.plugins = [
      ...(esbuildOptions.plugins || []), // preserve any existing plugins
      sassPlugin() // add sass plugin
    ];
    return esbuildOptions;
  }
});
  • Import the scss file in the app/assets/js/app.js file (or slices/your_slice/assets/js/app.js if you’re in a specific slice)
import "../css/app.css";
import "../css/your_file.scss";

This part was the most counter-intuitive for me as I was handling some stylesheet files, but I understand that it’s part of the compilation pipeline

With that in place, your main app.css compiled file, that you can load in your layout with <%= stylesheet_tag "app" %> will have the content of both app.css and your_file.scss files :tada:

3

@timriley would it make sense to enrich the official doc with concrete example like that? just let me know