refactor: remove /preview/ prefix in preview URLs

fwouts · Aug 26, 2023 · 05d0eaf · 05d0eaf
1 parent 2b01334
commit 05d0eaf
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 13 deletions.
diff --git a/core/src/previewer.ts b/core/src/previewer.ts
@@ -152,8 +152,12 @@ export class Previewer {
           }
         );
         const router = express.Router();
-        router.get(/^\/preview\/.*:[^/]+\/$/, async (req, res) => {
-          const previewableId = req.path.substring(9, req.path.length - 1);
+        router.get(/^\/.*:[^/]+\/$/, async (req, res, next) => {
+          if (req.url.includes("?html-proxy")) {
+            next();
+            return;
+          }
+          const previewableId = req.path.substring(1, req.path.length - 1);
           if (req.header("Accept") === "text/x-vite-ping") {
             // This is triggered as part of HMR. Exit early.
             res.writeHead(204).end();

diff --git a/core/src/vite/plugins/virtual-plugin.ts b/core/src/vite/plugins/virtual-plugin.ts
@@ -6,9 +6,24 @@ import type * as vite from "vite";
 import { transformWithEsbuild } from "vite";
 
 const VIRTUAL_PREFIX = `/@previewjs-virtual:`;
+const VIRTUAL_PREFIX2 = `/@id/__x00__`;
 
 const jsExtensions = new Set([".js", ".jsx", ".ts", ".tsx"]);
 
+function maybeVirtual(originalId: string) {
+  let id = originalId;
+  if (id.startsWith(VIRTUAL_PREFIX)) {
+    id = id.slice(VIRTUAL_PREFIX.length);
+  }
+  if (id.startsWith("\0")) {
+    id = id.slice(1);
+  }
+  if (id.startsWith(VIRTUAL_PREFIX2)) {
+    id = id.slice(VIRTUAL_PREFIX2.length);
+  }
+  return [id, id !== originalId] as const;
+}
+
 export function virtualPlugin(options: {
   logger: Logger;
   reader: Reader;
@@ -20,14 +35,14 @@ export function virtualPlugin(options: {
   const { reader, rootDir } = options;
   return {
     name: "previewjs:virtual-fs",
-    resolveId: async function (id, importer) {
-      const virtualImporter = importer?.startsWith(VIRTUAL_PREFIX) || false;
-      if (id.indexOf(`/node_modules/`) !== -1) {
+    resolveId: async function (originalId, originalImporter) {
+      const [importer, virtualImporter] = originalImporter
+        ? maybeVirtual(originalImporter)
+        : ([null, false] as const);
+      if (originalId.indexOf(`/node_modules/`) !== -1) {
         return null;
       }
-      if (id.startsWith(VIRTUAL_PREFIX)) {
-        id = id.slice(VIRTUAL_PREFIX.length);
-      }
+      let [id] = maybeVirtual(originalId);
       // Remove query params.
       id = id.split("?", 2)[0]!;
       const extension = path.extname(id);
@@ -38,9 +53,6 @@ export function virtualPlugin(options: {
         if (!importer) {
           return null;
         }
-        if (virtualImporter) {
-          importer = importer.slice(VIRTUAL_PREFIX.length);
-        }
         if (extension && !jsExtensions.has(extension) && extension !== ".svg") {
           // Virtual files mess with CSS processors like postcss.
           return path.join(path.dirname(importer), id);
@@ -70,6 +82,12 @@ export function virtualPlugin(options: {
       if (id.startsWith(VIRTUAL_PREFIX)) {
         id = id.slice(VIRTUAL_PREFIX.length);
       }
+      if (id.startsWith("\0")) {
+        id = id.slice(1);
+      }
+      if (id.startsWith(VIRTUAL_PREFIX2)) {
+        id = id.slice(VIRTUAL_PREFIX2.length);
+      }
       const resolved = await resolveAbsoluteModuleId(id);
       if (!resolved) {
         // This could be a file handled by another plugin, e.g. CSS modules.

diff --git a/core/src/vite/vite-manager.ts b/core/src/vite/vite-manager.ts
@@ -288,7 +288,6 @@ export class ViteManager {
       ...this.options.config.vite,
       configFile: false,
       root: this.options.rootDir,
-      base: "/preview/",
       optimizeDeps: {
         entries: [],
         esbuildOptions: {

diff --git a/iframe/src/index.ts b/iframe/src/index.ts
@@ -74,7 +74,7 @@ class PreviewIframeControllerImpl implements PreviewIframeController {
     if (!iframe) {
       return;
     }
-    iframe.src = `/preview/${id}/?t=${Date.now()}`;
+    iframe.src = `/${id}/?t=${Date.now()}`;
   }
 
   onPreviewMessage(message: PreviewToAppMessage) {