Cjs interop fix

.changeset/quiet-pandas-fry.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Use global config exported from @marko/compiler

.changeset/rotten-nails-share.md

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

package.json

@@ -16,37 +16,37 @@
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.27.5",
-    "@marko/compiler": "^5.37.0",
+    "@changesets/cli": "^2.27.9",
+    "@marko/compiler": "^5.37.26",
     "@marko/fixture-snapshots": "^2.2.1",
     "@marko/testing-library": "^6.2.0",
     "@types/babel__core": "^7.20.5",
-    "@types/jsdom": "^21.1.6",
-    "@types/mocha": "^10.0.6",
-    "@types/node": "^20.12.12",
+    "@types/jsdom": "^21.1.7",
+    "@types/mocha": "^10.0.9",
+    "@types/node": "^22.9.0",
     "@types/resolve": "^1.20.6",
     "@types/serve-handler": "^6.1.4",
     "@typescript-eslint/eslint-plugin": "^7.11.0",
     "@typescript-eslint/parser": "^7.11.0",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.21.4",
+    "esbuild": "^0.24.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "fixpack": "^4.0.0",
-    "husky": "^9.0.11",
-    "jsdom": "^24.1.0",
+    "husky": "^9.1.7",
+    "jsdom": "^25.0.1",
     "less": "^4.2.0",
-    "lint-staged": "^15.2.5",
-    "marko": "^5.35.0",
-    "mocha": "^10.4.0",
+    "lint-staged": "^15.2.10",
+    "marko": "^5.35.35",
+    "mocha": "^10.8.2",
     "mocha-snap": "^5.0.0",
-    "nyc": "^15.1.0",
-    "playwright": "^1.44.1",
-    "prettier": "^3.2.5",
-    "serve-handler": "^6.1.5",
-    "tsx": "^4.11.0",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12"
+    "nyc": "^17.1.0",
+    "playwright": "^1.49.0",
+    "prettier": "^3.3.3",
+    "serve-handler": "^6.1.6",
+    "tsx": "^4.19.2",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
   },
   "files": [
     "dist",

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