fix: windows paths (#44)

* fix: windows paths * fix: more problems, add changeset * fix: typo
marko-js · Mar 7, 2023 · 5d7eba5 · 5d7eba5
1 parent 37c1903
commit 5d7eba5
Show file tree

Hide file tree

Showing 16 changed files with 200 additions and 16 deletions.
diff --git a/.changeset/strange-shoes-design.md b/.changeset/strange-shoes-design.md
@@ -0,0 +1,5 @@
+---
+"@marko/vite": patch
+---
+
+fix: windows paths
diff --git a/...sts__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.loading.0.html b/...sts__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.loading.0.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+  </div>
+</div>
diff --git a/...sts__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.loading.1.html b/...sts__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.loading.1.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>
diff --git a/...ests__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.step-0.0.html b/...ests__/fixtures/isomorphic-circular-entry-file/__snapshots__/build.expected.step-0.0.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+  </div>
+</div>
diff --git a/...tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.loading.0.html b/...tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.loading.0.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: false Clicks: 0
+  </div>
+</div>
diff --git a/...tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.loading.1.html b/...tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.loading.1.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 0
+  </div>
+</div>
diff --git a/..._tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.step-0.0.html b/..._tests__/fixtures/isomorphic-circular-entry-file/__snapshots__/dev.expected.step-0.0.html
@@ -0,0 +1,9 @@
+<div
+  id="implicit"
+>
+  <div
+    id="clickable"
+  >
+    Mounted: true Clicks: 1
+  </div>
+</div>
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/dev-server.js b/src/__tests__/fixtures/isomorphic-circular-entry-file/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);
+    }
+  });
+})();
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/server.js b/src/__tests__/fixtures/isomorphic-circular-entry-file/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);
+});
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/src/components/class-component.marko b/src/__tests__/fixtures/isomorphic-circular-entry-file/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>
diff --git a/...__tests__/fixtures/isomorphic-circular-entry-file/src/components/implicit-component.marko b/...__tests__/fixtures/isomorphic-circular-entry-file/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>
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/src/components/layout-component.marko b/src/__tests__/fixtures/isomorphic-circular-entry-file/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>
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/src/index.js b/src/__tests__/fixtures/isomorphic-circular-entry-file/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);
+  }
+}
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/src/template.marko b/src/__tests__/fixtures/isomorphic-circular-entry-file/src/template.marko
@@ -0,0 +1,15 @@
+export const x = 1;
+
+import { x as y } from './template.marko';
+
+$ console.log(y);
+
+style {
+  div { color: green }
+}
+
+<layout-component>
+  <div#app>
+    <implicit-component/>
+  </div>
+</layout-component>
diff --git a/src/__tests__/fixtures/isomorphic-circular-entry-file/test.config.ts b/src/__tests__/fixtures/isomorphic-circular-entry-file/test.config.ts
@@ -0,0 +1,4 @@
+export const ssr = true;
+export async function steps() {
+  await page.click("#clickable");
+}
diff --git a/src/index.ts b/src/index.ts
@@ -59,9 +59,12 @@ type DeferredPromise<T> = Promise<T> & {
   reject: (error: Error) => void;
 };
 
+const POSIX_SEP = "/";
+const WINDOWS_SEP = "\\";
+
 const normalizePath =
-  path.sep === "\\"
-    ? (id: string) => id.replace(/\\/g, "/")
+  path.sep === WINDOWS_SEP
+    ? (id: string) => id.replace(/\\/g, POSIX_SEP)
     : (id: string) => id;
 const virtualFiles = new Map<
   string,
@@ -105,7 +108,8 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
     dep
   ) => {
     const query = `${virtualFileQuery}&id=${normalizePath(dep.virtualPath)}`;
-    const id = normalizePath(from) + query;
+    const normalizedFrom = normalizePath(from);
+    const id = normalizePath(normalizedFrom) + query;
 
     if (devServer) {
       const prev = virtualFiles.get(id);
@@ -115,7 +119,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
     }
 
     virtualFiles.set(id, dep);
-    return `./${path.basename(from) + query}`;
+    return `./${path.posix.basename(normalizedFrom) + query}`;
   };
 
   const ssrConfig: Compiler.Config = {
@@ -138,6 +142,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
 
   let root: string;
   let devEntryFile: string;
+  let devEntryFilePosix: string;
   let isBuild = false;
   let isSSRBuild = false;
   let devServer: vite.ViteDevServer;
@@ -158,6 +163,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
         )) as typeof Compiler;
         root = normalizePath(config.root || process.cwd());
         devEntryFile = path.join(root, "index.html");
