chore: Cleanup

This commit is contained in:
Knut Sveidqvist
2022-10-07 10:40:01 +02:00
parent 66bc844cc9
commit 439274c5ae
14 changed files with 40 additions and 91 deletions

View File

@@ -22,22 +22,22 @@ const packageOptions = {
'mermaid-mindmap': { 'mermaid-mindmap': {
name: 'mermaid-mindmap', name: 'mermaid-mindmap',
packageName: 'mermaid-mindmap', packageName: 'mermaid-mindmap',
file: 'add-diagram.ts', file: 'diagram-definition.ts',
}, },
'mermaid-mindmap-detector': { 'mermaid-mindmap-detector': {
name: 'mermaid-mindmap-detector', name: 'mermaid-mindmap-detector',
packageName: 'mermaid-mindmap', packageName: 'mermaid-mindmap',
file: 'registry.ts', file: 'detector.ts',
}, },
'mermaid-example-diagram': { 'mermaid-example-diagram': {
name: 'mermaid-example-diagram', name: 'mermaid-example-diagram',
packageName: 'mermaid-example-diagram', packageName: 'mermaid-example-diagram',
file: 'add-diagram.ts', file: 'diagram-definition.ts',
}, },
'mermaid-example-diagram-detector': { 'mermaid-example-diagram-detector': {
name: 'mermaid-example-diagram-detector', name: 'mermaid-example-diagram-detector',
packageName: 'mermaid-example-diagram', packageName: 'mermaid-example-diagram',
file: 'registry.ts', file: 'detector.ts',
}, },
}; };

View File

@@ -385,7 +385,7 @@ flowchart TD
htmlLabels: false, htmlLabels: false,
fontFamily: 'courier', fontFamily: 'courier',
}, },
extraDiagrams: ['./mermaid-mindmap-detector.js'], lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'],
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');

View File

@@ -55,10 +55,6 @@
</head> </head>
<body> <body>
<div>Security check</div> <div>Security check</div>
<pre id="diagram" class="mermaid2">
example-diagram
</pre
>
<pre id="diagram" class="mermaid"> <pre id="diagram" class="mermaid">
mindmap mindmap
root root
@@ -85,6 +81,10 @@ mindmap
::icon(mdi mdi-fire) ::icon(mdi mdi-fire)
gc7((grand<br/>grand<br/>child 8)) gc7((grand<br/>grand<br/>child 8))
</pre> </pre>
<pre id="diagram" class="mermaid">
example-diagram
</pre>
<!-- <div id="cy"></div> --> <!-- <div id="cy"></div> -->
<!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> --> <!-- <script src="http://localhost:9000/packages/mermaid-mindmap/dist/mermaid-mindmap-detector.js"></script> -->
<!-- <script src="./mermaid-example-diagram-detector.js"></script> --> <!-- <script src="./mermaid-example-diagram-detector.js"></script> -->
@@ -100,8 +100,11 @@ mindmap
logLevel: 0, logLevel: 0,
// basePath: './packages/', // basePath: './packages/',
// themeVariables: { darkMode: true }, // themeVariables: { darkMode: true },
extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'], lazyLoadedDiagrams: [
// extraDiagrams: ['../../mermaid-mindmap/registry.ts'], './mermaid-mindmap-detector.esm.mjs',
'./mermaid-example-diagram-detector.esm.mjs',
],
// lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'],
}); });
function callback() { function callback() {
alert('It worked'); alert('It worked');

View File

@@ -36,7 +36,7 @@ const contentLoaded = function () {
document.getElementsByTagName('body')[0].appendChild(div); document.getElementsByTagName('body')[0].appendChild(div);
} }
graphObj.mermaid.extraDiagrams = ['/mermaid-mindmap-detector.esm.mjs']; graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs'];
mermaid2.initialize(graphObj.mermaid); mermaid2.initialize(graphObj.mermaid);
mermaid2.init(); mermaid2.init();

View File

@@ -1,3 +1,6 @@
// @ts-ignore: TODO Fix ts errors
export const id = 'example-diagram';
/** /**
* Detector function that will be called by mermaid to determine if the diagram is this type of digram. * Detector function that will be called by mermaid to determine if the diagram is this type of digram.
* *
@@ -8,3 +11,8 @@
export const detector = (txt: string) => { export const detector = (txt: string) => {
return txt.match(/^\s*example-diagram/) !== null; return txt.match(/^\s*example-diagram/) !== null;
}; };
export const loadDiagram = async () => {
const { diagram } = await import('./diagram-definition');
return { id, diagram };
};

View File

@@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer';
import styles from './styles'; import styles from './styles';
import { injectUtils } from './mermaidUtils'; import { injectUtils } from './mermaidUtils';
window.mermaid.connectDiagram( export const diagram = {
'example-diagram', db,
{ renderer,
db, parser,
renderer, styles,
parser, injectUtils,
styles, };
},
injectUtils
);

View File

@@ -1,33 +0,0 @@
// @ts-ignore: TODO Fix ts errors
import { detector } from './exampleDetector';
const scriptElement = document.currentScript as HTMLScriptElement;
const path = scriptElement.src;
const lastSlash = path.lastIndexOf('/');
const baseFolder = lastSlash < 0 ? path : path.substring(0, lastSlash + 1);
if (typeof document !== 'undefined') {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({ id: 'example-diagram', detector });
} else {
window.mermaid = {};
window.mermaid.detectors = [{ id: 'example-diagram', detector }];
}
/*
* Wait for document loaded before starting the execution.
*/
window.addEventListener(
'load',
() => {
if (window.mermaid && typeof window.mermaid.detectors === 'object') {
window.mermaid.detectors.push({
id: 'example-diagram',
detector,
path: baseFolder,
});
}
},
false
);
}

