Allow configuring script type

Signed-off-by: Christoph Schmatzler <[email protected]>
phenixdigital · Jan 17, 2025 · ef3e480 · ef3e480
1 parent 9813d0d
commit ef3e480
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 2 deletions.
diff --git a/guides/sandboxing.md b/guides/sandboxing.md
@@ -38,6 +38,8 @@ Then set the `js_path: "/assets/storybook.js"` option to the storybook within yo
 file. This is a remote path (not a local file-system path) which means this file should be served
 by your own application endpoint with the given path.
 
+If you are using ESM-style imports, you can set the `js_script_type: "module"`" option as well.
+
 You can also use this script to inject whatever content you want into document `HEAD`, such as
 external scripts.
 

diff --git a/lib/phoenix_storybook/templates/layout/root.html.heex b/lib/phoenix_storybook/templates/layout/root.html.heex
@@ -38,13 +38,15 @@
       <script
         nonce={csp_nonce(@conn, :script)}
         phx-track-static
-        type="text/javascript"
+        defer={storybook_js_type(@conn) == "module"}
+        type={storybook_js_type(@conn)}
         src={application_static_path(path)}
       >
       </script>
     <% end %>
     <script
       nonce={csp_nonce(@conn, :script)}
+      defer={storybook_js_type(@conn) == "module"}
       type="text/javascript"
       src={asset_path(@conn, "js/app.js")}
     >

diff --git a/lib/phoenix_storybook/templates/layout/root_iframe.html.heex b/lib/phoenix_storybook/templates/layout/root_iframe.html.heex
@@ -8,7 +8,7 @@
       <script
         nonce={csp_nonce(@conn, :script)}
         phx-track-static
-        type="text/javascript"
+        type={storybook_js_type(@conn)}
         src={application_static_path(path)}
       >
       </script>

diff --git a/lib/phoenix_storybook/views/layout_view.ex b/lib/phoenix_storybook/views/layout_view.ex
@@ -62,6 +62,7 @@ defmodule PhoenixStorybook.LayoutView do
 
   def storybook_css_path(conn), do: storybook_setting(conn, :css_path)
   def storybook_js_path(conn), do: storybook_setting(conn, :js_path)
+  def storybook_js_type(conn), do: storybook_setting(conn, :js_script_type, "text/javascript")
 
   defp title(conn_or_socket), do: storybook_setting(conn_or_socket, :title, "Live Storybook")