fix 5747 replace $root with relative paths

.changeset/red-beans-cross.md

@@ -0,0 +1,5 @@
+---
+'mermaid': patch
+---
+
+fix: Replace $root with relative paths

.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

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"
   },

packages/mermaid/src/diagrams/architecture/architectureIcons.ts

@@ -1,4 +1,4 @@
-import { unknownIcon } from '$root/rendering-util/icons.js';
+import { unknownIcon } from '../../rendering-util/icons.js';
 import type { IconifyJSON } from '@iconify/types';
 
 const wrapIcon = (icon: string) => {

packages/mermaid/src/diagrams/architecture/architectureRenderer.ts

@@ -1,4 +1,4 @@
-import { registerIconPacks } from '$root/rendering-util/icons.js';
+import { registerIconPacks } from '../../rendering-util/icons.js';
 import type { Position } from 'cytoscape';
 import cytoscape from 'cytoscape';
 import type { FcoseLayoutOptions } from 'cytoscape-fcose';

packages/mermaid/src/diagrams/architecture/svgDraw.ts

@@ -1,4 +1,4 @@
-import { getIconSVG } from '$root/rendering-util/icons.js';
+import { getIconSVG } from '../../rendering-util/icons.js';
 import type cytoscape from 'cytoscape';
 import { getConfig } from '../../diagram-api/diagramAPI.js';
 import { createText } from '../../rendering-util/createText.js';
@@ -170,8 +170,8 @@ export const drawEdges = async function (edgesEl: D3Element, cy: cytoscape.Core)
               textElem.attr(
                 'transform',
                 `
-                translate(${midX}, ${midY - bboxOrig.height / 2}) 
-                translate(${(x * bboxNew.width) / 2}, ${(y * bboxNew.height) / 2}) 
+                translate(${midX}, ${midY - bboxOrig.height / 2})
+                translate(${(x * bboxNew.width) / 2}, ${(y * bboxNew.height) / 2})
                 rotate(${-1 * x * y * 45}, 0, ${bboxOrig.height / 2})
               `
               );

packages/mermaid/src/mermaid.ts

@@ -2,7 +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 { registerIconPacks } from './rendering-util/icons.js';
 import { dedent } from 'ts-dedent';
 import type { MermaidConfig } from './config.type.js';
 import { detectType, registerLazyLoadedDiagrams } from './diagram-api/detectType.js';

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 '../diagram-api/diagramAPI.js';
+import common, { hasKatex, renderKatex } from '../diagrams/common/common.js';
 import { select } from 'd3';
 import type { MermaidConfig } from '../config.type.js';
 import type { SVGGroup } from '../diagram-api/types.js';

packages/mermaid/src/rendering-util/icons.ts

@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../logger.js';
 import type { ExtendedIconifyIcon, IconifyIcon, IconifyJSON } from '@iconify/types';
 import type { IconifyIconCustomisations } from '@iconify/utils';
 import { getIconData, iconToHTML, iconToSVG, replaceIDs, stringToIcon } from '@iconify/utils';

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 '../../../logger.js';
 import { getSubGraphTitleMargins } from '../../../utils/subGraphTitleMargins.js';
 import { getConfig } from '../../../diagram-api/diagramAPI.js';
 

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 '../../../logger.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 

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 '../../../logger.js';
 
 describe('Graphlib decorations', () => {
   let g;

packages/mermaid/src/rendering-util/render.ts

@@ -1,7 +1,7 @@
-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 '../diagram-api/types.js';
+import type { InternalHelpers } from '../internals.js';
+import { internalHelpers } from '../internals.js';
+import { log } from '../logger.js';
 import type { LayoutData } from './types.js';
 
 export interface RenderOptions {

packages/mermaid/src/rendering-util/rendering-elements/clusters.js

@@ -1,17 +1,14 @@
-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 '../../diagram-api/diagramAPI.js';
+import { evaluate } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
+import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { select } from 'd3';
 import rough from 'roughjs';
 import { createText } from '../createText.ts';
 import intersectRect from '../rendering-elements/intersect/intersect-rect.js';
 import createLabel from './createLabel.js';
 import { createRoundedRectPathD } from './shapes/roundedRectPath.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import { styles2String, userNodeOverrides } from './shapes/handDrawnShapeStyles.js';
 
 const rect = async (parent, node) => {
   log.info('Creating subgraph rect for ', node.id, node);

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 '../../logger.js';
+import { getConfig } from '../../diagram-api/diagramAPI.js';
+import common, { evaluate, renderKatex, hasKatex } from '../../diagrams/common/common.js';
+import { decodeEntities } from '../../utils.js';
 
 /**
  * @param dom

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 '../../diagram-api/types.js';
 import type { Mocked } from 'vitest';
 import { addEdgeMarkers } from './edgeMarker.js';
 

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 '../../diagram-api/types.js';
+import { log } from '../../logger.js';
+import type { EdgeData } from '../../types.js';
 /**
  * Adds SVG markers to a path element based on the arrow types specified in the edge.
  *

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 '../../diagram-api/diagramAPI.js';
+import { evaluate } from '../../diagrams/common/common.js';
+import { log } from '../../logger.js';
+import { createText } from '../createText.js';
+import utils from '../../utils.js';
+import { getLineFunctionsWithOffset } from '../../utils/lineWithOffset.js';
+import { getSubGraphTitleMargins } from '../../utils/subGraphTitleMargins.js';
 import { curveBasis, line, select } from 'd3';
 import rough from 'roughjs';
 import createLabel from './createLabel.js';

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 '../../logger.js';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {

packages/mermaid/src/rendering-util/rendering-elements/nodes.js

@@ -1,4 +1,4 @@
-import { log } from '$root/logger.js';
+import { log } from '../../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 '../../diagram-api/diagramAPI.js';
 import { subroutine } from './shapes/subroutine.js';
 import { cylinder } from './shapes/cylinder.js';
 import { circle } from './shapes/circle.js';

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 '../../types.js';
+import type { SVG } from '../../../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 '../../../diagram-api/diagramAPI.js';
 
 export const choice = (parent: SVG, node: Node) => {
   const { labelStyles, nodeStyles } = styles2String(node);

packages/mermaid/src/rendering-util/rendering-elements/shapes/circle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const circle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/cylinder.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const createCylinderPathD = (

packages/mermaid/src/rendering-util/rendering-elements/shapes/doubleCircle.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const doublecircle = async (parent: SVGAElement, node: Node): Promise<SVGAElement> => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/drawRect.ts

@@ -1,11 +1,8 @@
 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 '../../types.js';
 import { createRoundedRectPathD } from './roundedRectPath.js';
-import {
-  userNodeOverrides,
-  styles2String,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import { userNodeOverrides, styles2String } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 export const drawRect = async (parent: SVGAElement, node: Node, options: RectOptions) => {

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 '../../types.js';
+import type { SVG } from '../../../diagram-api/types.js';
 import rough from 'roughjs';
 import { solidStateFill } from './handDrawnShapeStyles.js';
-import { getConfig } from '$root/diagram-api/diagramAPI.js';
+import { getConfig } from '../../../diagram-api/diagramAPI.js';
 
 export const forkJoin = (parent: SVG, node: Node, dir: string) => {
   const { themeVariables } = getConfig();

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 '../../../diagram-api/diagramAPI.js';
+import type { Node } from '../../types.js';
 
 // Striped fill like start or fork nodes in state diagrams
 export const solidStateFill = (color: string) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/hexagon.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 
 import { insertPolygonShape } from './insertPolygonShape.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/invertedTrapezoid.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

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 '../../types.js';
 import { drawRect } from './drawRect.js';
 import { labelHelper, updateNodeBounds } from './util.js';
 import intersect from '../intersect/index.js';

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanLeft.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/leanRight.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/note.ts

@@ -1,8 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 '../../../diagram-api/diagramAPI.js';
+import type { Node } from '../../types.js';
 import rough from 'roughjs';
 
 export const note = async (parent: SVGAElement, node: Node) => {

packages/mermaid/src/rendering-util/rendering-elements/shapes/question.ts

@@ -1,11 +1,8 @@
-import { log } from '$root/logger.js';
+import { log } from '../../../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 {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';
 

packages/mermaid/src/rendering-util/rendering-elements/shapes/rectLeftInvArrow.ts

@@ -1,10 +1,7 @@
 import { labelHelper, updateNodeBounds, getNodeClasses } from './util.js';
 import intersect from '../intersect/index.js';
-import type { Node } from '$root/rendering-util/types.d.ts';
-import {
-  styles2String,
-  userNodeOverrides,
-} from '$root/rendering-util/rendering-elements/shapes/handDrawnShapeStyles.js';
+import type { Node } from '../../types.js';
+import { styles2String, userNodeOverrides } from './handDrawnShapeStyles.js';
 import rough from 'roughjs';
 import { insertPolygonShape } from './insertPolygonShape.js';