retain MML document directory structure in URL paths

Previously, all documents were accessed via their filename, rather than
the path. This causes conflicts if there any duplicate names at
different points in the file hierarchy.

This commit retains the directory structure so that documents are
accessed by file path.

.gitignore

@@ -41,4 +41,3 @@ dist
 
 .envrc
 .direnv
-flake.*

packages/3d-web-experience-server/src/MMLDocumentsServer.ts

@@ -1,6 +1,6 @@
-import fs from "fs";
-import path from "path";
-import url from "url";
+import fs from "node:fs";
+import url from "node:url";
+import path from "node:path";
 
 import chokidar, { FSWatcher } from "chokidar";
 import { EditableNetworkedDOM, LocalObservableDOMFactory } from "networked-dom-server";
@@ -51,43 +51,43 @@ export class MMLDocumentsServer {
       persistent: true,
     });
     this.watcher
-      .on("add", (relativeFilePath) => {
-        const filename = path.basename(relativeFilePath);
-        console.log(`Example document '${filename}' has been added`);
-        const contents = getMmlDocumentContent(relativeFilePath);
+      .on("add", (fullPath) => {
+        const relativePath = path.relative(this.directory, fullPath);
+        console.log(`MML Document '${relativePath}' has been added`, { fullPath });
+        const contents = getMmlDocumentContent(fullPath);
         const document = new EditableNetworkedDOM(
-          url.pathToFileURL(filename).toString(),
+          url.pathToFileURL(fullPath).toString(),
           LocalObservableDOMFactory,
         );
         document.load(contents);
 
         const currentData = {
-          documentPath: filename,
+          documentPath: fullPath,
           document,
         };
-        this.documents.set(filename, currentData);
+        this.documents.set(relativePath, currentData);
       })
-      .on("change", (relativeFilePath) => {
-        const filename = path.basename(relativeFilePath);
-        console.log(`Example document '${filename}' has been changed`);
-        const contents = getMmlDocumentContent(relativeFilePath);
-        const documentState = this.documents.get(filename);
+      .on("change", (fullPath) => {
+        const relativePath = path.relative(this.directory, fullPath);
+        console.log(`MML Document '${relativePath}' has been changed`);
+        const contents = getMmlDocumentContent(fullPath);
+        const documentState = this.documents.get(relativePath);
         if (!documentState) {
-          console.error(`Example document '${filename}' not found`);
+          console.error(`MML Document '${relativePath}' not found`);
           return;
         }
         documentState.document.load(contents);
       })
-      .on("unlink", (relativeFilePath) => {
-        const filename = path.basename(relativeFilePath);
-        console.log(`Example document '${filename}' has been removed`);
-        const documentState = this.documents.get(filename);
+      .on("unlink", (fullPath) => {
+        const relativePath = path.relative(this.directory, fullPath);
+        console.log(`MML Document '${relativePath}' has been removed`);
+        const documentState = this.documents.get(relativePath);
         if (!documentState) {
-          console.error(`Example document '${filename}' not found`);
+          console.error(`MML Document '${relativePath}' not found`);
           return;
         }
         documentState.document.dispose();
-        this.documents.delete(filename);
+        this.documents.delete(relativePath);
       })
       .on("error", (error) => {
         console.error("Error whilst watching directory", error);

packages/3d-web-experience-server/src/Networked3dWebExperienceServer.ts

@@ -179,9 +179,10 @@ export class Networked3dWebExperienceServer {
     const mmlServing = this.config.mmlServing;
     // Handle example document sockets
     if (mmlServing && mmlDocumentsServer) {
-      app.ws(`${mmlServing.documentsUrl}:filename`, (ws: WebSocket, req: express.Request) => {
-        const { filename } = req.params;
-        mmlDocumentsServer.handle(filename, ws);
+      app.ws(`${mmlServing.documentsUrl}*`, (ws: WebSocket, req: express.Request) => {
+        const path = req.params[0];
+        console.log("document requested", { path });
+        mmlDocumentsServer.handle(path, ws);
       });
     }