GitHub/mermaid
1
0
Fork 0
mirror of https://github.com/mermaid-js/mermaid.git synced 2025-02-04 07:13:25 +08:00
Code Issues Projects Releases Wiki Activity

Commiton issue #3061 Injecting mermaid utilities in registered diagram

Browse Source
This commit is contained in:
Knut Sveidqvist 2022-09-26 08:01:23 +02:00
parent 493aac6885
commit 9566f51ca8
15 changed files with 197 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
.vite/build.ts
View File

@ -16,14 +16,17 @@ type OutputOptions = Exclude<
const packageOptions = { const packageOptions = {
mermaid: { mermaid: {
name: 'mermaid', name: 'mermaid',
packageName: 'mermaid',
file: 'mermaid.ts', file: 'mermaid.ts',
}, },
'mermaid-mindmap': { 'mermaid-mindmap': {
name: 'mermaid-mindmap', name: 'mermaid-mindmap',
packageName: 'mermaid-mindmap',
file: 'diagram.ts', file: 'diagram.ts',
}, },
'mermaid-mindmap-detector': { 'mermaid-mindmap-detector': {
name: 'mermaid-mindmap-detector', name: 'mermaid-mindmap-detector',
packageName: 'mermaid-mindmap',
file: 'registry.ts', file: 'registry.ts',
}, },
}; };
@ -32,17 +35,13 @@ interface BuildOptions {
minify: boolean | 'esbuild'; minify: boolean | 'esbuild';
core?: boolean; core?: boolean;
watch?: boolean; watch?: boolean;
packageName: keyof typeof packageOptions; entryName: keyof typeof packageOptions;
} }
export const getBuildConfig = ({ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions): InlineConfig => {
minify,
core,
watch,
packageName,
}: BuildOptions): InlineConfig => {
const external = ['require', 'fs', 'path']; const external = ['require', 'fs', 'path'];
const { name, file } = packageOptions[packageName]; console.log(entryName, packageOptions[entryName]);
const { name, file, packageName } = packageOptions[entryName];
let output: OutputOptions = [ let output: OutputOptions = [
{ {
name, name,
@ -105,11 +104,11 @@ export const getBuildConfig = ({
return config; return config;
}; };
const buildPackage = async (packageName: keyof typeof packageOptions) => { const buildPackage = async (entryName: keyof typeof packageOptions) => {
return Promise.allSettled([ return Promise.allSettled([
build(getBuildConfig({ minify: false, packageName })), build(getBuildConfig({ minify: false, entryName })),
build(getBuildConfig({ minify: 'esbuild', packageName })), build(getBuildConfig({ minify: 'esbuild', entryName })),
build(getBuildConfig({ minify: false, core: true, packageName })), build(getBuildConfig({ minify: false, core: true, entryName })),
]); ]);
}; };
@ -121,7 +120,7 @@ const main = async () => {
}; };
if (watch) { if (watch) {
build(getBuildConfig({ minify: false, watch, packageName: 'mermaid' })); build(getBuildConfig({ minify: false, watch, entryName: 'mermaid' }));
} else { } else {
void main(); void main();
} }

15
cypress/platform/knsv2.html
View File

@ -45,12 +45,17 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<pre id="diagram" class="mermaid2">
flowchart LR
A --> B
</pre>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
mindmap mindmap
root root
ch1 ch1
ch2 ch2
</pre> </pre>
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script>
<script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script> <script src="./packages/mermaid-mindmap/dist/mermaid-mindmap.js"></script>
<script src="./packages/mermaid/dist/mermaid.js"></script> <script src="./packages/mermaid/dist/mermaid.js"></script>
<script> <script>
@ -58,20 +63,14 @@
// console.error('Mermaid error: ', err); // console.error('Mermaid error: ', err);
}; };
mermaid.initialize({ mermaid.initialize({
startOnLoad: false, startOnLoad: true,
logLevel: 0, logLevel: 0,
basePath: './packages/',
// themeVariables: {relationLabelColor: 'red'} // themeVariables: {relationLabelColor: 'red'}
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');
} }
// document.querySelector('#diagram').innerHTML = diagram;
try {
mermaid.initThrowsErrors(undefined, '#diagram');
} catch (err) {
console.log('Caught error:', err);
}
</script> </script>
</body> </body>
</html> </html>

18
packages/mermaid-mindmap-detector/src/registry.ts
View File

@ -1,18 +0,0 @@
// @ts-ignore: TODO Fix ts errors
import { mindmapDetector } from './mindmapDetector';
if (typeof document !== 'undefined') {
/*!
* Wait for document loaded before starting the execution
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push(mindmapDetector);
console.log(window.mermaid.detectors); // eslint-disable-line no-console
}
},
false
);
}

18
packages/mermaid-mindmap/src/diagram.ts
View File

@ -3,7 +3,7 @@ import mindmapParser from './parser/mindmap';
import * as mindmapDb from './mindmapDb'; import * as mindmapDb from './mindmapDb';
import mindmapRenderer from './mindmapRenderer'; import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles'; import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils';
// import mermaid from 'mermaid'; // import mermaid from 'mermaid';
// console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console // console.log('mindmapDb', mindmapDb.getMindmap()); // eslint-disable-line no-console
@ -13,12 +13,22 @@ if (typeof document !== 'undefined') {
/*! /*!
* Wait for document loaded before starting the execution * Wait for document loaded before starting the execution
*/ */
// { parser: mindmapParser, db: mindmapDb, renderer: mindmapRenderer, styles: mindmapStyles },
window.addEventListener( window.addEventListener(
'load', 'load',
() => { () => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') { if (window.mermaid && typeof window.mermaid.c) {
// window.mermaid.detectors.push(mindmapDetector); window.mermaid.connectDiagram(
console.log(window.mermaid.detectors); // eslint-disable-line no-console 'mindmap',
{
db: mindmapDb,
renderer: mindmapRenderer,
parser: mindmapParser,
styles: mindmapStyles,
},
injectUtils
);
} }
}, },
false false

77
packages/mermaid-mindmap/src/mermaidUtils.ts Normal file
View File

@ -0,0 +1,77 @@
const warning = (s: string) => {
// Todo remove debug code
console.error('Log function was called before initialization', s); // eslint-disable-line
};
export type LogLevel = 'trace' | 'debug' | 'info' | 'warn' | 'error' | 'fatal';
export const LEVELS: Record<LogLevel, number> = {
trace: 0,
debug: 1,
info: 2,
warn: 3,
error: 4,
fatal: 5,
};
export const log: Record<keyof typeof LEVELS, typeof console.log> = {
trace: warning,
debug: warning,
info: warning,
warn: warning,
error: warning,
fatal: warning,
};
export let setLogLevel: (level: keyof typeof LEVELS | number | string) => void;
export let getConfig: () => object;
export let sanitizeText: (str: string) => string;
// eslint-disable @typescript-eslint/no-explicit-any
export let setupGraphViewbox: (
graph: any,
svgElem: any,
padding: any,
useMaxWidth: boolean
) => void;
export const injectUtils = (
_log: Record<keyof typeof LEVELS, typeof console.log>,
_setLogLevel: any,
_getConfig: any,
_sanitizeText: any,
_setupGraphViewbox: any
) => {
log.debug = _log.debug;
log.info = _log.info;
log.warn = _log.warn;
log.error = _log.error;
setLogLevel = _setLogLevel;
getConfig = _getConfig;
sanitizeText = _sanitizeText;
setupGraphViewbox = _setupGraphViewbox;
};
/*
const warning = (..._args: any[]) => {
console.error('Log function was called before initialization');
};
export let log = {
trace: warning,
debug: warning,
info: warning,
warn: warning,
error: warning,
fatal: warning,
};
export let setLogLevel;
export let getConfig;
export let sanitizeText;
export let setupGraphViewbox;
export const injectUtils = (_log, _setLogLevel, _getConfig, _sanitizeText, _setupGraphViewbox) => {
log = _log;
setLogLevel = _setLogLevel;
getConfig = _getConfig;
sanitizeText = _sanitizeText;
setupGraphViewbox = _setupGraphViewbox;
};
*/

3
packages/mermaid-mindmap/src/mindmapDb.js
View File

@ -1,5 +1,5 @@
/** Created by knut on 15-01-14. */ /** Created by knut on 15-01-14. */
import { sanitizeText, getConfig, log as _log } from 'mermaid/diagramAPI'; import { sanitizeText, getConfig, log as _log } from './mermaidUtils';
let nodes = []; let nodes = [];
let cnt = 0; let cnt = 0;
@ -133,6 +133,7 @@ export const type2Str = (type) => {
}; };
// Expose logger to grammar // Expose logger to grammar
export const log = _log; export const log = _log;
export let graphType = 'mindmap';
export const getNodeById = (id) => nodes[id]; export const getNodeById = (id) => nodes[id];
export const getElementById = (id) => elements[id]; export const getElementById = (id) => elements[id];
// export default { // export default {

2
packages/mermaid-mindmap/src/mindmapRenderer.js
View File

@ -1,6 +1,6 @@
/** Created by knut on 14-12-11. */ /** Created by knut on 14-12-11. */
import { select } from 'd3'; import { select } from 'd3';
import { log, getConfig, setupGraphViewbox } from '../../diagram-api/diagramAPI'; import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
import svgDraw from './svgDraw'; import svgDraw from './svgDraw';
import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout'; import { BoundingBox, Layout } from 'non-layered-tidy-tree-layout';
import clone from 'fast-clone'; import clone from 'fast-clone';

46
packages/mermaid-mindmap/src/registry.ts
View File

@ -1,27 +1,27 @@
// @ts-ignore: TODO Fix ts errors // @ts-ignore: TODO Fix ts errors
// import mindmapParser from './parser/mindmap';
// import * as mindmapDb from './mindmapDb';
import { mindmapDetector } from './mindmapDetector'; import { mindmapDetector } from './mindmapDetector';
// import mindmapRenderer from './mindmapRenderer';
// import mindmapStyles from './styles';
import mermaid from 'mermaid'; if (typeof document !== 'undefined') {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
} else {
console.error('window.mermaid.detectors not found'); // eslint-disable-line no-console
window.mermaid = {};
window.mermaid.detectors = [{ id: 'mindmap', detector: mindmapDetector }];
console.error('Detectors now:', window.mermaid.detectors); // eslint-disable-line no-console
}
console.log('mindmapDb', mermaid.mermaidAPI.getConfig()); // eslint-disable-line no-console /*!
// registerDiagram() * Wait for document loaded before starting the execution.
*/
// if (typeof document !== 'undefined') { window.addEventListener(
// /*! 'load',
// * Wait for document loaded before starting the execution () => {
// */ if (window.mermaid && typeof window.mermaid.detectors === 'object') {
// window.addEventListener( window.mermaid.detectors.push({ id: 'mindmap', detector: mindmapDetector });
// 'load', // console.error(window.mermaid.detectors); // eslint-disable-line no-console
// () => { }
// if (window.mermaid && typeof window.mermaid.detectors === 'object') { },
// window.mermaid.detectors.push(mindmapDetector); false
// console.log(window.mermaid.detectors); // eslint-disable-line no-console );
// } }
// },
// false
// );
// }

20
packages/mermaid/src/Diagram.ts
View File

@ -26,12 +26,20 @@ export class Diagram {
log.debug('Initialized diagram ' + this.type, cnf); log.debug('Initialized diagram ' + this.type, cnf);
} }
this.txt += '\n'; this.txt += '\n';
this.parser.parser.yy.graphType = this.type; try {
this.parser.parser.yy.parseError = (str: string, hash: string) => { this.parser.parser.yy.graphType = this.type;
const error = { str, hash }; this.parser.parser.yy.parseError = (str: string, hash: string) => {
throw error; const error = { str, hash };
}; throw error;
this.parse(this.txt, parseError); };
} catch (error) {
log.error('error', error);
}
try {
this.parse(this.txt, parseError);
} catch (error) {
log.error('error', error);
}
} }
// eslint-disable-next-line @typescript-eslint/ban-types // eslint-disable-next-line @typescript-eslint/ban-types