+        devEntryFilePosix = normalizePath(devEntryFile);
         isBuild = env.command === "build";
         isSSRBuild = isBuild && linked && Boolean(config.build!.ssr);
         store =
@@ -274,7 +280,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
             inputOptions.input = toHTMLEntries(root, serverManifest.entries);
             for (const entry in serverManifest.entrySources) {
               entrySources.set(
-                path.resolve(root, entry),
+                normalizePath(path.resolve(root, entry)),
                 serverManifest.entrySources[entry]
               );
             }
@@ -307,7 +313,8 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
           ssr &&
           linked &&
           importer &&
-          importer !== devEntryFile && // Vite tries to resolve against an `index.html` in some cases, we ignore it here.
+          (importer !== devEntryFile ||
+            normalizePath(importer) !== devEntryFilePosix) && // Vite tries to resolve against an `index.html` in some cases, we ignore it here.
           isMarkoFile(importee) &&
           !isMarkoFile(importer.replace(queryReg, ""))
         ) {
@@ -347,8 +354,10 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
             importer = importer.slice(0, -importerQuery.length);
 
             if (importee[0] === ".") {
-              const resolved = path.resolve(importer, "..", importee);
-              if (resolved === importer) return resolved;
+              const resolved = normalizePath(
+                path.resolve(importer, "..", importee)
+              );
+              if (resolved === normalizePath(importer)) return resolved;
             }
 
             return this.resolve(importee, importer, resolveOpts);
@@ -379,7 +388,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
                 await generateDocManifest(
                   await devServer.transformIndexHtml(
                     "/",
-                    generateInputDoc(fileNameToURL(fileName, root))
+                    generateInputDoc(posixFileNameToURL(fileName, root))
                   )
                 )
               );
@@ -431,7 +440,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
           entrySources.set(id, source);
 
           if (serverManifest) {
-            serverManifest.entrySources[path.relative(root, id)] = source;
+            serverManifest.entrySources[path.posix.relative(root, id)] = source;
           }
         }
 
@@ -453,7 +462,7 @@ export default function markoPlugin(opts: Options = {}): vite.Plugin[] {
         }
 
         if (devServer) {
-          const templateName = getBasenameWithoutExt(id);
+          const templateName = getPosixBasenameWithoutExt(id);
           const optionalFilePrefix =
             path.dirname(id) +
             path.sep +
@@ -582,12 +591,12 @@ function toHTMLEntries(root: string, serverEntries: ServerManifest["entries"]) {
 }
 
 function toEntryId(id: string) {
-  const lastSepIndex = id.lastIndexOf(path.sep);
+  const lastSepIndex = id.lastIndexOf(POSIX_SEP);
   let name = id.slice(lastSepIndex + 1, id.indexOf(".", lastSepIndex));
 
   if (name === "index" || name === "template") {
     name = id.slice(
-      id.lastIndexOf(path.sep, lastSepIndex - 1) + 1,
+      id.lastIndexOf(POSIX_SEP, lastSepIndex - 1) + 1,
       lastSepIndex
     );
   }
@@ -600,7 +609,7 @@ function toEntryId(id: string) {
     .slice(0, 4)}`;
 }
 
-function fileNameToURL(fileName: string, root: string) {
+function posixFileNameToURL(fileName: string, root: string) {
   const relativeURL = path.posix.relative(
     pathToFileURL(root).pathname,
     pathToFileURL(fileName).pathname
@@ -614,8 +623,8 @@ function fileNameToURL(fileName: string, root: string) {
   return `/${relativeURL}`;
 }
 
-function getBasenameWithoutExt(file: string): string {
-  const baseStart = file.lastIndexOf(path.sep) + 1;
+function getPosixBasenameWithoutExt(file: string): string {
+  const baseStart = file.lastIndexOf(POSIX_SEP) + 1;
   const extStart = file.indexOf(".", baseStart + 1);
   return file.slice(baseStart, extStart);
 }