Support for webpackless install

[muriloime]

Hello there!

I am trying to upgrade some of my apps to a nodeless/webpackless approach with importmap, but I am facing a few issues with this gem, for example the way stimulus controllers are loaded is through require.context, which assumes webpack. What would be the correct way to do this without webpack?

many thanks

[muriloime]

From what I know stimulus-rails with importmap-rails do some sort of autoloading (as per https://stimulus.hotwired.dev/handbook/installing), which could be potentially be adapted to this case

[palkan]

In case of import maps, we need something like this in the importmap.rb:

pin_all_from "frontend/components", under: "components"

And then we need to implement our own eager loading.

[unikitty37]

Adding eagerLoadControllersFrom('components', application) under eagerLoadControllersFrom('controllers', application) in app/javascript/controllers/index.js seems to be enough to do this for me.

The pin_all_from needs to be app/frontend/components, though.

[light-flight]

Importmaps

And then we need to implement our own eager loading.

My implementation. Add this to app/javascript/controllers/index.js

function registerController(name, module, application) {
  if (name in registeredControllers) return;

  application.register(name, module.default)
  registeredControllers[name] = true
}

function registerControllerFromPath(path, application) {
  const name = path
    .match(/components\/(.+)\/controller$/)[1]
    .replaceAll('/', '-')
    .replaceAll('_', '-');

  import(path)
    .then(module => registerController(name, module, application))
    .catch(error => console.debug(`Failed to register controller: ${name} (${path})`, error))
}

const registeredControllers = {}
const imports = JSON.parse(document.querySelector("script[type=importmap]").text).imports;
const paths = Object.keys(imports).filter(path => path.match(new RegExp(`^components/*`)))
paths.forEach(path => registerControllerFromPath(path, application));

[michelson]

Esbuild:

index.js

import { Application } from '@hotwired/stimulus'
export const application = Application.start()


import controllers from "./**/*_controller.js"
controllers.forEach((controller) => {
  application.register(controller.name, controller.module.default)
})

esbuid.config.js

import rails from 'esbuild-rails'

....
 plugins: [
          rails(),
]

[michelson]

also if you use components with sass + tailwind:

// import postcss
import postcss from 'postcss'
import postCssConfig from './postcss.config.js'

// esbuild config
....

        plugins: [
          sassPlugin({
            async transform(source, resolveDir) {
              /// apply postCss config
              const {css} = await postcss(postCssConfig.plugins).process(source)
              //console.log(css)
              return css
            }
          }),
          rails(),

[andrzejsliwa]

Hey here, I have customized, loading script to support loading directly with importmaps (mostly I just modified regexes)

here is my config/importmap.rb

#...
pin_all_from 'app/views/components', under: "components"

here is my config/application.rb

    # ...
    component_path = Rails.root.join("app", "views", "components")
    config.autoload_paths << component_path
    config.view_component.preview_paths << component_path
    initializer "app_assets", after: "importmap.assets" do
      Rails.application.config.assets.paths << Rails.root.join("app", "views") # for component sidecar js
    end
    config.importmap.cache_sweepers <<  component_path
    #...

here is my app/javascript/controller/custom_loading.js

import "@hotwired/stimulus"

const controllerAttribute = "data-controller"

export function eagerLoadControllersFrom(lookupPaths, application) {
  Object.entries(lookupPaths).map(entry => {
    const [under, buildPathname] = entry;

    const paths = Object.keys(parseImportmapJson()).filter(path => path.match(buildPathname(under)))
    paths.forEach(path => registerControllerFromPath(path, under, application))
  });
}

function parseImportmapJson() {
  return JSON.parse(document.querySelector("script[type=importmap]").text).imports
}

function canRegisterController(name, application){
  return !application.router.modulesByIdentifier.has(name)
}

function registerController(name, module, application) {
  if (canRegisterController(name, application)) {
    application.register(name, module.default)
  }
}

function registerControllerFromPath(path, under, application) {
  let name = path
  .replace(new RegExp(`^${under}/`), "")
  .replace("controller", "")
  .replace(/\//g, "--")
  .replace(/_/g, "-");

  if (name.endsWith("--")) name = name.slice(0, -2)

  if (canRegisterController(name, application)) {
    import(path)
    .then(module => registerController(name, module, application))
    .catch(error => console.error(`Failed to register controller: ${name} (${path})`, error))
  }
}

// Lazy load controllers registered beneath the `under` path in the import map to the passed application instance.
export function lazyLoadControllersFrom(under, application, element = document) {
  lazyLoadExistingControllers(under, application, element)
  lazyLoadNewControllers(under, application, element)
}

function lazyLoadExistingControllers(under, application, element) {
  queryControllerNamesWithin(element).forEach(controllerName => {
    loadController(controllerName, under, application)
  })
}

function lazyLoadNewControllers(under, application, element) {
  new MutationObserver((mutationsList) => {
    for (const { attributeName, target, type } of mutationsList) {
      switch (type) {
        case "attributes": {
          if (attributeName == controllerAttribute && target.getAttribute(controllerAttribute)) {
            extractControllerNamesFrom(target).forEach(controllerName => loadController(controllerName, under, application))
          }
        }

        case "childList": {
          lazyLoadExistingControllers(under, application, target)
        }
      }
    }
  }).observe(element, { attributeFilter: [controllerAttribute], subtree: true, childList: true })
}

function queryControllerNamesWithin(element) {
  return Array.from(element.querySelectorAll(`[${controllerAttribute}]`)).map(extractControllerNamesFrom).flat()
}

function extractControllerNamesFrom(element) {
  return element.getAttribute(controllerAttribute).split(/\s+/).filter(content => content.length)
}

function loadController(name, lookupPaths, application) {
  if (canRegisterController(name, application)) {
    let errors = []
    let success = false

    let promises = Object.entries(lookupPaths).map(entry => {
      const [under, buildPathname] = entry;

      return import(buildPathname(name))
          .then(module => {
            registerController(name, module, application)
            success = true
          })
          .catch(error => {
            errors.push([buildPathname(name), error])
          })
    })

    // wait for all promises to be resolved
    Promise.all(promises).then(() => {
      if (!success) {
        console.error(`Failed to register controller: ${name}`, errors)
      }
    })
  }
}

here is usage of custom script loader:

import { application } from "controllers/application"

import { lazyLoadControllersFrom, eagerLoadControllersFrom } from "./custom_loading"

eagerLoadControllersFrom({
  controllers: (name) => new RegExp(`^${name}/.*_controller$`),
  components: (name) => new RegExp(`^${name}.*controller$`),
}, application)

lazyLoadControllersFrom({
  controllers: (name) => (`controllers/${name.replace(/--/g, "/").replace(/-/g, "_")}_controller`),
  components: (name) => (`components/${name.replace(/--/g, "/").replace(/-/g, "_")}/controller`),
}, application)

both eager or lazy loading is working.

here is example naming from evil martial post

example/component.rb
example/component.erb.html
example/controller.js

data-controller is set via <%= controller_name %>, in this case to "example"
everything is loading and working as expected.

[tenpaiyomi]

I struggled with this for a bit with a new Rails 7 application and the most recent setup style that utilizes app/frontend/components and index.js with importmap. This was my setup, showing what I added and where, that works in the end. Thanks to @andrzejsliwa for providing your code, as it helped me get a rough setup in place.

app/assets/config/manifest.js

//= link_tree ../../frontend .js

config/importmap.rb

pin_all_from "app/frontend/components", under: "components"

config/initializers/assets.rb

Rails.application.config.assets.paths << Rails.root.join("app", "frontend")

app/javascript/controllers/index.js
(I had to modify the components regex since the above was expecting component to exist in the name of the controller, and I was only getting paths in the manner of components/foo/bar)

import { eagerLoadControllersFrom } from "controllers/custom_loading"
eagerLoadControllersFrom({
  controllers: (name) => new RegExp(`^${name}/.*_controller$`), // controllers/**/*_controller
  components: (name) => new RegExp(`^components/.*$`), // components/**
}, application)

app/javascript/controllers/custom_loading.js
(same as @andrzejsliwa except for a modification to the registerControllerFromPath method since I was getting trailing - on the controllers that exist in app/javascript/controllers)

function registerControllerFromPath(path, under, application) {
  let name = path
  .replace(new RegExp(`^${under}/`), "")
  .replace("controller", "")
  .replace(/\//g, "--")
  .replace(/_/g, "-");

  if (name.endsWith("--")) name = name.slice(0, -2)
  if (name.endsWith("-")) name = name.slice(0, -1)

  if (canRegisterController(name, application)) {
    import(path)
    .then(module => registerController(name, module, application))
    .catch(error => console.error(`Failed to register controller: ${name} (${path})`, error))
  }
}

app/frontend/components/application_view_component.rb
(same as what the guide recommends, but I had to add a sub for _ to - since it was leaving folders underscored)

private

def identifier
  @identifier ||= self.class.name.sub('::Component', '').underscore.sub('_', '-').split('/').join('--')
end

config/environments/development.rb

config.importmap.cache_sweepers << Rails.root.join("app", "frontend", "components")

[palkan]

Configuring TailwindCSS Rails: #31

[reedrolemodel]

This worked for me along with @tenpaiyomi and @andrzejsliwa solutions above.

[MrMoins]

Do you have any visibility on the implementation of an official solution for use with importmap? I can't get anything to work with the various suggestions here and there. 🙏

[light-flight]

I took code from official stimulus-loader, modified regex: #14 (reply in thread) and added it to my app/javascript/controllers/index.js. Rest of the configuration:

# config/importmap.rb
pin_all_from "app/frontend/components", under: "components"

# config/application.rb
FRONTEND_PATH = 'app/frontend'
VIEW_COMPONENTS_PATH = 'app/frontend/components'

config.view_component.preview_paths << Rails.root.join(VIEW_COMPONENTS_PATH)
config.view_component.view_component_path = VIEW_COMPONENTS_PATH
config.importmap.cache_sweepers << Rails.root.join(FRONTEND_PATH)
config.eager_load_paths << Rails.root.join(VIEW_COMPONENTS_PATH)
config.assets.paths << Rails.root.join(FRONTEND_PATH)

Use recommended helper in app/frontend/components/application_view_component.rb:

private

def identifier
  @identifier ||= self.class.name.sub('::Component', '').underscore.split('/').join('--')
end

alias controller_name identifier

<!-- app/frontend/components/select/component.html.erb -->
<div data-controller="<%= controller_name %>"></div>

// app/frontend/components/select/controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  connect() {
    alert("Hello, Stimulus!")
  }
}

[lno06]

I tried this, and it worked (However I needed to have importmap-rails upto date)
https://blog.theamazingrando.com/posts/rails-propshaft-stimulus-viewcomponent.html