18
packages/mermaid/src/diagram-api/diagramAPI.ts
View File

@ -27,18 +27,32 @@ export interface DiagramDefinition {
} }
const diagrams: Record<string, DiagramDefinition> = {}; const diagrams: Record<string, DiagramDefinition> = {};
const connectCallbacks: Record<string, any> = {}; // TODO fix, eslint-disable-line @typescript-eslint/no-explicit-any
export interface Detectors {
[key: string]: DiagramDetector;
}
export const registerDetector = (id: string, detector: DiagramDetector) => {
addDetector(id, detector);
};
export const registerDiagram = ( export const registerDiagram = (
id: string, id: string,
diagram: DiagramDefinition, diagram: DiagramDefinition,
detector: DiagramDetector callback: (
_log: any,
_setLogLevel: any,
_getConfig: any,
_sanitizeText: any,
_setupGraphViewbox: any
) => void
) => { ) => {
if (diagrams[id]) { if (diagrams[id]) {
log.warn(`Diagram ${id} already registered.`); log.warn(`Diagram ${id} already registered.`);
} }
diagrams[id] = diagram; diagrams[id] = diagram;
addDetector(id, detector);
addStylesForDiagram(id, diagram.styles); addStylesForDiagram(id, diagram.styles);
connectCallbacks[id] = callback;
}; };
export const getDiagram = (name: string): DiagramDefinition => { export const getDiagram = (name: string): DiagramDefinition => {

31
packages/mermaid/src/mermaid.ts
View File

@ -6,6 +6,15 @@ import { MermaidConfig } from './config.type';
import { log } from './logger'; import { log } from './logger';
import utils from './utils'; import utils from './utils';
import { mermaidAPI } from './mermaidAPI'; import { mermaidAPI } from './mermaidAPI';
import { addDetector } from './diagram-api/detectType';
import {
registerDiagram,
DiagramDefinition,
setLogLevel,
getConfig,
setupGraphViewbox,
sanitizeText,
} from './diagram-api/diagramAPI';
import { isDetailedError } from './utils'; import { isDetailedError } from './utils';
/** /**
@ -44,6 +53,10 @@ const init = function (
callback?: Function callback?: Function
) { ) {
try { try {
console.error('Detectors in init', mermaid.detectors); // eslint-disable-line
mermaid.detectors.forEach(({ id, detector }) => {
addDetector(id, detector);
});
initThrowsErrors(config, nodes, callback); initThrowsErrors(config, nodes, callback);
} catch (e) { } catch (e) {
log.warn('Syntax Error rendering'); log.warn('Syntax Error rendering');
@ -197,6 +210,22 @@ const parse = (txt: string) => {
return mermaidAPI.parse(txt, mermaid.parseError); return mermaidAPI.parse(txt, mermaid.parseError);
}; };
const connectDiagram = (
id: string,
diagram: DiagramDefinition,
callback: (
_log: any,
_setLogLevel: any,
_getConfig: any,
_sanitizeText: any,
_setupGraphViewbox: any
) => void
) => {
registerDiagram(id, diagram, callback);
// Todo move this connect call to after the diagram is actually loaded
callback(log, setLogLevel, getConfig, sanitizeText, setupGraphViewbox);
};
const mermaid: { const mermaid: {
startOnLoad: boolean; startOnLoad: boolean;
diagrams: any; diagrams: any;
@ -212,6 +241,7 @@ const mermaid: {
setParseErrorHandler: typeof setParseErrorHandler; setParseErrorHandler: typeof setParseErrorHandler;
// Array of functions to use for detecting diagram types // Array of functions to use for detecting diagram types
detectors: Array<any>; // eslint-disable-line @typescript-eslint/no-explicit-any detectors: Array<any>; // eslint-disable-line @typescript-eslint/no-explicit-any
connectDiagram: (id: string, diagram: DiagramDefinition, callback: (id: string) => void) => void;
} = { } = {
startOnLoad: true, startOnLoad: true,
diagrams: {}, diagrams: {},
@ -225,6 +255,7 @@ const mermaid: {
contentLoaded, contentLoaded,
setParseErrorHandler, setParseErrorHandler,
detectors: [], detectors: [],
connectDiagram: connectDiagram,
}; };
export default mermaid; export default mermaid;

1
packages/mermaid/src/utils.ts
View File

@ -72,7 +72,6 @@ const directiveWithoutOpen =
* g-->h * g-->h
* ``` * ```
* @param {string} text The text defining the graph * @param {string} text The text defining the graph
* @param {any} config
* @returns {object} The json object representing the init passed to mermaid.initialize() * @returns {object} The json object representing the init passed to mermaid.initialize()
*/ */
export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig { export const detectInit = function (text: string, config?: MermaidConfig): MermaidConfig {

0
packages/mermaid-mindmap-detector/package.json → packages/rm-mermaid-mindmap-detector/package.json
View File

0
packages/mermaid-mindmap-detector/src/mindmapDetector.ts → packages/rm-mermaid-mindmap-detector/src/mindmapDetector.ts
View File

0
packages/mermaid-mindmap-detector/tsconfig.json → packages/rm-mermaid-mindmap-detector/tsconfig.json
View File