update doc
This commit is contained in:
Alexander Wang
parent
4576d15bea
commit
b9f8fd9e5c
2 changed files with 4 additions and 159 deletions
|
|
@ -31,42 +31,20 @@ 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();
|
||||
```
|
||||
|
||||
### Edge/CDN
|
||||
|
||||
TODO
|
||||
|
||||
## API Reference
|
||||
|
||||
### `new D2()`
|
||||
|
|
|
|||
|
|
@ -1,133 +0,0 @@
|
|||
// test-bundle.js
|
||||
import { build } from "bun";
|
||||
import { mkdir, writeFile } from "node:fs/promises";
|
||||
import { join } from "node:path";
|
||||
|
||||
// Ensure output directory exists
|
||||
await mkdir("./test-dist", { recursive: true });
|
||||
|
||||
// First, write a temporary platform.js that uses browser code
|
||||
const platformContent = `export * from "./platform.browser.js";`;
|
||||
await writeFile("./src/platform.js", platformContent);
|
||||
|
||||
console.log("Building main bundle...");
|
||||
const result = await build({
|
||||
entrypoints: ["./src/index.js"],
|
||||
outdir: "./test-dist",
|
||||
format: "esm",
|
||||
target: "browser",
|
||||
platform: "browser",
|
||||
minify: true,
|
||||
});
|
||||
|
||||
if (!result.success) {
|
||||
console.error("Main bundle build failed:", result.logs);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log("Building worker bundle...");
|
||||
const workerResult = await build({
|
||||
entrypoints: ["./src/worker.js"],
|
||||
outdir: "./test-dist",
|
||||
format: "esm",
|
||||
target: "browser",
|
||||
platform: "browser",
|
||||
minify: true,
|
||||
});
|
||||
|
||||
if (!workerResult.success) {
|
||||
console.error("Worker bundle build failed:", workerResult.logs);
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
console.log("Builds complete");
|
||||
|
||||
// Create a simple server to serve the bundles
|
||||
const server = Bun.serve({
|
||||
port: 3001,
|
||||
async fetch(req) {
|
||||
const url = new URL(req.url);
|
||||
|
||||
try {
|
||||
// Serve main bundle
|
||||
if (url.pathname === "/d2.mjs") {
|
||||
const file = await Bun.file("./test-dist/index.js").text();
|
||||
return new Response(file, {
|
||||
headers: {
|
||||
"Content-Type": "application/javascript",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Serve worker bundle
|
||||
if (url.pathname === "/worker.js") {
|
||||
const file = await Bun.file("./test-dist/worker.js").text();
|
||||
return new Response(file, {
|
||||
headers: {
|
||||
"Content-Type": "application/javascript",
|
||||
"Access-Control-Allow-Origin": "*",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// Serve test page
|
||||
if (url.pathname === "/") {
|
||||
return new Response(
|
||||
`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>D2 Test</title>
|
||||
<script type="module">
|
||||
import { D2 } from 'http://localhost:3001/d2.mjs';
|
||||
|
||||
async function init() {
|
||||
try {
|
||||
console.log("Creating D2");
|
||||
const d2 = new D2();
|
||||
console.log("D2 created:", d2);
|
||||
|
||||
await d2.ready;
|
||||
console.log("D2 ready");
|
||||
|
||||
const result = await d2.compile("x -> y");
|
||||
console.log("Compile result:", result);
|
||||
|
||||
const svg = await d2.render(result.diagram);
|
||||
console.log("Render result:", svg);
|
||||
document.getElementById('output').innerHTML = svg;
|
||||
} catch (error) {
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
init();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="output"></div>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
{
|
||||
headers: {
|
||||
"Content-Type": "text/html",
|
||||
"Content-Security-Policy":
|
||||
"script-src 'unsafe-inline' 'wasm-unsafe-eval' http://localhost:3001; " +
|
||||
"worker-src 'self' blob:; " +
|
||||
"script-src-elem 'unsafe-inline' http://localhost:3001 blob:",
|
||||
},
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
return new Response("Not found", { status: 404 });
|
||||
} catch (error) {
|
||||
console.error(`Error serving ${url.pathname}:`, error);
|
||||
return new Response("Server Error", { status: 500 });
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
console.log(`Test server running at http://localhost:${server.port}/`);
|
||||
Loading…
Reference in a new issue