From a5b74f313f05b8b1a3f51302d5e81f0b159c4c1f Mon Sep 17 00:00:00 2001
From: dpiercey <dpiercey@ebay.com>
Date: Tue, 19 Nov 2024 12:00:47 -0700
Subject: [PATCH] fix: improve cjs interop and fix some tests

---
 .changeset/rotten-nails-share.md              |  5 ++
 .../fixtures/isomorphic-base-url/server.mjs   |  2 +-
 .../build.expected.loading.1.html             |  4 +-
 .../build.expected.loading.2.html             |  4 +-
 .../build.expected.loading.3.html             | 32 -------------
 .../build.expected.step-0.0.html              |  4 +-
 .../build.expected.step-0.1.html              | 21 +++++++++
 .../dev.expected.loading.10.html              | 33 -------------
 .../__snapshots__/dev.expected.loading.2.html |  2 +-
 .../__snapshots__/dev.expected.loading.3.html |  2 +-
 .../__snapshots__/dev.expected.loading.4.html |  2 +-
 .../__snapshots__/dev.expected.loading.5.html |  2 +-
 .../__snapshots__/dev.expected.loading.6.html |  4 +-
 .../__snapshots__/dev.expected.loading.7.html |  4 +-
 .../__snapshots__/dev.expected.loading.8.html |  4 +-
 .../__snapshots__/dev.expected.loading.9.html | 33 -------------
 .../__snapshots__/dev.expected.step-0.0.html  |  4 +-
 .../__snapshots__/dev.expected.step-0.1.html  | 20 ++++++++
 .../src/components/class-component.marko      |  2 +-
 .../test.config.ts                            |  4 +-
 .../build.expected.loading.1.html             | 12 -----
 .../build.expected.step-0.0.html              | 12 -----
 src/babel-plugin-cjs-interop.ts               | 47 +++++++++++++++----
 23 files changed, 108 insertions(+), 151 deletions(-)
 create mode 100644 .changeset/rotten-nails-share.md
 delete mode 100644 src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
 create mode 100644 src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.1.html
 delete mode 100644 src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
 delete mode 100644 src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html
 create mode 100644 src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.1.html
 delete mode 100644 src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.loading.1.html
 delete mode 100644 src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.step-0.0.html

