I'm newbie to JS modules and Import Map, now I'm using Ruby on Rails 7 and I couldn't find a way to get this working:
Js Module (proposals.js):
function openProposalMirror() ...
application.js
import * as Proposal from "./proposals.js"
On the view:
onclick="Proposal.openProposalMirror()"
error: Uncaught ReferenceError: Proposal is not defined
How could I accesse openProposalMirror() function on the view?
One way to go is to assign the Proposal to the object window.Proposal.
you could set directly inside the application.js as below:
// proposals.js
function openProposalMirror() {}
export { openProposalMirror }
// application.js
import * as Proposal from "./proposals.js"
window.Proposal = Proposal
// view
onclick="Proposal.openProposalMirror()"
you could also re-export Proposal from application.js then import and assign it to the object window.Proposal in a <script> tag (in view) as below:
// application.js
import * as Proposal from "./proposals.js"
export { Proposal };
// view
<%= javascript_importmap_tags %>
<script type="module">
import { Proposal } from "application"
window.Proposal = Proposal;
</script>
one way to go, i just curious and try to solve this question, i'd not ever used this way so far. Trying other ways and use the one you though that better.In my example, I'm trying to use Ag-Grid. After pinning the source:
bin/importmap pin ag-grid-community
All I had to do was do the import in my .html.erb file:
<script type="module">
import { Grid } from "ag-grid-community"
var gridOptions = {
columnDefs: [
{ headerName: 'Make', field: 'make' },
{ headerName: 'Model', field: 'model' },
{ headerName: 'Price', field: 'price' }
],
rowData: [
{ make: 'Toyota', model: 'Celica', price: 35000 },
{ make: 'Ford', model: 'Mondeo', price: 32000 },
{ make: 'Porsche', model: 'Boxster', price: 72000 }
]
}
document.addEventListener('DOMContentLoaded', () => {
const gridDiv = document.querySelector('#myGrid')
new Grid(gridDiv, gridOptions)
})
</script>
So, not the usual <%= javascript do %>, but rather <script type="module">. Once included in the importmap, nothing needs to be added to application.js.
