From 0ea88df662ceb782ded3e0d031b5ef9bbb1b8995 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:25:45 +0530 Subject: [PATCH 01/89] feat: Add iconify support --- packages/mermaid/package.json | 4 +- packages/mermaid/src/mermaid.ts | 3 ++ packages/mermaid/src/rendering-util/icons.ts | 36 ++++++++++++++++++ pnpm-lock.yaml | 39 ++++++++++++++++++++ 4 files changed, 81 insertions(+), 1 deletion(-) create mode 100644 packages/mermaid/src/rendering-util/icons.ts diff --git a/packages/mermaid/package.json b/packages/mermaid/package.json index 3fee53a0da..198627560d 100644 --- a/packages/mermaid/package.json +++ b/packages/mermaid/package.json @@ -68,6 +68,7 @@ }, "dependencies": { "@braintree/sanitize-url": "^7.0.1", + "@iconify/utils": "^2.1.32", "@mermaid-js/parser": "workspace:^", "cytoscape": "^3.29.2", "cytoscape-cose-bilkent": "^4.1.0", @@ -88,8 +89,9 @@ }, "devDependencies": { "@adobe/jsonschema2md": "^8.0.0", - "@types/cytoscape-fcose": "^2.2.4", + "@iconify/types": "^2.0.0", "@types/cytoscape": "^3.21.4", + "@types/cytoscape-fcose": "^2.2.4", "@types/d3": "^7.4.3", "@types/d3-sankey": "^0.12.4", "@types/d3-scale": "^4.0.8", diff --git a/packages/mermaid/src/mermaid.ts b/packages/mermaid/src/mermaid.ts index 43fc5bd31b..52cca1cfe4 100644 --- a/packages/mermaid/src/mermaid.ts +++ b/packages/mermaid/src/mermaid.ts @@ -2,6 +2,7 @@ * Web page integration module for the mermaid framework. It uses the mermaidAPI for mermaid * functionality and to render the diagrams to svg code! */ +import { registerIconPacks } from '$root/rendering-util/icons.js'; import { dedent } from 'ts-dedent'; import type { MermaidConfig } from './config.type.js'; import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js'; @@ -435,6 +436,7 @@ export interface Mermaid { contentLoaded: typeof contentLoaded; setParseErrorHandler: typeof setParseErrorHandler; detectType: typeof detectType; + registerIconPacks: typeof registerIconPacks; } const mermaid: Mermaid = { @@ -451,6 +453,7 @@ const mermaid: Mermaid = { contentLoaded, setParseErrorHandler, detectType, + registerIconPacks, }; export default mermaid; diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts new file mode 100644 index 0000000000..76a03cde5c --- /dev/null +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -0,0 +1,36 @@ +import { log } from '$root/logger.js'; +import type { IconifyJSON } from '@iconify/types'; +import type { IconifyIconCustomisations } from '@iconify/utils'; +import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils'; + +export const iconsStore = new Map(); + +export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { + for (const pack of iconPacks) { + iconsStore.set(pack.prefix, pack); + } +}; + +export const getIconSVG = (iconName: string, customisations?: IconifyIconCustomisations) => { + try { + const data = stringToIcon(iconName, true, true); + if (!data) { + throw new Error(`Invalid icon name: ${iconName}`); + } + const icons = iconsStore.get(data.prefix || 'default'); + if (!icons) { + throw new Error(`Icon set not found: ${data.prefix}`); + } + const iconData = getIconData(icons, data.name); + if (!iconData) { + throw new Error(`Icon not found: ${iconName}`); + } + const renderData = iconToSVG(iconData, customisations); + const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes); + return svg; + } catch (e) { + log.error(e); + // Return unknown icon svg. + return '?'; + } +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8e7d04115..6540551512 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -212,6 +212,9 @@ importers: '@braintree/sanitize-url': specifier: ^7.0.1 version: 7.1.0 + '@iconify/utils': + specifier: ^2.1.32 + version: 2.1.32 '@mermaid-js/parser': specifier: workspace:^ version: link:../parser @@ -267,6 +270,9 @@ importers: '@adobe/jsonschema2md': specifier: ^8.0.0 version: 8.0.2 + '@iconify/types': + specifier: ^2.0.0 + version: 2.0.0 '@types/cytoscape': specifier: ^3.21.4 version: 3.21.5 @@ -612,6 +618,9 @@ packages: '@antfu/install-pkg@0.1.1': resolution: {integrity: sha512-LyB/8+bSfa0DFGC06zpCEfs89/XoWZwws5ygEa5D+Xsm3OfI+aXQ86VgVG7Acyef+rSZ5HE7J8rrxzrQeM3PjQ==} + '@antfu/install-pkg@0.4.1': + resolution: {integrity: sha512-T7yB5QNG29afhWVkVq7XeIMBa5U/vs9mX69YqayXypPRmYzUmzwnYltplHmPtZ4HPCn+sQKeXW8I47wCbuBOjw==} + '@antfu/utils@0.7.10': resolution: {integrity: sha512-+562v9k4aI80m1+VuMHehNJWLOFjBnXn3tdOitzD0il5b7smkSBal4+a3oKiQTbrwMmN/TBUMDvbdoWDehgOww==} @@ -2175,6 +2184,9 @@ packages: '@iconify/utils@2.1.30': resolution: {integrity: sha512-bY0IO5xLOlbzJBnjWLxknp6Sss3yla03sVY9VeUz9nT6dbc+EGKlLfCt+6uytJnWm5CUvTF/BNotsLWF7kI61A==} + '@iconify/utils@2.1.32': + resolution: {integrity: sha512-LeifFZPPKu28O3AEDpYJNdEbvS4/ojAPyIW+pF/vUpJTYnbTiXUHkCh0bwgFRzKvdpb8H4Fbfd/742++MF4fPQ==} + '@img/sharp-darwin-arm64@0.33.5': resolution: {integrity: sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==} engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0} @@ -7147,6 +7159,9 @@ packages: package-json-from-dist@1.0.0: resolution: {integrity: sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==} + package-manager-detector@0.2.0: + resolution: {integrity: sha512-E385OSk9qDcXhcM9LNSe4sdhx8a9mAPrZ4sMLW+tmxl5ZuGtPUcdFu+MPP2jbgiWAZ6Pfe5soGFMd+0Db5Vrog==} + pako@1.0.11: resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==} @@ -8283,6 +8298,9 @@ packages: tinybench@2.9.0: resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==} + tinyexec@0.3.0: + resolution: {integrity: sha512-tVGE0mVJPGb0chKhqmsoosjsS+qUnJVGJpZgsHYQcGoPlG3B51R3PouqTgEGH2Dc9jjFyOqOpix6ZHNMXp1FZg==} + tinypool@0.8.4: resolution: {integrity: sha512-i11VH5gS6IFeLY3gMBQ00/MmLncVP7JLXOw1vlgkytLmJK7QnEr7NXf0LBdxfmNPAeyetukOk0bOYrJrFGjYJQ==} engines: {node: '>=14.0.0'} @@ -9281,6 +9299,11 @@ snapshots: execa: 5.1.1 find-up: 5.0.0 + '@antfu/install-pkg@0.4.1': + dependencies: + package-manager-detector: 0.2.0 + tinyexec: 0.3.0 + '@antfu/utils@0.7.10': {} '@apideck/better-ajv-errors@0.3.6(ajv@8.17.1)': @@ -11249,6 +11272,18 @@ snapshots: transitivePeerDependencies: - supports-color + '@iconify/utils@2.1.32': + dependencies: + '@antfu/install-pkg': 0.4.1 + '@antfu/utils': 0.7.10 + '@iconify/types': 2.0.0 + debug: 4.3.6(supports-color@8.1.1) + kolorist: 1.8.0 + local-pkg: 0.5.0 + mlly: 1.7.1 + transitivePeerDependencies: + - supports-color + '@img/sharp-darwin-arm64@0.33.5': optionalDependencies: '@img/sharp-libvips-darwin-arm64': 1.0.4 @@ -17290,6 +17325,8 @@ snapshots: package-json-from-dist@1.0.0: {} + package-manager-detector@0.2.0: {} + pako@1.0.11: {} parent-module@1.0.1: @@ -18556,6 +18593,8 @@ snapshots: tinybench@2.9.0: {} + tinyexec@0.3.0: {} + tinypool@0.8.4: {} tinyspy@2.2.1: {} From e0f7ea56e129783226e780d54ba4466f5cd8b9a0 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:55:20 +0530 Subject: [PATCH 02/89] fix: Unknown icon size --- packages/mermaid/src/rendering-util/icons.ts | 65 ++++++++++++++------ 1 file changed, 46 insertions(+), 19 deletions(-) diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts index 76a03cde5c..199bc4206e 100644 --- a/packages/mermaid/src/rendering-util/icons.ts +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -1,8 +1,14 @@ import { log } from '$root/logger.js'; -import type { IconifyJSON } from '@iconify/types'; +import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types'; import type { IconifyIconCustomisations } from '@iconify/utils'; import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils'; +export const unknownIcon: IconifyIcon = { + body: '?', + height: 80, + width: 80, +}; + export const iconsStore = new Map(); export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { @@ -11,26 +17,47 @@ export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { } }; -export const getIconSVG = (iconName: string, customisations?: IconifyIconCustomisations) => { +const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { + const data = stringToIcon(iconName, true, fallbackPrefix !== undefined); + if (!data) { + throw new Error(`Invalid icon name: ${iconName}`); + } + const prefix = data.prefix || fallbackPrefix; + if (!prefix) { + throw new Error(`Icon name must contain a prefix: ${iconName}`); + } + const icons = iconsStore.get(prefix); + if (!icons) { + throw new Error(`Icon set not found: ${data.prefix}`); + } + const iconData = getIconData(icons, data.name); + if (!iconData) { + throw new Error(`Icon not found: ${iconName}`); + } + return iconData; +}; + +export const isIconAvailable = (iconName: string) => { + try { + getRegisteredIconData(iconName); + return true; + } catch { + return false; + } +}; + +export const getIconSVG = ( + iconName: string, + customisations?: IconifyIconCustomisations & { fallbackPrefix?: string } +) => { + let iconData: ExtendedIconifyIcon; try { - const data = stringToIcon(iconName, true, true); - if (!data) { - throw new Error(`Invalid icon name: ${iconName}`); - } - const icons = iconsStore.get(data.prefix || 'default'); - if (!icons) { - throw new Error(`Icon set not found: ${data.prefix}`); - } - const iconData = getIconData(icons, data.name); - if (!iconData) { - throw new Error(`Icon not found: ${iconName}`); - } - const renderData = iconToSVG(iconData, customisations); - const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes); - return svg; + iconData = getRegisteredIconData(iconName, customisations?.fallbackPrefix); } catch (e) { log.error(e); - // Return unknown icon svg. - return '?'; + iconData = unknownIcon; } + const renderData = iconToSVG(iconData, customisations); + const svg = iconToHTML(replaceIDs(renderData.body), renderData.attributes); + return svg; }; From 6ecdf7be688efdc53c52fea3ba891327242bc890 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:56:16 +0530 Subject: [PATCH 03/89] docs: Changeset --- .changeset/eight-apricots-arrive.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/eight-apricots-arrive.md diff --git a/.changeset/eight-apricots-arrive.md b/.changeset/eight-apricots-arrive.md new file mode 100644 index 0000000000..551d798374 --- /dev/null +++ b/.changeset/eight-apricots-arrive.md @@ -0,0 +1,5 @@ +--- +'mermaid': minor +--- + +feat: Add support for iconify icons From a4b7e494dbc39a49393be144050b60d9a47613b1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 13:56:43 +0530 Subject: [PATCH 04/89] feat: Support - in icon names --- .../parser/src/language/architecture/architecture.langium | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/parser/src/language/architecture/architecture.langium b/packages/parser/src/language/architecture/architecture.langium index 6246b423ed..11af262432 100644 --- a/packages/parser/src/language/architecture/architecture.langium +++ b/packages/parser/src/language/architecture/architecture.langium @@ -49,7 +49,7 @@ Edge: terminal ARROW_DIRECTION: 'L' | 'R' | 'T' | 'B'; terminal ARCH_ID: /[\w]+/; terminal ARCH_TEXT_ICON: /\("[^"]+"\)/; -terminal ARCH_ICON: /\([\w:]+\)/; +terminal ARCH_ICON: /\([\w-:]+\)/; terminal ARCH_TITLE: /\[[\w ]+\]/; terminal ARROW_GROUP: /\{group\}/; -terminal ARROW_INTO: /<|>/; \ No newline at end of file +terminal ARROW_INTO: /<|>/; From 790f71bb1a118e82fb92b4fbf7fe2ccbd3c8e5a3 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 14:00:21 +0530 Subject: [PATCH 05/89] feat: Move architecture icons into iconify format --- .../architecture/architectureIcons.ts | 43 ++++++++ .../architecture/architectureRenderer.ts | 6 +- .../diagrams/architecture/icons/default.ts | 99 ------------------- .../architecture/icons/svgRegister.ts | 50 ---------- .../src/diagrams/architecture/svgDraw.ts | 20 ++-- 5 files changed, 58 insertions(+), 160 deletions(-) create mode 100644 packages/mermaid/src/diagrams/architecture/architectureIcons.ts delete mode 100644 packages/mermaid/src/diagrams/architecture/icons/default.ts delete mode 100644 packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts diff --git a/packages/mermaid/src/diagrams/architecture/architectureIcons.ts b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts new file mode 100644 index 0000000000..dd6c99f9c9 --- /dev/null +++ b/packages/mermaid/src/diagrams/architecture/architectureIcons.ts @@ -0,0 +1,43 @@ +import { unknownIcon } from '$root/rendering-util/icons.js'; +import type { IconifyJSON } from '@iconify/types'; + +const wrapIcon = (icon: string) => { + return `${icon}`; +}; + +export const architectureIcons: IconifyJSON = { + prefix: 'mermaid-architecture', + height: 80, + width: 80, + icons: { + database: { + body: wrapIcon( + '' + ), + }, + server: { + body: wrapIcon( + '' + ), + }, + disk: { + body: wrapIcon( + '' + ), + }, + internet: { + body: wrapIcon( + '' + ), + }, + cloud: { + body: wrapIcon( + '' + ), + }, + unknown: unknownIcon, + blank: { + body: wrapIcon(''), + }, + }, +}; diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 558b904835..84b9ed6554 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -1,3 +1,4 @@ +import { registerIconPacks } from '$root/rendering-util/icons.js'; import type { Position } from 'cytoscape'; import cytoscape from 'cytoscape'; import type { FcoseLayoutOptions } from 'cytoscape-fcose'; @@ -9,6 +10,7 @@ import { log } from '../../logger.js'; import { selectSvgElement } from '../../rendering-util/selectSvgElement.js'; import { setupGraphViewbox } from '../../setupGraphViewbox.js'; import { getConfigField } from './architectureDb.js'; +import { architectureIcons } from './architectureIcons.js'; import type { ArchitectureDataStructures, ArchitectureJunction, @@ -30,11 +32,9 @@ import { isArchitectureDirectionY, nodeData, } from './architectureTypes.js'; -import { defaultIconLibrary } from './icons/default.js'; -import { registerIconLibrary } from './icons/svgRegister.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -registerIconLibrary(defaultIconLibrary); +registerIconPacks(architectureIcons); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { diff --git a/packages/mermaid/src/diagrams/architecture/icons/default.ts b/packages/mermaid/src/diagrams/architecture/icons/default.ts deleted file mode 100644 index 8c33df09c6..0000000000 --- a/packages/mermaid/src/diagrams/architecture/icons/default.ts +++ /dev/null @@ -1,99 +0,0 @@ -import { createIcon, type IconLibrary } from './svgRegister.js'; - -export const defaultIconLibrary: IconLibrary = { - database: createIcon( - ` - - - - - - - -`, - 80 - ), - server: createIcon( - ` - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -`, - 80 - ), - disk: createIcon( - ` - - - - - - - - - -`, - 80 - ), - internet: createIcon( - ` - - - - - - - - -`, - 80 - ), - cloud: createIcon( - ` - - - `, - 80 - ), - unknown: createIcon( - ` - - ? -`, - 80 - ), - blank: createIcon( - ` - -`, - 80 - ), -}; diff --git a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts deleted file mode 100644 index 712644afa6..0000000000 --- a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts +++ /dev/null @@ -1,50 +0,0 @@ -import { log } from '$root/logger.js'; -import type { Selection } from 'd3-selection'; - -export type IconResolver = ( - parent: Selection, - width?: number -) => Selection; -export type IconLibrary = Record; - -/** - * Converts an SVG Icon passed as a string into a properly formatted IconResolver - * @param icon - html code for the svg icon as a string (the SVG tag should not be included) - * @param originalSize - the original size of the SVG Icon in pixels - * @returns IconResolver - */ -export const createIcon: (icon: string, originalSize: number) => IconResolver = ( - icon, - originalSize -) => { - return ( - parent: Selection, - size: number = originalSize - ) => { - parent.html(`${icon}`); - return parent; - }; -}; - -const icons: IconLibrary = {}; - -export const isIconNameInUse = (name: string): boolean => { - return icons[name] !== undefined; -}; - -export const registerIconLibrary = (library: IconLibrary) => { - Object.entries(library).forEach(([name, resolver]) => { - if (!isIconNameInUse(name)) { - icons[name] = resolver; - } else { - log.warn(`Icon with name ${name} already exists. Skipping registration.`); - } - }); -}; - -export const getIcon = (name: string): IconResolver | null => { - if (isIconNameInUse(name)) { - return icons[name]; - } - return icons.unknown; -}; diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index ef3ddb7f6c..d1c053f717 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -1,10 +1,10 @@ -// TODO remove no-console -/* eslint-disable no-console */ +import { getIconSVG } from '$root/rendering-util/icons.js'; import type cytoscape from 'cytoscape'; import { getConfig } from '../../diagram-api/diagramAPI.js'; import { createText } from '../../rendering-util/createText.js'; import type { D3Element } from '../../types.js'; import { db, getConfigField } from './architectureDb.js'; +import { architectureIcons } from './architectureIcons.js'; import { ArchitectureDirectionArrow, ArchitectureDirectionArrowShift, @@ -20,7 +20,6 @@ import { type ArchitectureJunction, type ArchitectureService, } from './architectureTypes.js'; -import { getIcon } from './icons/svgRegister.js'; export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core) { const padding = getConfigField('padding'); @@ -198,7 +197,6 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor const data = nodeData(node); if (data.type === 'group') { const { h, w, x1, y1 } = node.boundingBox(); - console.log(`Draw group (${data.id}): pos=(${x1}, ${y1}), dim=(${w}, ${h})`); groupsEl .append('rect') @@ -213,7 +211,9 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor let shiftedY1 = y1; if (data.icon) { const bkgElem = groupLabelContainer.append('g'); - getIcon(data.icon)?.(bkgElem, groupIconSize); + bkgElem.html( + `${getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + ); bkgElem.attr( 'transform', 'translate(' + @@ -290,15 +290,19 @@ export const drawServices = async function ( textElem.attr('transform', 'translate(' + iconSize / 2 + ', ' + iconSize + ')'); } - let bkgElem = serviceElem.append('g'); + const bkgElem = serviceElem.append('g'); if (service.icon) { // TODO: should a warning be given to end-users saying which icon names are available? // if (!isIconNameInUse(service.icon)) { // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } - bkgElem = getIcon(service.icon)?.(bkgElem, iconSize); + bkgElem.html( + `${getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); } else if (service.iconText) { - bkgElem = getIcon('blank')?.(bkgElem, iconSize); + bkgElem.html( + `${getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer .append('foreignObject') From 7d8143b917ee3562149a0e0a821ed2d6f29cc05d Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Thu, 29 Aug 2024 14:01:26 +0530 Subject: [PATCH 06/89] docs: Changeset --- .changeset/yellow-maps-poke.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/yellow-maps-poke.md diff --git a/.changeset/yellow-maps-poke.md b/.changeset/yellow-maps-poke.md new file mode 100644 index 0000000000..4e6d6bd235 --- /dev/null +++ b/.changeset/yellow-maps-poke.md @@ -0,0 +1,5 @@ +--- +'@mermaid-js/parser': patch +--- + +feat: Support - in architecture icons From 249e18314a57970598ba95f36816454335d38f4d Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Thu, 29 Aug 2024 09:36:26 +0000 Subject: [PATCH 07/89] [autofix.ci] apply automated fixes --- .../setup/interfaces/mermaid.Mermaid.md | 50 ++++++++++++++----- .../setup/interfaces/mermaid.RunOptions.md | 8 +-- docs/config/setup/modules/mermaid.md | 2 +- 3 files changed, 42 insertions(+), 18 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 09fab149cd..99a054caa7 100644 --- a/docs/config/setup/interfaces/mermaid.Mermaid.md +++ b/docs/config/setup/interfaces/mermaid.Mermaid.md @@ -28,7 +28,7 @@ page. #### Defined in -[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) +[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) --- @@ -59,7 +59,7 @@ A graph definition key #### Defined in -[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) +[packages/mermaid/src/mermaid.ts:438](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L438) --- @@ -89,7 +89,7 @@ Use [initialize](mermaid.Mermaid.md#initialize) and [run](mermaid.Mermaid.md#run #### Defined in -[packages/mermaid/src/mermaid.ts:430](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L430) +[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) --- @@ -116,7 +116,7 @@ This function should be called before the run function. #### Defined in -[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) +[packages/mermaid/src/mermaid.ts:435](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L435) --- @@ -130,7 +130,7 @@ Use [parse](mermaid.Mermaid.md#parse) and [render](mermaid.Mermaid.md#render) in #### Defined in -[packages/mermaid/src/mermaid.ts:424](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L424) +[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) --- @@ -180,7 +180,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:425](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L425) +[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) --- @@ -190,7 +190,7 @@ Error if the diagram is invalid and parseOptions.suppressErrors is false or not #### Defined in -[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) +[packages/mermaid/src/mermaid.ts:420](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L420) --- @@ -218,7 +218,31 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) +[packages/mermaid/src/mermaid.ts:434](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L434) + +--- + +### registerIconPacks + +• **registerIconPacks**: (...`iconPacks`: `IconifyJSON`\[]) => `void` + +#### Type declaration + +▸ (`...iconPacks`): `void` + +##### Parameters + +| Name | Type | +| :------------- | :--------------- | +| `...iconPacks` | `IconifyJSON`\[] | + +##### Returns + +`void` + +#### Defined in + +[packages/mermaid/src/mermaid.ts:439](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L439) --- @@ -242,7 +266,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) +[packages/mermaid/src/mermaid.ts:433](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L433) --- @@ -268,7 +292,7 @@ Used to register external diagram types. #### Defined in -[packages/mermaid/src/mermaid.ts:426](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L426) +[packages/mermaid/src/mermaid.ts:427](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L427) --- @@ -316,7 +340,7 @@ Renders the mermaid diagrams #### Defined in -[packages/mermaid/src/mermaid.ts:431](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L431) +[packages/mermaid/src/mermaid.ts:432](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L432) --- @@ -351,7 +375,7 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:436](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L436) +[packages/mermaid/src/mermaid.ts:437](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L437) --- @@ -361,4 +385,4 @@ to it (eg. dart interop wrapper). (Initially there is no parseError member of me #### Defined in -[packages/mermaid/src/mermaid.ts:418](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L418) +[packages/mermaid/src/mermaid.ts:419](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L419) diff --git a/docs/config/setup/interfaces/mermaid.RunOptions.md b/docs/config/setup/interfaces/mermaid.RunOptions.md index aae004d6d5..0bcfc2356e 100644 --- a/docs/config/setup/interfaces/mermaid.RunOptions.md +++ b/docs/config/setup/interfaces/mermaid.RunOptions.md @@ -18,7 +18,7 @@ The nodes to render. If this is set, `querySelector` will be ignored. #### Defined in -[packages/mermaid/src/mermaid.ts:48](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L48) +[packages/mermaid/src/mermaid.ts:49](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L49) --- @@ -44,7 +44,7 @@ A callback to call after each diagram is rendered. #### Defined in -[packages/mermaid/src/mermaid.ts:52](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L52) +[packages/mermaid/src/mermaid.ts:53](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L53) --- @@ -56,7 +56,7 @@ The query selector to use when finding elements to render. Default: `".mermaid"` #### Defined in -[packages/mermaid/src/mermaid.ts:44](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L44) +[packages/mermaid/src/mermaid.ts:45](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L45) --- @@ -68,4 +68,4 @@ If `true`, errors will be logged to the console, but not thrown. Default: `false #### Defined in -[packages/mermaid/src/mermaid.ts:56](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L56) +[packages/mermaid/src/mermaid.ts:57](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L57) diff --git a/docs/config/setup/modules/mermaid.md b/docs/config/setup/modules/mermaid.md index bdaeb05e1e..60c219f2d2 100644 --- a/docs/config/setup/modules/mermaid.md +++ b/docs/config/setup/modules/mermaid.md @@ -87,4 +87,4 @@ #### Defined in -[packages/mermaid/src/mermaid.ts:440](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L440) +[packages/mermaid/src/mermaid.ts:442](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/mermaid.ts#L442) From 59d6f04e4bd2fdcf2f98cf0d80abfed884493fe3 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 08:38:41 -0500 Subject: [PATCH 08/89] make rendering-util/types a real ts file --- packages/mermaid-layout-elk/src/render.ts | 10 +++++----- .../src/rendering-util/{types.d.ts => types.ts} | 11 +++++------ 2 files changed, 10 insertions(+), 11 deletions(-) rename packages/mermaid/src/rendering-util/{types.d.ts => types.ts} (95%) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 117ca62763..96f919e4b7 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -224,7 +224,7 @@ export const render = async ( * Add edges to graph based on parsed graph definition */ const addEdges = async function ( - dataForLayout: { edges: any; direction: string }, + dataForLayout: { edges: any; direction?: string }, graph: { id?: string; layoutOptions?: { @@ -749,8 +749,8 @@ export const render = async ( layoutOptions: { 'elk.hierarchyHandling': 'INCLUDE_CHILDREN', 'elk.algorithm': algorithm, - 'nodePlacement.strategy': data4Layout.config.elk.nodePlacementStrategy, - 'elk.layered.mergeEdges': data4Layout.config.elk.mergeEdges, + 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, + 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, 'elk.direction': 'DOWN', 'spacing.baseValue': 30, // 'spacing.nodeNode': 40, @@ -817,8 +817,8 @@ export const render = async ( ...node.layoutOptions, 'elk.algorithm': algorithm, 'elk.direction': dir2ElkDirection(node.dir), - 'nodePlacement.strategy': data4Layout.config['elk.nodePlacement.strategy'], - 'elk.layered.mergeEdges': data4Layout.config['elk.mergeEdges'], + 'nodePlacement.strategy': data4Layout.config.elk?.nodePlacementStrategy, + 'elk.layered.mergeEdges': data4Layout.config.elk?.mergeEdges, 'elk.hierarchyHandling': 'SEPARATE_CHILDREN', }; } diff --git a/packages/mermaid/src/rendering-util/types.d.ts b/packages/mermaid/src/rendering-util/types.ts similarity index 95% rename from packages/mermaid/src/rendering-util/types.d.ts rename to packages/mermaid/src/rendering-util/types.ts index 67f8de40e8..ba6b2ae878 100644 --- a/packages/mermaid/src/rendering-util/types.d.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -1,5 +1,5 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em'; -import type { MermaidConfig } from '../../dist/config.type'; +import type { MermaidConfig } from '../../dist/config.type.js'; export interface MarkdownWord { content: string; type: MarkdownWordType; @@ -9,7 +9,7 @@ export type MarkdownLine = MarkdownWord[]; export type CheckFitFunction = (text: MarkdownLine) => boolean; // Common properties for any node in the system -interface Node { +export interface Node { id: string; label?: string; description?: string[]; @@ -38,7 +38,6 @@ interface Node { tooltip?: string; padding?: number; //REMOVE?, use from LayoutData.config - Keep, this could be shape specific shape?: string; - tooltip?: string; isGroup: boolean; width?: number; height?: number; @@ -68,7 +67,7 @@ interface Node { } // Common properties for any edge in the system -interface Edge { +export interface Edge { id: string; label?: string; classes?: string; @@ -98,7 +97,7 @@ interface Edge { look?: string; } -interface RectOptions { +export interface RectOptions { rx: number; ry: number; labelPaddingX: number; @@ -107,7 +106,7 @@ interface RectOptions { } // Extending the Node interface for specific types if needed -interface ClassDiagramNode extends Node { +export interface ClassDiagramNode extends Node { memberData: any; // Specific property for class diagram nodes } From a176d64389352b3f26b50f29060b1167dbcfedcd Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 08:51:40 -0500 Subject: [PATCH 09/89] fix import --- packages/mermaid/src/rendering-util/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid/src/rendering-util/types.ts b/packages/mermaid/src/rendering-util/types.ts index ba6b2ae878..8280f96761 100644 --- a/packages/mermaid/src/rendering-util/types.ts +++ b/packages/mermaid/src/rendering-util/types.ts @@ -1,5 +1,5 @@ export type MarkdownWordType = 'normal' | 'strong' | 'em'; -import type { MermaidConfig } from '../../dist/config.type.js'; +import type { MermaidConfig } from '../config.type.js'; export interface MarkdownWord { content: string; type: MarkdownWordType; From 3e922c83f0480b8a4fa7dd0a168def64d57ddefd Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:10:53 -0500 Subject: [PATCH 10/89] pass linter --- eslint.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/eslint.config.js b/eslint.config.js index 8b4807bc57..3278c7eb42 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -23,6 +23,7 @@ export default tseslint.config( '**/generated/', '**/coverage/', 'packages/mermaid/src/config.type.ts', + 'packages/mermaid/src/docs/.vitepress/components.d.ts', ], }, { From 6a97f80cc33d8e2f5a26eb9f973c28f7592f5621 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:16:38 -0500 Subject: [PATCH 11/89] add another maybe-undefined operator elk --- packages/mermaid-layout-elk/src/render.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mermaid-layout-elk/src/render.ts b/packages/mermaid-layout-elk/src/render.ts index 52cb8aa728..e647422ecc 100644 --- a/packages/mermaid-layout-elk/src/render.ts +++ b/packages/mermaid-layout-elk/src/render.ts @@ -754,7 +754,7 @@ export const render = async ( 'elk.direction': 'DOWN', 'spacing.baseValue': 35, 'elk.layered.unnecessaryBendpoints': true, - 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk.cycleBreakingStrategy, + 'elk.layered.cycleBreaking.strategy': data4Layout.config.elk?.cycleBreakingStrategy, // 'spacing.nodeNode': 20, // 'spacing.nodeNodeBetweenLayers': 25, // 'spacing.edgeNode': 20, From 73f8d70b864bd2a8121508d52fc8f247d2250912 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Fri, 30 Aug 2024 09:21:11 -0500 Subject: [PATCH 12/89] rebuild docs --- docs/config/setup/interfaces/mermaid.LayoutData.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/config/setup/interfaces/mermaid.LayoutData.md b/docs/config/setup/interfaces/mermaid.LayoutData.md index 6f128f4a71..f45d5f0e70 100644 --- a/docs/config/setup/interfaces/mermaid.LayoutData.md +++ b/docs/config/setup/interfaces/mermaid.LayoutData.md @@ -16,11 +16,11 @@ ### config -• **config**: `MermaidConfig` +• **config**: [`MermaidConfig`](mermaid.MermaidConfig.md) #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:118](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L118) +[packages/mermaid/src/rendering-util/types.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L117) --- @@ -30,7 +30,7 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:117](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L117) +[packages/mermaid/src/rendering-util/types.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L116) --- @@ -40,4 +40,4 @@ #### Defined in -[packages/mermaid/src/rendering-util/types.d.ts:116](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.d.ts#L116) +[packages/mermaid/src/rendering-util/types.ts:115](https://github.com/mermaid-js/mermaid/blob/master/packages/mermaid/src/rendering-util/types.ts#L115) From 1b7433b637f9a80986b3a2c9d53744ee3e90aaf8 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sat, 31 Aug 2024 09:12:59 -0500 Subject: [PATCH 13/89] replace with mermaid/dist --- .../src/diagrams/architecture/icons/svgRegister.ts | 2 +- packages/mermaid/src/rendering-util/createText.ts | 4 ++-- .../layout-algorithms/dagre/index.js | 2 +- .../layout-algorithms/dagre/mermaid-graphlib.js | 2 +- .../dagre/mermaid-graphlib.spec.js | 2 +- packages/mermaid/src/rendering-util/render.ts | 7 +++---- .../rendering-util/rendering-elements/clusters.js | 10 +++++----- .../rendering-elements/createLabel.js | 8 ++++---- .../rendering-elements/edgeMarker.spec.ts | 2 +- .../rendering-elements/edgeMarker.ts | 6 +++--- .../src/rendering-util/rendering-elements/edges.js | 14 +++++++------- .../rendering-util/rendering-elements/markers.js | 2 +- .../src/rendering-util/rendering-elements/nodes.js | 4 ++-- .../rendering-elements/shapes/choice.ts | 6 +++--- .../rendering-elements/shapes/circle.ts | 6 +++--- .../rendering-elements/shapes/cylinder.ts | 4 ++-- .../rendering-elements/shapes/doubleCircle.ts | 6 +++--- .../rendering-elements/shapes/drawRect.ts | 4 ++-- .../rendering-elements/shapes/forkJoin.ts | 6 +++--- .../shapes/handDrawnShapeStyles.ts | 4 ++-- .../rendering-elements/shapes/hexagon.ts | 4 ++-- .../rendering-elements/shapes/invertedTrapezoid.ts | 4 ++-- .../rendering-elements/shapes/labelRect.ts | 2 +- .../rendering-elements/shapes/leanLeft.ts | 4 ++-- .../rendering-elements/shapes/leanRight.ts | 4 ++-- .../rendering-elements/shapes/note.ts | 6 +++--- .../rendering-elements/shapes/question.ts | 6 +++--- .../rendering-elements/shapes/rectLeftInvArrow.ts | 4 ++-- .../rendering-elements/shapes/rectWithTitle.ts | 10 +++++----- .../rendering-elements/shapes/roundedRect.ts | 2 +- .../rendering-elements/shapes/squareRect.ts | 2 +- .../rendering-elements/shapes/stadium.ts | 4 ++-- .../rendering-elements/shapes/state.ts | 2 +- .../rendering-elements/shapes/stateEnd.ts | 6 +++--- .../rendering-elements/shapes/stateStart.ts | 6 +++--- .../rendering-elements/shapes/subroutine.ts | 4 ++-- .../rendering-elements/shapes/trapezoid.ts | 4 ++-- .../rendering-elements/shapes/util.js | 8 ++++---- .../src/rendering-util/setupViewPortForSVG.ts | 6 +++--- packages/mermaid/tsconfig.json | 2 +- vite.config.ts | 2 +- 41 files changed, 96 insertions(+), 97 deletions(-) diff --git a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts index 712644afa6..0049e2d480 100644 --- a/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts +++ b/packages/mermaid/src/diagrams/architecture/icons/svgRegister.ts @@ -1,4 +1,4 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import type { Selection } from 'd3-selection'; export type IconResolver = ( diff --git a/packages/mermaid/src/rendering-util/createText.ts b/packages/mermaid/src/rendering-util/createText.ts index a6ad7fa1c0..0a205ea317 100644 --- a/packages/mermaid/src/rendering-util/createText.ts +++ b/packages/mermaid/src/rendering-util/createText.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ // @ts-nocheck TODO: Fix types -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import common, { hasKatex, renderKatex } from '$root/diagrams/common/common.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import common, { hasKatex, renderKatex } from 'mermaid/dist/diagrams/common/common.js'; import { select } from 'd3'; import type { MermaidConfig } from '../config.type.js'; import type { SVGGroup } from '../diagram-api/types.js'; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js index 307242675a..044e14dadd 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/index.js @@ -23,7 +23,7 @@ import { insertEdge, clear as clearEdges, } from '../../rendering-elements/edges.js'; -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js'; import { getConfig } from '../../../diagram-api/diagramAPI.js'; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js index 54ad5d27f8..0cde897ae7 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.js @@ -1,5 +1,5 @@ /** Decorates with functions required by mermaids dagre-wrapper. */ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import * as graphlib from 'dagre-d3-es/src/graphlib/index.js'; import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js'; diff --git a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js index dd71a2f7e3..545a35a928 100644 --- a/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js +++ b/packages/mermaid/src/rendering-util/layout-algorithms/dagre/mermaid-graphlib.spec.js @@ -6,7 +6,7 @@ import { extractDescendants, sortNodesByHierarchy, } from './mermaid-graphlib.js'; -import { setLogLevel, log } from '$root/logger.js'; +import { setLogLevel, log } from 'mermaid/dist/logger.js'; describe('Graphlib decorations', () => { let g; diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index 013be7ba40..e3118b5b78 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -1,7 +1,6 @@ -import type { SVG } from '$root/diagram-api/types.js'; -import type { InternalHelpers } from '$root/internals.js'; -import { internalHelpers } from '$root/internals.js'; -import { log } from '$root/logger.js'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; +import type { InternalHelpers, internalHelpers } from 'mermaid/dist/internals.js'; +import { log } from 'mermaid/dist/logger.js'; import type { LayoutData } from './types.js'; export interface RenderOptions { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js index ba87f78f53..a963bba9b8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/clusters.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/clusters.js @@ -1,7 +1,7 @@ -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import { evaluate } from '$root/diagrams/common/common.js'; -import { log } from '$root/logger.js'; -import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import { evaluate } from 'mermaid/dist/diagrams/common/common.js'; +import { log } from 'mermaid/dist/logger.js'; +import { getSubGraphTitleMargins } from 'mermaid/dist/utils/subGraphTitleMargins.js'; import { select } from 'd3'; import rough from 'roughjs'; import { createText } from '../createText.ts'; @@ -11,7 +11,7 @@ import { createRoundedRectPathD } from './shapes/roundedRectPath.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; const rect = async (parent, node) => { log.info('Creating subgraph rect for ', node.id, node); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js index 0afdbb7145..2d560e85da 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/createLabel.js @@ -1,8 +1,8 @@ import { select } from 'd3'; -import { log } from '$root/logger.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import common, { evaluate, renderKatex, hasKatex } from '$root/diagrams/common/common.js'; -import { decodeEntities } from '$root/utils.js'; +import { log } from 'mermaid/dist/logger.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import common, { evaluate, renderKatex, hasKatex } from 'mermaid/dist/diagrams/common/common.js'; +import { decodeEntities } from 'mermaid/dist/utils.js'; /** * @param dom diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts index 05c7472c95..313dc1d018 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.spec.ts @@ -1,5 +1,5 @@ /* eslint-disable @typescript-eslint/unbound-method */ -import type { SVG } from '$root/diagram-api/types.js'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; import type { Mocked } from 'vitest'; import { addEdgeMarkers } from './edgeMarker.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts index ea748d8aae..032b3989c1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/edgeMarker.ts @@ -1,6 +1,6 @@ -import type { SVG } from '$root/diagram-api/types.js'; -import { log } from '$root/logger.js'; -import type { EdgeData } from '$root/types.js'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; +import { log } from 'mermaid/dist/logger.js'; +import type { EdgeData } from 'mermaid/dist/types.js'; /** * Adds SVG markers to a path element based on the arrow types specified in the edge. * diff --git a/packages/mermaid/src/rendering-util/rendering-elements/edges.js b/packages/mermaid/src/rendering-util/rendering-elements/edges.js index 087fcf0bec..999dc3d1cc 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/edges.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/edges.js @@ -1,10 +1,10 @@ -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import { evaluate } from '$root/diagrams/common/common.js'; -import { log } from '$root/logger.js'; -import { createText } from '$root/rendering-util/createText.ts'; -import utils from '$root/utils.js'; -import { getLineFunctionsWithOffset } from '$root/utils/lineWithOffset.js'; -import { getSubGraphTitleMargins } from '$root/utils/subGraphTitleMargins.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import { evaluate } from 'mermaid/dist/diagrams/common/common.js'; +import { log } from 'mermaid/dist/logger.js'; +import { createText } from 'mermaid/dist/rendering-util/createText.ts'; +import utils from 'mermaid/dist/utils.js'; +import { getLineFunctionsWithOffset } from 'mermaid/dist/utils/lineWithOffset.js'; +import { getSubGraphTitleMargins } from 'mermaid/dist/utils/subGraphTitleMargins.js'; import { curveBasis, line, select } from 'd3'; import rough from 'roughjs'; import createLabel from './createLabel.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/markers.js b/packages/mermaid/src/rendering-util/rendering-elements/markers.js index 0b0972a8ad..b9494c4c1a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/markers.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/markers.js @@ -1,5 +1,5 @@ /** Setup arrow head and define the marker. The result is appended to the svg. */ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; // Only add the number of markers that the diagram needs const insertMarkers = (elem, markerArray, type, id) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js index 54d4ddf3ee..830639f0c7 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/nodes.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/nodes.js @@ -1,4 +1,4 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { state } from './shapes/state.ts'; import { roundedRect } from './shapes/roundedRect.ts'; import { squareRect } from './shapes/squareRect.ts'; @@ -9,7 +9,7 @@ import { choice } from './shapes/choice.ts'; import { note } from './shapes/note.ts'; import { stadium } from './shapes/stadium.js'; import { rectWithTitle } from './shapes/rectWithTitle.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; import { subroutine } from './shapes/subroutine.js'; import { cylinder } from './shapes/cylinder.js'; import { circle } from './shapes/circle.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts index 3d6f085a4b..9b99b8e7f2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/choice.ts @@ -1,10 +1,10 @@ import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; -import type { SVG } from '$root/diagram-api/types.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; // @ts-ignore TODO: Fix rough typings import rough from 'roughjs'; import { solidStateFill, styles2String } from './handDrawnShapeStyles.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; export const choice = (parent: SVG, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts index 1474b778f7..3c301a0255 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts @@ -1,11 +1,11 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; export const circle = async (parent: SVGAElement, node: Node): Promise => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts index f85db0f05e..c92b40138b 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; export const createCylinderPathD = ( diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts index 5ce616c0ba..8672ffbfff 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts @@ -1,11 +1,11 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; export const doublecircle = async (parent: SVGAElement, node: Node): Promise => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts index 645f69177f..e9643ba4f5 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts @@ -1,11 +1,11 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; +import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts'; import { createRoundedRectPathD } from './roundedRectPath.js'; import { userNodeOverrides, styles2String, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts index 07978be106..324bb31343 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/forkJoin.ts @@ -1,10 +1,10 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; -import type { SVG } from '$root/diagram-api/types.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; import rough from 'roughjs'; import { solidStateFill } from './handDrawnShapeStyles.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; export const forkJoin = (parent: SVG, node: Node, dir: string) => { const { themeVariables } = getConfig(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts index a5c963e7cc..d764527d83 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.ts @@ -1,5 +1,5 @@ -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; // Striped fill like start or fork nodes in state diagrams export const solidStateFill = (color: string) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts index 3b0ce30819..5a1197c51a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts index 37f4152477..5a8bf9765a 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts index 2d5c6d6eaf..51605eae49 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/labelRect.ts @@ -1,4 +1,4 @@ -import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; +import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; import { labelHelper, updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts index bb57925e20..8e06096f1d 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts index 37604e7e77..b4c1ae7053 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts index 77fabf2718..a567c33128 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts @@ -1,8 +1,8 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { labelHelper, updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import rough from 'roughjs'; export const note = async (parent: SVGAElement, node: Node) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts index ba770ab4e0..b3eed0f665 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts @@ -1,11 +1,11 @@ -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts index b5000ac77e..4d7611331c 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts index 857e60b8b0..27ef201ee6 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/rectWithTitle.ts @@ -1,17 +1,17 @@ -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { select } from 'd3'; -import { evaluate } from '$root/diagrams/common/common.js'; +import { evaluate } from 'mermaid/dist/diagrams/common/common.js'; import { updateNodeBounds } from './util.js'; import createLabel from '../createLabel.js'; import intersect from '../intersect/index.js'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; import { createRoundedRectPathD } from './roundedRectPath.js'; -import { log } from '$root/logger.js'; +import { log } from 'mermaid/dist/logger.js'; export const rectWithTitle = async (parent: SVGElement, node: Node) => { const { labelStyles, nodeStyles } = styles2String(node); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts index 8a28b63ad4..5342965872 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/roundedRect.ts @@ -1,4 +1,4 @@ -import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; +import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; export const roundedRect = async (parent: SVGAElement, node: Node) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts index 8daeaec7a9..2070e6a149 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/squareRect.ts @@ -1,4 +1,4 @@ -import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; +import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; export const squareRect = async (parent: SVGAElement, node: Node) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts index 14504b3a08..bc42d5e6fd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stadium.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { createRoundedRectPathD } from './roundedRectPath.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts index fac2557353..06cbc636f2 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/state.ts @@ -1,4 +1,4 @@ -import type { Node, RectOptions } from '$root/rendering-util/types.d.ts'; +import type { Node, RectOptions } from 'mermaid/dist/rendering-util/types.d.ts'; import { drawRect } from './drawRect.js'; export const state = async (parent: SVGAElement, node: Node) => { diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts index a277ff0b9a..57f3916574 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateEnd.ts @@ -1,10 +1,10 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; -import type { SVG } from '$root/diagram-api/types.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; import rough from 'roughjs'; import { solidStateFill } from './handDrawnShapeStyles.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; export const stateEnd = (parent: SVG, node: Node) => { const { themeVariables } = getConfig(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts index 341b82e1cc..f8d0e084d8 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/stateStart.ts @@ -1,10 +1,10 @@ import { updateNodeBounds } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; -import type { SVG } from '$root/diagram-api/types.js'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; import rough from 'roughjs'; import { solidStateFill } from './handDrawnShapeStyles.js'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; export const stateStart = (parent: SVG, node: Node) => { const { themeVariables } = getConfig(); diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts index c4393c25fa..fbfa3ed5cd 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/subroutine.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts index b2013097a8..701747c1c1 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/trapezoid.ts @@ -1,10 +1,10 @@ import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js'; import intersect from '../intersect/index.js'; -import type { Node } from '$root/rendering-util/types.d.ts'; +import type { Node } from 'mermaid/dist/rendering-util/types.d.ts'; import { styles2String, userNodeOverrides, -} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; +} from 'mermaid/dist/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js'; import rough from 'roughjs'; import { insertPolygonShape } from './insertPolygonShape.js'; diff --git a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js index ca1290668a..633171d5ca 100644 --- a/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js +++ b/packages/mermaid/src/rendering-util/rendering-elements/shapes/util.js @@ -1,8 +1,8 @@ -import { createText } from '$root/rendering-util/createText.ts'; -import { getConfig } from '$root/diagram-api/diagramAPI.js'; +import { createText } from 'mermaid/dist/rendering-util/createText.ts'; +import { getConfig } from 'mermaid/dist/diagram-api/diagramAPI.js'; import { select } from 'd3'; -import { evaluate, sanitizeText } from '$root/diagrams/common/common.js'; -import { decodeEntities } from '$root/utils.js'; +import { evaluate, sanitizeText } from 'mermaid/dist/diagrams/common/common.js'; +import { decodeEntities } from 'mermaid/dist/utils.js'; export const labelHelper = async (parent, node, _classes) => { let cssClasses; diff --git a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts index e21f3304b3..00d8080667 100644 --- a/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts +++ b/packages/mermaid/src/rendering-util/setupViewPortForSVG.ts @@ -1,6 +1,6 @@ -import { configureSvgSize } from '$root/setupGraphViewbox.js'; -import type { SVG } from '$root/diagram-api/types.js'; -import { log } from '$root/logger.js'; +import { configureSvgSize } from 'mermaid/dist/setupGraphViewbox.js'; +import type { SVG } from 'mermaid/dist/diagram-api/types.js'; +import { log } from 'mermaid/dist/logger.js'; export const setupViewPortForSVG = ( svg: SVG, diff --git a/packages/mermaid/tsconfig.json b/packages/mermaid/tsconfig.json index 0f06a17313..3c7ed2b5e5 100644 --- a/packages/mermaid/tsconfig.json +++ b/packages/mermaid/tsconfig.json @@ -6,7 +6,7 @@ "types": ["vitest/importMeta", "vitest/globals"], "baseUrl": ".", // This must be set if "paths" is set "paths": { - "$root/*": ["src/*"] + "mermaid/dist/*": ["src/*"] } }, "include": [ diff --git a/vite.config.ts b/vite.config.ts index ed0ba10f73..2db66b7a40 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -9,7 +9,7 @@ export default defineConfig({ extensions: ['.js'], alias: { // Define your alias here - $root: path.resolve(__dirname, 'packages/mermaid/src'), + 'mermaid/dist': path.resolve(__dirname, 'packages/mermaid/src'), }, }, plugins: [ From 0b672e2636ace82a816f54a21ef207f7a87efe42 Mon Sep 17 00:00:00 2001 From: Nicholas Bollweg Date: Sun, 1 Sep 2024 16:40:12 -0500 Subject: [PATCH 14/89] add test for out-of-tree tsc project --- .github/workflows/test.yml | 4 + package.json | 1 + packages/mermaid/src/rendering-util/render.ts | 3 +- scripts/tsc-check.ts | 175 ++++++++++++++++++ 4 files changed, 182 insertions(+), 1 deletion(-) create mode 100644 scripts/tsc-check.ts diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 375d5fada3..026ca0fb7f 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -38,6 +38,10 @@ jobs: run: | pnpm exec vitest run ./packages/mermaid/src/diagrams/gantt/ganttDb.spec.ts --coverage + - name: Verify out-of-tree build with TypeScript + run: | + pnpm test:check:tsc + - name: Upload Coverage to Codecov uses: codecov/codecov-action@e28ff129e5465c2c0dcc6f003fc735cb6ae0c673 # v4.5.0 # Run step only pushes to develop and pull_requests diff --git a/package.json b/package.json index 21ae5360c4..ff100f1f6e 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "test": "pnpm lint && vitest run", "test:watch": "vitest --watch", "test:coverage": "vitest --coverage", + "test:check:tsc": "tsx scripts/tsc-check.ts", "prepare": "husky && pnpm build", "pre-commit": "lint-staged" }, diff --git a/packages/mermaid/src/rendering-util/render.ts b/packages/mermaid/src/rendering-util/render.ts index e3118b5b78..8306bc15a0 100644 --- a/packages/mermaid/src/rendering-util/render.ts +++ b/packages/mermaid/src/rendering-util/render.ts @@ -1,5 +1,6 @@ import type { SVG } from 'mermaid/dist/diagram-api/types.js'; -import type { InternalHelpers, internalHelpers } from 'mermaid/dist/internals.js'; +import type { InternalHelpers } from 'mermaid/dist/internals.js'; +import { internalHelpers } from 'mermaid/dist/internals.js'; import { log } from 'mermaid/dist/logger.js'; import type { LayoutData } from './types.js'; diff --git a/scripts/tsc-check.ts b/scripts/tsc-check.ts new file mode 100644 index 0000000000..7a5ff50a9b --- /dev/null +++ b/scripts/tsc-check.ts @@ -0,0 +1,175 @@ +/** + * Verify the as-built tarballs can be imported into a fresh, out-of-tree TypeScript project. + */ + +/* eslint-disable no-console */ +import { mkdtemp, mkdir, writeFile, readFile, readdir, copyFile, rm } from 'node:fs/promises'; +import { execFileSync } from 'child_process'; +import * as path from 'path'; +import { fileURLToPath } from 'url'; +import { tmpdir } from 'node:os'; + +const __filename = fileURLToPath(import.meta.url); // get the resolved path to the file +const __dirname = path.dirname(__filename); // get the name of the directory + +/** + * Packages to build and import + */ +const PACKAGES = { + mermaid: 'mermaid', + '@mermaid-js/layout-elk': 'mermaid-layout-elk', + // TODO: these don't import cleanly yet due to exotic tsconfig.json requirements + // '@mermaid-js/mermaid-zenuml': 'mermaid-zenuml', + // '@mermaid-js/parser': 'parser', +}; + +/** + * Files to create in the temporary package. + */ +const SRC = { + // a minimal description of a buildable package + 'package.json': (tarballs: Record) => + JSON.stringify( + { + dependencies: tarballs, + scripts: { build: 'tsc -b --verbose' }, + devDependencies: { + // these are somewhat-unexpectedly required, and a downstream would need + // to match the real `package.json` values + 'type-fest': '*', + '@types/d3': '^7.4.3', + '@types/dompurify': '^3.0.5', + typescript: '*', + }, + }, + null, + 2 + ), + // a fairly strict TypeScript configuration + 'tsconfig.json': () => + JSON.stringify( + { + compilerOptions: { + allowSyntheticDefaultImports: true, + composite: true, + declaration: true, + esModuleInterop: true, + incremental: true, + lib: ['dom', 'es2020'], + module: 'esnext', + moduleResolution: 'node', + noEmitOnError: true, + noImplicitAny: true, + noUnusedLocals: true, + sourceMap: true, + target: 'es2020', + rootDir: './src', + outDir: './lib', + strict: true, + tsBuildInfoFile: 'lib/.tsbuildinfo', + }, + }, + null, + 2 + ), + // the simplest possible script: will everything even import? + 'src/index.ts': (tarballs) => { + const imports: string[] = []; + const outputs: string[] = []; + let i = 0; + for (const pkg of Object.keys(tarballs)) { + imports.push(`import * as pkg_${i} from '${pkg}';`); + outputs.push(`console.log(pkg_${i});`); + i++; + } + return [...imports, ...outputs].join('\n'); + }, +}; + +/** + * Commands to run after source files are created. + * + * `npm` is used to detect any unwanted `pnpm`-specific runtime "features". + */ +const COMMANDS = [ + ['npm', 'install'], + ['npm', 'run', 'build'], +]; + +/** + * Built files to expect after commands are executed. + */ +const LIB = ['lib/index.js', 'lib/index.js.map', 'lib/index.d.ts', 'lib/.tsbuildinfo']; + +/** + * Run a small out-of-tree build. + */ +async function main() { + console.warn('Checking out-of-tree TypeScript build using', Object.keys(PACKAGES).join('\n')); + const cwd = await mkdtemp(path.join(tmpdir(), 'mermaid-tsc-check-')); + console.warn('... creating temporary folder', cwd); + const tarballs = await buildTarballs(cwd); + + for (const [filename, generate] of Object.entries(SRC)) { + const dest = path.join(cwd, filename); + await mkdir(path.dirname(dest), { recursive: true }); + console.warn('... creating', dest); + const text = generate(tarballs); + await writeFile(dest, text); + console.info(text); + } + + for (const argv of COMMANDS) { + console.warn('... in', cwd); + console.warn('>>>', ...argv); + execFileSync(argv[0], argv.slice(1), { cwd }); + } + + for (const lib of LIB) { + const checkLib = path.join(cwd, lib); + console.warn('... checking built file', checkLib); + await readFile(checkLib, 'utf-8'); + } + + console.warn('... deleting', cwd); + await rm(cwd, { recursive: true, force: true }); + console.warn('... tsc-check OK for\n', Object.keys(PACKAGES).join('\n')); +} + +/** Build all the tarballs. */ +async function buildTarballs(tmp: string): Promise> { + const dist = path.join(tmp, 'dist'); + await mkdir(dist); + const promises: Promise[] = []; + const tarballs: Record = {}; + for (const [pkg, srcPath] of Object.entries(PACKAGES)) { + promises.push(buildOneTarball(pkg, srcPath, dist, tarballs)); + } + await Promise.all(promises); + return tarballs; +} + +/** Build a single tarball. */ +async function buildOneTarball( + pkg: string, + srcPath: string, + dist: string, + tarballs: Record +): Promise { + const cwd = await mkdtemp(path.join(dist, 'pack-')); + const pkgDir = path.join(__dirname, '../packages', srcPath); + const argv = ['pnpm', 'pack', '--pack-destination', cwd]; + console.warn('>>>', ...argv); + execFileSync(argv[0], argv.slice(1), { cwd: pkgDir }); + const built = await readdir(cwd); + const dest = path.join(dist, built[0]); + await copyFile(path.join(cwd, built[0]), dest); + await rm(cwd, { recursive: true, force: true }); + tarballs[pkg] = dest; +} + +void main().catch((err) => { + console.error(err); + console.error('!!! tsc-check FAIL: temp folder left in place. see logs above for failure notes'); + process.exit(1); +}); From ef26fc921c003cd90793926408d91fa9fb616d8f Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 13:20:34 +0530 Subject: [PATCH 15/89] docs: Add iconify docs --- .cspell/libraries.txt | 1 + docs/syntax/architecture.md | 56 ++++++++++++++++++- .../mermaid/src/docs/syntax/architecture.md | 56 ++++++++++++++++++- 3 files changed, 111 insertions(+), 2 deletions(-) diff --git a/.cspell/libraries.txt b/.cspell/libraries.txt index ad0e3e7011..73a2dceeb2 100644 --- a/.cspell/libraries.txt +++ b/.cspell/libraries.txt @@ -30,6 +30,7 @@ Foswiki Gitea graphlib Grav +icones iconify Inkdrop jiti diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index 2d71d84fba..c204dbca6d 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -191,4 +191,58 @@ architecture-beta bottom_gateway:T -- B:junctionRight ``` -## Configuration +## Icons + +By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. + +The icon packs available can be found at [icones.js.org](https://icones.js.org/). + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; + +// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, +// to prevent mermaid from starting before the icons are loaded +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); +mermaid.registerIconPacks(await logos.json()); +mermaid.init(); +``` + +Using packages and a bundler: + +```js +import mermaid from 'mermaid'; +// npm install @iconify-json/logos +import { icons as logos } from '@iconify-json/logos'; + +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +mermaid.registerIconPacks(logos); +mermaid.init(); +``` + +After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. + +```` +```mermaid +architecture-beta + group api(logos:aws-lambda)[API] + + service db(logos:aws-aurora)[Database] in api + service disk1(logos:aws-glacier)[Storage] in api + service disk2(logos:aws-s3)[Storage] in api + service server(logos:aws-ec2)[Server] in api + + db:L -- R:server + disk1:T -- B:server + disk2:T -- B:db +``` +```` diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index e74995ce33..c2aa2fb995 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -153,4 +153,58 @@ architecture-beta bottom_gateway:T -- B:junctionRight ``` -## Configuration +## Icons + +By default, architecture diagram supports the following icons: `cloud`, `database`, `disk`, `internet`, `server`. +Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. + +The icon packs available can be found at [icones.js.org](https://icones.js.org/). + +Using JSON file directly from CDN: + +```js +import mermaid from 'CDN/mermaid.esm.mjs'; + +// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, +// to prevent mermaid from starting before the icons are loaded +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); +mermaid.registerIconPacks(await logos.json()); +mermaid.init(); +``` + +Using packages and a bundler: + +```js +import mermaid from 'mermaid'; +// npm install @iconify-json/logos +import { icons as logos } from '@iconify-json/logos'; + +mermaid.initialize({ + startOnLoad: false, + logLevel: 0, +}); +mermaid.registerIconPacks(logos); +mermaid.init(); +``` + +After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. + +```` +```mermaid +architecture-beta + group api(logos:aws-lambda)[API] + + service db(logos:aws-aurora)[Database] in api + service disk1(logos:aws-glacier)[Storage] in api + service disk2(logos:aws-s3)[Storage] in api + service server(logos:aws-ec2)[Server] in api + + db:L -- R:server + disk1:T -- B:server + disk2:T -- B:db +``` +```` From 2d8342261b42d6f75b3a97f1422844811eb555c1 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 13:50:50 +0530 Subject: [PATCH 16/89] docs: Add iconify docs --- .../classes/mermaid.UnknownDiagramError.md | 6 ++--- docs/syntax/architecture.md | 23 +++++++++++++++++++ .../src/docs/.vitepress/theme/Mermaid.vue | 2 -- .../src/docs/.vitepress/theme/mermaid.ts | 14 ++++++++++- .../mermaid/src/docs/syntax/architecture.md | 23 +++++++++++++++++++ 5 files changed, 62 insertions(+), 6 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index 3e1edf597e..abe205bb53 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:28 +node_modules/@types/node/globals.d.ts:98 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:30 +node_modules/@types/node/globals.d.ts:100 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:21 +node_modules/@types/node/globals.d.ts:91 diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index c204dbca6d..e1b13de182 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -246,3 +246,26 @@ architecture-beta disk2:T -- B:db ``` ```` + +
loading...
+ + diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index b98c49348d..5e0bbfa87e 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -86,11 +86,9 @@ onUnmounted(() => mut.disconnect()); const renderChart = async () => { console.log('rendering chart' + props.id + code.value); - const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, - theme: hasDarkClass ? 'dark' : 'default', }; let svgCode = await render(props.id, code.value, mermaidConfig); // This is a hack to force v-html to re-render, otherwise the diagram disappears diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 47e2386926..79ba278e0f 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -5,7 +5,19 @@ const init = mermaid.registerExternalDiagrams([zenuml]); export const render = async (id: string, code: string, config: MermaidConfig): Promise => { await init; - mermaid.initialize(config); + const hasDarkClass = document.documentElement.classList.contains('dark'); + const theme = hasDarkClass ? 'dark' : 'default'; + mermaid.initialize({ ...config, theme }); const { svg } = await mermaid.render(id, code); return svg; }; + +declare global { + interface Window { + mermaid: typeof mermaid; + render: typeof render; + } +} + +window.mermaid = mermaid; +window.render = render; diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index c2aa2fb995..ed50e1c0b7 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -208,3 +208,26 @@ architecture-beta disk2:T -- B:db ``` ```` + +
loading...
+ + From 7cda494bf4d28fe1410bf22d073cca42b7d5cb5f Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 08:25:52 +0000 Subject: [PATCH 17/89] [autofix.ci] apply automated fixes --- docs/config/setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index abe205bb53..3e1edf597e 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:98 +node_modules/@types/node/globals.d.ts:28 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:100 +node_modules/@types/node/globals.d.ts:30 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:91 +node_modules/@types/node/globals.d.ts:21 From 7056c20ccaea65e9f85d74c705256a9fcffdf8e9 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:00:03 +0530 Subject: [PATCH 18/89] docs: Add external icons in demos --- demos/architecture.html | 22 +++++++++------------- 1 file changed, 9 insertions(+), 13 deletions(-) diff --git a/demos/architecture.html b/demos/architecture.html index 137b3fbf01..0e2ce14530 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -226,27 +226,23 @@

Junction Demo Groups

- + service s3(logos:aws-s3)[Cloud Store] + service ec2(logos:aws-ec2)[Server] + service api(logos:aws-api-gateway)[Api Gateway] + From f5cc0dcaea980f8553e7c6460c210d2ff679ed92 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:05:37 +0530 Subject: [PATCH 19/89] test: External diagram rendering test --- cypress/helpers/util.ts | 2 +- .../rendering/architecture.spec.ts | 6 ++- cypress/platform/architecture-external.html | 39 +++++++++++++++++++ 3 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 cypress/platform/architecture-external.html diff --git a/cypress/helpers/util.ts b/cypress/helpers/util.ts index 133a350328..74b17cf055 100644 --- a/cypress/helpers/util.ts +++ b/cypress/helpers/util.ts @@ -73,7 +73,7 @@ export const imgSnapshotTest = ( export const urlSnapshotTest = ( url: string, - options: CypressMermaidConfig, + options: CypressMermaidConfig = {}, _api = false, validation?: any ): void => { diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 9eefbe1e42..6c49298dad 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -1,4 +1,4 @@ -import { imgSnapshotTest } from '../../helpers/util.ts'; +import { imgSnapshotTest, urlSnapshotTest } from '../../helpers/util.ts'; describe.skip('architecture diagram', () => { it('should render a simple architecture diagram with groups', () => { @@ -172,3 +172,7 @@ describe.skip('architecture diagram', () => { ); }); }); + +it('should allow adding external icons', () => { + urlSnapshotTest('http://localhost:9000/architecture-external.html'); +}); diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html new file mode 100644 index 0000000000..6057098462 --- /dev/null +++ b/cypress/platform/architecture-external.html @@ -0,0 +1,39 @@ + + + + + + Architecture Mermaid Test Page + + + + + +

External Icons Demo

+ 
+    architecture-beta
+      service s3(logos:aws-s3)[Cloud Store]
+      service ec2(logos:aws-ec2)[Server]
+      service api(logos:aws-api-gateway)[Api Gateway]
+
+ + + + From 8ef24e5a18597a776d9a6efc7f31220573ebd879 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 14:47:46 +0530 Subject: [PATCH 20/89] chore: update pnpm, remove dependency --- package.json | 3 +-- pnpm-lock.yaml | 20 +++++--------------- 2 files changed, 6 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 21ae5360c4..9aeedf8f76 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "10.2.4", "description": "Markdownish syntax for generating flowcharts, sequence diagrams, class diagrams, gantt charts and git graphs.", "type": "module", - "packageManager": "pnpm@9.7.1+sha512.faf344af2d6ca65c4c5c8c2224ea77a81a5e8859cbc4e06b1511ddce2f0151512431dd19e6aff31f2c6a8f5f2aced9bd2273e1fed7dd4de1868984059d2c4247", + "packageManager": "pnpm@9.9.0+sha512.60c18acd138bff695d339be6ad13f7e936eea6745660d4cc4a776d5247c540d0edee1a563695c183a66eb917ef88f2b4feb1fc25f32a7adcadc7aaf3438e99c1", "keywords": [ "diagram", "markdown", @@ -116,7 +116,6 @@ "markdown-table": "^3.0.3", "nyc": "^15.1.0", "path-browserify": "^1.0.1", - "pnpm": "^8.15.5", "prettier": "^3.2.5", "prettier-plugin-jsdoc": "^1.3.0", "rimraf": "^5.0.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8e7d04115..5a59b4e9d7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -170,9 +170,6 @@ importers: path-browserify: specifier: ^1.0.1 version: 1.0.1 - pnpm: - specifier: ^8.15.5 - version: 8.15.9 prettier: specifier: ^3.2.5 version: 3.3.3 @@ -7325,11 +7322,6 @@ packages: resolution: {integrity: sha512-TRzzuFRRmEoSW/p1KVAmiOgPco2Irlah+bGFCeNfJXxxYGwSw7YwAOAcd7X28K/m5bjBWKsC29KyoMfHbypayg==} engines: {node: '>=12.13.0'} - pnpm@8.15.9: - resolution: {integrity: sha512-SZQ0ydj90aJ5Tr9FUrOyXApjOrzuW7Fee13pDzL0e1E6ypjNXP0AHDHw20VLw4BO3M1XhQHkyik6aBYWa72fgQ==} - engines: {node: '>=16.14'} - hasBin: true - points-on-curve@0.2.0: resolution: {integrity: sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==} @@ -16599,7 +16591,7 @@ snapshots: mdast-util-from-markdown@2.0.1: dependencies: '@types/mdast': 4.0.4 - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 decode-named-character-reference: 1.0.2 devlop: 1.1.0 mdast-util-to-string: 4.0.0 @@ -16689,7 +16681,7 @@ snapshots: mdast-util-to-markdown@2.1.0: dependencies: '@types/mdast': 4.0.4 - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 longest-streak: 3.1.0 mdast-util-phrasing: 4.1.0 mdast-util-to-string: 4.0.0 @@ -17453,8 +17445,6 @@ snapshots: pngjs@6.0.0: {} - pnpm@8.15.9: {} - points-on-curve@0.2.0: {} points-on-path@0.2.1: @@ -18795,7 +18785,7 @@ snapshots: unist-util-stringify-position@4.0.0: dependencies: - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 unist-util-visit-parents@6.0.1: dependencies: @@ -18919,12 +18909,12 @@ snapshots: vfile-message@4.0.2: dependencies: - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 unist-util-stringify-position: 4.0.0 vfile@6.0.2: dependencies: - '@types/unist': 3.0.2 + '@types/unist': 3.0.3 unist-util-stringify-position: 4.0.0 vfile-message: 4.0.2 From 69c9a564f2f190498f95f733ef58bfb6043f6598 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 16:11:33 +0530 Subject: [PATCH 21/89] chore: Disable mermaid in SSR --- .../setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- docs/syntax/architecture.md | 4 +++- .../mermaid/src/docs/.vitepress/theme/mermaid.ts | 13 ++++++++++--- packages/mermaid/src/docs/syntax/architecture.md | 4 +++- 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index 3e1edf597e..abe205bb53 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:28 +node_modules/@types/node/globals.d.ts:98 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:30 +node_modules/@types/node/globals.d.ts:100 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:21 +node_modules/@types/node/globals.d.ts:91 diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index e1b13de182..a45a9308bd 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -267,5 +267,7 @@ const main = async () => { document.getElementById('arch-example').innerHTML = svg; }; -setTimeout(main, 100) +if (!import.meta.env.SSR) { + setTimeout(main, 100); +} diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index 79ba278e0f..c4021d2cb1 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -17,7 +17,14 @@ declare global { mermaid: typeof mermaid; render: typeof render; } -} -window.mermaid = mermaid; -window.render = render; + interface ImportMeta { + env: { + SSR: boolean; + }; + } +} +if (!import.meta.env.SSR) { + window.mermaid = mermaid; + window.render = render; +} diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index ed50e1c0b7..f4ff3bd722 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -229,5 +229,7 @@ const main = async () => { document.getElementById('arch-example').innerHTML = svg; }; -setTimeout(main, 100) +if (!import.meta.env.SSR) { + setTimeout(main, 100); +} From 0b127eecd96773ca511cf6991099259ae102cdd7 Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Mon, 2 Sep 2024 10:46:53 +0000 Subject: [PATCH 22/89] [autofix.ci] apply automated fixes --- docs/config/setup/classes/mermaid.UnknownDiagramError.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/config/setup/classes/mermaid.UnknownDiagramError.md b/docs/config/setup/classes/mermaid.UnknownDiagramError.md index abe205bb53..3e1edf597e 100644 --- a/docs/config/setup/classes/mermaid.UnknownDiagramError.md +++ b/docs/config/setup/classes/mermaid.UnknownDiagramError.md @@ -127,7 +127,7 @@ Error.prepareStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:98 +node_modules/@types/node/globals.d.ts:28 --- @@ -141,7 +141,7 @@ Error.stackTraceLimit #### Defined in -node_modules/@types/node/globals.d.ts:100 +node_modules/@types/node/globals.d.ts:30 ## Methods @@ -168,4 +168,4 @@ Error.captureStackTrace #### Defined in -node_modules/@types/node/globals.d.ts:91 +node_modules/@types/node/globals.d.ts:21 From f4decdee49b4961358913a7d3537bab004476561 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 18:01:35 +0530 Subject: [PATCH 23/89] chore: Update cypress --- package.json | 2 +- pnpm-lock.yaml | 183 +++++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 169 insertions(+), 16 deletions(-) diff --git a/package.json b/package.json index 9aeedf8f76..5683b6ed98 100644 --- a/package.json +++ b/package.json @@ -88,7 +88,7 @@ "cpy-cli": "^5.0.0", "cross-env": "^7.0.3", "cspell": "^8.6.0", - "cypress": "^13.11.0", + "cypress": "^13.14.1", "cypress-image-snapshot": "^4.0.1", "esbuild": "^0.21.5", "eslint": "^9.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5a59b4e9d7..fff57c2ccf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 3.44.7(encoding@0.1.13)(typescript@5.4.5) '@argos-ci/cypress': specifier: ^2.1.0 - version: 2.1.2(cypress@13.14.0) + version: 2.1.2(cypress@13.14.1) '@changesets/changelog-github': specifier: ^0.5.0 version: 0.5.0(encoding@0.1.13) @@ -25,7 +25,7 @@ importers: version: 8.13.3(eslint@9.8.0) '@cypress/code-coverage': specifier: ^3.12.30 - version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5)) + version: 3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5)) '@eslint/js': specifier: ^9.4.0 version: 9.8.0 @@ -87,11 +87,11 @@ importers: specifier: ^8.6.0 version: 8.14.2 cypress: - specifier: ^13.11.0 - version: 13.14.0 + specifier: ^13.14.1 + version: 13.14.1 cypress-image-snapshot: specifier: ^4.0.1 - version: 4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2)) + version: 4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2)) esbuild: specifier: ^0.21.5 version: 0.21.5 @@ -497,6 +497,67 @@ importers: specifier: ^7.0.0 version: 7.1.0 + packages/mermaid/src/vitepress: + dependencies: + '@mdi/font': + specifier: ^7.0.0 + version: 7.4.47 + '@vueuse/core': + specifier: ^10.9.0 + version: 10.11.1(vue@3.4.38(typescript@5.4.5)) + font-awesome: + specifier: ^4.7.0 + version: 4.7.0 + jiti: + specifier: ^1.21.0 + version: 1.21.6 + mermaid: + specifier: workspace:^ + version: link:../.. + vue: + specifier: ^3.4.21 + version: 3.4.38(typescript@5.4.5) + devDependencies: + '@iconify-json/carbon': + specifier: ^1.1.31 + version: 1.1.37 + '@unocss/reset': + specifier: ^0.59.0 + version: 0.59.4 + '@vite-pwa/vitepress': + specifier: ^0.4.0 + version: 0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0)) + '@vitejs/plugin-vue': + specifier: ^5.0.0 + version: 5.1.2(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(vue@3.4.38(typescript@5.4.5)) + fast-glob: + specifier: ^3.3.2 + version: 3.3.2 + https-localhost: + specifier: ^4.7.1 + version: 4.7.1 + pathe: + specifier: ^1.1.2 + version: 1.1.2 + unocss: + specifier: ^0.59.0 + version: 0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + unplugin-vue-components: + specifier: ^0.26.0 + version: 0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)) + vite: + specifier: ^5.0.0 + version: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + vite-plugin-pwa: + specifier: ^0.19.7 + version: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0) + vitepress: + specifier: 1.1.4 + version: 1.1.4(@algolia/client-search@4.24.0)(@types/node@22.5.1)(axios@1.7.5)(postcss@8.4.41)(search-insights@2.15.0)(terser@5.31.6)(typescript@5.4.5) + workbox-window: + specifier: ^7.0.0 + version: 7.1.0 + packages/parser: dependencies: langium: @@ -4351,8 +4412,8 @@ packages: cypress-wait-until@3.0.2: resolution: {integrity: sha512-iemies796dD5CgjG5kV0MnpEmKSH+s7O83ZoJLVzuVbZmm4lheMsZqAVT73hlMx4QlkwhxbyUzhOBUOZwoOe0w==} - cypress@13.14.0: - resolution: {integrity: sha512-r0+nhd033x883YL6068futewUsl02Q7rWiinyAAIBDW/OOTn+UMILWgNuCiY3vtJjd53efOqq5R9dctQk/rKiw==} + cypress@13.14.1: + resolution: {integrity: sha512-Wo+byPmjps66hACEH5udhXINEiN3qS3jWNGRzJOjrRJF3D0+YrcP2LVB1T7oYaVQM/S+eanqEvBWYc8cf7Vcbg==} engines: {node: ^16.0.0 || ^18.0.0 || >=20.0.0} hasBin: true @@ -9546,12 +9607,12 @@ snapshots: transitivePeerDependencies: - supports-color - '@argos-ci/cypress@2.1.2(cypress@13.14.0)': + '@argos-ci/cypress@2.1.2(cypress@13.14.1)': dependencies: '@argos-ci/browser': 2.1.3 '@argos-ci/core': 2.5.0 '@argos-ci/util': 2.1.1 - cypress: 13.14.0 + cypress: 13.14.1 cypress-wait-until: 3.0.2 transitivePeerDependencies: - supports-color @@ -10898,14 +10959,14 @@ snapshots: '@cspell/url@8.14.2': {} - '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.0)(webpack@5.93.0(esbuild@0.21.5))': + '@cypress/code-coverage@3.12.45(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(cypress@13.14.1)(webpack@5.93.0(esbuild@0.21.5))': dependencies: '@babel/core': 7.25.2 '@babel/preset-env': 7.25.4(@babel/core@7.25.2) '@cypress/webpack-preprocessor': 6.0.2(@babel/core@7.25.2)(@babel/preset-env@7.25.4(@babel/core@7.25.2))(babel-loader@9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)))(webpack@5.93.0(esbuild@0.21.5)) babel-loader: 9.1.3(@babel/core@7.25.2)(webpack@5.93.0(esbuild@0.21.5)) chalk: 4.1.2 - cypress: 13.14.0 + cypress: 13.14.1 dayjs: 1.11.12 debug: 4.3.6(supports-color@8.1.1) execa: 4.1.0 @@ -12293,6 +12354,16 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/astro@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + dependencies: + '@unocss/core': 0.59.4 + '@unocss/reset': 0.59.4 + '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + optionalDependencies: + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - rollup + '@unocss/cli@0.59.4(rollup@2.79.1)': dependencies: '@ampproject/remapping': 2.3.0 @@ -12311,6 +12382,24 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/cli@0.59.4(rollup@4.21.1)': + dependencies: + '@ampproject/remapping': 2.3.0 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + '@unocss/config': 0.59.4 + '@unocss/core': 0.59.4 + '@unocss/preset-uno': 0.59.4 + cac: 6.7.14 + chokidar: 3.6.0 + colorette: 2.0.20 + consola: 3.2.3 + fast-glob: 3.3.2 + magic-string: 0.30.11 + pathe: 1.1.2 + perfect-debounce: 1.0.0 + transitivePeerDependencies: + - rollup + '@unocss/config@0.59.4': dependencies: '@unocss/core': 0.59.4 @@ -12436,6 +12525,22 @@ snapshots: transitivePeerDependencies: - rollup + '@unocss/vite@0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))': + dependencies: + '@ampproject/remapping': 2.3.0 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + '@unocss/config': 0.59.4 + '@unocss/core': 0.59.4 + '@unocss/inspector': 0.59.4 + '@unocss/scope': 0.59.4 + '@unocss/transformer-directives': 0.59.4 + chokidar: 3.6.0 + fast-glob: 3.3.2 + magic-string: 0.30.11 + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - rollup + '@vite-pwa/vitepress@0.4.0(vite-plugin-pwa@0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0))': dependencies: vite-plugin-pwa: 0.19.8(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.1.0) @@ -13865,10 +13970,10 @@ snapshots: cuint@0.2.2: {} - cypress-image-snapshot@4.0.1(cypress@13.14.0)(jest@29.7.0(@types/node@20.16.2)): + cypress-image-snapshot@4.0.1(cypress@13.14.1)(jest@29.7.0(@types/node@20.16.2)): dependencies: chalk: 2.4.2 - cypress: 13.14.0 + cypress: 13.14.1 fs-extra: 7.0.1 glob: 7.2.3 jest-image-snapshot: 4.2.0(jest@29.7.0(@types/node@20.16.2)) @@ -13879,7 +13984,7 @@ snapshots: cypress-wait-until@3.0.2: {} - cypress@13.14.0: + cypress@13.14.1: dependencies: '@cypress/request': 3.0.1 '@cypress/xvfb': 1.2.4(supports-color@8.1.1) @@ -14915,7 +15020,7 @@ snapshots: proxy-addr: 2.0.7 rfdc: 1.4.1 secure-json-parse: 2.7.0 - semver: 7.6.2 + semver: 7.6.3 tiny-lru: 8.0.2 transitivePeerDependencies: - supports-color @@ -18833,6 +18938,35 @@ snapshots: - rollup - supports-color + unocss@0.59.4(postcss@8.4.41)(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)): + dependencies: + '@unocss/astro': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + '@unocss/cli': 0.59.4(rollup@4.21.1) + '@unocss/core': 0.59.4 + '@unocss/extractor-arbitrary-variants': 0.59.4 + '@unocss/postcss': 0.59.4(postcss@8.4.41) + '@unocss/preset-attributify': 0.59.4 + '@unocss/preset-icons': 0.59.4 + '@unocss/preset-mini': 0.59.4 + '@unocss/preset-tagify': 0.59.4 + '@unocss/preset-typography': 0.59.4 + '@unocss/preset-uno': 0.59.4 + '@unocss/preset-web-fonts': 0.59.4 + '@unocss/preset-wind': 0.59.4 + '@unocss/reset': 0.59.4 + '@unocss/transformer-attributify-jsx': 0.59.4 + '@unocss/transformer-attributify-jsx-babel': 0.59.4 + '@unocss/transformer-compile-class': 0.59.4 + '@unocss/transformer-directives': 0.59.4 + '@unocss/transformer-variant-group': 0.59.4 + '@unocss/vite': 0.59.4(rollup@4.21.1)(vite@5.4.2(@types/node@22.5.1)(terser@5.31.6)) + optionalDependencies: + vite: 5.4.2(@types/node@22.5.1)(terser@5.31.6) + transitivePeerDependencies: + - postcss + - rollup + - supports-color + unpipe@1.0.0: {} unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@2.79.1)(vue@3.4.38(typescript@5.4.5)): @@ -18854,6 +18988,25 @@ snapshots: - rollup - supports-color + unplugin-vue-components@0.26.0(@babel/parser@7.25.4)(rollup@4.21.1)(vue@3.4.38(typescript@5.4.5)): + dependencies: + '@antfu/utils': 0.7.10 + '@rollup/pluginutils': 5.1.0(rollup@4.21.1) + chokidar: 3.6.0 + debug: 4.3.6(supports-color@8.1.1) + fast-glob: 3.3.2 + local-pkg: 0.4.3 + magic-string: 0.30.11 + minimatch: 9.0.5 + resolve: 1.22.8 + unplugin: 1.12.0 + vue: 3.4.38(typescript@5.4.5) + optionalDependencies: + '@babel/parser': 7.25.4 + transitivePeerDependencies: + - rollup + - supports-color + unplugin@1.12.0: dependencies: acorn: 8.12.1 From c68ae309e5379fec11ccd6f7edc89a2fb7d89cb4 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 18:34:58 +0530 Subject: [PATCH 24/89] test: Wrap in describe block --- cypress/integration/rendering/architecture.spec.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/cypress/integration/rendering/architecture.spec.ts b/cypress/integration/rendering/architecture.spec.ts index 6c49298dad..1deb1f7da1 100644 --- a/cypress/integration/rendering/architecture.spec.ts +++ b/cypress/integration/rendering/architecture.spec.ts @@ -173,6 +173,8 @@ describe.skip('architecture diagram', () => { }); }); -it('should allow adding external icons', () => { - urlSnapshotTest('http://localhost:9000/architecture-external.html'); +describe('architecture - external', () => { + it('should allow adding external icons', () => { + urlSnapshotTest('http://localhost:9000/architecture-external.html'); + }); }); From 0edfab104886de283ca6c4741ff1568f03670f77 Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 19:51:14 +0530 Subject: [PATCH 25/89] feat: Lazy load icons Co-authored-by: Alois Klink --- cypress/platform/architecture-external.html | 9 +- demos/architecture.html | 22 +++-- .../setup/interfaces/mermaid.Mermaid.md | 10 +-- docs/syntax/architecture.md | 90 ++++++++++--------- .../architecture/architectureRenderer.ts | 7 +- .../src/diagrams/architecture/svgDraw.ts | 6 +- .../src/docs/.vitepress/theme/Mermaid.vue | 2 + .../src/docs/.vitepress/theme/mermaid.ts | 28 ++---- .../mermaid/src/docs/syntax/architecture.md | 82 ++++++++--------- packages/mermaid/src/rendering-util/icons.ts | 59 +++++++++--- 10 files changed, 175 insertions(+), 140 deletions(-) diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html index 6057098462..b76ac54ce5 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -28,8 +28,13 @@

External Icons Demo

startOnLoad: false, logLevel: 0, }); - const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); - mermaid.registerIconPacks(await logos.json()); + mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, + ]); await mermaid.run(); if (window.Cypress) { window.rendered = true; diff --git a/demos/architecture.html b/demos/architecture.html index 0e2ce14530..6d978d9525 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -232,17 +232,25 @@

External Icons Demo

service s3(logos:aws-s3)[Cloud Store] service ec2(logos:aws-ec2)[Server] service api(logos:aws-api-gateway)[Api Gateway] + service fa(fa:image)[Font Awesome Icon] diff --git a/docs/config/setup/interfaces/mermaid.Mermaid.md b/docs/config/setup/interfaces/mermaid.Mermaid.md index 99a054caa7..f4e9eb4ec3 100644 --- a/docs/config/setup/interfaces/mermaid.Mermaid.md +++ b/docs/config/setup/interfaces/mermaid.Mermaid.md @@ -224,17 +224,17 @@ Used to register external diagram types. ### registerIconPacks -• **registerIconPacks**: (...`iconPacks`: `IconifyJSON`\[]) => `void` +• **registerIconPacks**: (`iconLoaders`: `IconLoader`\[]) => `void` #### Type declaration -▸ (`...iconPacks`): `void` +▸ (`iconLoaders`): `void` ##### Parameters -| Name | Type | -| :------------- | :--------------- | -| `...iconPacks` | `IconifyJSON`\[] | +| Name | Type | +| :------------ | :-------------- | +| `iconLoaders` | `IconLoader`\[] | ##### Returns diff --git a/docs/syntax/architecture.md b/docs/syntax/architecture.md index a45a9308bd..10d6b9aba7 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -197,42 +197,56 @@ By default, architecture diagram supports the following icons: `cloud`, `databas Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. The icon packs available can be found at [icones.js.org](https://icones.js.org/). +We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. Using JSON file directly from CDN: ```js import mermaid from 'CDN/mermaid.esm.mjs'; - -// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, -// to prevent mermaid from starting before the icons are loaded -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); -mermaid.registerIconPacks(await logos.json()); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); ``` Using packages and a bundler: +```bash +npm install @iconify-json/logos +``` + +With lazy loading + ```js import mermaid from 'mermaid'; -// npm install @iconify-json/logos -import { icons as logos } from '@iconify-json/logos'; -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -mermaid.registerIconPacks(logos); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); ``` -After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. +Without lazy loading -```` -```mermaid +```js +import mermaid from 'mermaid'; +import { icons } from '@iconify-json/logos'; +mermaid.registerIconPacks([ + { + name: icons.prefix, // To use the prefix defined in the icon pack + icons, + }, +]); +``` + +After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. + +```mermaid-example architecture-beta group api(logos:aws-lambda)[API] @@ -245,29 +259,17 @@ architecture-beta disk1:T -- B:server disk2:T -- B:db ``` -```` - -
loading...
- + db:L -- R:server + disk1:T -- B:server + disk2:T -- B:db +``` diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 84b9ed6554..3abb69b9f7 100644 --- a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts +++ b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts @@ -34,7 +34,12 @@ import { } from './architectureTypes.js'; import { drawEdges, drawGroups, drawJunctions, drawServices } from './svgDraw.js'; -registerIconPacks(architectureIcons); +registerIconPacks([ + { + name: architectureIcons.prefix, + icons: architectureIcons, + }, +]); cytoscape.use(fcose); function addServices(services: ArchitectureService[], cy: cytoscape.Core) { diff --git a/packages/mermaid/src/diagrams/architecture/svgDraw.ts b/packages/mermaid/src/diagrams/architecture/svgDraw.ts index d1c053f717..3578393949 100644 --- a/packages/mermaid/src/diagrams/architecture/svgDraw.ts +++ b/packages/mermaid/src/diagrams/architecture/svgDraw.ts @@ -212,7 +212,7 @@ export const drawGroups = async function (groupsEl: D3Element, cy: cytoscape.Cor if (data.icon) { const bkgElem = groupLabelContainer.append('g'); bkgElem.html( - `${getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(data.icon, { height: groupIconSize, width: groupIconSize, fallbackPrefix: architectureIcons.prefix })}` ); bkgElem.attr( 'transform', @@ -297,11 +297,11 @@ export const drawServices = async function ( // throw new Error(`Invalid SVG Icon name: "${service.icon}"`); // } bkgElem.html( - `${getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG(service.icon, { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); } else if (service.iconText) { bkgElem.html( - `${getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` + `${await getIconSVG('blank', { height: iconSize, width: iconSize, fallbackPrefix: architectureIcons.prefix })}` ); const textElemContainer = bkgElem.append('g'); const fo = textElemContainer diff --git a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue index 5e0bbfa87e..b98c49348d 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue +++ b/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue @@ -86,9 +86,11 @@ onUnmounted(() => mut.disconnect()); const renderChart = async () => { console.log('rendering chart' + props.id + code.value); + const hasDarkClass = document.documentElement.classList.contains('dark'); const mermaidConfig = { securityLevel: 'loose', startOnLoad: false, + theme: hasDarkClass ? 'dark' : 'default', }; let svgCode = await render(props.id, code.value, mermaidConfig); // This is a hack to force v-html to re-render, otherwise the diagram disappears diff --git a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts index c4021d2cb1..2357fe384b 100644 --- a/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts +++ b/packages/mermaid/src/docs/.vitepress/theme/mermaid.ts @@ -2,29 +2,17 @@ import mermaid, { type MermaidConfig } from 'mermaid'; import zenuml from '../../../../../mermaid-zenuml/dist/mermaid-zenuml.core.mjs'; const init = mermaid.registerExternalDiagrams([zenuml]); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); export const render = async (id: string, code: string, config: MermaidConfig): Promise => { await init; - const hasDarkClass = document.documentElement.classList.contains('dark'); - const theme = hasDarkClass ? 'dark' : 'default'; - mermaid.initialize({ ...config, theme }); + mermaid.initialize(config); const { svg } = await mermaid.render(id, code); return svg; }; - -declare global { - interface Window { - mermaid: typeof mermaid; - render: typeof render; - } - - interface ImportMeta { - env: { - SSR: boolean; - }; - } -} -if (!import.meta.env.SSR) { - window.mermaid = mermaid; - window.render = render; -} diff --git a/packages/mermaid/src/docs/syntax/architecture.md b/packages/mermaid/src/docs/syntax/architecture.md index f4ff3bd722..0d199c8b15 100644 --- a/packages/mermaid/src/docs/syntax/architecture.md +++ b/packages/mermaid/src/docs/syntax/architecture.md @@ -159,42 +159,56 @@ By default, architecture diagram supports the following icons: `cloud`, `databas Users can use any of the 200,000+ icons available in iconify.design, or add their own custom icons, by following the steps below. The icon packs available can be found at [icones.js.org](https://icones.js.org/). +We use the name defined when registering the icon pack, to override the prefix field of the iconify pack. This allows the user to use shorter names for the icons. It also allows us to load a particular pack only when it is used in a diagram. Using JSON file directly from CDN: ```js import mermaid from 'CDN/mermaid.esm.mjs'; - -// You have to call `initialize` with startOnLoad:false before calling `registerIconPacks`, -// to prevent mermaid from starting before the icons are loaded -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -const logos = await fetch('https://unpkg.com/@iconify-json/logos/icons.json'); -mermaid.registerIconPacks(await logos.json()); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => + fetch('https://unpkg.com/@iconify-json/logos/icons.json').then((res) => res.json()), + }, +]); ``` Using packages and a bundler: +```bash +npm install @iconify-json/logos +``` + +With lazy loading + ```js import mermaid from 'mermaid'; -// npm install @iconify-json/logos -import { icons as logos } from '@iconify-json/logos'; -mermaid.initialize({ - startOnLoad: false, - logLevel: 0, -}); -mermaid.registerIconPacks(logos); -mermaid.init(); +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); ``` -After the icons are installed, they can be used in the architecture diagram by using the format "prefix:icon-name", where prefix comes from the icon pack you selected. +Without lazy loading + +```js +import mermaid from 'mermaid'; +import { icons } from '@iconify-json/logos'; +mermaid.registerIconPacks([ + { + name: icons.prefix, // To use the prefix defined in the icon pack + icons, + }, +]); +``` -```` -```mermaid +After the icons are installed, they can be used in the architecture diagram by using the format "name:icon-name", where name is the value used when registering the icon pack. + +```mermaid-example architecture-beta group api(logos:aws-lambda)[API] @@ -207,29 +221,3 @@ architecture-beta disk1:T -- B:server disk2:T -- B:db ``` -```` - -
loading...
- - diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts index 199bc4206e..27709b8229 100644 --- a/packages/mermaid/src/rendering-util/icons.ts +++ b/packages/mermaid/src/rendering-util/icons.ts @@ -3,21 +3,47 @@ import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/typ import type { IconifyIconCustomisations } from '@iconify/utils'; import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils'; +interface AsyncIconLoader { + name: string; + loader: () => Promise; +} + +interface SyncIconLoader { + name: string; + icons: IconifyJSON; +} + +export type IconLoader = AsyncIconLoader | SyncIconLoader; + export const unknownIcon: IconifyIcon = { body: '?', height: 80, width: 80, }; -export const iconsStore = new Map(); +const iconsStore = new Map(); +const loaderStore = new Map(); -export const registerIconPacks = (...iconPacks: IconifyJSON[]) => { - for (const pack of iconPacks) { - iconsStore.set(pack.prefix, pack); +export const registerIconPacks = (iconLoaders: IconLoader[]) => { + for (const iconLoader of iconLoaders) { + if (!iconLoader.name) { + throw new Error( + 'Invalid icon loader. Must have a "name" property with non-empty string value.' + ); + } + log.debug('Registering icon pack:', iconLoader.name); + if ('loader' in iconLoader) { + loaderStore.set(iconLoader.name, iconLoader.loader); + } else if ('icons' in iconLoader) { + iconsStore.set(iconLoader.name, iconLoader.icons); + } else { + log.error('Invalid icon loader:', iconLoader); + throw new Error('Invalid icon loader. Must have either "icons" or "loader" property.'); + } } }; -const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { +const getRegisteredIconData = async (iconName: string, fallbackPrefix?: string) => { const data = stringToIcon(iconName, true, fallbackPrefix !== undefined); if (!data) { throw new Error(`Invalid icon name: ${iconName}`); @@ -26,9 +52,20 @@ const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { if (!prefix) { throw new Error(`Icon name must contain a prefix: ${iconName}`); } - const icons = iconsStore.get(prefix); + let icons = iconsStore.get(prefix); if (!icons) { - throw new Error(`Icon set not found: ${data.prefix}`); + const loader = loaderStore.get(prefix); + if (!loader) { + throw new Error(`Icon set not found: ${data.prefix}`); + } + try { + const loaded = await loader(); + icons = { ...loaded, prefix }; + iconsStore.set(prefix, icons); + } catch (e) { + log.error(e); + throw new Error(`Failed to load icon set: ${data.prefix}`); + } } const iconData = getIconData(icons, data.name); if (!iconData) { @@ -37,22 +74,22 @@ const getRegisteredIconData = (iconName: string, fallbackPrefix?: string) => { return iconData; }; -export const isIconAvailable = (iconName: string) => { +export const isIconAvailable = async (iconName: string) => { try { - getRegisteredIconData(iconName); + await getRegisteredIconData(iconName); return true; } catch { return false; } }; -export const getIconSVG = ( +export const getIconSVG = async ( iconName: string, customisations?: IconifyIconCustomisations & { fallbackPrefix?: string } ) => { let iconData: ExtendedIconifyIcon; try { - iconData = getRegisteredIconData(iconName, customisations?.fallbackPrefix); + iconData = await getRegisteredIconData(iconName, customisations?.fallbackPrefix); } catch (e) { log.error(e); iconData = unknownIcon; From e44cdbd79d8803022b56e952b37f0fd54a8e58be Mon Sep 17 00:00:00 2001 From: Sidharth Vinod Date: Mon, 2 Sep 2024 19:55:04 +0530 Subject: [PATCH 26/89] test: Add second icon pack --- cypress/platform/architecture-external.html | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html index b76ac54ce5..71770425d6 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -20,6 +20,7 @@

External Icons Demo

service s3(logos:aws-s3)[Cloud Store] service ec2(logos:aws-ec2)[Server] service api(logos:aws-api-gateway)[Api Gateway] + service fa(fa:image)[Font Awesome Icon]