How to import vendor library to use in Stimulus controller, Asset Pipeline version

[hotwired]

How to import vendor library to use in Stimulus controller, Asset Pipeline version

[seanpdoyle]

This engine is built to leverage ECMAScript Modules.

If your project has an external dependency, you have several options.

First, declare the import statement in the module that needs it: import day from "dayjs".

Next, configure your server so that it knows how to resolve the dayjs package name. You have several options, including:

• downloading the source as a vendored package or a gem that bundles its assets, configuring how to resolve the name in your importmap.json with a project-relative path (e.g. "dayjs": asset_path("dayjs/dayjs.min.js")), then serving it from the Rails application
• downloading the source as a node_modules package, configuring how to resolve the name in your importmap.json with a project-relative Webpacker path (e.g. "dayjs": asset_pack_path("dayjs/dayjs.min.js")), then serving it from the Rails application
• configuring how to resolve the name in your importmap.json with an absolute URL (e.g. "dayjs": "https://cdn.skypack.dev/dayjs")
• declaring the import statement directly in your module with an absolute URL (e.g. import day from "https://cdn.skypack.dev/dayjs")

Have you tried any of these other alternatives?

[turgs]

Ok i've finally figured out 👏 how to import a library. Maybe this is common knowledge for others but ES6 is a brave new world for me. I'm generally stuck back in Year 2000 Javascript.

I didn't want to use a gem that bundled the library for the asset pipeline, and I didn't want to call skypack or a remote CDN. I wanted to serve it locally.

1. I went to Skypack to get their browser-optimized packaged version of Dayjs: https://cdn.skypack.dev/dayjs and saved the content of that to /app/assets/javascripts/libraries/dayjs/dayjs.js.erb (note .erb). That file looked like this on Skypack.

   export * from '/-/[email protected]/dist=es2020,mode=imports/optimized/dayjs.js';
   export {default} from '/-/[email protected]/dist=es2020,mode=imports/optimized/dayjs.js';

   which I changed to the following, using asset_path:

   export * from '<%= asset_path "libraries/dayjs/dayjs.export.js" %>';
   export {default} from '<%= asset_path "libraries/dayjs/dayjs.export.js" %>';

2. That originally referenced https://cdn.skypack.dev//-/[email protected]/dist=es2020,mode=imports/optimized/dayjs.js file, I saved unchanged to /app/assets/javascripts/libraries/dayjs/dayjs.export.js

3. In my importmap.json.erb I added:

    {
      "imports": { 
        "turbo": "<%= asset_path "turbo" %>",
        <%= importmap_list_with_stimulus_from "app/assets/javascripts/controllers", "app/assets/javascripts/libraries" %>,
   +    "dayjs": "<%= asset_path "libraries/dayjs/dayjs.js" %>"
      }
    }

4. In my Stimulus controller, I added:

     import { Controller } from "stimulus"
   + import dayjs from 'dayjs';

Thanks for a prod that led me in the right direction 🥳

[turgs]

Better yet, I've just realised that I don't need to do this required "date logic" and calculations in javascript anymore, because I should now be able to use a turbo frame and keep the logic in Rails 🎉