How to add javascript contained in a gem, via import maps?

rubyonrails-talk
1

Suppose we have a javascript file that is shipped with a ruby gem.

I wish to add this javascript file via import map rails.

How can I do this?

# config/intializers/pagy.rb
Rails.application.config.importmap.paths << Pagy.root.join('javascripts/pagy-module')

# importmap.rb
pin 'pagy-module', to: Pagy.root.join("/javascripts/pagy-module.js"), preload: true

And use a stimulus controller:

import { Controller } from "@hotwired/stimulus"
import Pagy from "pagy-module"

export default class extends Controller {
  connect() {
    console.log("hello pagy!")
    Pagy.init(this.element)
  }
}

Is there anything that stands out as completely absurd? I don’t know what I’m doing.

any pointers would be appreciated.

Here’s a repo if you need a running start: GitHub - benkoshy/pagy-rails: Demo for pagy styling and pagy extras.

2 Likes
2 
# config/initializers/assets.rb
Rails.application.config.assets.paths << Pagy.root.join('javascripts')

# config/importmap.rb
pin "pagy", to: "pagy.js", preload: true

# app/assets/config/manifest.js
//= link pagy.js

# app/javascript/application.js (or your controller)
import "pagy"

This should do :slight_smile:

2 Likes
3

I’m trying to do this for TinyMCE Rails however, that gem setup does not seem to be as straightforward as Pagy’s.

Is there any wisdom or advice to share on how to import the tinymce.js?

(The error we’re stuck on is new:297 Uncaught ReferenceError: TinyMCERails is not defined )

4

Is it possibly a capitalization thing? Have you added the special casing to the application’s inflections?

(Zeitwerk being pedantic, in other words…)

Walter

5

not intentionally, we aim to stay as close to stock as possible. I’ve found a solution by importing the JS separately from the gem. Feels very hacky but i’s working for now.