Skip to content

Commit

Permalink
WIP
Browse files Browse the repository at this point in the history
  • Loading branch information
@remcohaszing
remcohaszing committed Aug 30, 2022
1 parent cc6a7e1 commit eb1da9a
Show file tree
Hide file tree
Showing 13 changed files with 2,293 additions and 4,696 deletions.
4 changes: 0 additions & 4 deletions .eslintrc.yaml
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
extends:
- remcohaszing
- remcohaszing/jest
rules:
import/extensions: off
import/no-unresolved: off
2 changes: 1 addition & 1 deletion .github/workflows/ci.yml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [12, 14, 16]
node-version: [14, 16]
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
Expand Down
10 changes: 5 additions & 5 deletions __fixtures__/fontawesome/output.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ It is possible to add icons from fontawesome.

The icons are acessed via the syntax `fa:#icon class name#`.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="144" fill="#333" font-family="&quot;trebuchet ms&quot;,verdana,arial,sans-serif" font-size="16px" style="max-width:322.046875px" viewBox="0 0 322.047 144">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" height="144" fill="#333" font-family="&quot;trebuchet ms&quot;,verdana,arial,sans-serif" font-size="16px" style="max-width:321.15625px" viewBox="0 0 321.156 144">
<defs>
<path id="b" stroke-dasharray="1,0" d="m0 0 10 5-10 5z"/>
</defs>
Expand All @@ -25,7 +25,7 @@ The icons are acessed via the syntax `fa:#icon class name#`.
</defs>
</g>
<g opacity="1">
<path fill="none" stroke="#333" stroke-width="2px" marker-end="url(#d)" d="m201.617 45.632 10.693 4.395c10.693 4.394 32.078 13.184 42.77 21.745 10.693 8.561 10.693 16.895 10.693 21.061V97"/>
<path fill="none" stroke="#333" stroke-width="2px" marker-end="url(#d)" d="m201.617 45.707 10.619 4.382c10.618 4.382 31.855 13.147 42.474 21.695 10.618 8.55 10.618 16.883 10.618 21.05V97"/>
<defs>
<marker id="d" markerHeight="6" markerUnits="strokeWidth" markerWidth="8" orient="auto" refX="9" refY="5" viewBox="0 0 10 10">
<use xlink:href="#b" stroke-dasharray="1,0"/>
Expand Down Expand Up @@ -73,9 +73,9 @@ The icons are acessed via the syntax `fa:#icon class name#`.
</div>
</foreignObject>
</g>
<g opacity="1" transform="translate(265.773 116.5)">
<rect width="96.547" height="39" x="-48.273" y="-19.5" fill="#ececff" stroke="#9370db" stroke-width="1px" rx="5" ry="5"/>
<foreignObject width="76.547" height="19" transform="translate(-38.273 -9.5)" color="#333" style="text-align:center">
<g opacity="1" transform="translate(265.328 116.5)">
<rect width="95.656" height="39" x="-47.828" y="-19.5" fill="#ececff" stroke="#9370db" stroke-width="1px" rx="5" ry="5"/>
<foreignObject width="75.656" height="19" transform="translate(-37.828 -9.5)" color="#333" style="text-align:center">
<div xmlns="http://www.w3.org/1999/xhtml" display="inline-block" style="white-space:nowrap">
A
<i/>
Expand Down
2 changes: 1 addition & 1 deletion __fixtures__/gantt/output.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,6 @@
<text x="450" y="279.5" fill="#000" font-size="11" text-anchor="end">Add to mermaid </text>
<text x="10" y="98" dy="0em" font-family="var(--mermaid-font-family)" font-size="11"><tspan x="10" alignment-baseline="central">A section</tspan></text>
<text x="10" y="218" dy="0em" font-family="var(--mermaid-font-family)" font-size="11"><tspan x="10" alignment-baseline="central">Critical tasks</tspan></text>
<line x1="77967" x2="77967" y1="25" y2="315" fill="none" stroke="red" stroke-width="2px"/>
<line x1="85747" x2="85747" y1="25" y2="315" fill="none" stroke="red" stroke-width="2px"/>
<text x="292" y="25" font-family="var(--mermaid-font-family)" font-size="18px" text-anchor="middle">Adding GANTT diagram functionality to mermaid</text>
</svg>
60 changes: 30 additions & 30 deletions __fixtures__/multiple/output.md
View file

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions __fixtures__/sequence/output.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,13 @@
</defs>
<line x1="75" x2="75" y1="5" y2="522" fill="#ececff" stroke="#dacef3" stroke-width="2px"/>
<rect width="150" height="65" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="75" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="75" fill="#000" stroke="none" dy="0">Alice</tspan></text>
<text x="75" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="75" fill="#000" stroke="none" dy="0">Alice</tspan></text>
<line x1="275" x2="275" y1="5" y2="522" fill="#ececff" stroke="#dacef3" stroke-width="2px"/>
<rect width="150" height="65" x="200" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="275" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="275" fill="#000" stroke="none" dy="0">Bob</tspan></text>
<text x="275" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="275" fill="#000" stroke="none" dy="0">Bob</tspan></text>
<line x1="475" x2="475" y1="5" y2="522" fill="#ececff" stroke="#dacef3" stroke-width="2px"/>
<rect width="150" height="65" x="400" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="475" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="475" fill="#000" stroke="none" dy="0">John</tspan></text>
<text x="475" y="32.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="475" fill="#000" stroke="none" dy="0">John</tspan></text>
<defs>
<marker markerHeight="12" markerUnits="userSpaceOnUse" markerWidth="12" orient="auto" refX="9" refY="5">
<path stroke="#333" d="m0 0 10 5-10 5z"/>
Expand Down Expand Up @@ -66,9 +66,9 @@
<text x="375" y="449" stroke="#333" alignment-baseline="middle" dominant-baseline="middle" dy="1em" font-weight="400" text-anchor="middle">Jolly good!</text>
<line x1="275" x2="475" y1="482" y2="482" fill="none" stroke="#333" stroke-dasharray="3,3" stroke-width="1.5"/>
<rect width="150" height="65" y="502" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="75" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="75" fill="#000" stroke="none" dy="0">Alice</tspan></text>
<text x="75" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="75" fill="#000" stroke="none" dy="0">Alice</tspan></text>
<rect width="150" height="65" x="200" y="502" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="275" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="275" fill="#000" stroke="none" dy="0">Bob</tspan></text>
<text x="275" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="275" fill="#000" stroke="none" dy="0">Bob</tspan></text>
<rect width="150" height="65" x="400" y="502" fill="#ececff" stroke="#dacef3" rx="3" ry="3"/>
<text x="475" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,sans-serif" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="475" fill="#000" stroke="none" dy="0">John</tspan></text>
<text x="475" y="534.5" fill="#ececff" stroke="#dacef3" alignment-baseline="central" dominant-baseline="central" font-family="Open-Sans,&quot;sans-serif&quot;" font-size="14px" font-weight="400" text-anchor="middle"><tspan x="475" fill="#000" stroke="none" dy="0">John</tspan></text>
</svg>
2 changes: 2 additions & 0 deletions __tests__/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ import * as puppeteer from 'puppeteer';
import * as rehypeStringify from 'rehype-stringify';
import * as remark from 'remark';
import * as remarkRehype from 'remark-rehype';
import { test } from 'uvu';
import * as assert from 'uvu/assert';

