d2: support for import

Author: stereobooster

packages/docs/astro.config.mjs

@@ -19,6 +19,8 @@ const conf = {
   // do not use .beoe for Netlify deployments
   fsPath: "public/beoe",
   webPath: "/beoe",
+  // for D2
+  shared: "shared/**/*.d2",
 };
 
 // https://astro.build/config

packages/docs/shared/x.d2

@@ -0,0 +1,3 @@
+x: {
+  shape: circle
+}

packages/docs/src/content/docs/diagrams/d2.mdx

@@ -82,6 +82,12 @@ export type D2Options = {
    * Renders the diagram to look like it was sketched by hand.
    */
   sketch?: boolean;
+  /**
+   * @default undefined
+   * Glob pattern for files to be used for [`import`](https://d2lang.com/tour/imports/).
+   * `GlobOptions` are from [tinyglobby](https://github.com/SuperchupuDev/tinyglobby#options).
+   */
+  shared?: string | string[] | GlobOptions;
 };
 ```
 
@@ -106,6 +112,7 @@ Or locally:
 - [x] [Support links in connections](https://github.com/terrastruct/d2/pull/1955)
 - [x] [JS package](https://github.com/terrastruct/d2/discussions/234#discussioncomment-11286029)
 - [x] [Export JSON graph](https://github.com/terrastruct/d2/discussions/2224)
+- [x] [support `import`](https://github.com/terrastruct/d2/issues/2301)
 - [ ] [Class-based dark mode](https://github.com/terrastruct/d2/pull/1803)
 - [ ] [Remove embeded fonts](https://github.com/terrastruct/d2/discussions/132)
 - [ ] [Smaller embeded icons](https://github.com/terrastruct/d2/discussions/2223)

packages/docs/src/content/docs/examples/d2-test.md

@@ -1,8 +1,24 @@
 ---
 title: d2 test
-draft: true
 ---
 
+## Interesting ones
+
+### Interactive example
+
+```d2 strategy=inline darkScheme=false graphFormat=dagre class=shadow svgo=false
+direction: right
+a -> b -> c -> d -> e
+```
+
+### import
+
+```d2
+direction: right
+a:@"shared/x.d2"
+a -> b
+```
+
 ## containers
 
 ```d2
@@ -282,7 +298,7 @@ a2 -> b -> c -> d -> e
 
 ### `strategy=inline`
 
-```d2 strategy=inline darkScheme=false graphFormat=dagre class=shadow svgo=false
+```d2 strategy=inline darkScheme=false
 direction: right
 a -> b -> c -> d -> e
 ```

packages/rehype-d2/package.json

@@ -34,7 +34,9 @@
   },
   "dependencies": {
     "@beoe/rehype-code-hook-img": "workspace:*",
-    "@terrastruct/d2": "^0.1.21"
+    "@terrastruct/d2": "^0.1.21",
+    "async-memoize-one": "^1.1.8",
+    "tinyglobby": "^0.2.10"
   },
   "devDependencies": {
     "@types/hast": "^3.0.4",

packages/rehype-d2/src/d2.ts

@@ -1,16 +1,40 @@
 // @ts-ignore https://github.com/terrastruct/d2/issues/2286
 import { D2 } from "@terrastruct/d2";
+import { glob, GlobOptions } from "tinyglobby";
+// @ts-expect-error
+import memoizeOne from "async-memoize-one";
+import fs from "node:fs/promises";
 
 export type D2Options = {
   layout?: "dagre" | "elk";
   sketch?: boolean;
   themeID?: number;
   graphFormat?: "graphology" | "dagre";
+  shared?: string | string[] | GlobOptions;
 };
 
+const mGlob = memoizeOne(async (x: string | string[] | GlobOptions) => {
+  // @ts-expect-error
+  const paths = await glob(x);
+  const result: Record<string, string> = Object.create(null);
+  // probably not the best way to do it, but for small number of files should be ok
+  await Promise.all(
+    paths.map((path) =>
+      fs
+        .readFile(path, { encoding: "utf-8" })
+        .then((content) => (result[path] = content))
+    )
+  );
+  return result;
+});
+
 export async function d2(code: string, options: D2Options) {
   const d2Instance = new D2();
-  const result = await d2Instance.compile(code, options);
+
+  const fs: Record<string, string> = options.shared
+    ? { ...(await mGlob(options.shared)), index: code }
+    : { index: code };
+  const result = await d2Instance.compile({ fs }, options);
 
   let data;
   if (options.graphFormat) {
@@ -62,6 +86,6 @@ export async function d2(code: string, options: D2Options) {
     }
   }
 
-  const svg = await d2Instance.render(result.diagram, options) as string;
+  const svg = (await d2Instance.render(result.diagram, options)) as string;
   return { svg, data };
 }