put cell id in path basename not query arg so React HMR works

vite-plugin-react tests the basename to decide whether to wrap HMR boilerplate
githubnext · Apr 19, 2024 · 9f2d96b · 9f2d96b
1 parent 3a46443
commit 9f2d96b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/server/src/server.ts b/packages/server/src/server.ts
@@ -49,7 +49,7 @@ function isHTMLElementLike(obj: unknown): obj is PossibleHTML {
   );
 }
 
-const cellIdRegex = /^([^?]+\.vnb)\?cellId=([a-zA-z0-9_-]{21})\.([a-z]+)$/;
+const cellIdRegex = /^([^?]+\.vnb)-cellId=([a-zA-z0-9_-]{21})\.([a-z]+)$/;
 
 function extOfLanguage(language: string): string {
   switch (language) {
@@ -111,7 +111,10 @@ class VitaleDevServer {
         {
           name: "vitale",
           resolveId(source) {
-            return cells.has(source) ? source : null;
+            const id = source.startsWith(viteServer.config.root)
+              ? source
+              : Path.join(viteServer.config.root, source);
+            return cells.has(id) ? id : null;
           },
           load(id) {
             return cells.has(id) ? cells.get(id)!.code : null;
@@ -135,7 +138,7 @@ class VitaleDevServer {
                     });
                   } else {
                     // this is the core of `transformMiddleware` from vite
-                    // we must reimplement it in order to serve `.vnb?cellId` paths
+                    // we must reimplement it in order to serve `.vnb-cellId` paths
                     const result = await server.transformRequest(url);
                     if (result) {
                       return send(req, res, result.code, "js", {
@@ -330,7 +333,7 @@ class VitaleDevServer {
 
     for (const { path, cellId, language, code } of cells) {
       const ext = extOfLanguage(language);
-      const id = `${path}?cellId=${cellId}.${ext}`;
+      const id = `${path}-cellId=${cellId}.${ext}`;
       this.cells.delete(id);
       const rewritten = rewrite(code, language, id, cellId, this.cells);
       this.cells.set(id, rewritten);
@@ -346,7 +349,7 @@ class VitaleDevServer {
 
     for (const { path, cellId, language } of cells) {
       const ext = extOfLanguage(language);
-      const id = `${path}?cellId=${cellId}.${ext}`;
+      const id = `${path}-cellId=${cellId}.${ext}`;
       this.executeCell(id, path, cellId).catch((e) => {
         console.error(e);
       });

diff --git a/packages/vscode/src/vitaleRenderer.tsx b/packages/vscode/src/vitaleRenderer.tsx
@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 import type { ActivationFunction } from "vscode-notebook-renderer";
 
-const cellIdRegex = /^([^?]+\.vnb)\?cellId=([a-zA-z0-9_-]{21})\.([a-z]+)$/;
+const cellIdRegex = /^([^?]+\.vnb)-cellId=([a-zA-z0-9_-]{21})\.([a-z]+)$/;
 
 export const activate: ActivationFunction = (_context) => ({
   async renderOutputItem(outputItem, element) {