diff --git a/.changeset/rotten-nails-share.md b/.changeset/rotten-nails-share.md
new file mode 100644
index 0000000..1860929
--- /dev/null
+++ b/.changeset/rotten-nails-share.md
@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Improve\* cjs interop
diff --git a/src/__tests__/fixtures/isomorphic-base-url/server.mjs b/src/__tests__/fixtures/isomorphic-base-url/server.mjs
index 35f58cc..8189a51 100644
--- a/src/__tests__/fixtures/isomorphic-base-url/server.mjs
+++ b/src/__tests__/fixtures/isomorphic-base-url/server.mjs
@@ -12,7 +12,7 @@ const baseUrl = process.env.BASE_URL;
 export default createServer(async (req, res) => {
   // remove the base url from the request url
   if (req.url.startsWith(baseUrl, 1)) {
-    req.url = req.url.slice(baseUrl.length - 1);
+    req.url = req.url.slice(baseUrl.length);
   }
 
   await handler(req, res);
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html
index 2284b57..beca2b2 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.1.html
@@ -10,12 +10,12 @@
   rel="modulepreload"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html
index 48471e3..f6675e9 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.2.html
@@ -10,12 +10,12 @@
   rel="modulepreload"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
deleted file mode 100644
index 44c04cf..0000000
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<script
-  async=""
-  crossorigin=""
-  src="/assets/class-[hash].marko-[hash].js"
-  type="module"
-/>
-<link
-  crossorigin=""
-  href="/assets/modulepreload-[hash].js"
-  rel="modulepreload"
-/>
-<div
-  id="clickable"
->
-  Mounted: true Clicks: 0
-</div>
-<script
-  async=""
-  crossorigin=""
-  src="/assets/class-[hash].marko-[hash].js"
-  type="module"
-/>
-<link
-  crossorigin=""
-  href="/assets/modulepreload-[hash].js"
-  rel="modulepreload"
-/>
-<div
-  id="clickable"
->
-  Mounted: true Clicks: 0
-</div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html
index efe58aa..2be60d6 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.0.html
@@ -10,12 +10,12 @@
   rel="modulepreload"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 1
 </div>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.1.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.1.html
new file mode 100644
index 0000000..f916683
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.step-0.1.html
@@ -0,0 +1,21 @@
+<script
+  async=""
+  crossorigin=""
+  src="/assets/class-[hash].marko-[hash].js"
+  type="module"
+/>
+<link
+  crossorigin=""
+  href="/assets/modulepreload-[hash].js"
+  rel="modulepreload"
+/>
+<div
+  class="clickable"
+>
+  Mounted: true Clicks: 1
+</div>
+<div
+  class="clickable"
+>
+  Mounted: true Clicks: 1
+</div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
deleted file mode 100644
index 9cb6983..0000000
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<script
-  src="/@vite/client"
-  type="module"
-/>
-<div
-  id="clickable"
->
-  Mounted: true Clicks: 0
-</div>
-<script
-  async=""
-  src="/src/template.marko?marko-browser-entry"
-  type="module"
-/>
-<script
-  async=""
-  src="/src/components/class-[hash].marko?marko-browser-entry"
-  type="module"
-/>
-<script
-  src="/@vite/client"
-  type="module"
-/>
-<div
-  id="clickable"
->
-  Mounted: true Clicks: 0
-</div>
-<script
-  async=""
-  src="/src/components/class-[hash].marko?marko-browser-entry"
-  type="module"
-/>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html
index 44229a2..0b975ac 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.2.html
@@ -12,7 +12,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html
index 7baf2c7..d8a6aec 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.3.html
@@ -12,7 +12,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html
index 44f8e5a..7ac9e98 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.4.html
@@ -12,7 +12,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html
index cc227ea..9d26f68 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.5.html
@@ -12,7 +12,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html
index 9fea173..86f3a6e 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.6.html
@@ -12,7 +12,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
@@ -40,7 +40,7 @@
   document.documentElement.style.visibility='hidden'
 </script>
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html
index 6667f64..c199ed7 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.7.html
@@ -1,5 +1,5 @@
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
@@ -14,7 +14,7 @@
   type="module"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: false Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html
index f43e2cb..78ff3fc 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.8.html
@@ -1,5 +1,5 @@
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
@@ -14,7 +14,7 @@
   type="module"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html
deleted file mode 100644
index 1cb91a7..0000000
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.9.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<script
-  src="/@vite/client"
-  type="module"
-/>
-<div
-  id="clickable"
->
-  Mounted: false Clicks: 0
-</div>
-<script
-  async=""
-  src="/src/template.marko?marko-browser-entry"
-  type="module"
-/>
-<script
-  async=""
-  src="/src/components/class-[hash].marko?marko-browser-entry"
-  type="module"
-/>
-<script
-  src="/@vite/client"
-  type="module"
-/>
-<div
-  id="clickable"
->
-  Mounted: false Clicks: 0
-</div>
-<script
-  async=""
-  src="/src/components/class-[hash].marko?marko-browser-entry"
-  type="module"
-/>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html
index 2229265..656a3f8 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.0.html
@@ -1,5 +1,5 @@
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 1
 </div>
@@ -14,7 +14,7 @@
   type="module"
 />
 <div
-  id="clickable"
+  class="clickable"
 >
   Mounted: true Clicks: 0
 </div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.1.html b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.1.html
new file mode 100644
index 0000000..3ba8303
--- /dev/null
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.step-0.1.html
@@ -0,0 +1,20 @@
+<div
+  class="clickable"
+>
+  Mounted: true Clicks: 1
+</div>
+<script
+  async=""
+  src="/src/template.marko?marko-browser-entry"
+  type="module"
+/>
+<script
+  async=""
+  src="/src/components/class-[hash].marko?marko-browser-entry"
+  type="module"
+/>
+<div
+  class="clickable"
+>
+  Mounted: true Clicks: 1
+</div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/class-component.marko b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/class-component.marko
index 9579382..8776b33 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/class-component.marko
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/src/components/class-component.marko
@@ -14,7 +14,7 @@ class {
   }
 }
 
-<div#clickable onClick("handleClick")>
+<div.clickable onClick("handleClick")>
   Mounted: ${state.mounted}
   Clicks: ${state.clickCount}
 </div>
diff --git a/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts b/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts
index 9e9a321..d49bb01 100644
--- a/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts
+++ b/src/__tests__/fixtures/isomorphic-bundle-splitting/test.config.ts
@@ -1,4 +1,6 @@
 export const ssr = true;
 export async function steps() {
-  await page.click("#clickable");
+  for (const el of await page.$$(".clickable")) {
+    await el.click();
+  }
 }
diff --git a/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.loading.1.html b/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.loading.1.html
deleted file mode 100644
index 0620750..0000000
--- a/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.loading.1.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div
-  id="implicit"
->
-  <div
-    id="clickable"
-  >
-    Mounted: true Clicks: 0 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
-  </div>
-</div>
-<div>
-  PRELOAD: /my-prefix/assets/read-head-[hash].js
-</div>
\ No newline at end of file
diff --git a/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.step-0.0.html b/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.step-0.0.html
deleted file mode 100644
index 262f08f..0000000
--- a/src/__tests__/fixtures/isomorphic-modulepreload/__snapshots__/build.expected.step-0.0.html
+++ /dev/null
@@ -1,12 +0,0 @@
-<div
-  id="implicit"
->
-  <div
-    id="clickable"
-  >
-    Mounted: true Clicks: 1 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
-  </div>
-</div>
-<div>
-  PRELOAD: /my-prefix/assets/read-head-[hash].js
-</div>
\ No newline at end of file
diff --git a/src/babel-plugin-cjs-interop.ts b/src/babel-plugin-cjs-interop.ts
index d3058f9..9718566 100644
--- a/src/babel-plugin-cjs-interop.ts
+++ b/src/babel-plugin-cjs-interop.ts
@@ -79,25 +79,47 @@ export default function plugin(options: {
           }
         }
 
-        namespaceId ||= path.scope.generateUidIdentifier(
-          defaultImportId?.name || path.node.source.value,
+        const rawImport = path.scope.generateUidIdentifier(
+          namespaceId?.name || defaultImportId?.name || path.node.source.value,
         );
-        path.node.specifiers = [t.importDefaultSpecifier(namespaceId)];
+        path.node.specifiers = [t.importNamespaceSpecifier(rawImport)];
 
         if (defaultImportId) {
           path.insertAfter(
             t.variableDeclaration("const", [
               t.variableDeclarator(
-                defaultImportId,
+                t.objectPattern([
+                  t.objectProperty(t.identifier("default"), defaultImportId),
+                ]),
                 t.conditionalExpression(
                   t.optionalMemberExpression(
-                    namespaceId,
+                    t.memberExpression(rawImport, t.identifier("default")),
                     t.identifier("__esModule"),
                     false,
                     true,
                   ),
-                  t.memberExpression(namespaceId, t.identifier("default")),
-                  namespaceId,
+                  t.memberExpression(rawImport, t.identifier("default")),
+                  rawImport,
+                ),
+              ),
+            ]),
+          );
+        }
+
+        if (namespaceId) {
+          path.insertAfter(
+            t.variableDeclaration("const", [
+              t.variableDeclarator(
+                namespaceId,
+                t.conditionalExpression(
+                  t.optionalMemberExpression(
+                    rawImport,
+                    t.identifier("__esModule"),
+                    false,
+                    true,
+                  ),
+                  rawImport,
+                  t.memberExpression(rawImport, t.identifier("default")),
                 ),
               ),
             ]),
@@ -118,7 +140,16 @@ export default function plugin(options: {
                     ),
                   ),
                 ),
-                namespaceId,
+                t.conditionalExpression(
+                  t.optionalMemberExpression(
+                    rawImport,
+                    t.identifier("__esModule"),
+                    false,
+                    true,
+                  ),
+                  rawImport,
+                  t.memberExpression(rawImport, t.identifier("default")),
+                ),
               ),
             ]),
           );