import { defaultSVGOOptions, remarkMermaid, RemarkMermaidOptions } from '../src';

Expand Down
34 changes: 19 additions & 15 deletions src/index.ts → index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,17 @@
import { resolve } from 'path';
import { pathToFileURL } from 'url';
import { createRequire } from 'module';

import * as fromParse5 from 'hast-util-from-parse5';
import { Code, Parent } from 'mdast';
import { fromParse5 } from 'hast-util-from-parse5';
import { Code, Parent, Root } from 'mdast';
import { Mermaid } from 'mermaid';
import { parseFragment } from 'parse5';
import * as puppeteer from 'puppeteer';
import { optimize, OptimizeOptions } from 'svgo';
import { Attacher } from 'unified';
import * as visit from 'unist-util-visit';
import puppeteer from 'puppeteer';
import { optimize, OptimizedSvg, OptimizeOptions } from 'svgo';
import { Plugin } from 'unified';
import { visit } from 'unist-util-visit';

const mermaidScript = {
path: createRequire(import.meta.url).resolve('mermaid/dist/mermaid.min.js'),
};

type Theme = 'dark' | 'default' | 'forest' | 'neutral';

Expand Down Expand Up @@ -101,7 +104,7 @@ export interface RemarkMermaidOptions {
/**
* @param options Options that may be used to tweak the output.
*/
export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
export const remarkMermaid: Plugin<[RemarkMermaidOptions?], Root> = ({
launchOptions = { args: ['--no-sandbox', '--disable-setuid-sandbox'] },
svgo = defaultSVGOOptions,
theme = 'default',
Expand All @@ -112,8 +115,8 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
return async function transformer(ast) {
const instances: [string, number, Parent][] = [];

visit<Code>(ast, { type: 'code', lang: 'mermaid' }, (node, index, parent) => {
instances.push([node.value, index, parent as Parent]);
visit(ast, { type: 'code', lang: 'mermaid' }, (node: Code, index, parent: Parent) => {
instances.push([node.value, index, parent]);
});

// Nothing to do. No need to start puppeteer in this case.
Expand All @@ -127,16 +130,17 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
let page: puppeteer.Page | undefined;
try {
page = await browser.newPage();
await page.goto(String(pathToFileURL(resolve(__dirname, '..', 'index.html'))));
await page.addScriptTag({ path: require.resolve('mermaid/dist/mermaid.min.js') });
await page.goto(String(new URL('index.html', import.meta.url)));
await page.addScriptTag(mermaidScript);
await page.setViewport({ width: 600, height: 3000 });

const results = await page.evaluate(
// We can’t calculate coverage on this function, as it’s run by Chrome, not Jest.
/* istanbul ignore next */
(codes: string[], t: Theme) =>
(codes, t) =>
codes.map((code) => {
const id = 'a';
// @ts-expect-error The mermaid types are wrong.
mermaid.initialize({ theme: t });
const div = document.createElement('div');
div.innerHTML = mermaid.render(id, code);
Expand All @@ -149,7 +153,7 @@ export const remarkMermaid: Attacher<[RemarkMermaidOptions?]> = ({
instances.map(([, index, parent], i) => {
let value = results[i];
if (svgo) {
value = optimize(value, svgo).data;
value = (optimize(value, svgo) as OptimizedSvg).data;
}
parent.children.splice(index, 1, {
type: 'paragraph',
Expand Down
Loading

0 comments on commit eb1da9a

Please sign in to comment.