esbuild instead of webpack for js and stimulusjs

[serhiihiba]

Someone can help me to orginize my components like here:

components
 ...
  └ review_component
    ├ review_component.html.erb
    ├ review_component.js
    ├ review_component_controller.js
    └ review_component.css
 ...

without webpack(er)? I'm using Rails 7 with sprockets and esbuild.

I read this issue #1064 for connect stimulusjs to component and tried something like these all:

// app/javascript/controllers/index.js
import ReviewComponentController from "../../components/review_component/review_component_controller"
application.register("review-component", ReviewComponentController)

# app/assets/config/manifest.js
//= link_tree ../components

// app/javascript/application.js
import "../components"

But it's not works for me. Also I don't know how js component (not stimulus) should works together with component too.

[mateuszbialowas]

Did you find out, how to use it with esbuild? @enotikalt

[serhiihiba]

I manually register all controllers inside each entry js file. You can do the same or use some webpack plugin for esbuild I think

Manually way is for example:

-javascript
--entries
---home
----index.js // here manually register all controllers from components, which you will use for this entry page
---home.js //here just import index file of this entry

Same for CSS inside assets too

Then in your package.json something like this:

"scripts": {
    "build": "esbuild app/javascript/entries/*.* --bundle --sourcemap --outdir=app/assets/builds",
    "build:css": "esbuild app/assets/stylesheets/entries/*.* --bundle --minify --sourcemap --outdir=app/assets/builds"
  }

Example of index.js from some entry folder:

import { application } from "./application"

import BarComponentController from "../../../../components/home/bar_component/bar_component_controller"
application.register("home--bar-component", BarComponentController)

I hope it will help @mateuszbialowas

[mateuszbialowas]

I monkey patch rake task stimulus::manifest::update

This is my rake task:

#lib/tasks/stimulus_tasks.rake

# frozen_string_literal: true

require 'stimulus/manifest'

namespace :stimulus do # rubocop:disable Metrics/BlockLength
  namespace :manifest do
    task update: :environment do
      components_manifest = Stimulus::Manifest.generate_from(Rails.root.join('app/components'))
      controllers_manifest = Stimulus::Manifest.generate_from(Rails.root.join('app/javascript/controllers'))

      components_manifest.each do |component|
        component.gsub!(/from "\./, 'from "./../../components')
      end

      Rails.root.join('app/javascript/controllers/index.js').open('w+') do |index|
        index.puts '// This file is auto-generated by ./bin/rails stimulus:manifest:update'
        index.puts '// Run that command whenever you add a new controller or create them with'
        index.puts '// ./bin/rails generate stimulus controllerName'
        index.puts
        index.puts %(import { application } from "./application")
        index.puts components_manifest
        index.puts controllers_manifest
      end
    end
  end
end

This is how I generate components with stimulus controllers

Generate Components

rails generate component <ComponentName> <args> <options>

Example:
rails generate component Button text --stimulus --preview

❗ Remember to run
rails stimulus:manifest:update
after generating a new component

[serhiihiba]

hi @mateuszbialowas you have cool solution, also, if you interested - let's check my own tool https://github.com/serhiijun/birdel
That's tool for controll your stimulus.js controllers, birdel.js actors and css assets from -N components based on json file for each entry page and by the way more cool features which will allow stop using sucks rails-turbo.js
It's not ready to use by dafault so massage me if you interested about explanation and contributing😃