fix: support module resolution nodenext so type module works in host (#…

…30) * fix: support module resolution nodenext so type module works in host * upgrade typescript * lock dep version * remove * update docs
excalidraw · Sep 21, 2023 · e547310 · e547310 · vercel · Sep 21, 2023
1 parent 8704155
commit e547310
Show file tree

Hide file tree

Showing 19 changed files with 61 additions and 57 deletions.
diff --git a/README.md b/README.md
@@ -41,8 +41,12 @@ try {
 
 ## Playground
 
-Try out [here](https://mermaid-to-excalidraw.vercel.app)
+Try out [here](https://mermaid-to-excalidraw.vercel.app).
 
 ## API
 
-Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/api)
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/api).
+
+## Support new Diagram type
+
+Head over to the [docs](https://docs.excalidraw.com/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type).
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "parcel": "2.9.1",
     "prettier": "2.8.8",
     "process": "0.11.10",
-    "typescript": "4.4.4"
+    "typescript": "5.2.2"
   },
   "resolutions": {
     "@babel/preset-env": "7.13.8"

diff --git a/playground/ExcalidrawWrapper.ts b/playground/ExcalidrawWrapper.ts
@@ -1,8 +1,8 @@
 import {
   BinaryFiles,
   ExcalidrawImperativeAPI,
-} from "@excalidraw/excalidraw/types/types";
-import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform";
+} from "@excalidraw/excalidraw/types/types.js";
+import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform.js";
 
 interface ExcalidrawWrapperProps {
   elements: ExcalidrawElementSkeleton[];

diff --git a/playground/index.ts b/playground/index.ts
@@ -1,14 +1,14 @@
 import mermaid from "mermaid";
-import { parseMermaid } from "../src/parseMermaid";
-import FLOWCHART_DIAGRAM_TESTCASES from "./testcases/flowchart";
-import UNSUPPORTED_DIAGRAM_TESTCASES from "./testcases/unsupported";
-import { DEFAULT_FONT_SIZE } from "../src/constants";
+import { parseMermaid } from "../src/parseMermaid.js";
+import FLOWCHART_DIAGRAM_TESTCASES from "./testcases/flowchart.js";
+import UNSUPPORTED_DIAGRAM_TESTCASES from "./testcases/unsupported.js";
+import { DEFAULT_FONT_SIZE } from "../src/constants.js";
 
 // Initialize Mermaid
 mermaid.initialize({ startOnLoad: false });
 
 import "./initCustomTest";
-import { renderExcalidraw } from "./initExcalidraw";
+import { renderExcalidraw } from "./initExcalidraw.js";
 
 (async () => {
   // Render flowchart diagrams

diff --git a/playground/initCustomTest.ts b/playground/initCustomTest.ts
@@ -1,6 +1,6 @@
 import mermaid from "mermaid";
-import { parseMermaid } from "../src/parseMermaid";
-import { renderExcalidraw } from "./initExcalidraw";
+import { parseMermaid } from "../src/parseMermaid.js";
+import { renderExcalidraw } from "./initExcalidraw.js";
 
 const customTestEl = document.getElementById("custom-test")!;
 const btn = document.getElementById("render-excalidraw-btn")!;

diff --git a/playground/initExcalidraw.ts b/playground/initExcalidraw.ts
@@ -1,6 +1,6 @@
-import ExcalidrawWrapper from "./ExcalidrawWrapper";
-import { graphToExcalidraw } from "../src/graphToExcalidraw";
-import { DEFAULT_FONT_SIZE } from "../src/constants";
+import ExcalidrawWrapper from "./ExcalidrawWrapper.js";
+import { graphToExcalidraw } from "../src/graphToExcalidraw.js";
+import { DEFAULT_FONT_SIZE } from "../src/constants.js";
 
 // Create Excalidraw Wrapper element
 const excalidrawWrapper = document.createElement("div");

diff --git a/src/converter/GraphConverter.ts b/src/converter/GraphConverter.ts
@@ -1,6 +1,6 @@
-import { MermaidOptions } from "..";
-import { DEFAULT_FONT_SIZE } from "../constants";
-import { Graph, MermaidToExcalidrawResult } from "../interfaces";
+import { MermaidOptions } from "../index.js";
+import { DEFAULT_FONT_SIZE } from "../constants.js";
+import { Graph, MermaidToExcalidrawResult } from "../interfaces.js";
 
 export class GraphConverter<T = Graph> {
   private converter;

diff --git a/src/converter/helpers.ts b/src/converter/helpers.ts
@@ -1,17 +1,17 @@
 import {
   Arrowhead,
   ExcalidrawTextElement,
-} from "@excalidraw/excalidraw/types/element/types";
+} from "@excalidraw/excalidraw/types/element/types.js";
 import {
   CONTAINER_STYLE_PROPERTY,
   Edge,
   Graph,
   LABEL_STYLE_PROPERTY,
   SubGraph,
   Vertex,
-} from "../interfaces";
-import { ExcalidrawVertexElement } from "../types";
-import { Mutable } from "@excalidraw/excalidraw/types/utility-types";
+} from "../interfaces.js";
+import { ExcalidrawVertexElement } from "../types.js";
+import { Mutable } from "@excalidraw/excalidraw/types/utility-types.js";
 import { removeMarkdown } from "@excalidraw/markdown-to-text";
 
 /**

diff --git a/src/converter/types/flowchart.ts b/src/converter/types/flowchart.ts
@@ -1,14 +1,14 @@
-import { GraphConverter } from "../GraphConverter";
-import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform";
+import { GraphConverter } from "../GraphConverter.js";
+import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform.js";
 
 import {
   computeGroupIds,
   getText,
   computeExcalidrawVertexStyle,
   computeExcalidrawVertexLabelStyle,
   computeExcalidrawArrowType,
-} from "../helpers";
-import { VERTEX_TYPE } from "../../interfaces";
+} from "../helpers.js";
+import { VERTEX_TYPE } from "../../interfaces.js";
 
 export const FlowchartToExcalidrawSkeletonConverter = new GraphConverter({
   converter: (graph, options) => {

diff --git a/src/converter/types/graphImage.ts b/src/converter/types/graphImage.ts
@@ -1,9 +1,9 @@
-import { GraphConverter } from "../GraphConverter";
-import { FileId } from "@excalidraw/excalidraw/types/element/types";
-import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform";
-import { BinaryFiles } from "@excalidraw/excalidraw/types/types";
+import { GraphConverter } from "../GraphConverter.js";
+import { FileId } from "@excalidraw/excalidraw/types/element/types.js";
+import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform.js";
+import { BinaryFiles } from "@excalidraw/excalidraw/types/types.js";
 import { nanoid } from "nanoid";
-import { GraphImage } from "../../interfaces";
+import { GraphImage } from "../../interfaces.js";
 
 export const GraphImageConverter = new GraphConverter<GraphImage>({
   converter: (graph) => {

diff --git a/src/graphToExcalidraw.ts b/src/graphToExcalidraw.ts
@@ -1,7 +1,7 @@
-import { MermaidOptions } from ".";
-import { FlowchartToExcalidrawSkeletonConverter } from "./converter/types/flowchart";
-import { GraphImageConverter } from "./converter/types/graphImage";
-import { Graph, GraphImage, MermaidToExcalidrawResult } from "./interfaces";
+import { MermaidOptions } from "./index.js";
+import { FlowchartToExcalidrawSkeletonConverter } from "./converter/types/flowchart.js";
+import { GraphImageConverter } from "./converter/types/graphImage.js";
+import { Graph, GraphImage, MermaidToExcalidrawResult } from "./interfaces.js";
 
 export const graphToExcalidraw = (
   graph: Graph | GraphImage,

diff --git a/src/index.ts b/src/index.ts
@@ -1,5 +1,5 @@
-import { graphToExcalidraw } from "./graphToExcalidraw";
-import { parseMermaid } from "./parseMermaid";
+import { graphToExcalidraw } from "./graphToExcalidraw.js";
+import { parseMermaid } from "./parseMermaid.js";
 
 export interface MermaidOptions {
   fontSize?: number;

diff --git a/src/interfaces.ts b/src/interfaces.ts
@@ -1,5 +1,5 @@
-import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform";
-import { BinaryFiles } from "@excalidraw/excalidraw/types/types";
+import { ExcalidrawElementSkeleton } from "@excalidraw/excalidraw/types/data/transform.js";
+import { BinaryFiles } from "@excalidraw/excalidraw/types/types.js";
 
 export enum VERTEX_TYPE {
   ROUND = "round",

diff --git a/src/parseMermaid.ts b/src/parseMermaid.ts
@@ -1,9 +1,9 @@
 import mermaid from "mermaid";
-import { Graph, GraphImage } from "./interfaces";
-import { DEFAULT_FONT_SIZE } from "./constants";
-import { MermaidOptions } from ".";
-import { isSupportedDiagram } from "./utils";
-import { parseMermaidFlowChartDiagram } from "./parser/flowchart";
+import { Graph, GraphImage } from "./interfaces.js";
+import { DEFAULT_FONT_SIZE } from "./constants.js";
+import { MermaidOptions } from "./index.js";
+import { isSupportedDiagram } from "./utils.js";
+import { parseMermaidFlowChartDiagram } from "./parser/flowchart.js";
 
 interface MermaidDefinitionOptions {
   curve?: "linear" | "basis";

diff --git a/src/parser/flowchart.ts b/src/parser/flowchart.ts
@@ -1,4 +1,4 @@
-import { entityCodesToText, getTransformAttr } from "../utils";
+import { entityCodesToText, getTransformAttr } from "../utils.js";
 import {
   CONTAINER_STYLE_PROPERTY,
   Edge,
@@ -7,9 +7,9 @@ import {
   Position,
   SubGraph,
   Vertex,
-} from "../interfaces";
+} from "../interfaces.js";
 
-import { Diagram } from "mermaid/dist/Diagram";
+import { Diagram } from "mermaid/dist/Diagram.js";
 
 const parseSubGraph = (data: any, containerEl: Element): SubGraph => {
   // Extract only node id for better reference

diff --git a/src/types.ts b/src/types.ts
@@ -1,10 +1,10 @@
-import { ImportedDataState } from "@excalidraw/excalidraw/types/data/types";
+import { ImportedDataState } from "@excalidraw/excalidraw/types/data/types.js";
 import {
   ExcalidrawRectangleElement,
   ExcalidrawDiamondElement,
   ExcalidrawEllipseElement,
-} from "@excalidraw/excalidraw/types/element/types";
-import { Mutable } from "@excalidraw/excalidraw/types/utility-types";
+} from "@excalidraw/excalidraw/types/element/types.js";
+import { Mutable } from "@excalidraw/excalidraw/types/utility-types.js";
 
 export type ArrayElement<A> = A extends readonly (infer T)[] ? T : never;
 

diff --git a/src/utils.ts b/src/utils.ts
@@ -1,4 +1,4 @@
-import { SUPPORTED_DIAGRAM_TYPES } from "./constants";
+import { SUPPORTED_DIAGRAM_TYPES } from "./constants.js";
 
 // Check if the definition is a supported diagram
 export const isSupportedDiagram = (definition: string): boolean => {

diff --git a/tsconfig.common.json b/tsconfig.common.json
@@ -2,11 +2,11 @@
   "compilerOptions": {
     "target": "ES2021",
     "strict": true,
-    "module": "ES2015",
+    "module": "NodeNext",
     "declaration": true,
     "outDir": "dist",
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
+    "moduleResolution": "NodeNext",
     "forceConsistentCasingInFileNames": true,
     "skipLibCheck": true
   },

diff --git a/yarn.lock b/yarn.lock
@@ -4137,10 +4137,10 @@ type-fest@^0.20.2:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@4.4.4:
-  version "4.4.4"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.4.tgz#2cd01a1a1f160704d3101fd5a58ff0f9fcb8030c"
-  integrity sha512-DqGhF5IKoBl8WNf8C1gu8q0xZSInh9j1kJJMqT3a94w1JzVaBU4EXOSMrz9yDqMT0xt3selp83fuFMQ0uzv6qA==
+typescript@5.2.2:
+  version "5.2.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.2.2.tgz#5ebb5e5a5b75f085f22bc3f8460fba308310fa78"
+  integrity sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
   version "2.0.0"