From 439274c5ae1f2bf195b7ed1fc63a2a8ea48ee6d5 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 7 Oct 2022 10:40:01 +0200 Subject: [PATCH 1/3] chore: Cleanup --- .vite/build.ts | 8 ++--- cypress/platform/knsv.html | 2 +- cypress/platform/knsv2.html | 15 +++++---- cypress/platform/viewer.js | 2 +- .../src/{exampleDetector.ts => detector.ts} | 8 +++++ .../{add-diagram.ts => diagram-definition.ts} | 17 ++++------ .../mermaid-example-diagram/src/registry.ts | 33 ------------------- .../src/{registry.ts => detector.ts} | 4 +-- .../{add-diagram.ts => diagram-definition.ts} | 2 +- packages/mermaid-mindmap/src/mermaidUtils.ts | 26 --------------- .../mermaid-mindmap/src/mindmapDetector.ts | 0 packages/mermaid/src/config.type.ts | 2 +- packages/mermaid/src/defaultConfig.ts | 2 +- packages/mermaid/src/mermaid.ts | 10 +++--- 14 files changed, 40 insertions(+), 91 deletions(-) rename packages/mermaid-example-diagram/src/{exampleDetector.ts => detector.ts} (62%) rename packages/mermaid-example-diagram/src/{add-diagram.ts => diagram-definition.ts} (66%) delete mode 100644 packages/mermaid-example-diagram/src/registry.ts rename packages/mermaid-mindmap/src/{registry.ts => detector.ts} (65%) rename packages/mermaid-mindmap/src/{add-diagram.ts => diagram-definition.ts} (93%) delete mode 100644 packages/mermaid-mindmap/src/mindmapDetector.ts diff --git a/.vite/build.ts b/.vite/build.ts index 6855d3e484..7398d30d5a 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -22,22 +22,22 @@ const packageOptions = { 'mermaid-mindmap': { name: 'mermaid-mindmap', packageName: 'mermaid-mindmap', - file: 'add-diagram.ts', + file: 'diagram-definition.ts', }, 'mermaid-mindmap-detector': { name: 'mermaid-mindmap-detector', packageName: 'mermaid-mindmap', - file: 'registry.ts', + file: 'detector.ts', }, 'mermaid-example-diagram': { name: 'mermaid-example-diagram', packageName: 'mermaid-example-diagram', - file: 'add-diagram.ts', + file: 'diagram-definition.ts', }, 'mermaid-example-diagram-detector': { name: 'mermaid-example-diagram-detector', packageName: 'mermaid-example-diagram', - file: 'registry.ts', + file: 'detector.ts', }, }; diff --git a/cypress/platform/knsv.html b/cypress/platform/knsv.html index 8bd8d7c791..f6ee1ef03a 100644 --- a/cypress/platform/knsv.html +++ b/cypress/platform/knsv.html @@ -385,7 +385,7 @@ htmlLabels: false, fontFamily: 'courier', }, - extraDiagrams: ['./mermaid-mindmap-detector.js'], + lazyLoadedDiagrams: ['./mermaid-mindmap-detector.js'], }); function callback() { alert('It worked'); diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index ca2333cd58..c3c752f9f3 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -55,10 +55,6 @@
Security check
- 
-example-diagram
-        
 mindmap
   root
@@ -85,6 +81,10 @@
         ::icon(mdi mdi-fire)
           gc7((grand
grand
child 8))
+ 
+      example-diagram
+
+ @@ -100,8 +100,11 @@ logLevel: 0, // basePath: './packages/', // themeVariables: { darkMode: true }, - extraDiagrams: ['./mermaid-mindmap-detector.esm.mjs'], - // extraDiagrams: ['../../mermaid-mindmap/registry.ts'], + lazyLoadedDiagrams: [ + './mermaid-mindmap-detector.esm.mjs', + './mermaid-example-diagram-detector.esm.mjs', + ], + // lazyLoadedDiagrams: ['../../mermaid-mindmap/registry.ts'], }); function callback() { alert('It worked'); diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index ce1ccc94f2..f0426dc096 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -36,7 +36,7 @@ const contentLoaded = function () { 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.init(); diff --git a/packages/mermaid-example-diagram/src/exampleDetector.ts b/packages/mermaid-example-diagram/src/detector.ts similarity index 62% rename from packages/mermaid-example-diagram/src/exampleDetector.ts rename to packages/mermaid-example-diagram/src/detector.ts index 55fbfe2e35..4d857ac26c 100644 --- a/packages/mermaid-example-diagram/src/exampleDetector.ts +++ b/packages/mermaid-example-diagram/src/detector.ts @@ -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. * @@ -8,3 +11,8 @@ export const detector = (txt: string) => { return txt.match(/^\s*example-diagram/) !== null; }; + +export const loadDiagram = async () => { + const { diagram } = await import('./diagram-definition'); + return { id, diagram }; +}; diff --git a/packages/mermaid-example-diagram/src/add-diagram.ts b/packages/mermaid-example-diagram/src/diagram-definition.ts similarity index 66% rename from packages/mermaid-example-diagram/src/add-diagram.ts rename to packages/mermaid-example-diagram/src/diagram-definition.ts index ec32ed8380..c31b3d6e71 100644 --- a/packages/mermaid-example-diagram/src/add-diagram.ts +++ b/packages/mermaid-example-diagram/src/diagram-definition.ts @@ -5,13 +5,10 @@ import renderer from './exampleDiagramRenderer'; import styles from './styles'; import { injectUtils } from './mermaidUtils'; -window.mermaid.connectDiagram( - 'example-diagram', - { - db, - renderer, - parser, - styles, - }, - injectUtils -); +export const diagram = { + db, + renderer, + parser, + styles, + injectUtils, +}; diff --git a/packages/mermaid-example-diagram/src/registry.ts b/packages/mermaid-example-diagram/src/registry.ts deleted file mode 100644 index 92ff3bd002..0000000000 --- a/packages/mermaid-example-diagram/src/registry.ts +++ /dev/null @@ -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 - ); -} diff --git a/packages/mermaid-mindmap/src/registry.ts b/packages/mermaid-mindmap/src/detector.ts similarity index 65% rename from packages/mermaid-mindmap/src/registry.ts rename to packages/mermaid-mindmap/src/detector.ts index a76a3627f9..af7002b3c5 100644 --- a/packages/mermaid-mindmap/src/registry.ts +++ b/packages/mermaid-mindmap/src/detector.ts @@ -5,6 +5,6 @@ export const detector = (txt: string) => { }; export const loadDiagram = async () => { - const { mindmap } = await import('./add-diagram'); - return { id, diagram: mindmap }; + const { diagram } = await import('./diagram-definition'); + return { id, diagram }; }; diff --git a/packages/mermaid-mindmap/src/add-diagram.ts b/packages/mermaid-mindmap/src/diagram-definition.ts similarity index 93% rename from packages/mermaid-mindmap/src/add-diagram.ts rename to packages/mermaid-mindmap/src/diagram-definition.ts index c8ade1bfa4..e7856289d8 100644 --- a/packages/mermaid-mindmap/src/add-diagram.ts +++ b/packages/mermaid-mindmap/src/diagram-definition.ts @@ -5,7 +5,7 @@ import mindmapRenderer from './mindmapRenderer'; import mindmapStyles from './styles'; import { injectUtils } from './mermaidUtils'; -export const mindmap = { +export const diagram = { db: mindmapDb, renderer: mindmapRenderer, parser: mindmapParser, diff --git a/packages/mermaid-mindmap/src/mermaidUtils.ts b/packages/mermaid-mindmap/src/mermaidUtils.ts index a65523f0cd..7d8ac38bf5 100644 --- a/packages/mermaid-mindmap/src/mermaidUtils.ts +++ b/packages/mermaid-mindmap/src/mermaidUtils.ts @@ -53,29 +53,3 @@ export const injectUtils = ( 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; -}; -*/ diff --git a/packages/mermaid-mindmap/src/mindmapDetector.ts b/packages/mermaid-mindmap/src/mindmapDetector.ts deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/mermaid/src/config.type.ts b/packages/mermaid/src/config.type.ts index b757eb8deb..1059d5709b 100644 --- a/packages/mermaid/src/config.type.ts +++ b/packages/mermaid/src/config.type.ts @@ -3,7 +3,7 @@ import DOMPurify from 'dompurify'; export interface MermaidConfig { - extraDiagrams?: any; + lazyLoadedDiagrams?: any; theme?: string; themeVariables?: any; themeCSS?: string; diff --git a/packages/mermaid/src/defaultConfig.ts b/packages/mermaid/src/defaultConfig.ts index a900018749..710557bd98 100644 --- a/packages/mermaid/src/defaultConfig.ts +++ b/packages/mermaid/src/defaultConfig.ts @@ -115,7 +115,7 @@ const config: Partial = { * Default value: ['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 * on a seed. If set to false, the IDs are generated based on the current date and thus are not diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 07bd2ccfe5..7ddbc9f06f 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -55,11 +55,11 @@ const init = async function ( try { log.info('Detectors in init', mermaid.detectors); // eslint-disable-line const conf = mermaidAPI.getConfig(); - if (typeof conf.extraDiagrams !== 'undefined' && conf.extraDiagrams.length > 0) { - // config.extraDiagrams.forEach(async (diagram: string) => { - const { id, detector, loadDiagram } = await import(conf.extraDiagrams[0]); - addDetector(id, detector, loadDiagram); - // }); + if (typeof conf.lazyLoadedDiagrams !== 'undefined' && conf.lazyLoadedDiagrams.length > 0) { + for (let i = 0; i < conf.lazyLoadedDiagrams.length; i++) { + const { id, detector, loadDiagram } = await import(conf.lazyLoadedDiagrams[i]); + addDetector(id, detector, loadDiagram); + } } mermaid.detectors.forEach(({ id, detector, path }) => { addDetector(id, detector, path); From 047e15951a87d4312ce01ba4b1b0a2507850fb58 Mon Sep 17 00:00:00 2001 From: Knut Sveidqvist Date: Fri, 7 Oct 2022 12:17:35 +0200 Subject: [PATCH 2/3] Fix for issue in classdiagram-v2 from the typescript updates --- cypress/platform/knsv2.html | 20 ++++++++++++++++++- .../mermaid/src/diagrams/class/svgDraw.js | 14 ++++++------- 2 files changed, 26 insertions(+), 8 deletions(-) diff --git a/cypress/platform/knsv2.html b/cypress/platform/knsv2.html index c3c752f9f3..313dd72bac 100644 --- a/cypress/platform/knsv2.html +++ b/cypress/platform/knsv2.html @@ -56,6 +56,23 @@
Security check
+      classDiagram
+        direction LR
+        class Student {
+          -idCard : IdCard
+        }
+        class IdCard{
+          -id : int
+          -name : string
+        }
+        class Bike{
+          -id : int
+          -name : string
+        }
+        Student "1" --o "1" IdCard : carries
+        Student "1" --o "1" Bike : rides
+
+ 
 mindmap
   root
     A
@@ -81,13 +98,14 @@
         ::icon(mdi mdi-fire)
           gc7((grand
grand
child 8))
- 
+    
       example-diagram
     

 
     
     
     
+