Grapesjs: [FeatureRequest] Allow to import javascript modules

Created on 25 Sep 2019  路  1Comment  路  Source: artf/grapesjs

When using Ionic StencilJS, the components are imported using the new module support:

<script type="module" src="http://localhost:3333/build/grapejspoc.esm.js"></script>
<script nomodule="" src="http://localhost:3333/build/grapejspoc.js"></script>

On {canvas: scripts: []} I can only load external scripts by their url.
To cover such case, we could import modules as this:

canvas: {
  scripts: [
    { src: "https://pagecdn.io/lib/jquery/3.4.1/jquery.min.js", integrity: "sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=", crossorigin="anonymous" },
    { type: "module", src: "https://bla/bla.esm.js"},
    { nomodule: "", src: "https://bla/bla.js" }
  ]
}

The final result inside canvas would be:

<script src="https://pagecdn.io/lib/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script type="module" src="http://bla/bla.esm.js"></script>
<script nomodule="" src="http://bla/bla.js"></script>

Notice that this would cover also the case when we want to use integrity or crossorigin in <script> tags and, of course, inserting a url string would still work as it is today.

help wanted

Most helpful comment

Nice I like it, for anyone interested in making a PR the code to update is here:
https://github.com/artf/grapesjs/blob/aee18dcf0602e5d56e7670deb8d4ffbf31c73008/src/canvas/view/CanvasView.js#L140-L161

>All comments

Nice I like it, for anyone interested in making a PR the code to update is here:
https://github.com/artf/grapesjs/blob/aee18dcf0602e5d56e7670deb8d4ffbf31c73008/src/canvas/view/CanvasView.js#L140-L161

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mathiasbc picture mathiasbc  路  3Comments

Snarkly picture Snarkly  路  3Comments

alibouaziz picture alibouaziz  路  3Comments

krunal039 picture krunal039  路  3Comments

tribulant picture tribulant  路  3Comments