fix: improve cjs interop and fix some tests

marko-js · Nov 19, 2024 · 0ef59c7 · 0ef59c7
1 parent 25fea17
commit 0ef59c7
Show file tree

Hide file tree

Showing 19 changed files with 81 additions and 145 deletions.
diff --git a/.changeset/rotten-nails-share.md 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
@@ -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/..._tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html b/..._tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/build.expected.loading.3.html
diff --git a/...__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html b/...__tests__/fixtures/isomorphic-bundle-splitting/__snapshots__/dev.expected.loading.10.html
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
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
@@ -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>
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
@@ -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>
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
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
@@ -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>
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
@@ -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>
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
@@ -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
@@ -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
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
diff --git 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")),
+                ),
               ),
             ]),
           );