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 3fee53a0d..198627560 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 43fc5bd31..52cca1cfe 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 000000000..76a03cde5 --- /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 c8e7d0411..654055151 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 | 69 ++++++++++++++------ 1 file changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/mermaid/src/rendering-util/icons.ts b/packages/mermaid/src/rendering-util/icons.ts index 76a03cde5..199bc4206 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 { - 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 '?'; + getRegisteredIconData(iconName); + return true; + } catch { + return false; } }; + +export const getIconSVG = ( + iconName: string, + customisations?: IconifyIconCustomisations & { fallbackPrefix?: string } +) => { + let iconData: ExtendedIconifyIcon; + try { + iconData = getRegisteredIconData(iconName, customisations?.fallbackPrefix); + } catch (e) { + log.error(e); + 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 000000000..551d79837 --- /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 6246b423e..11af26243 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 000000000..dd6c99f9c --- /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 558b90483..84b9ed655 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 8c33df09c..000000000 --- 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 712644afa..000000000 --- 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 ef3ddb7f6..d1c053f71 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 000000000..4e6d6bd23 --- /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 09fab149c..99a054caa 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 aae004d6d..0bcfc2356 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 bdaeb05e1..60c219f2d 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 117ca6276..96f919e4b 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 67f8de40e..ba6b2ae87 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 ba6b2ae87..8280f9676 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 8b4807bc5..3278c7eb4 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 52cb8aa72..e647422ec 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 6f128f4a7..f45d5f0e7 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 712644afa..0049e2d48 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 a6ad7fa1c..0a205ea31 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 307242675..044e14dad 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 54ad5d27f..0cde897ae 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 dd71a2f7e..545a35a92 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 013be7ba4..e3118b5b7 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 ba87f78f5..a963bba9b 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 0afdbb714..2d560e85d 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 05c7472c9..313dc1d01 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 ea748d8aa..032b3989c 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 087fcf0be..999dc3d1c 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 0b0972a8a..b9494c4c1 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 54d4ddf3e..830639f0c 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 3d6f085a4..9b99b8e7f 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 1474b778f..3c301a025 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 f85db0f05..c92b40138 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 5ce616c0b..8672ffbff 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 645f69177..e9643ba4f 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 07978be10..324bb3134 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 a5c963e7c..d764527d8 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 3b0ce3081..5a1197c51 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 37f415247..5a8bf9765 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 2d5c6d6ea..51605eae4 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 bb57925e2..8e06096f1 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 37604e7e7..b4c1ae705 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 77fabf271..a567c3312 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 ba770ab4e..b3eed0f66 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 b5000ac77..4d7611331 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 857e60b8b..27ef201ee 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 8a28b63ad..534296587 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 8daeaec7a..2070e6a14 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 14504b3a0..bc42d5e6f 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 fac255735..06cbc636f 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 a277ff0b9..57f391657 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 341b82e1c..f8d0e084d 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 c4393c25f..fbfa3ed5c 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 b2013097a..701747c1c 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 ca1290668..633171d5c 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 e21f3304b..00d808066 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 0f06a1731..3c7ed2b5e 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 ed0ba10f7..2db66b7a4 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 375d5fada..026ca0fb7 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 21ae5360c..ff100f1f6 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 e3118b5b7..8306bc15a 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 000000000..7a5ff50a9 --- /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 ad0e3e701..73a2dceeb 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 2d71d84fb..c204dbca6 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 e74995ce3..c2aa2fb99 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 3e1edf597..abe205bb5 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 c204dbca6..e1b13de18 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 b98c49348..5e0bbfa87 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 47e238692..79ba278e0 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 c2aa2fb99..ed50e1c0b 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 abe205bb5..3e1edf597 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 137b3fbf0..0e2ce1453 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -226,27 +226,23 @@
- + 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 133a35032..74b17cf05 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 9eefbe1e4..6c49298da 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 000000000..605709846 --- /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 21ae5360c..9aeedf8f7 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 c8e7d0411..5a59b4e9d 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 3e1edf597..abe205bb5 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 e1b13de18..a45a9308b 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 79ba278e0..c4021d2cb 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 ed50e1c0b..f4ff3bd72 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 abe205bb5..3e1edf597 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 9aeedf8f7..5683b6ed9 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 5a59b4e9d..fff57c2cc 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 6c49298da..1deb1f7da 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 | 100 +++++++++--------- .../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 | 88 +++++++-------- packages/mermaid/src/rendering-util/icons.ts | 59 +++++++++-- 10 files changed, 183 insertions(+), 148 deletions(-) diff --git a/cypress/platform/architecture-external.html b/cypress/platform/architecture-external.html index 605709846..b76ac54ce 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -28,8 +28,13 @@ 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 0e2ce1453..6d978d952 100644 --- a/demos/architecture.html +++ b/demos/architecture.html @@ -232,17 +232,25 @@ 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 99a054caa..f4e9eb4ec 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 a45a9308b..10d6b9aba 100644 --- a/docs/syntax/architecture.md +++ b/docs/syntax/architecture.md @@ -197,41 +197,69 @@ 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: -```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(); +```bash +npm install @iconify-json/logos ``` -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. +With lazy loading + +```js +import mermaid from 'mermaid'; + +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); +``` + +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, + }, +]); +``` + +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] + + 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 +``` -```` ```mermaid architecture-beta group api(logos:aws-lambda)[API] @@ -245,29 +273,3 @@ architecture-beta disk1:T -- B:server disk2:T -- B:db ``` -```` - -
loading...
- - diff --git a/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts b/packages/mermaid/src/diagrams/architecture/architectureRenderer.ts index 84b9ed655..3abb69b9f 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 d1c053f71..357839394 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 5e0bbfa87..b98c49348 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 c4021d2cb..2357fe384 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 f4ff3bd72..0d199c8b1 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: -```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(); +```bash +npm install @iconify-json/logos ``` -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. +With lazy loading -```` -```mermaid +```js +import mermaid from 'mermaid'; + +mermaid.registerIconPacks([ + { + name: 'logos', + loader: () => import('@iconify-json/logos').then((module) => module.icons), + }, +]); +``` + +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, + }, +]); +``` + +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 199bc4206..27709b822 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 b76ac54ce..71770425d 100644 --- a/cypress/platform/architecture-external.html +++ b/cypress/platform/architecture-external.html @@ -20,6 +20,7 @@ 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]