From 9345b4c92d111438718b20762ed181ec1686e3d6 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 26 Sep 2024 16:47:25 +0200 Subject: [PATCH 1/2] fix: improves error reporting that previously could not display some errors --- packages/astro-d2/libs/exec.ts | 6 +++++- packages/astro-d2/libs/integration.ts | 4 ++-- packages/astro-d2/libs/remark.ts | 3 ++- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/astro-d2/libs/exec.ts b/packages/astro-d2/libs/exec.ts index f1e0c79..62b3a59 100644 --- a/packages/astro-d2/libs/exec.ts +++ b/packages/astro-d2/libs/exec.ts @@ -8,7 +8,7 @@ export function exec(command: string, args: string[], stdin?: string, cwd?: stri }) const output: string[] = [] - const errorMessage = `Unable to run command: '${command} ${args.join(' ')}'.` + let errorMessage = `Unable to run command: '${command} ${args.join(' ')}'.` child.stdout.on('data', (data: Buffer) => { const lines = data @@ -19,6 +19,10 @@ export function exec(command: string, args: string[], stdin?: string, cwd?: stri output.push(...lines) }) + child.stderr.on('data', (data: Buffer) => { + errorMessage += `\n${data.toString()}` + }) + child.on('error', (error) => { reject(new Error(errorMessage, { cause: error })) }) diff --git a/packages/astro-d2/libs/integration.ts b/packages/astro-d2/libs/integration.ts index c39c9cc..8034651 100644 --- a/packages/astro-d2/libs/integration.ts +++ b/packages/astro-d2/libs/integration.ts @@ -1,8 +1,8 @@ import { AstroError } from 'astro/errors' -export function throwErrorWithHint(message: string): never { +export function throwErrorWithHint(message: string, cause?: Error): never { throw new AstroError( - message, + message + (cause ? `\n\n${cause.message}` : ''), `See the error report above for more informations.\n\nIf you believe this is a bug, please file an issue at https://github.com/HiDeoo/astro-d2/issues/new/choose`, ) } diff --git a/packages/astro-d2/libs/remark.ts b/packages/astro-d2/libs/remark.ts index cd2b96d..4f57a42 100644 --- a/packages/astro-d2/libs/remark.ts +++ b/packages/astro-d2/libs/remark.ts @@ -44,9 +44,10 @@ export function remarkAstroD2(config: RemarkAstroD2Config) { outputPath.fsPath, file.history[0] ? path.dirname(file.history[0]) : file.cwd, ) - } catch { + } catch (error) { throwErrorWithHint( `Failed to generate the D2 diagram at ${node.position?.start.line ?? 0}:${node.position?.start.column ?? 0}.`, + error instanceof Error ? (error.cause instanceof Error ? error.cause : error) : undefined, ) } } From d006ff4d67b4c6fd26363d61e56ecebd2b424c87 Mon Sep 17 00:00:00 2001 From: HiDeoo <494699+HiDeoo@users.noreply.github.com> Date: Thu, 26 Sep 2024 16:49:11 +0200 Subject: [PATCH 2/2] fix: fixes an issue with the `target` attribute when targetting nested boards --- .../d2/docs/examples/Attributes/target-0.svg | 314 +++++++++--------- .../docs/examples/Attributes/target.md | 20 +- packages/astro-d2/libs/d2.ts | 2 +- packages/astro-d2/tests/remark.test.ts | 4 +- 4 files changed, 175 insertions(+), 165 deletions(-) diff --git a/docs/public/d2/docs/examples/Attributes/target-0.svg b/docs/public/d2/docs/examples/Attributes/target-0.svg index ae78790..4459013 100644 --- a/docs/public/d2/docs/examples/Attributes/target-0.svg +++ b/docs/public/d2/docs/examples/Attributes/target-0.svg @@ -1,17 +1,17 @@ -DocumentationWebsite Starlight - - - - + .d2-3459208210 .fill-N1{fill:#0A0F25;} + .d2-3459208210 .fill-N2{fill:#676C7E;} + .d2-3459208210 .fill-N3{fill:#9499AB;} + .d2-3459208210 .fill-N4{fill:#CFD2DD;} + .d2-3459208210 .fill-N5{fill:#DEE1EB;} + .d2-3459208210 .fill-N6{fill:#EEF1F8;} + .d2-3459208210 .fill-N7{fill:#FFFFFF;} + .d2-3459208210 .fill-B1{fill:#0D32B2;} + .d2-3459208210 .fill-B2{fill:#0D32B2;} + .d2-3459208210 .fill-B3{fill:#E3E9FD;} + .d2-3459208210 .fill-B4{fill:#E3E9FD;} + .d2-3459208210 .fill-B5{fill:#EDF0FD;} + .d2-3459208210 .fill-B6{fill:#F7F8FE;} + .d2-3459208210 .fill-AA2{fill:#4A6FF3;} + .d2-3459208210 .fill-AA4{fill:#EDF0FD;} + .d2-3459208210 .fill-AA5{fill:#F7F8FE;} + .d2-3459208210 .fill-AB4{fill:#EDF0FD;} + .d2-3459208210 .fill-AB5{fill:#F7F8FE;} + .d2-3459208210 .stroke-N1{stroke:#0A0F25;} + .d2-3459208210 .stroke-N2{stroke:#676C7E;} + .d2-3459208210 .stroke-N3{stroke:#9499AB;} + .d2-3459208210 .stroke-N4{stroke:#CFD2DD;} + .d2-3459208210 .stroke-N5{stroke:#DEE1EB;} + .d2-3459208210 .stroke-N6{stroke:#EEF1F8;} + .d2-3459208210 .stroke-N7{stroke:#FFFFFF;} + .d2-3459208210 .stroke-B1{stroke:#0D32B2;} + .d2-3459208210 .stroke-B2{stroke:#0D32B2;} + .d2-3459208210 .stroke-B3{stroke:#E3E9FD;} + .d2-3459208210 .stroke-B4{stroke:#E3E9FD;} + .d2-3459208210 .stroke-B5{stroke:#EDF0FD;} + .d2-3459208210 .stroke-B6{stroke:#F7F8FE;} + .d2-3459208210 .stroke-AA2{stroke:#4A6FF3;} + .d2-3459208210 .stroke-AA4{stroke:#EDF0FD;} + .d2-3459208210 .stroke-AA5{stroke:#F7F8FE;} + .d2-3459208210 .stroke-AB4{stroke:#EDF0FD;} + .d2-3459208210 .stroke-AB5{stroke:#F7F8FE;} + .d2-3459208210 .background-color-N1{background-color:#0A0F25;} + .d2-3459208210 .background-color-N2{background-color:#676C7E;} + .d2-3459208210 .background-color-N3{background-color:#9499AB;} + .d2-3459208210 .background-color-N4{background-color:#CFD2DD;} + .d2-3459208210 .background-color-N5{background-color:#DEE1EB;} + .d2-3459208210 .background-color-N6{background-color:#EEF1F8;} + .d2-3459208210 .background-color-N7{background-color:#FFFFFF;} + .d2-3459208210 .background-color-B1{background-color:#0D32B2;} + .d2-3459208210 .background-color-B2{background-color:#0D32B2;} + .d2-3459208210 .background-color-B3{background-color:#E3E9FD;} + .d2-3459208210 .background-color-B4{background-color:#E3E9FD;} + .d2-3459208210 .background-color-B5{background-color:#EDF0FD;} + .d2-3459208210 .background-color-B6{background-color:#F7F8FE;} + .d2-3459208210 .background-color-AA2{background-color:#4A6FF3;} + .d2-3459208210 .background-color-AA4{background-color:#EDF0FD;} + .d2-3459208210 .background-color-AA5{background-color:#F7F8FE;} + .d2-3459208210 .background-color-AB4{background-color:#EDF0FD;} + .d2-3459208210 .background-color-AB5{background-color:#F7F8FE;} + .d2-3459208210 .color-N1{color:#0A0F25;} + .d2-3459208210 .color-N2{color:#676C7E;} + .d2-3459208210 .color-N3{color:#9499AB;} + .d2-3459208210 .color-N4{color:#CFD2DD;} + .d2-3459208210 .color-N5{color:#DEE1EB;} + .d2-3459208210 .color-N6{color:#EEF1F8;} + .d2-3459208210 .color-N7{color:#FFFFFF;} + .d2-3459208210 .color-B1{color:#0D32B2;} + .d2-3459208210 .color-B2{color:#0D32B2;} + .d2-3459208210 .color-B3{color:#E3E9FD;} + .d2-3459208210 .color-B4{color:#E3E9FD;} + .d2-3459208210 .color-B5{color:#EDF0FD;} + .d2-3459208210 .color-B6{color:#F7F8FE;} + .d2-3459208210 .color-AA2{color:#4A6FF3;} + .d2-3459208210 .color-AA4{color:#EDF0FD;} + .d2-3459208210 .color-AA5{color:#F7F8FE;} + .d2-3459208210 .color-AB4{color:#EDF0FD;} + .d2-3459208210 .color-AB5{color:#F7F8FE;}.appendix text.text{fill:#0A0F25}.md{--color-fg-default:#0A0F25;--color-fg-muted:#676C7E;--color-fg-subtle:#9499AB;--color-canvas-default:#FFFFFF;--color-canvas-subtle:#EEF1F8;--color-border-default:#0D32B2;--color-border-muted:#0D32B2;--color-neutral-muted:#EEF1F8;--color-accent-fg:#0D32B2;--color-accent-emphasis:#0D32B2;--color-attention-subtle:#676C7E;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B2{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B3{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-B6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-AA4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AA5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB4{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-AB5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N1{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N2{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N5{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N6{fill:url(#streaks-bright);mix-blend-mode:darken}.sketch-overlay-N7{fill:url(#streaks-bright);mix-blend-mode:darken}.light-code{display: block}.dark-code{display: none}@media screen and (prefers-color-scheme:dark){ + .d2-3459208210 .fill-N1{fill:#CDD6F4;} + .d2-3459208210 .fill-N2{fill:#BAC2DE;} + .d2-3459208210 .fill-N3{fill:#A6ADC8;} + .d2-3459208210 .fill-N4{fill:#585B70;} + .d2-3459208210 .fill-N5{fill:#45475A;} + .d2-3459208210 .fill-N6{fill:#313244;} + .d2-3459208210 .fill-N7{fill:#1E1E2E;} + .d2-3459208210 .fill-B1{fill:#CBA6f7;} + .d2-3459208210 .fill-B2{fill:#CBA6f7;} + .d2-3459208210 .fill-B3{fill:#6C7086;} + .d2-3459208210 .fill-B4{fill:#585B70;} + .d2-3459208210 .fill-B5{fill:#45475A;} + .d2-3459208210 .fill-B6{fill:#313244;} + .d2-3459208210 .fill-AA2{fill:#f38BA8;} + .d2-3459208210 .fill-AA4{fill:#45475A;} + .d2-3459208210 .fill-AA5{fill:#313244;} + .d2-3459208210 .fill-AB4{fill:#45475A;} + .d2-3459208210 .fill-AB5{fill:#313244;} + .d2-3459208210 .stroke-N1{stroke:#CDD6F4;} + .d2-3459208210 .stroke-N2{stroke:#BAC2DE;} + .d2-3459208210 .stroke-N3{stroke:#A6ADC8;} + .d2-3459208210 .stroke-N4{stroke:#585B70;} + .d2-3459208210 .stroke-N5{stroke:#45475A;} + .d2-3459208210 .stroke-N6{stroke:#313244;} + .d2-3459208210 .stroke-N7{stroke:#1E1E2E;} + .d2-3459208210 .stroke-B1{stroke:#CBA6f7;} + .d2-3459208210 .stroke-B2{stroke:#CBA6f7;} + .d2-3459208210 .stroke-B3{stroke:#6C7086;} + .d2-3459208210 .stroke-B4{stroke:#585B70;} + .d2-3459208210 .stroke-B5{stroke:#45475A;} + .d2-3459208210 .stroke-B6{stroke:#313244;} + .d2-3459208210 .stroke-AA2{stroke:#f38BA8;} + .d2-3459208210 .stroke-AA4{stroke:#45475A;} + .d2-3459208210 .stroke-AA5{stroke:#313244;} + .d2-3459208210 .stroke-AB4{stroke:#45475A;} + .d2-3459208210 .stroke-AB5{stroke:#313244;} + .d2-3459208210 .background-color-N1{background-color:#CDD6F4;} + .d2-3459208210 .background-color-N2{background-color:#BAC2DE;} + .d2-3459208210 .background-color-N3{background-color:#A6ADC8;} + .d2-3459208210 .background-color-N4{background-color:#585B70;} + .d2-3459208210 .background-color-N5{background-color:#45475A;} + .d2-3459208210 .background-color-N6{background-color:#313244;} + .d2-3459208210 .background-color-N7{background-color:#1E1E2E;} + .d2-3459208210 .background-color-B1{background-color:#CBA6f7;} + .d2-3459208210 .background-color-B2{background-color:#CBA6f7;} + .d2-3459208210 .background-color-B3{background-color:#6C7086;} + .d2-3459208210 .background-color-B4{background-color:#585B70;} + .d2-3459208210 .background-color-B5{background-color:#45475A;} + .d2-3459208210 .background-color-B6{background-color:#313244;} + .d2-3459208210 .background-color-AA2{background-color:#f38BA8;} + .d2-3459208210 .background-color-AA4{background-color:#45475A;} + .d2-3459208210 .background-color-AA5{background-color:#313244;} + .d2-3459208210 .background-color-AB4{background-color:#45475A;} + .d2-3459208210 .background-color-AB5{background-color:#313244;} + .d2-3459208210 .color-N1{color:#CDD6F4;} + .d2-3459208210 .color-N2{color:#BAC2DE;} + .d2-3459208210 .color-N3{color:#A6ADC8;} + .d2-3459208210 .color-N4{color:#585B70;} + .d2-3459208210 .color-N5{color:#45475A;} + .d2-3459208210 .color-N6{color:#313244;} + .d2-3459208210 .color-N7{color:#1E1E2E;} + .d2-3459208210 .color-B1{color:#CBA6f7;} + .d2-3459208210 .color-B2{color:#CBA6f7;} + .d2-3459208210 .color-B3{color:#6C7086;} + .d2-3459208210 .color-B4{color:#585B70;} + .d2-3459208210 .color-B5{color:#45475A;} + .d2-3459208210 .color-B6{color:#313244;} + .d2-3459208210 .color-AA2{color:#f38BA8;} + .d2-3459208210 .color-AA4{color:#45475A;} + .d2-3459208210 .color-AA5{color:#313244;} + .d2-3459208210 .color-AB4{color:#45475A;} + .d2-3459208210 .color-AB5{color:#313244;}.appendix text.text{fill:#CDD6F4}.md{--color-fg-default:#CDD6F4;--color-fg-muted:#BAC2DE;--color-fg-subtle:#A6ADC8;--color-canvas-default:#1E1E2E;--color-canvas-subtle:#313244;--color-border-default:#CBA6f7;--color-border-muted:#CBA6f7;--color-neutral-muted:#313244;--color-accent-fg:#CBA6f7;--color-accent-emphasis:#CBA6f7;--color-attention-subtle:#BAC2DE;--color-danger-fg:red;}.sketch-overlay-B1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-B3{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-B5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-B6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-AA4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AA5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB4{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-AB5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N1{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N2{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N3{fill:url(#streaks-normal);mix-blend-mode:color-burn}.sketch-overlay-N4{fill:url(#streaks-dark);mix-blend-mode:overlay}.sketch-overlay-N5{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N6{fill:url(#streaks-darker);mix-blend-mode:lighten}.sketch-overlay-N7{fill:url(#streaks-darker);mix-blend-mode:lighten}.light-code{display: none}.dark-code{display: block}}]]>E-commerceWebsite Storefront + + + + diff --git a/docs/src/content/docs/examples/Attributes/target.md b/docs/src/content/docs/examples/Attributes/target.md index 025d5a8..a81e09a 100644 --- a/docs/src/content/docs/examples/Attributes/target.md +++ b/docs/src/content/docs/examples/Attributes/target.md @@ -4,23 +4,28 @@ title: Target Use the [`target` attribute](/attributes/#target) to define the target board to render when using [composition](https://d2lang.com/tour/composition). -````md title="src/content/docs/example.md" "target=starlight" -```d2 target=starlight +````md title="src/content/docs/example.md" 'target="storefront"' +```d2 target="storefront" # Root board Content -> Website: Astro layers: { - # A different board named "starlight" + # Board named "starlight" that does not inherit anything from root starlight: { Documentation -> Website: Starlight } + + # Board named "storefront" that does not inherit anything from root + storefront: { + E-commerce -> Website: Storefront + } } ``` ```` -The above code block will be rendered as the following diagram with only the `starlight` board being visible: +The above code block will be rendered as the following diagram with only the `storefront` board being visible: -```d2 target=starlight +```d2 target="storefront" # Root board Content -> Website: Astro @@ -29,6 +34,11 @@ layers: { starlight: { Documentation -> Website: Starlight } + + # Board named "storefront" that does not inherit anything from root + storefront: { + E-commerce -> Website: Storefront + } } ``` diff --git a/packages/astro-d2/libs/d2.ts b/packages/astro-d2/libs/d2.ts index 51808b8..796c6e7 100644 --- a/packages/astro-d2/libs/d2.ts +++ b/packages/astro-d2/libs/d2.ts @@ -39,7 +39,7 @@ export async function generateD2Diagram( } if (attributes.target !== undefined) { - extraArgs.push(`--target='${attributes.target}'`) + extraArgs.push(`--target=${attributes.target}`) } if (config.fonts?.regular) { diff --git a/packages/astro-d2/tests/remark.test.ts b/packages/astro-d2/tests/remark.test.ts index 55d63d5..450a4aa 100644 --- a/packages/astro-d2/tests/remark.test.ts +++ b/packages/astro-d2/tests/remark.test.ts @@ -240,12 +240,12 @@ ${defaultDiagram} }) test('uses the `target` attribute if specified', async () => { - await transformMd(`\`\`\`d2 target=root + await transformMd(`\`\`\`d2 target=test ${defaultDiagram} \`\`\` `) - expectD2ToHaveBeenCalledWithArg("--target=''") + expectD2ToHaveBeenCalledWithArg('--target=test') }) test('uses the `width` attribute if specified and computes the height', async () => {