From 8bd3ceda1b9b19860345af5a314f5e62f9aa1f6a Mon Sep 17 00:00:00 2001
From: Fletcher Fowler <fletch@fzf.me>
Date: Mon, 30 Sep 2024 20:47:40 -0400
Subject: [PATCH] Adding docs for importmaps

---
 docs/web-support/rails.md | 42 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/docs/web-support/rails.md b/docs/web-support/rails.md
index 9f85bed..6e92add 100644
--- a/docs/web-support/rails.md
+++ b/docs/web-support/rails.md
@@ -19,3 +19,45 @@ window.ApexCharts = require("apexcharts") // expose to window
 import ApexCharts from 'apexcharts'
 window.ApexCharts = ApexCharts
 ```
+
+Or, if you use `importmaps', you can:
+
+Download to local vendor directory (optional but recommended)
+
+```bash
+$ wget -O vendor/javascript/apexcharts.esm.js https://ga.jspm.io/npm:apexcharts@latest/dist/apexcharts.esm.js`
+```
+
+Pin "apexcharts" in `config/importmap.rb` to local esm file (if you do No. 1):
+
+```ruby
+pin "apexcharts", to: "apexcharts.esm.js"`
+```
+
+or, to CDN URL
+
+```ruby
+pin "apexcharts", to: "https://ga.jspm.io/npm:apexcharts@latest/dist/apexcharts.esm.js"`
+```
+
+Import and assign to window in `app/javascript/application.js`
+
+```js
+import ApexCharts from "apexcharts"
+window.ApexCharts = ApexCharts
+```
+
+Use it with options `module: true`
+For example:
+
+```
+<% series = [{
+    name: "Desktops",
+    data: [10, 41, 35, 51, 49, 62, 69, 91, 148]
+  }]
+  options = {
+    module: true
+  }
+%>
+<%= line_chart(series, options) %>
+```