Rails 7 embraced the use of Import maps and they are awesome.

If you wonder how to use importmap in plain HTML here is an example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Import maps without Rails - Local-time example</title>

    <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
    <script type="importmap-shim">
      {
        "imports": {
          "local-time": "https://ga.jspm.io/npm:[email protected]/app/assets/javascripts/local-time.js"
        }
      }
    </script>
    <script type="module-shim">
      import LocalTime from "local-time"
      LocalTime.start()
    </script>

    <style>
      time { color: #c11; font-size: 1.1em; }
    </style>
  </head>
  <body>
    <h1>Import maps without Rails - Local-time JS example</h1>

    <p>
      Last time I had chocolate was <time datetime="2022-05-08T23:00:00+02:00" data-local="time-ago">8th of May</time>
    </p>

  </body>
</html>

to see the example in action check this JS fiddle

Example uses importmap to loads local-time js that converts <time> HTML elements from UTC to the browser’s local time (more info).

Other examples

Looking for Hotwire Stimulus examples ?

Source

Discussion