From 4347a29850df469cb630e4eb3fe4e17f73308e2d Mon Sep 17 00:00:00 2001
From: Steven Vancoillie <steven.vancoillie@axis.com>
Date: Fri, 12 Jan 2024 15:01:20 +0100
Subject: [PATCH] fix: replace .mjs with .js extension for browser modules

The Babel interpretation should be used when modules are
imported for the browser, which is not the case if the
extension is .mjs (in which case Node interpretation is used).
See https://esbuild.github.io/content-types/#default-interop
---
 overlay/esbuild.mjs  |  6 +++---
 overlay/package.json | 11 ++++++-----
 player/esbuild.mjs   |  4 ++--
 player/package.json  |  8 ++++----
 streams/esbuild.mjs  |  8 ++++----
 streams/package.json | 12 ++++++------
 6 files changed, 25 insertions(+), 24 deletions(-)

diff --git a/overlay/esbuild.mjs b/overlay/esbuild.mjs
index 189f76f1f..0e990af2f 100755
--- a/overlay/esbuild.mjs
+++ b/overlay/esbuild.mjs
@@ -12,14 +12,14 @@ if (!existsSync(buildDir)) {
 
 for (
   const output of [
-    { format: 'esm', ext: 'mjs' },
-    { format: 'cjs', ext: 'cjs' },
+    { format: 'esm', name: 'index-esm.js' },
+    { format: 'cjs', name: 'index-cjs.js' },
   ]
 ) {
   buildSync({
     platform: 'browser',
     entryPoints: ['src/index.ts'],
-    outfile: join(buildDir, `index.${output.ext}`),
+    outfile: join(buildDir, output.name),
     format: output.format,
     external: ['@juggle/resize-observer', 'react', 'react-dom', 'pepjs'],
     bundle: true,
diff --git a/overlay/package.json b/overlay/package.json
index d8cc3d72a..3a40eec33 100644
--- a/overlay/package.json
+++ b/overlay/package.json
@@ -15,12 +15,12 @@
     "registry": "https://registry.npmjs.org/"
   },
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index-cjs.js",
+  "module": "./dist/index-esm.js",
   "exports": {
     "types": "./dist/index.d.ts",
-    "require": "./dist/index.cjs",
-    "import": "./dist/index.mjs"
+    "require": "./dist/index-cjs.js",
+    "import": "./dist/index-esm.js"
   },
   "files": [
     "dist/**/*",
@@ -31,7 +31,8 @@
     "@juggle/resize-observer": "^3.3.1",
     "pepjs": ">= 0.4.3 < 1",
     "react": "^17.0.1 || ^18.0.0",
-    "react-dom": "^17.0.1 || ^18.0.0"
+    "react-dom": "^17.0.1 || ^18.0.0",
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@juggle/resize-observer": "3.4.0",
diff --git a/player/esbuild.mjs b/player/esbuild.mjs
index dd85d8075..e98217af3 100755
--- a/player/esbuild.mjs
+++ b/player/esbuild.mjs
@@ -11,8 +11,8 @@ if (!existsSync(buildDir)) {
 }
 
 const bundles = [
-  { format: 'esm', name: 'index.mjs' },
-  { format: 'cjs', name: 'index.cjs' },
+  { format: 'esm', name: 'index-esm.js' },
+  { format: 'cjs', name: 'index-cjs.js' },
 ]
 
 for (
diff --git a/player/package.json b/player/package.json
index 458a3a174..92aaf7ddb 100644
--- a/player/package.json
+++ b/player/package.json
@@ -19,13 +19,13 @@
     "registry": "https://registry.npmjs.org/"
   },
   "types": "./dist/index.d.ts",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
+  "main": "./dist/index-cjs.js",
+  "module": "./dist/index-esm.js",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "require": "./dist/index.cjs",
-      "import": "./dist/index.mjs"
+      "require": "./dist/index-cjs.js",
+      "import": "./dist/index-esm.js"
     }
   },
   "files": [
diff --git a/streams/esbuild.mjs b/streams/esbuild.mjs
index 7967e8e7f..0027c3b82 100755
--- a/streams/esbuild.mjs
+++ b/streams/esbuild.mjs
@@ -13,24 +13,24 @@ if (!existsSync(buildDir)) {
 const browserBundles = [
   {
     format: 'esm',
-    name: 'browser.mjs',
+    name: 'browser-esm.js',
     external: ['debug', 'ts-md5', 'ws'],
     inject: ['polyfill.mjs'],
   },
   {
     format: 'cjs',
-    name: 'browser.cjs',
+    name: 'browser-cjs.js',
     external: ['debug', 'ts-md5', 'ws'],
     inject: ['polyfill.mjs'],
   },
   {
     format: 'esm',
-    name: 'browser-light.mjs',
+    name: 'browser-light-esm.js',
     external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
   },
   {
     format: 'cjs',
-    name: 'browser-light.cjs',
+    name: 'browser-light-cjs.js',
     external: ['buffer', 'debug', 'process', 'stream', 'ts-md5', 'ws'],
   },
 ]
diff --git a/streams/package.json b/streams/package.json
index 54629b64c..854de681b 100644
--- a/streams/package.json
+++ b/streams/package.json
@@ -24,8 +24,8 @@
       "types": "./dist/src/index.browser.d.ts",
       "browser": {
         "types": "./dist/src/index.browser.d.ts",
-        "require": "./dist/browser.cjs",
-        "import": "./dist/browser.mjs"
+        "require": "./dist/browser-cjs.js",
+        "import": "./dist/browser-esm.js"
       },
       "node": {
         "types": "./dist/src/index.node.d.ts",
@@ -35,13 +35,13 @@
     },
     "./light": {
       "types": "./dist/src/index.browser.d.ts",
-      "require": "./dist/browser-light.cjs",
-      "import": "./dist/browser-light.mjs"
+      "require": "./dist/browser-light-cjs.js",
+      "import": "./dist/browser-light-esm.js"
     }
   },
   "browser": {
-    "./dist/node.cjs": "./dist/browser.cjs",
-    "./dist/node.mjs": "./dist/browser.mjs",
+    "./dist/node.cjs": "./dist/browser-cjs.js",
+    "./dist/node.mjs": "./dist/browser-esm.js",
     "stream": "stream-browserify"
   },
   "files": [