From 9a6ad584facbbbfdc9f08f4037cbac9cca16e5fc Mon Sep 17 00:00:00 2001
From: Dennis Rijsdijk <git@dennis.gg>
Date: Sat, 9 May 2026 15:03:51 +0200
Subject: [PATCH] feat: module import for overlayExtension js dependencies
 (#3482)

---
 src/resources/overlay/index.ejs   |  6 +++++-
 src/server/http-server-manager.ts | 14 ++++++++++++--
 src/types/effects.d.ts            |  2 +-
 src/types/overlay-widgets.d.ts    |  2 +-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/resources/overlay/index.ejs b/src/resources/overlay/index.ejs
index 4447561de..8230901ed 100644
--- a/src/resources/overlay/index.ejs
+++ b/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>
diff --git a/src/server/http-server-manager.ts b/src/server/http-server-manager.ts
index f66ab1baa..d91f430c0 100644
--- a/src/server/http-server-manager.ts
+++ b/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 = [
diff --git a/src/types/effects.d.ts b/src/types/effects.d.ts
index 7f3d451af..69fd58cf3 100644
--- a/src/types/effects.d.ts
+++ b/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;
diff --git a/src/types/overlay-widgets.d.ts b/src/types/overlay-widgets.d.ts
index 057aa2fa8..f621d2cb0 100644
--- a/src/types/overlay-widgets.d.ts
+++ b/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;
         };