fix: cjs imports from marko files in dev (#50)

* fix: cjs imports from marko files in dev

* fix: re-export named exports

* fix: windows

* fix: update snapshot

* chore: add changeset

.changeset/olive-panthers-deliver.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+fix: handle cjs dependencies of .marko templates

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/build.expected.loading.0.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: false Clicks: 0
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/build.expected.loading.1.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: true Clicks: 0
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/build.expected.step-0.0.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: true Clicks: 1
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/dev.expected.loading.0.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: false Clicks: 0
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/dev.expected.loading.1.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: true Clicks: 0
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/__snapshots__/dev.expected.step-0.0.html

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <button
+    class="btn btn--secondary"
+    data-ebayui=""
+    id="clickable"
+    type="button"
+  >
+    Mounted: true Clicks: 1
+  </button>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/dev-server.js

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

src/__tests__/fixtures/isomorphic-commonjs/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "isomorphic-commonjs",
+  "dependencies": {
+    "test-package": "0.0.0"
+  }
+}

src/__tests__/fixtures/isomorphic-commonjs/server.js

@@ -0,0 +1,11 @@
+// In production, simply start up the http server.
+const path = require("path");
+const { createServer } = require("http");
+const serve = require("serve-handler");
+const { handler } = require("./dist/index.mjs");
+const serveOpts = { public: path.resolve(__dirname, "dist") };
+module.exports = createServer(async (req, res) => {
+  await handler(req, res);
+  if (res.headersSent) return;
+  await serve(req, res, serveOpts);
+});

src/__tests__/fixtures/isomorphic-commonjs/src/components/class-component.marko

@@ -0,0 +1,20 @@
+class {
+  onCreate() {
+    this.state = {
+      clickCount: 0,
+      mounted: false
+    };
+  }
+  onMount() {
+    this.state.mounted = true;
+  }
+
+  handleClick() {
+    this.state.clickCount++;
+  }
+}
+
+<test-button#clickable on-click("handleClick")>
+  Mounted: ${state.mounted}
+  Clicks: ${state.clickCount}
+</test-button>

src/__tests__/fixtures/isomorphic-commonjs/src/components/implicit-component.marko

@@ -0,0 +1,9 @@
+static {
+  if (typeof window === "object") {
+    document.body.firstElementChild.append("Loaded Implicit Component");
+  }
+}
+
+<div#implicit>
+  <class-component/>
+</div>

src/__tests__/fixtures/isomorphic-commonjs/src/components/layout-component.marko

@@ -0,0 +1,15 @@
+static {
+  if (typeof window === "object") {
+    document.body.firstElementChild.append("Loaded Layout Component");
+  }
+}
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Hello World</title>
+</head>
+<body>
+  <${input.renderBody}/>
+</body>
+</html>