Add explicit file extensions imports and make TypeScript checks for them

.eslintrc.cjs

@@ -72,7 +72,15 @@ module.exports = {
       },
     ],
     'no-only-tests/no-only-tests': 'error',
-    'lodash/import-scope': ['error', 'method'],
+    'lodash/import-scope': [
+      /**
+       * Use `import {xxx} from 'lodash-es'`, due to TypeScript issues.
+       *
+       * Thanks to the magic of ESM, this is exactly the same as `import xxx from 'lodash-es/xxx'`
+       */
+      'error',
+      'member',
+    ],
     'unicorn/better-regex': 'error',
     'unicorn/no-abusive-eslint-disable': 'error',
     'unicorn/no-array-push-push': 'error',

__mocks__/d3.ts

@@ -1,5 +1,5 @@
 // @ts-nocheck TODO: Fix TS
-import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3';
+import { MockedD3 } from '../packages/mermaid/src/tests/MockedD3.ts';
 
 export const select = function () {
   return new MockedD3();

docs/community/newDiagram.md

@@ -223,7 +223,7 @@ The functions for setting title and description are provided by a common module.
       getAccDescription,
       setAccDescription,
       clear as commonClear,
-    } from '../../commonDb';
+    } from '../../commonDb.ts';
 
 The accessibility title and description are inserted into the SVG element in the `render` function in mermaidAPI.
 

package.json

@@ -18,7 +18,7 @@
     "build:vite": "ts-node-esm --transpileOnly .vite/build.ts",
     "build:mermaid": "pnpm build:vite --mermaid",
     "build:viz": "pnpm build:mermaid --visualize",
-    "build:types": "tsc -p ./packages/mermaid/tsconfig.json --emitDeclarationOnly && tsc -p ./packages/mermaid-example-diagram/tsconfig.json --emitDeclarationOnly",
+    "build:types": "tsc -p ./packages/mermaid/tsconfig.json && tsc -p ./packages/mermaid-example-diagram/tsconfig.json",
     "build:watch": "pnpm build:vite --watch",
     "build": "pnpm run -r clean && pnpm build:types && pnpm build:vite",
     "dev": "concurrently \"pnpm build:vite --watch\" \"ts-node-esm .vite/server.ts\"",
@@ -107,7 +107,7 @@
     "rollup-plugin-visualizer": "^5.8.3",
     "start-server-and-test": "^1.15.4",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.1-rc",
     "vite": "^4.1.1",
     "vitest": "^0.29.0"
   },

packages/mermaid-example-diagram/src/diagram-definition.ts

@@ -1,9 +1,9 @@
 // @ts-ignore: TODO Fix ts errors
