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));

[DeathKing]

There's one catchy:

 .replaceAll('/', '-')

actually should be:

 .replaceAll('/', '--')

It works for me (Rails 8 + Propshaft), for those who came later, instructions are as follows:

0. pin_all_from "app/frontend/components", under: "components" in importmap.rb
1. Eagar Loading Setup
2. Paths Setup

also, you should define identifier as follows to deal with CamelCase::Component.

# app/frontend/components/application_view_component.rb
def identifier
  @identifier ||= self.class.name.sub('::Component', '').underscore.sub('_', '-').split('/').join('--')
end

[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")

[asmrtfm]

I'm curious why you changed your import statement (for { eagerLoadControllersFrom }) to source from "controllers/custom_loading" instead of "./custom_loading"

And are your modifications to app/frontend/components/application_view_component.rb only necessary if using '-' as a separator in your pathnames?

[tenpaiyomi]

Honestly, this was over 2 years ago, I really don't remember 😅

[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

[wheee]

This is great... I spent many hours trying to figure this out and this got me there. Much thanks!

As an aside, I didn't like adding a new folder 'frontend' to host the components directory but it seems that it's actually required to have the 'components' directory nested under another directory within the apps. Otherwise the importmap will skip any and all js files in there when not nested properly.

But rather than creating a new superfluous directory (ie. 'frontend'), I simply moved 'components' into 'app/views'. Because that is what the view components are for. Seems to be a perfect fit to me.

Anyway, thanks!

EDIT: working on Rails 8

[asmrtfm]

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

Are you saying that paul's blog post can be followed as a complete substitution for everything in this discussion?