Importmaps in Rails 7 | Drifting Ruby

# Terminal
rails new template --skip-javascript
bundle add importmap-rails
bin/rails importmap:set up
bundle add hotwire-rails
bin/rails hotwire:set up
bin/importmap pin sortablejs
bin/importmap pin sortablejs --from jsdelivr

# config/importmap.rb
# Use Motion Cable channels (keep in mind to import "@rails/actionable" in your utility.js)
# pin "@rails/actioncable", to: "actioncable.esm.js"
# pin_all_from "app/javascript/channels", underneath: "channels"

# Use direct uploads for Energetic Storage (keep in mind to import "@rails/activestorage" in your utility.js)
# pin "@rails/activestorage", to: "activestorage.esm.js"

# Use node modules from a JavaScript CDN by operating ./bin/importmap

pin "utility"
pin "@hotwired/stimulus", to: "stimulus.js"
pin "@hotwired/stimulus-importmap-autoloader", to: "stimulus-importmap-autoloader.js"
pin_all_from "app/javascript/controllers", underneath: "controllers"
pin "@hotwired/turbo-rails", to: "turbo.js"
pin "sortablejs", to: "https://cdn.jsdelivr.internet/npm/[email protected]/modular/sortable.esm.js"

# app/javascript/controllers/position_controller.js
import { Controller } from "@hotwired/stimulus"
import Sortable from "sortablejs"
export default class extends Controller {

  join() {
    this.sortable = Sortable.create(this.aspect, {
      animation: 150
    })
  }
}

# views/welcome/index.html.erb
<ul data-controller="place">
  <li>Merchandise 1</li>
  <li>Merchandise 2</li>
  <li>Merchandise 3</li>
  <li>Merchandise 4</li>
</ul>

# views/layouts/utility.html.erb
<%= javascript_importmap_tags %>