-import parser from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import renderer from './exampleDiagramRenderer';
-import styles from './styles';
-import { injectUtils } from './mermaidUtils';
+import parser from './parser/exampleDiagram.jison';
+import * as db from './exampleDiagramDb.js';
+import renderer from './exampleDiagramRenderer.js';
+import styles from './styles.js';
+import { injectUtils } from './mermaidUtils.ts';
 
 export const diagram = {
   db,

packages/mermaid-example-diagram/src/exampleDiagram.spec.js

@@ -1,14 +1,14 @@
-import { parser } from './parser/exampleDiagram';
-import * as db from './exampleDiagramDb';
-import { injectUtils } from './mermaidUtils';
+import { parser } from './parser/exampleDiagram.jison';
+import * as db from './exampleDiagramDb.js';
+import { injectUtils } from './mermaidUtils.ts';
 // Todo fix utils functions for tests
 import {
   log,
   setLogLevel,
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI';
+} from '../../mermaid/src/diagram-api/diagramAPI.ts';
 
 injectUtils(log, setLogLevel, getConfig, sanitizeText, setupGraphViewBox);
 

packages/mermaid-example-diagram/src/exampleDiagramDb.js

@@ -1,5 +1,5 @@
 /** Created by knut on 15-01-14. */
-import { log } from './mermaidUtils';
+import { log } from './mermaidUtils.ts';
 
 var message = '';
 var info = false;

packages/mermaid-example-diagram/src/exampleDiagramRenderer.js

@@ -1,6 +1,6 @@
 /** Created by knut on 14-12-11. */
 import { select } from 'd3';
-import { log, getConfig, setupGraphViewbox } from './mermaidUtils';
+import { log, getConfig, setupGraphViewbox } from './mermaidUtils.ts';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

packages/mermaid/package.json

@@ -100,7 +100,7 @@
     "start-server-and-test": "^1.14.0",
     "typedoc": "^0.23.18",
     "typedoc-plugin-markdown": "^3.13.6",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.1-rc",
     "unist-util-flatmap": "^1.0.0",
     "vitepress": "^1.0.0-alpha.46",
     "vitepress-plugin-search": "^1.0.4-alpha.19"

packages/mermaid/src/Diagram.ts

@@ -1,10 +1,10 @@
-import * as configApi from './config';
-import { log } from './logger';
-import { getDiagram, registerDiagram } from './diagram-api/diagramAPI';
-import { detectType, getDiagramLoader } from './diagram-api/detectType';
-import { extractFrontMatter } from './diagram-api/frontmatter';
-import { UnknownDiagramError } from './errors';
-import { DetailedError } from './utils';
+import * as configApi from './config.ts';
+import { log } from './logger.ts';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.ts';
+import { detectType, getDiagramLoader } from './diagram-api/detectType.ts';
+import { extractFrontMatter } from './diagram-api/frontmatter.ts';
+import { UnknownDiagramError } from './errors.ts';
+import { DetailedError } from './utils.ts';
 
 export type ParseErrorFunction = (err: string | DetailedError | unknown, hash?: any) => void;
 

packages/mermaid/src/__mocks__/mermaidAPI.ts

@@ -3,9 +3,9 @@
  *
  * We can't easily use `vi.spyOn(mermaidAPI, "function")` since the object is frozen with `Object.freeze()`.
  */
-import * as configApi from '../config';
+import * as configApi from '../config.ts';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.ts';
 
 // original version cannot be modified since it was frozen with `Object.freeze()`
 export const mermaidAPI = {

packages/mermaid/src/accessibility.spec.ts

@@ -1,6 +1,6 @@
-import { MockedD3 } from './tests/MockedD3';
-import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility';
-import { D3Element } from './mermaidAPI';
+import { MockedD3 } from './tests/MockedD3.ts';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.ts';
+import { D3Element } from './mermaidAPI.ts';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();

packages/mermaid/src/accessibility.ts

@@ -5,9 +5,9 @@
  * @see https://www.w3.org/TR/svg-aam-1.0/
  *
  */
-import { D3Element } from './mermaidAPI';
+import { D3Element } from './mermaidAPI.ts';
 
-import isEmpty from 'lodash-es/isEmpty.js';
+import { isEmpty } from 'lodash-es';
 
 /**
  * SVG element role:

packages/mermaid/src/commonDb.ts

@@ -1,5 +1,5 @@
-import { sanitizeText as _sanitizeText } from './diagrams/common/common';
-import { getConfig } from './config';
+import { sanitizeText as _sanitizeText } from './diagrams/common/common.ts';
+import { getConfig } from './config.ts';
 let title = '';
 let diagramTitle = '';
 let description = '';

packages/mermaid/src/config.spec.js

@@ -1,4 +1,4 @@
-import * as configApi from './config';
+import * as configApi from './config.ts';
 
 describe('when working with site config', function () {
   beforeEach(() => {

packages/mermaid/src/config.ts

@@ -1,8 +1,8 @@
-import assignWithDepth from './assignWithDepth';
-import { log } from './logger';
-import theme from './themes';
-import config from './defaultConfig';
-import type { MermaidConfig } from './config.type';
+import assignWithDepth from './assignWithDepth.js';
+import { log } from './logger.ts';
+import theme from './themes/index.js';
+import config from './defaultConfig.js';
+import type { MermaidConfig } from './config.type.ts';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 

packages/mermaid/src/dagre-wrapper/clusters.js

@@ -1,9 +1,9 @@
-import intersectRect from './intersect/intersect-rect';
-import { log } from '../logger';
-import createLabel from './createLabel';
+import intersectRect from './intersect/intersect-rect.js';
+import { log } from '../logger.ts';
+import createLabel from './createLabel.js';
 import { select } from 'd3';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.ts';
+import { evaluate } from '../diagrams/common/common.ts';
 
 const rect = (parent, node) => {
   log.trace('Creating subgraph rect for ', node.id, node);

packages/mermaid/src/dagre-wrapper/createLabel.js

@@ -1,8 +1,8 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { getConfig } from '../config';
-import { evaluate } from '../diagrams/common/common';
-import { decodeEntities } from '../mermaidAPI';
+import { log } from '../logger.ts';
+import { getConfig } from '../config.ts';
+import { evaluate } from '../diagrams/common/common.ts';
+import { decodeEntities } from '../mermaidAPI.ts';
 
 /**
  * @param dom

packages/mermaid/src/dagre-wrapper/edges.js

@@ -1,9 +1,9 @@
-import { log } from '../logger';
-import createLabel from './createLabel';
+import { log } from '../logger.ts';
+import createLabel from './createLabel.js';
 import { line, curveBasis, select } from 'd3';
-import { getConfig } from '../config';
-import utils from '../utils';
-import { evaluate } from '../diagrams/common/common';
+import { getConfig } from '../config.ts';
+import utils from '../utils.ts';
+import { evaluate } from '../diagrams/common/common.ts';
 
 let edgeLabels = {};
 let terminalLabels = {};

packages/mermaid/src/dagre-wrapper/edges.spec.js

@@ -1,5 +1,5 @@
-import { intersection } from './edges';
-import { setLogLevel } from '../logger';
+import { intersection } from './edges.js';
+import { setLogLevel } from '../logger.ts';
 
 describe('Graphlib decorations', () => {
   let node;

packages/mermaid/src/dagre-wrapper/index.js

@@ -1,18 +1,18 @@
 import { layout as dagreLayout } from 'dagre-d3-es/src/dagre/index.js';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
-import insertMarkers from './markers';
-import { updateNodeBounds } from './shapes/util';
+import insertMarkers from './markers.js';
+import { updateNodeBounds } from './shapes/util.js';
 import {
   clear as clearGraphlib,
   clusterDb,
   adjustClustersAndEdges,
   findNonClusterChild,
   sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes';
-import { insertCluster, clear as clearClusters } from './clusters';
-import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges';
-import { log } from '../logger';
+} from './mermaid-graphlib.js';
+import { insertNode, positionNode, clear as clearNodes, setNodeElem } from './nodes.js';
+import { insertCluster, clear as clearClusters } from './clusters.js';
+import { insertEdgeLabel, positionEdgeLabel, insertEdge, clear as clearEdges } from './edges.js';
+import { log } from '../logger.ts';
 
 const recursiveRender = (_elem, graph, diagramtype, parentCluster) => {
   log.info('Graph in recursive render: XXX', graphlibJson.write(graph), parentCluster);

packages/mermaid/src/dagre-wrapper/intersect.js

@@ -1,7 +1,7 @@
 module.exports = {
-  node: require('./intersect-node'),
-  circle: require('./intersect-circle'),
-  ellipse: require('./intersect-ellipse'),
-  polygon: require('./intersect-polygon'),
-  rect: require('./intersect-rect'),
+  node: require('./intersect-node.js'),
+  circle: require('./intersect-circle.js'),
+  ellipse: require('./intersect-ellipse.js'),
+  polygon: require('./intersect-polygon.js'),
+  rect: require('./intersect-rect.js'),
 };

packages/mermaid/src/dagre-wrapper/intersect/intersect-circle.js

@@ -1,4 +1,4 @@
-import intersectEllipse from './intersect-ellipse';
+import intersectEllipse from './intersect-ellipse.js';
 
 /**
  * @param node

packages/mermaid/src/dagre-wrapper/intersect/intersect-polygon.js

@@ -1,6 +1,6 @@
 /* eslint "no-console": off */
 
-import intersectLine from './intersect-line';
+import intersectLine from './intersect-line.js';
 
 export default intersectPolygon;
 

packages/mermaid/src/dagre-wrapper/markers.js

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-import { log } from '../logger';
+import { log } from '../logger.ts';
 
 // Only add the number of markers that the diagram needs
 const insertMarkers = (elem, markerArray, type, id) => {

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.js

@@ -1,5 +1,5 @@
 /** Decorates with functions required by mermaids dagre-wrapper. */
-import { log } from '../logger';
+import { log } from '../logger.ts';
 import * as graphlibJson from 'dagre-d3-es/src/graphlib/json.js';
 import * as graphlib from 'dagre-d3-es/src/graphlib/index.js';
 

packages/mermaid/src/dagre-wrapper/mermaid-graphlib.spec.js

@@ -5,8 +5,8 @@ import {
   adjustClustersAndEdges,
   extractDescendants,
   sortNodesByHierarchy,
-} from './mermaid-graphlib';
-import { setLogLevel, log } from '../logger';
+} from './mermaid-graphlib.js';
+import { setLogLevel, log } from '../logger.ts';
 
 describe('Graphlib decorations', () => {
   let g;

packages/mermaid/src/dagre-wrapper/nodes.js

@@ -1,12 +1,12 @@
 import { select } from 'd3';
-import { log } from '../logger';
-import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util';
-import { getConfig } from '../config';
+import { log } from '../logger.ts';
+import { labelHelper, updateNodeBounds, insertPolygonShape } from './shapes/util.js';
+import { getConfig } from '../config.ts';
 import intersect from './intersect/index.js';
-import createLabel from './createLabel';
-import note from './shapes/note';
-import { parseMember } from '../diagrams/class/svgDraw';
-import { evaluate } from '../diagrams/common/common';
+import createLabel from './createLabel.js';
+import note from './shapes/note.js';
+import { parseMember } from '../diagrams/class/svgDraw.js';
+import { evaluate } from '../diagrams/common/common.ts';
 
 const question = (parent, node) => {
   const { shapeSvg, bbox } = labelHelper(parent, node, undefined, true);

packages/mermaid/src/dagre-wrapper/patterns.js

@@ -1,6 +1,6 @@
 /** Setup arrow head and define the marker. The result is appended to the svg. */
 
-// import { log } from '../logger';
+// import { log } from '../logger.ts';
 
 // Only add the number of markers that the diagram needs
 const insertPatterns = (elem, patternArray, type, id) => {

packages/mermaid/src/dagre-wrapper/shapes/note.js

@@ -1,5 +1,5 @@
-import { updateNodeBounds, labelHelper } from './util';
-import { log } from '../../logger';
+import { updateNodeBounds, labelHelper } from './util.js';
+import { log } from '../../logger.ts';
 import intersect from '../intersect/index.js';
 
 const note = (parent, node) => {

packages/mermaid/src/dagre-wrapper/shapes/util.js

@@ -1,8 +1,8 @@
-import createLabel from '../createLabel';
-import { getConfig } from '../../config';
-import { decodeEntities } from '../../mermaidAPI';
+import createLabel from '../createLabel.js';
+import { getConfig } from '../../config.ts';
+import { decodeEntities } from '../../mermaidAPI.ts';
 import { select } from 'd3';
-import { evaluate, sanitizeText } from '../../diagrams/common/common';
+import { evaluate, sanitizeText } from '../../diagrams/common/common.ts';
 export const labelHelper = (parent, node, _classes, isNode) => {
   let classes;
   if (!_classes) {

packages/mermaid/src/defaultConfig.ts

@@ -1,5 +1,5 @@
-import theme from './themes';
-import { MermaidConfig } from './config.type';
+import theme from './themes/index.js';
+import { MermaidConfig } from './config.type.ts';
 /**
  * **Configuration methods in Mermaid version 8.6.0 have been updated, to learn more[[click
  * here](8.6.0_docs.md)].**

packages/mermaid/src/diagram-api/detectType.ts

@@ -1,14 +1,14 @@
-import { MermaidConfig } from '../config.type';
-import { log } from '../logger';
+import { MermaidConfig } from '../config.type.ts';
+import { log } from '../logger.ts';
 import type {
   DetectorRecord,
   DiagramDetector,
   DiagramLoader,
   ExternalDiagramDefinition,
-} from './types';
-import { frontMatterRegex } from './frontmatter';
-import { getDiagram, registerDiagram } from './diagramAPI';
-import { UnknownDiagramError } from '../errors';
+} from './types.ts';
+import { frontMatterRegex } from './frontmatter.ts';
+import { getDiagram, registerDiagram } from './diagramAPI.ts';
+import { UnknownDiagramError } from '../errors.ts';
 
 const directive = /%{2}{\s*(?:(\w+)\s*:|(\w+))\s*(?:(\w+)|((?:(?!}%{2}).|\r?\n)*))?\s*(?:}%{2})?/gi;
 const anyComment = /\s*%%.*\n/gm;