diff --git a/d2js/js/Makefile b/d2js/js/Makefile index cc098c626..1b81115e5 100644 --- a/d2js/js/Makefile +++ b/d2js/js/Makefile @@ -21,4 +21,4 @@ node_modules: .PHONY: cleanup cleanup: test - prefix "$@" git checkout -- src/platform.js + prefix "$@" git checkout -- src/platform.js src/worker.js diff --git a/d2js/js/README.md b/d2js/js/README.md index 6ce7597c0..0afeb230b 100644 --- a/d2js/js/README.md +++ b/d2js/js/README.md @@ -31,36 +31,18 @@ bun add @terrastruct/d2 ## Usage -### Browser +D2.js uses webworkers to call a WASM file. ```javascript +// Same for Node or browser import { D2 } from '@terrastruct/d2'; +// Or using a CDN +// import { D2 } from 'https://esm.sh/@terrastruct/d2'; const d2 = new D2(); const result = await d2.compile('x -> y'); const svg = await d2.render(result.diagram); - -const result = await d2.compile('x -> y', { - layout: 'dagre', - sketch: true -}); -``` - -### Node - -```javascript -import { D2 } from '@terrastruct/d2'; - -const d2 = new D2(); - -async function createDiagram() { - const result = await d2.compile('x -> y'); - const svg = await d2.render(result.diagram); - console.log(svg); -} - -createDiagram(); ``` ## API Reference @@ -87,7 +69,7 @@ D2.js uses Bun, so install this first. ```bash git clone https://github.com/terrastruct/d2.git cd d2/d2js/js -./make.sh +./make.sh all ``` If you change the main D2 source code, you should regenerate the WASM file: @@ -97,6 +79,8 @@ If you change the main D2 source code, you should regenerate the WASM file: ### Running the Development Server +Make sure you've built already, then run: + ```bash bun run dev ``` diff --git a/d2js/js/build.js b/d2js/js/build.js index 3c1cfeec5..a3d3a145f 100644 --- a/d2js/js/build.js +++ b/d2js/js/build.js @@ -23,12 +23,11 @@ await writeFile( ); const commonConfig = { - splitting: false, sourcemap: "external", minify: true, }; -async function buildPlatformFile(platform) { +async function buildDynamicFiles(platform) { const platformContent = platform === "node" ? `export * from "./platform.node.js";` @@ -36,51 +35,50 @@ async function buildPlatformFile(platform) { const platformPath = join(SRC_DIR, "platform.js"); await writeFile(platformPath, platformContent); + + const workerSource = + platform === "node" + ? join(SRC_DIR, "worker.node.js") + : join(SRC_DIR, "worker.browser.js"); + + const workerTarget = join(SRC_DIR, "worker.js"); + const workerContent = await readFile(workerSource, "utf8"); + await writeFile(workerTarget, workerContent); } async function buildAndCopy(buildType) { const configs = { browser: { outdir: resolve(ROOT_DIR, "dist/browser"), + splitting: false, format: "esm", target: "browser", platform: "browser", loader: { ".js": "jsx", }, - entrypoints: [ - resolve(SRC_DIR, "index.js"), - resolve(SRC_DIR, "worker.js"), - resolve(SRC_DIR, "platform.js"), - resolve(SRC_DIR, "wasm-loader.browser.js"), - ], + entrypoints: [resolve(SRC_DIR, "index.js"), resolve(SRC_DIR, "worker.js")], }, "node-esm": { outdir: resolve(ROOT_DIR, "dist/node-esm"), + splitting: true, format: "esm", target: "node", platform: "node", - entrypoints: [ - resolve(SRC_DIR, "index.js"), - resolve(SRC_DIR, "worker.js"), - resolve(SRC_DIR, "platform.js"), - ], + entrypoints: [resolve(SRC_DIR, "index.js"), resolve(SRC_DIR, "worker.js")], }, "node-cjs": { outdir: resolve(ROOT_DIR, "dist/node-cjs"), + splitting: false, format: "cjs", target: "node", platform: "node", - entrypoints: [ - resolve(SRC_DIR, "index.js"), - resolve(SRC_DIR, "worker.js"), - resolve(SRC_DIR, "platform.js"), - ], + entrypoints: [resolve(SRC_DIR, "index.js"), resolve(SRC_DIR, "worker.js")], }, }; const config = configs[buildType]; - await buildPlatformFile(config.platform); + await buildDynamicFiles(config.platform); const result = await build({ ...commonConfig, diff --git a/d2js/js/examples/basic.html b/d2js/js/examples/basic.html index 3248f1b9c..caec7e428 100644 --- a/d2js/js/examples/basic.html +++ b/d2js/js/examples/basic.html @@ -30,7 +30,7 @@