View File

@@ -5,6 +5,6 @@ export const detector = (txt: string) => {
}; };
export const loadDiagram = async () => { export const loadDiagram = async () => {
const { mindmap } = await import('./add-diagram'); const { diagram } = await import('./diagram-definition');
return { id, diagram: mindmap }; return { id, diagram };
}; };

View File

@@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer';
import mindmapStyles from './styles'; import mindmapStyles from './styles';
import { injectUtils } from './mermaidUtils'; import { injectUtils } from './mermaidUtils';
export const mindmap = { export const diagram = {
db: mindmapDb, db: mindmapDb,
renderer: mindmapRenderer, renderer: mindmapRenderer,
parser: mindmapParser, parser: mindmapParser,

View File

@@ -53,29 +53,3 @@ export const injectUtils = (
sanitizeText = _sanitizeText; sanitizeText = _sanitizeText;
setupGraphViewbox = _setupGraphViewbox; 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;
};
*/

View File

@@ -3,7 +3,7 @@
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
export interface MermaidConfig { export interface MermaidConfig {
extraDiagrams?: any; lazyLoadedDiagrams?: any;
theme?: string; theme?: string;
themeVariables?: any; themeVariables?: any;
themeCSS?: string; themeCSS?: string;

View File

@@ -115,7 +115,7 @@ const config: Partial<MermaidConfig> = {
* Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'] * Default value: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize']
*/ */
secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'], secure: ['secure', 'securityLevel', 'startOnLoad', 'maxTextSize'],
extraDiagrams: [], lazyLoadedDiagrams: [],
/** /**
* This option controls if the generated ids of nodes in the SVG are generated randomly or based * This option controls if the generated ids of nodes in the SVG are generated randomly or based
* on a seed. If set to false, the IDs are generated based on the current date and thus are not * on a seed. If set to false, the IDs are generated based on the current date and thus are not

View File

@@ -55,11 +55,11 @@ const init = async function (
try { try {
log.info('Detectors in init', mermaid.detectors); // eslint-disable-line log.info('Detectors in init', mermaid.detectors); // eslint-disable-line
const conf = mermaidAPI.getConfig(); const conf = mermaidAPI.getConfig();
if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) { if (typeof conf.lazyLoadedDiagrams !== 'undefined' && conf.lazyLoadedDiagrams.length > 0) {
// config.extraDiagrams.forEach(async (diagram: string) => { for (let i = 0; i < conf.lazyLoadedDiagrams.length; i++) {
const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]); const { id, detector, loadDiagram } = await import(conf.lazyLoadedDiagrams[i]);
addDetector(id, detector, loadDiagram); addDetector(id, detector, loadDiagram);
// }); }
} }
mermaid.detectors.forEach(({ id, detector, path }) => { mermaid.detectors.forEach(({ id, detector, path }) => {
addDetector(id, detector, path); addDetector(id, detector, path);