feat: module import for overlayExtension js dependencies (#3482)

src/resources/overlay/index.ejs

@@ -45,7 +45,11 @@
     <script src="https://www.youtube.com/iframe_api"></script>
 
     <% for(let jsDep of dependencies.js) { %>
-        <script src="<%-jsDep%>"></script>
+        <% if (jsDep.module) { %>
+            <script type="module" src="<%-jsDep.url%>"></script>
+        <% } else { %>
+            <script src="<%-jsDep.url%>"></script>
+        <% } %>
     <% } %>
 
     <script>

src/server/http-server-manager.ts

@@ -130,10 +130,20 @@ class HttpServerManager extends EventEmitter {
             const combinedJsDeps = [...new Set([
                 ...effectDefs
                     .filter(ed => ed.dependencies?.js?.length)
-                    .map(ed => ed.dependencies.js),
+                    .map(ed => ed.dependencies.js.map((jsDep) => {
+                        if (typeof jsDep === "string") {
+                            return { module: false, url: jsDep };
+                        }
+                        return jsDep;
+                    })),
                 ...widgetExtensions
                     .filter(we => we.dependencies?.js?.length)
-                    .map(we => we.dependencies.js)
+                    .map(we => we.dependencies.js.map((jsDep) => {
+                        if (typeof jsDep === "string") {
+                            return { module: false, url: jsDep };
+                        }
+                        return jsDep;
+                    }))
             ].flat())];
 
             const combinedGlobalStyles = [

src/types/effects.d.ts

@@ -48,7 +48,7 @@ export type OverlayExtension<OverlayData = unknown> = {
     dependencies?: {
         globalStyles?: string;
         css?: string[];
-        js?: string[];
+        js?: Array<string | { module: boolean, url: string }>;
     };
     event: {
         name: string;

src/types/overlay-widgets.d.ts

@@ -154,7 +154,7 @@ export type OverlayWidgetType<
     overlayExtension: {
         dependencies?: {
             css?: string[];
-            js?: string[];
+            js?: Array<string | { module: boolean, url: string }>;
             globalStyles?: string;
         };