CJS imports in Marko files(SSR)

.changeset/plenty-bees-appear.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Marko CJS interop in SSR

.gitignore

@@ -8,6 +8,7 @@
 # NPM
 **/node_modules/*
 !**/node_modules/test-package
+!**/node_modules/test-package2
 npm-debug.log
 
 # Build

package.json

@@ -8,17 +8,21 @@
     "anymatch": "^3.1.3",
     "domelementtype": "^2.3.0",
     "domhandler": "^5.0.3",
-    "htmlparser2": "^9.0.0"
+    "htmlparser2": "^9.0.0",
+    "resolve": "^1.22.8",
+    "resolve.exports": "^2.0.2"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.4.8",
     "@changesets/cli": "^2.26.2",
     "@marko/compiler": "^5.33.2",
     "@marko/fixture-snapshots": "^2.2.1",
     "@marko/testing-library": "^6.1.4",
+    "@types/babel__core": "^7.20.3",
     "@types/jsdom": "^21.1.3",
     "@types/mocha": "^10.0.2",
     "@types/node": "^20.8.2",
+    "@types/resolve": "^1.20.4",
     "@types/serve-handler": "^6.1.2",
     "@typescript-eslint/eslint-plugin": "^6.7.4",
     "@typescript-eslint/parser": "^6.7.4",
@@ -38,7 +42,7 @@
     "playwright": "^1.38.1",
     "prettier": "^2.8.8",
     "serve-handler": "^6.1.5",
-    "tsx": "^3.13.0",
+    "tsx": "^3.14.0",
     "typescript": "^5.2.2",
     "vite": "^4.4.11"
   },

src/__tests__/fixtures/isomorphic-basic/dev-server.mjs

@@ -0,0 +1,38 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+import { createServer } from "vite";
+import path from "path";
+import url from "url";
+import { createRequire } from "module";
+
+// change to import once marko-vite is updated to ESM
+const markoPlugin = createRequire(import.meta.url)("../../..").default;
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+
+const devServer = await createServer({
+  root: __dirname,
+  appType: "custom",
+  logLevel: "silent",
+  plugins: [markoPlugin()],
+  optimizeDeps: { force: true },
+  server: {
+    middlewareMode: true,
+    watch: {
+      ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+    },
+  },
+});
+
+export default devServer.middlewares.use(async (req, res, next) => {
+  try {
+    const { handler } = await devServer.ssrLoadModule(
+      path.join(__dirname, "./src/index.js")
+    );
+    await handler(req, res, next);
+  } catch (err) {
+    devServer.ssrFixStacktrace(err);
+    return next(err);
+  }
+});

src/__tests__/fixtures/isomorphic-basic/server.mjs

@@ -0,0 +1,15 @@
+// In production, simply start up the http server.
+import path from 'path'
+import url from 'url';
+import { createServer } from "http";
+import serve from "serve-handler";
+import { handler } from "./dist/index.mjs";
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url));
+const serveOpts = { public: path.resolve(__dirname, "dist") };
+
+export default createServer(async (req, res) => {
+  await handler(req, res);
+  if (res.headersSent) return;
+  await serve(req, res, serveOpts);
+});