Support node16 module resolution

.vite/build.ts

@@ -3,6 +3,7 @@ import { resolve } from 'path';
 import { fileURLToPath } from 'url';
 import jisonPlugin from './jisonPlugin.js';
 import { readFileSync } from 'fs';
+import typescript from '@rollup/plugin-typescript';
 import { visualizer } from 'rollup-plugin-visualizer';
 import type { TemplateType } from 'rollup-plugin-visualizer/dist/plugin/template-types.js';
 
@@ -102,9 +103,14 @@ export const getBuildConfig = ({ minify, core, watch, entryName }: BuildOptions)
       },
     },
     resolve: {
-      extensions: ['.jison', '.js', '.ts', '.json'],
+      extensions: [],
     },
-    plugins: [jisonPlugin(), ...visualizerOptions(packageName, core)],
+    plugins: [
+      jisonPlugin(),
+      // @ts-expect-error According to the type definitions, rollup plugins are incompatible with vite
+      typescript({ compilerOptions: { declaration: false } }),
+      ...visualizerOptions(packageName, core),
+    ],
   };
 
   if (watch && config.build) {

__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.js';
 
 export const select = function () {
   return new MockedD3();

cypress/integration/other/configuration.spec.js

@@ -1,4 +1,4 @@
-import { renderGraph } from '../../helpers/util';
+import { renderGraph } from '../../helpers/util.js';
 describe('Configuration', () => {
   describe('arrowMarkerAbsolute', () => {
     it('should handle default value false of arrowMarkerAbsolute', () => {

cypress/integration/other/external-diagrams.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('mermaid', () => {
   describe('registerDiagram', () => {

cypress/integration/other/ghsa.spec.js

@@ -1,4 +1,4 @@
-import { urlSnapshotTest } from '../../helpers/util';
+import { urlSnapshotTest } from '../../helpers/util.js';
 
 describe('CSS injections', () => {
   it('should not allow CSS injections outside of the diagram', () => {

cypress/integration/rendering/classDiagram-v2.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 describe('Class diagram V2', () => {
   it('0: should render a simple class diagram', () => {
     imgSnapshotTest(

cypress/integration/rendering/classDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Class diagram', () => {
   it('1: should render a simple class diagram', () => {

cypress/integration/rendering/current.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Current diagram', () => {
   it('should render a state with states in it', () => {

cypress/integration/rendering/debug.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest } from '../../helpers/util';
+import { imgSnapshotTest } from '../../helpers/util.js';
 
 describe('Flowchart', () => {
   it('34: testing the label width in percy', () => {

cypress/integration/rendering/erDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Entity Relationship Diagram', () => {
   it('should render a simple ER diagram', () => {

cypress/integration/rendering/flowchart-elk.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe.skip('Flowchart ELK', () => {
   it('1-elk: should render a simple flowchart', () => {

cypress/integration/rendering/flowchart-v2.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Flowchart v2', () => {
   it('1: should render a simple flowchart', () => {

cypress/integration/rendering/flowchart.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('Graph', () => {
   it('1: should render a simple flowchart no htmlLabels', () => {

cypress/integration/rendering/sequencediagram.spec.js

@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 context('Sequence diagram', () => {
   it('should render a sequence diagram with boxes', () => {

cypress/integration/rendering/stateDiagram-v2.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('v2 should render a simple info', () => {
@@ -530,7 +530,7 @@ stateDiagram-v2
           [*] --> A
           A --> B: test({ foo#colon; 'far' })
           B --> [*]
-            classDef badBadEvent fill:#f00,color:white,font-weight:bold 
+            classDef badBadEvent fill:#f00,color:white,font-weight:bold
             class B badBadEvent
            `,
         { logLevel: 0, fontFamily: 'courier' }
@@ -543,14 +543,14 @@ stateDiagram-v2
           classDef notMoving fill:white
           classDef movement font-style:italic;
           classDef badBadEvent fill:#f00,color:white,font-weight:bold
-    
+
           [*] --> Still
           Still --> [*]
           Still --> Moving
           Moving --> Still
           Moving --> Crash
           Crash --> [*]
-    
+
           class Still notMoving
           class Moving, Crash movement
           class Crash badBadEvent

cypress/integration/rendering/stateDiagram.spec.js

@@ -1,4 +1,4 @@
-import { imgSnapshotTest, renderGraph } from '../../helpers/util';
+import { imgSnapshotTest, renderGraph } from '../../helpers/util.js';
 
 describe('State diagram', () => {
   it('should render a simple state diagrams', () => {

cypress/platform/ashish2.html

@@ -188,7 +188,7 @@
       //import mindmap from '../../packages/mermaid-mindmap/src/detector';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
       // import timeline from '../../packages/mermaid-timeline/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
       // await mermaid.registerExternalDiagrams([]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/bundle-test.js

@@ -1,4 +1,5 @@
-import mermaid from '../../packages/mermaid/src/mermaid';
+// TODO: this file should be testing the ./mermaid.core.mjs file, as that's the file listed in the package.json file that users will use
+import mermaid from './mermaid.esm.mjs';
 
 let code = `flowchart LR
 Power_Supply --> Transmitter_A

cypress/platform/external-diagrams-example-diagram.html

@@ -11,9 +11,9 @@ <h1>Should correctly load a third-party diagram using registerDiagram</h1>
     <!-- <script src="//cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> -->
     <!-- <script type="module" src="./external-diagrams-mindmap.mjs" /> -->
     <script type="module">
-      import exampleDiagram from '../../packages/mermaid-example-diagram/src/detector';
+      import exampleDiagram from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
       // import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
 
       await mermaid.registerExternalDiagrams([exampleDiagram]);
       await mermaid.initialize({ logLevel: 0 });

cypress/platform/flow2.html

@@ -30,7 +30,7 @@
     </pre>
 
     <script type="module">
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from './mermaid.esm.mjs';
 
       mermaid.initialize({
         theme: 'forest',

cypress/platform/knsv2.html

@@ -393,8 +393,8 @@
 
     <script type="module">
       // import mindmap from '../../packages/mermaid-mindmap/src/detector';
-      import example from '../../packages/mermaid-example-diagram/src/detector';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import example from '../../packages/mermaid-example-diagram/src/mermaid-example-diagram.core.mjs';
+      import mermaid from './mermaid.esm.mjs';
       await mermaid.registerExternalDiagrams([example]);
       mermaid.parseError = function (err, hash) {
         // console.error('Mermaid error: ', err);

cypress/platform/knsv3.html

@@ -40,7 +40,7 @@ <h2>Mindmap with root wrapping text and a shape</h2>
 
     <script type="module">
       // import mermaid from './mermaid.esm.mjs';
-      import mermaid from '../../packages/mermaid/src/mermaid';
+      import mermaid from '../../packages/mermaid/dist/mermaid.esm.mjs';
       // import mermaidMindmap from './mermaid-mindmap.esm.mjs';
 
       // import mermaidMindmap from 'https://cdn.jsdelivr.net/npm/@mermaid-js/[email protected]/+esm';

cypress/platform/viewer.js

@@ -1,5 +1,5 @@
-import mermaid2 from '../../packages/mermaid/src/mermaid';
-import externalExample from '../../packages/mermaid-example-diagram/src/detector';
+import mermaid2 from './mermaid.esm.mjs';
+import externalExample from '../../packages/mermaid-example-diagram/dist/mermaid-example-diagram.core.mjs';
 
 function b64ToUtf8(str) {
   return decodeURIComponent(escape(window.atob(str)));

docs/intro/index.md

@@ -263,7 +263,7 @@ To Deploy Mermaid:
 
 ### [Mermaid API](../config/setup/README.md):
 
-**To deploy mermaid without a bundler, one can insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML like so:**
+**To deploy mermaid without a bundler, insert a `script` tag with an absolute address and a `mermaid.initialize` call into the HTML using the following example:**
 
 ```html
 <script type="module">
@@ -272,9 +272,9 @@ To Deploy Mermaid:
 </script>
 ```
 
-**Doing so will command the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags mermaid will try to read the diagram/chart definitions and render them into SVG charts.**
+**Doing so commands the mermaid parser to look for the `<div>` or `<pre>` tags with `class="mermaid"`. From these tags, mermaid tries read the diagram/chart definitions and render them into SVG charts.**
 
-**Examples can be found at** [Other examples](../syntax/examples.md)
+**Examples can be found in** [Other examples](../syntax/examples.md)
 
 ## Sibling projects
 

package.json

@@ -58,6 +58,7 @@
     "@commitlint/cli": "^17.2.0",
     "@commitlint/config-conventional": "^17.2.0",
     "@cspell/eslint-plugin": "^6.14.2",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@types/cors": "^2.8.13",
     "@types/eslint": "^8.4.10",
     "@types/express": "^4.17.17",

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.js';
 
 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.js';
 // Todo fix utils functions for tests
 import {
   log,
   setLogLevel,
   getConfig,
   sanitizeText,
   setupGraphViewBox,
-} from '../../mermaid/src/diagram-api/diagramAPI';
+} from '../../mermaid/src/diagram-api/diagramAPI.js';
 
 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.js';
 
 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.js';
 
 /**
  * Draws a an info picture in the tag with id: id based on the graph definition in text.

packages/mermaid-example-diagram/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "extends": "../../tsconfig.json",
-  "module": "esnext",
   "compilerOptions": {
     "rootDir": "./src",
     "outDir": "./dist"

packages/mermaid/src/Diagram.ts

@@ -1,11 +1,11 @@
-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 { cleanupComments } from './diagram-api/comments';
+import * as configApi from './config.js';
+import { log } from './logger.js';
+import { getDiagram, registerDiagram } from './diagram-api/diagramAPI.js';
+import { detectType, getDiagramLoader } from './diagram-api/detectType.js';
+import { extractFrontMatter } from './diagram-api/frontmatter.js';
+import { UnknownDiagramError } from './errors.js';
+import { DetailedError } from './utils.js';
+import { cleanupComments } from './diagram-api/comments.js';
 
 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.js';
 import { vi } from 'vitest';
-import { mermaidAPI as mAPI } from '../mermaidAPI';
+import { mermaidAPI as mAPI } from '../mermaidAPI.js';
 
 // 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.js';
+import { setA11yDiagramInfo, addSVGa11yTitleDescription } from './accessibility.js';
+import { D3Element } from './mermaidAPI.js';
 
 describe('accessibility', () => {
   const fauxSvgNode = new MockedD3();

packages/mermaid/src/accessibility.ts

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

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.js';
+import { getConfig } from './config.js';
 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.js';
 
 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.js';
+import theme from './themes/index.js';
+import config from './defaultConfig.js';
+import type { MermaidConfig } from './config.type.js';
 
 export const defaultConfig: MermaidConfig = Object.freeze(config);
 

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

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