md-confluence-mermaid-puppeteer-renderer 5.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +656 -0
- package/README.md +7 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +87 -0
- package/dist/index.js.map +7 -0
- package/dist/mermaid_renderer.html +1684 -0
- package/dist/meta.json +1 -0
- package/esbuild.config.mjs +80 -0
- package/package.json +38 -0
- package/src/index.ts +98 -0
- package/src/mermaid_renderer.js +15 -0
- package/tsconfig.json +13 -0
package/dist/meta.json
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"inputs":{"src/index.ts":{"bytes":2660,"imports":[{"path":"@markdown-confluence/lib","kind":"import-statement","external":true},{"path":"path","kind":"import-statement","external":true},{"path":"puppeteer","kind":"import-statement","external":true},{"path":"puppeteer/lib/esm/puppeteer/node/install.js","kind":"import-statement","external":true},{"path":"url","kind":"import-statement","external":true}],"format":"esm"}},"outputs":{"dist/index.js.map":{"imports":[],"exports":[],"inputs":{},"bytes":4618},"dist/index.js":{"imports":[{"path":"path","kind":"import-statement","external":true},{"path":"puppeteer","kind":"import-statement","external":true},{"path":"puppeteer/lib/esm/puppeteer/node/install.js","kind":"import-statement","external":true},{"path":"url","kind":"import-statement","external":true}],"exports":["PuppeteerMermaidRenderer"],"entryPoint":"src/index.ts","inputs":{"src/index.ts":{"bytesInOutput":2487}},"bytes":2710}}}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import esbuild from "esbuild";
|
|
2
|
+
import process from "process";
|
|
3
|
+
import { writeFileSync } from 'fs';
|
|
4
|
+
import { writeFile } from 'fs/promises';
|
|
5
|
+
import { nodeExternalsPlugin } from 'esbuild-node-externals';
|
|
6
|
+
|
|
7
|
+
const mermaidRendererPlugin = {
|
|
8
|
+
name: 'mermaidRendererPlugin',
|
|
9
|
+
setup(build) {
|
|
10
|
+
build.onEnd(async () => {
|
|
11
|
+
const result = await esbuild.build({
|
|
12
|
+
entryPoints: ['src/mermaid_renderer.js'],
|
|
13
|
+
bundle: true,
|
|
14
|
+
format: 'cjs',
|
|
15
|
+
target: 'chrome106',
|
|
16
|
+
logLevel: 'info',
|
|
17
|
+
sourcemap: false,
|
|
18
|
+
treeShaking: true,
|
|
19
|
+
write: false,
|
|
20
|
+
mainFields: ['module', 'main'],
|
|
21
|
+
minify: true,
|
|
22
|
+
}).catch(() => process.exit(1));
|
|
23
|
+
|
|
24
|
+
const fileContents = `
|
|
25
|
+
<!DOCTYPE html>
|
|
26
|
+
<html>
|
|
27
|
+
<head>
|
|
28
|
+
<meta charset="UTF-8" />
|
|
29
|
+
<title>Mermaid Chart</title>
|
|
30
|
+
</head>
|
|
31
|
+
<body>
|
|
32
|
+
<div id="graphDiv"></div>
|
|
33
|
+
<script type="text/javascript">
|
|
34
|
+
${result.outputFiles[0].text}
|
|
35
|
+
</script>
|
|
36
|
+
</body>
|
|
37
|
+
</html>
|
|
38
|
+
`;
|
|
39
|
+
|
|
40
|
+
writeFile("./dist/mermaid_renderer.html", fileContents);
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const banner =
|
|
46
|
+
`/*
|
|
47
|
+
THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
|
|
48
|
+
if you want to view the source, please visit the github repository of this plugin
|
|
49
|
+
*/
|
|
50
|
+
`;
|
|
51
|
+
|
|
52
|
+
const prod = (process.argv[2] === 'production');
|
|
53
|
+
|
|
54
|
+
const buildConfig = {
|
|
55
|
+
banner: {
|
|
56
|
+
js: banner,
|
|
57
|
+
},
|
|
58
|
+
entryPoints: ['src/index.ts'],
|
|
59
|
+
bundle: true,
|
|
60
|
+
format: 'esm',
|
|
61
|
+
target: 'node16',
|
|
62
|
+
platform: 'node',
|
|
63
|
+
logLevel: "info",
|
|
64
|
+
sourcemap: true,
|
|
65
|
+
treeShaking: false,
|
|
66
|
+
outdir: 'dist',
|
|
67
|
+
mainFields: ['module', 'main'],
|
|
68
|
+
plugins: [mermaidRendererPlugin, nodeExternalsPlugin()],
|
|
69
|
+
minify: false,
|
|
70
|
+
metafile: true,
|
|
71
|
+
|
|
72
|
+
};
|
|
73
|
+
|
|
74
|
+
if (prod) {
|
|
75
|
+
const buildResult = await esbuild.build(buildConfig);
|
|
76
|
+
writeFileSync("./dist/meta.json", JSON.stringify(buildResult.metafile));
|
|
77
|
+
} else {
|
|
78
|
+
const context = await esbuild.context(buildConfig);
|
|
79
|
+
await context.watch();
|
|
80
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "md-confluence-mermaid-puppeteer-renderer",
|
|
3
|
+
"version": "5.6.0",
|
|
4
|
+
"description": "This library allows you to publish your notes to Confluence",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"type": "module",
|
|
9
|
+
"sideEffects": false,
|
|
10
|
+
"scripts": {
|
|
11
|
+
"dev": "node esbuild.config.mjs",
|
|
12
|
+
"build": "tsc && node esbuild.config.mjs production",
|
|
13
|
+
"fmt": "npx prettier --write src/",
|
|
14
|
+
"lint": "eslint --ignore-path ../../.eslintignore --ext .js,.ts src/",
|
|
15
|
+
"prettier-check": "npx prettier --check src/"
|
|
16
|
+
},
|
|
17
|
+
"keywords": [],
|
|
18
|
+
"author": "andymac4182",
|
|
19
|
+
"license": "Apache 2.0",
|
|
20
|
+
"dependencies": {
|
|
21
|
+
"md-confluence-lib": "5.6.0",
|
|
22
|
+
"mermaid": "10.4.0",
|
|
23
|
+
"puppeteer": "21.3.4"
|
|
24
|
+
},
|
|
25
|
+
"publishConfig": {
|
|
26
|
+
"access": "public",
|
|
27
|
+
"registry": "https://registry.npmjs.org/"
|
|
28
|
+
},
|
|
29
|
+
"repository": {
|
|
30
|
+
"type": "git",
|
|
31
|
+
"url": "https://github.com/markdown-confluence/markdown-confluence",
|
|
32
|
+
"directory": "packages/mermaid-puppeteer-renderer"
|
|
33
|
+
},
|
|
34
|
+
"homepage": "https://github.com/markdown-confluence/markdown-confluence/tree/main/packages/mermaid-puppeteer-renderer",
|
|
35
|
+
"bugs": {
|
|
36
|
+
"url": "https://github.com/markdown-confluence/markdown-confluence/issues"
|
|
37
|
+
}
|
|
38
|
+
}
|
package/src/index.ts
ADDED
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { ChartData, MermaidRenderer } from "md-confluence-lib";
|
|
2
|
+
import path from "path";
|
|
3
|
+
import puppeteer, { PuppeteerLaunchOptions } from "puppeteer";
|
|
4
|
+
import { downloadBrowser } from "puppeteer/lib/esm/puppeteer/node/install.js";
|
|
5
|
+
import url from "url";
|
|
6
|
+
|
|
7
|
+
interface RemoteWindowedCustomFunctions {
|
|
8
|
+
renderMermaidChart: (
|
|
9
|
+
mermaidData: string,
|
|
10
|
+
mermaidConfig: unknown,
|
|
11
|
+
) => Promise<{ width: number; height: number }>;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export class PuppeteerMermaidRenderer implements MermaidRenderer {
|
|
15
|
+
async captureMermaidCharts(
|
|
16
|
+
charts: ChartData[],
|
|
17
|
+
): Promise<Map<string, Buffer>> {
|
|
18
|
+
const capturedCharts = new Map<string, Buffer>();
|
|
19
|
+
|
|
20
|
+
await downloadBrowser();
|
|
21
|
+
//for (const chart of charts) {
|
|
22
|
+
const promises = charts.map(async (chart) => {
|
|
23
|
+
const puppeteerLaunchConfig = {
|
|
24
|
+
executablePath: puppeteer.executablePath(),
|
|
25
|
+
headless: "new",
|
|
26
|
+
args: [
|
|
27
|
+
"--ignore-certificate-errors",
|
|
28
|
+
"--no-sandbox",
|
|
29
|
+
"--disable-setuid-sandbox",
|
|
30
|
+
"--disable-accelerated-2d-canvas",
|
|
31
|
+
"--disable-gpu",
|
|
32
|
+
],
|
|
33
|
+
} satisfies PuppeteerLaunchOptions;
|
|
34
|
+
|
|
35
|
+
console.log(
|
|
36
|
+
"LAUNCHING CHROME",
|
|
37
|
+
JSON.stringify(puppeteerLaunchConfig),
|
|
38
|
+
);
|
|
39
|
+
const browser = await puppeteer.launch(puppeteerLaunchConfig);
|
|
40
|
+
|
|
41
|
+
const page = await browser.newPage();
|
|
42
|
+
try {
|
|
43
|
+
const mermaidHTMLPath = path.join(
|
|
44
|
+
__dirname,
|
|
45
|
+
"mermaid_renderer.html",
|
|
46
|
+
);
|
|
47
|
+
const pathToLoad = url.pathToFileURL(mermaidHTMLPath).href;
|
|
48
|
+
|
|
49
|
+
await page.goto(pathToLoad);
|
|
50
|
+
|
|
51
|
+
const mermaidConfig = {
|
|
52
|
+
theme: "base",
|
|
53
|
+
themeVariables: {
|
|
54
|
+
background: "#ffffff",
|
|
55
|
+
mainBkg: "#ddebff",
|
|
56
|
+
primaryColor: "#ddebff",
|
|
57
|
+
primaryTextColor: "#192b50",
|
|
58
|
+
primaryBorderColor: "#0052cc",
|
|
59
|
+
secondaryColor: "#ff8f73",
|
|
60
|
+
secondaryTextColor: "#192b50",
|
|
61
|
+
secondaryBorderColor: "#df360c",
|
|
62
|
+
tertiaryColor: "#c0b6f3",
|
|
63
|
+
tertiaryTextColor: "#fefefe",
|
|
64
|
+
tertiaryBorderColor: "#5243aa",
|
|
65
|
+
noteBkgColor: "#ffc403",
|
|
66
|
+
noteTextColor: "#182a4e",
|
|
67
|
+
textColor: "#ff0000",
|
|
68
|
+
titleColor: "#0052cc",
|
|
69
|
+
},
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
const result = await page.evaluate(
|
|
73
|
+
(mermaidData, mermaidConfig) => {
|
|
74
|
+
const { renderMermaidChart } =
|
|
75
|
+
globalThis as unknown as RemoteWindowedCustomFunctions;
|
|
76
|
+
|
|
77
|
+
return renderMermaidChart(mermaidData, mermaidConfig);
|
|
78
|
+
},
|
|
79
|
+
chart.data,
|
|
80
|
+
mermaidConfig,
|
|
81
|
+
);
|
|
82
|
+
await page.setViewport({
|
|
83
|
+
width: result.width,
|
|
84
|
+
height: result.height,
|
|
85
|
+
});
|
|
86
|
+
const imageBuffer = await page.screenshot();
|
|
87
|
+
capturedCharts.set(chart.name, imageBuffer);
|
|
88
|
+
} finally {
|
|
89
|
+
await page.close();
|
|
90
|
+
await browser.close();
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
|
|
94
|
+
await Promise.all(promises);
|
|
95
|
+
|
|
96
|
+
return capturedCharts;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import mermaid from "mermaid";
|
|
2
|
+
|
|
3
|
+
window.renderMermaidChart = async (chartData, mermaidConfig) => {
|
|
4
|
+
mermaid.initialize({ ...mermaidConfig, startOnLoad: false });
|
|
5
|
+
|
|
6
|
+
const { svg } = await mermaid.render("graphDiv2", chartData);
|
|
7
|
+
const chartElement = document.querySelector("#graphDiv");
|
|
8
|
+
chartElement.innerHTML = svg;
|
|
9
|
+
|
|
10
|
+
const svgElement = document.querySelector("#graphDiv svg");
|
|
11
|
+
return {
|
|
12
|
+
width: svgElement.scrollWidth,
|
|
13
|
+
height: svgElement.scrollHeight,
|
|
14
|
+
};
|
|
15
|
+
};
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
{
|
|
2
|
+
"extends": "../../tsconfig.json",
|
|
3
|
+
"compilerOptions":{
|
|
4
|
+
"baseUrl":".",
|
|
5
|
+
"rootDir": "src",
|
|
6
|
+
"outDir": "dist",
|
|
7
|
+
"declarationDir": "dist",
|
|
8
|
+
"emitDeclarationOnly": true,
|
|
9
|
+
"skipLibCheck": true,
|
|
10
|
+
},
|
|
11
|
+
"include":[ "**/*.ts", "**/*.tsx" ],
|
|
12
|
+
"exclude": ["node_modules", "packages/**/dist/*", "dist/*", "**/*.test.ts", "**/jest.config.ts"]
|
|
13
|
+
}
|