diff --git a/.npmrc b/.npmrc index f87a04434..8051a481e 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1,2 @@ -auto-install-peers=true \ No newline at end of file +auto-install-peers=true +strict-peer-dependencies=false \ No newline at end of file diff --git a/.vite/build.ts b/.vite/build.ts index 360f878ba..e125a335a 100644 --- a/.vite/build.ts +++ b/.vite/build.ts @@ -23,23 +23,13 @@ const packageOptions = { 'mermaid-mindmap': { name: 'mermaid-mindmap', packageName: 'mermaid-mindmap', - file: 'diagram-definition.ts', - }, - 'mermaid-mindmap-detector': { - name: 'mermaid-mindmap-detector', - packageName: 'mermaid-mindmap', - file: 'detector.ts', - }, - 'mermaid-example-diagram': { - name: 'mermaid-example-diagram', - packageName: 'mermaid-example-diagram', - file: 'diagram-definition.ts', - }, - 'mermaid-example-diagram-detector': { - name: 'mermaid-example-diagram-detector', - packageName: 'mermaid-example-diagram', file: 'detector.ts', }, + // 'mermaid-example-diagram-detector': { + // name: 'mermaid-example-diagram-detector', + // packageName: 'mermaid-example-diagram', + // file: 'detector.ts', + // }, }; interface BuildOptions { @@ -111,7 +101,7 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions) include: [ 'packages/mermaid-mindmap/src/**', 'packages/mermaid/src/**', - 'packages/mermaid-example-diagram/src/**', + // 'packages/mermaid-example-diagram/src/**', ], }; } @@ -141,7 +131,7 @@ if (watch) { build(getBuildConfig({ minify: false, watch, core: true, entryName: 'mermaid' })); if (!mermaidOnly) { build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-mindmap' })); - build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); + // build(getBuildConfig({ minify: false, watch, entryName: 'mermaid-example-diagram' })); } } else { void main(); diff --git a/cypress/integration/other/external-diagrams.spec.js b/cypress/integration/other/external-diagrams.spec.js new file mode 100644 index 000000000..3a6c37e88 --- /dev/null +++ b/cypress/integration/other/external-diagrams.spec.js @@ -0,0 +1,13 @@ +describe('mermaid', () => { + describe('registerDiagram', () => { + it('should work on @mermaid-js/mermaid-mindmap and mermaid-example-diagram', () => { + const url = 'http://localhost:9000/external-diagrams-mindmap.html'; + cy.visit(url); + + cy.get('svg', { + // may be a bit slower than normal, since vite might need to re-compile mermaid/mermaid-mindmap/mermaid-example-diagram + timeout: 10000, + }).matchImageSnapshot(); + }); + }); +}); diff --git a/cypress/platform/external-diagrams-mindmap.html b/cypress/platform/external-diagrams-mindmap.html new file mode 100644 index 000000000..e5eded4ba --- /dev/null +++ b/cypress/platform/external-diagrams-mindmap.html @@ -0,0 +1,49 @@ + + +

Should correctly load a third-party diagram using registerDiagram

+ 
+mindmap
+  root
+    A
+    B
+    C
+    D
+    E
+    A2
+    B2
+    C2
+    D2
+    E2
+    child1((Circle))
+        grandchild 1
+        grandchild 2
+    child2(Round rectangle)
+        grandchild 3
+        grandchild 4
+    child3[Square]
+        grandchild 5
+        ::icon(mdi mdi-fire)
+        gc6((grand
child 6))
+        ::icon(mdi mdi-fire)
+          gc7((grand
grand
child 8))
+
+ + + + + + + + + + diff --git a/cypress/platform/viewer.js b/cypress/platform/viewer.js index f0426dc09..603ef26ff 100644 --- a/cypress/platform/viewer.js +++ b/cypress/platform/viewer.js @@ -1,4 +1,5 @@ import mermaid2 from '../../packages/mermaid/src/mermaid'; +import mindmap from '../../packages/mermaid-mindmap/src/detector'; function b64ToUtf8(str) { return decodeURIComponent(escape(window.atob(str))); @@ -9,7 +10,7 @@ function b64ToUtf8(str) { * configuration for mermaid rendering and calls init for rendering the mermaid diagrams on the * page. */ -const contentLoaded = function () { +const contentLoaded = async function () { let pos = document.location.href.indexOf('?graph='); if (pos > 0) { pos = pos + 7; @@ -36,8 +37,7 @@ const contentLoaded = function () { document.getElementsByTagName('body')[0].appendChild(div); } - graphObj.mermaid.lazyLoadedDiagrams = ['/mermaid-mindmap-detector.esm.mjs']; - + await mermaid2.registerExternalDiagrams([mindmap]); mermaid2.initialize(graphObj.mermaid); mermaid2.init(); } diff --git a/docs/index.html b/docs/index.html index abbd23e28..fb98ed958 100644 --- a/docs/index.html +++ b/docs/index.html @@ -49,10 +49,9 @@
+ + diff --git a/tests/webpack/src/index.js b/tests/webpack/src/index.js new file mode 100644 index 000000000..899f66596 --- /dev/null +++ b/tests/webpack/src/index.js @@ -0,0 +1,38 @@ +/* eslint-disable @typescript-eslint/no-var-requires */ +/* eslint-disable no-console */ +const mermaid = require('mermaid'); +import mindmap from '@mermaid-js/mermaid-mindmap'; + +const render = async (graph) => { + const svg = await mermaid.renderAsync('dummy', graph); + console.log(svg); + document.getElementById('graphDiv').innerHTML = svg; +}; + +const load = async () => { + await mermaid.registerExternalDiagrams([mindmap]); + await render('info'); + + setTimeout(async () => { + await render(`mindmap + root((mindmap)) + Origins + Long history + ::icon(fa fa-book) + Popularisation + British popular psychology author Tony Buzan + Research + On effectivness
and features + On Automatic creation + Uses + Creative techniques + Strategic planning + Argument mapping + Tools + Pen and paper + Mermaid + `); + }, 2500); +}; + +window.addEventListener('load', load, false); diff --git a/tests/webpack/webpack.config.js b/tests/webpack/webpack.config.js new file mode 100644 index 000000000..3c35a3922 --- /dev/null +++ b/tests/webpack/webpack.config.js @@ -0,0 +1,10 @@ +// eslint-disable-next-line @typescript-eslint/no-var-requires +const path = require('path'); + +module.exports = { + entry: './src/index.js', + output: { + filename: 'main.js', + path: path.resolve(__dirname, 'dist'), + }, +};