From 10a3c01a56ed5f35a8320a8a2d9aa02fde53a1c5 Mon Sep 17 00:00:00 2001 From: Alexander Wang Date: Wed, 15 Jan 2025 11:37:04 -0700 Subject: [PATCH] dev server changes --- d2js/js/Makefile | 5 ++ d2js/js/README.md | 6 +- d2js/js/dev-server.js | 79 +++++++++++++--------- d2js/js/examples/customizable.html | 103 +++++++++++++++++++++++++++++ 4 files changed, 158 insertions(+), 35 deletions(-) create mode 100644 d2js/js/examples/customizable.html diff --git a/d2js/js/Makefile b/d2js/js/Makefile index 1b81115e5..7ffc32798 100644 --- a/d2js/js/Makefile +++ b/d2js/js/Makefile @@ -11,6 +11,11 @@ fmt: node_modules build: fmt prefix "$@" ./ci/build.sh +.PHONY: dev +dev: build + prefix "$@" git checkout -- src/platform.js src/worker.js + prefix "$@" bun run dev + .PHONY: test test: build prefix "$@" bun test:all diff --git a/d2js/js/README.md b/d2js/js/README.md index 0afeb230b..5918a8f0a 100644 --- a/d2js/js/README.md +++ b/d2js/js/README.md @@ -77,12 +77,12 @@ If you change the main D2 source code, you should regenerate the WASM file: ./make.sh build ``` -### Running the Development Server +### Running the dev server -Make sure you've built already, then run: +You can browse the examples by running the dev server: ```bash -bun run dev +./make.sh dev ``` Visit `http://localhost:3000` to see the example page. diff --git a/d2js/js/dev-server.js b/d2js/js/dev-server.js index c5ed267ca..cfc51f557 100644 --- a/d2js/js/dev-server.js +++ b/d2js/js/dev-server.js @@ -1,3 +1,6 @@ +const fs = require("fs/promises"); +const path = require("path"); + const MIME_TYPES = { ".html": "text/html", ".js": "text/javascript", @@ -11,45 +14,57 @@ const server = Bun.serve({ port: 3000, async fetch(request) { const url = new URL(request.url); - let path = url.pathname; + let filePath = url.pathname.slice(1); // Remove leading "/" - // Serve index page by default - if (path === "/") { - path = "/examples/basic.html"; - } - - // Handle attempts to access files in src - if (path.startsWith("/src/")) { - const wasmFile = path.includes("wasm_exec.js") || path.includes("d2.wasm"); - if (wasmFile) { - path = path.replace("/src/", "/wasm/"); - } + if (filePath === "") { + filePath = "examples/"; } try { - const filePath = path.slice(1); - const file = Bun.file(filePath); - const exists = await file.exists(); + const fullPath = path.join(process.cwd(), filePath); + const stats = await fs.stat(fullPath); - if (!exists) { - return new Response(`File not found: ${path}`, { status: 404 }); + if (stats.isDirectory()) { + const entries = await fs.readdir(fullPath); + const links = await Promise.all( + entries.map(async (entry) => { + const entryPath = path.join(fullPath, entry); + const isDir = (await fs.stat(entryPath)).isDirectory(); + const slash = isDir ? "/" : ""; + return `
  • ${entry}${slash}
    • `; + }) + ); + + const html = ` + + +

    Examples

    + + + + `; + return new Response(html, { + headers: { "Content-Type": "text/html" }, + }); + } else { + const ext = path.extname(filePath); + const mimeType = MIME_TYPES[ext] || "application/octet-stream"; + + const file = Bun.file(filePath); + return new Response(file, { + headers: { + "Content-Type": mimeType, + "Access-Control-Allow-Origin": "*", + "Cross-Origin-Opener-Policy": "same-origin", + "Cross-Origin-Embedder-Policy": "require-corp", + }, + }); } - - // Get file extension and corresponding MIME type - const ext = "." + filePath.split(".").pop(); - const mimeType = MIME_TYPES[ext] || "application/octet-stream"; - - return new Response(file, { - headers: { - "Content-Type": mimeType, - "Access-Control-Allow-Origin": "*", - "Cross-Origin-Opener-Policy": "same-origin", - "Cross-Origin-Embedder-Policy": "require-corp", - }, - }); } catch (err) { - console.error(`Error serving ${path}:`, err); - return new Response(`Server error: ${err.message}`, { status: 500 }); + console.error(`Error serving ${filePath}:`, err); + return new Response(`File not found: ${filePath}`, { status: 404 }); } }, }); diff --git a/d2js/js/examples/customizable.html b/d2js/js/examples/customizable.html new file mode 100644 index 000000000..aa6fac6cf --- /dev/null +++ b/d2js/js/examples/customizable.html @@ -0,0 +1,103 @@ + + + + + + +
    + +
    + Layout: +
    + + +
    +
    + +
    +
    + + +