fix: improve cjs interop and fix some tests

.changeset/rotten-nails-share.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Improve\* cjs interop

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);

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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();
+  }
 }