fix: marko virtual file hmr

.changeset/happy-rooms-burn.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+Fix marko virtual file HMR

src/__tests__/fixtures/isomorphic-basic-hmr/__snapshots__/dev-hmr.expected.md

@@ -21,7 +21,7 @@ await page.click("#clickable")
 
 ```
 
-# HMR 0
+# HMR 0 (No Reload)
 src/components/class-component.marko: "Clicks: ${state.clickCount}" → "Click count: ${state.clickCount}"
 
 ```diff

src/__tests__/fixtures/isomorphic-server-only-hmr/__snapshots__/build.expected.md

@@ -0,0 +1,29 @@
+# Loading
+
+```html
+<h1>
+  Hello
+</h1>
+<div
+  id="implicit"
+>
+  <h2>
+    Server text
+  </h2>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>
+```
+
+# Step 0
+await page.click("#clickable")
+
+```diff
+-    Mounted: true Clicks: 0
++    Mounted: true Clicks: 1
+
+```
+

src/__tests__/fixtures/isomorphic-server-only-hmr/__snapshots__/dev-hmr.expected.md

@@ -0,0 +1,60 @@
+# Loading
+
+```html
+<h1>
+  Hello
+</h1>
+<div
+  id="implicit"
+>
+  <h2>
+    Server text
+  </h2>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>
+```
+
+# Step 0
+await page.click("#clickable")
+
+```diff
+-    Mounted: true Clicks: 0
++    Mounted: true Clicks: 1
+
+```
+
+# HMR 0 (Reload)
+src/template.marko: "<h1>Hello</h1>" → "<h1>Goodbye</h1>"
+
+```diff
+-  Hello
++  Goodbye
+-    Mounted: true Clicks: 1
++    Mounted: true Clicks: 0
+
+```
+
+# HMR 0 Step 0
+await page.click("#clickable")
+
+```diff
+-    Mounted: true Clicks: 0
++    Mounted: true Clicks: 1
+
+```
+
+# HMR 1 (Reload)
+src/components/implicit-component.marko: "<h2>Server text</h2>" → "<h2>Updated</h2>"
+
+```diff
+-    Server text
++    Updated
+-    Mounted: true Clicks: 1
++    Mounted: true Clicks: 0
+
+```
+

src/__tests__/fixtures/isomorphic-server-only-hmr/__snapshots__/dev.expected.md

@@ -0,0 +1,29 @@
+# Loading
+
+```html
+<h1>
+  Hello
+</h1>
+<div
+  id="implicit"
+>
+  <h2>
+    Server text
+  </h2>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>
+```
+
+# Step 0
+await page.click("#clickable")
+
+```diff
+-    Mounted: true Clicks: 0
++    Mounted: true Clicks: 1
+
+```
+

src/__tests__/fixtures/isomorphic-server-only-hmr/dev-server.mjs

@@ -0,0 +1,43 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+import { createRequire } from "module";
+import path from "path";
+import url from "url";
+import { createServer } from "vite";
+
+// 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: "warn",
+  plugins: [markoPlugin()],
+  optimizeDeps: { force: true },
+  server: {
+    ws: false,
+    hmr: false,
+    middlewareMode: true,
+    watch: {
+      ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+    },
+  },
+  build: {
+    assetsInlineLimit: 0,
+  },
+});
+
+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-server-only-hmr/server.mjs

@@ -0,0 +1,16 @@
+// In production, simply start up the http server.
+import { createServer } from "http";
+import path from "path";
+import serve from "serve-handler";
+import url from "url";
+
+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);
+});

src/__tests__/fixtures/isomorphic-server-only-hmr/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++;
+  }
+}
+
+<div#clickable onClick("handleClick")>
+  Mounted: ${state.mounted}
+  Clicks: ${state.clickCount}
+</div>

src/__tests__/fixtures/isomorphic-server-only-hmr/src/components/implicit-component.marko

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

src/__tests__/fixtures/isomorphic-server-only-hmr/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>

src/__tests__/fixtures/isomorphic-server-only-hmr/src/index.js

@@ -0,0 +1,9 @@
+import template from "./template.marko";
+
+export function handler(req, res) {
+  if (req.url === "/") {
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "text/html; charset=utf-8");
+    template.render({}, res);
+  }
+}

src/__tests__/fixtures/isomorphic-server-only-hmr/src/template.marko

@@ -0,0 +1,10 @@
+style {
+  div { color: green }
+}
+
+<layout-component>
+  <div#app>
+    <h1>Hello</h1>
+    <implicit-component/>
+  </div>
+</layout-component>

src/__tests__/fixtures/isomorphic-server-only-hmr/test.config.ts

@@ -0,0 +1,19 @@
+export const ssr = true;
+export async function steps() {
+  await page.click("#clickable");
+}
+export const hmr = [
+  {
+    changes: [["src/template.marko", "<h1>Hello</h1>", "<h1>Goodbye</h1>"]],
+    steps,
+  },
+  {
+    changes: [
+      [
+        "src/components/implicit-component.marko",
+        "<h2>Server text</h2>",
+        "<h2>Updated</h2>",
+      ],
+    ],
+  },
+];

src/__tests__/fixtures/isomorphic-tags-api-hmr/__snapshots__/dev-hmr.expected.md

@@ -6,7 +6,7 @@
 </div>
 ```
 
-# HMR 0
+# HMR 0 (Reload)
 src/tags/child-tag.marko: "Hello ${input.name}" → "Hi ${input.name}"
 
 ```diff
@@ -15,7 +15,7 @@ src/tags/child-tag.marko: "Hello ${input.name}" → "Hi ${input.name}"
 
 ```
 
-# HMR 1
+# HMR 1 (Reload)
 src/tags/child-tag.marko: "Hi ${input.name}" → "Hey ${JSON.parse(JSON.stringify(input)).name}"
 
 ```diff

src/__tests__/fixtures/isomorphic-tags-api-virtual-file-hmr/__snapshots__/build.expected.md

@@ -0,0 +1,8 @@
+# Loading
+
+```html
+<div>
+  Color: rgb(0, 128, 0)
+</div>
+```
+

src/__tests__/fixtures/isomorphic-tags-api-virtual-file-hmr/__snapshots__/dev-hmr.expected.md

@@ -0,0 +1,17 @@
+# Loading
+
+```html
+<div>
+  Color: rgb(0, 128, 0)
+</div>
+```
+
+# HMR 0 (Reload)
+src/template.marko: "div { color: green }" → "div { color: blue }"
+
+```diff
+-  Color: rgb(0, 128, 0)
++  Color: rgb(0, 0, 255)
+
+```
+

src/__tests__/fixtures/isomorphic-tags-api-virtual-file-hmr/__snapshots__/dev.expected.md

@@ -0,0 +1,8 @@
+# Loading
+
+```html
+<div>
+  Color: rgb(0, 128, 0)
+</div>
+```
+

src/__tests__/fixtures/isomorphic-tags-api-virtual-file-hmr/dev-server.mjs

@@ -0,0 +1,43 @@
+// In dev we'll start a Vite dev server in middleware mode,
+// and forward requests to our http request handler.
+
+import { createRequire } from "module";
+import path from "path";
+import url from "url";
+import { createServer } from "vite";
+
+// 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: "warn",
+  plugins: [markoPlugin()],
+  optimizeDeps: { force: true },
+  server: {
+    ws: false,
+    hmr: false,
+    middlewareMode: true,
+    watch: {
+      ignored: ["**/node_modules/**", "**/dist/**", "**/__snapshots__/**"],
+    },
+  },
+  build: {
+    assetsInlineLimit: 0,
+  },
+});
+
+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);
+  }
+});