fix: allow modulepreloads to have asset base (#56)

* fix: allow modulepreloads to have asset base

* chore: update mocha-snap

* fix: ensure runtime ids match

* chore: add test

* chore: add changeset

.changeset/spicy-games-lick.md

@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+fix: preload base path

package.json

@@ -34,7 +34,7 @@
     "lint-staged": "^13.1.0",
     "marko": "^5.22.0",
     "mocha": "^10.2.0",
-    "mocha-snap": "^4.3.0",
+    "mocha-snap": "^5.0.0",
     "nyc": "^15.1.0",
     "playwright": "^1.29.1",
     "prettier": "^2.8.1",

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

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
+  </div>
+</div>

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

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
+  </div>
+</div>
+<div>
+  PRELOAD: /my-prefix/assets/read-head-[hash].js
+</div>

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

@@ -0,0 +1,12 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
+  </div>
+</div>
+<div>
+  PRELOAD: /my-prefix/assets/read-head-[hash].js
+</div>

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

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0 LOGO_PATH: /src/components/logo.svg ENV: /
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0 LOGO_PATH: /src/components/logo.svg ENV: /
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1 LOGO_PATH: /src/components/logo.svg ENV: /
+  </div>
+</div>

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

@@ -0,0 +1,33 @@
+// 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) {
+      devServer.ssrFixStacktrace(err);
+      return next(err);
+    }
+  });
+})();

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

@@ -0,0 +1,17 @@
+// In production, simply start up the http server.
+globalThis.assetsPath = "/my-prefix/";
+
+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;
+  if (req.url.startsWith("/my-prefix/")) {
+    req.url = req.url.replace("/my-prefix", "");
+  }
+  await serve(req, res, serveOpts);
+});

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

@@ -0,0 +1,25 @@
+import logo from "./logo.svg";
+
+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}
+
+  LOGO_PATH: ${logo.replace(/-[a-z0-9]+(\.\w+)$/i, '-[hash]$1')}
+  ENV: ${import.meta.env.BASE_URL}
+</div>

src/__tests__/fixtures/isomorphic-modulepreload/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-modulepreload/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-modulepreload/src/components/read-head.marko

@@ -0,0 +1,14 @@
+class {
+  onCreate() {
+    this.state = {
+      modulePreloads: []
+    };
+  }
+  onMount() {
+    this.state.modulePreloads = document.querySelectorAll('link[rel="modulepreload"]');
+  }
+}
+
+<for|link| of=state.modulePreloads>
+  <div>PRELOAD: ${new URL(link.href).pathname.replace(/-[a-z0-9]+(\.\w+)$/i, '-[hash]$1')}</div>
+</for>

src/__tests__/fixtures/isomorphic-modulepreload/src/index.js

@@ -0,0 +1,10 @@
+import template from "./template.marko";
+import "./components/read-head.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-modulepreload/src/template.marko

@@ -0,0 +1,13 @@
+style {
+  div {
+    color: green;
+  }
+}
+
+<layout-component>
+    <div id="app">
+      <implicit-component/>
+      <read-head />
+      <!-- <${input.component}/> -->
+    </div>
+</layout-component>

src/__tests__/fixtures/isomorphic-modulepreload/test.config.ts

@@ -0,0 +1,9 @@
+import type { Options } from "../../..";
+
+export const ssr = true;
+export async function steps() {
+  await page.click("#clickable");
+}
+export const options: Options = {
+  basePathVar: "assetsPath",
+};

src/__tests__/fixtures/isomorphic-runtime-base-path/__snapshots__/build.expected.loading.1.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-runtime-base-path/__snapshots__/build.expected.step-0.0.html

@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1 LOGO_PATH: /my-prefix/assets/logo-[hash].svg ENV: /
+  </div>
+</div>

src/__tests__/fixtures/isomorphic-runtime-base-path/server.js

@@ -10,15 +10,8 @@ const serveOpts = { public: path.resolve(__dirname, "dist") };
 module.exports = createServer(async (req, res) => {
   await handler(req, res);
   if (res.headersSent) return;
-
   if (req.url.startsWith("/my-prefix/")) {
     req.url = req.url.replace("/my-prefix", "");
-    res.statusCode = 200;
-    res.setHeader("Content-Type", "text/html; charset=utf-8");
-    res.end("Hello World");
-    await serve(req, res, serveOpts);
-  } else {
-    res.statusCode = 404;
-    res.end("Not Found");
   }
+  await serve(req, res, serveOpts);
 });