build: simple setup vite for playground

package.json

@@ -4,20 +4,16 @@
   "description": "Mermaid to Excalidraw Diagrams",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "//": "Set targets.main = false, this instructs Parcel to ignore the main parameters.",
-  "targets": {
-    "main": false,
-    "types": false
-  },
   "files": [
     "dist/*"
   ],
   "type": "module",
   "scripts": {
-    "build": "rimraf ./dist && cross-env tsc -b src",
-    "start": "rimraf .parcel-cache && parcel playground/index.html --open --dist-dir ./public",
-    "build:playground": "rimraf ./public && parcel build playground/index.html --no-scope-hoist --dist-dir ./public --public-url /",
-    "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx ."
+    "build": "rimraf -rf ./dist && cross-env tsc -b src",
+    "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
+    "start": "vite playground",
+    "build:playground": "tsc --noEmit --project ./playground/tsconfig.json && vite build playground",
+    "preview": "npm run build:playground && vite preview --outDir ./public"
   },
   "dependencies": {
     "@excalidraw/markdown-to-text": "0.1.2",
@@ -28,21 +24,24 @@
     "@babel/core": "7.12.0",
     "@excalidraw/eslint-config": "1.0.3",
     "@excalidraw/excalidraw": "0.17.1-7381-cdf6d3e",
-    "@parcel/transformer-sass": "2.9.1",
     "@types/mermaid": "9.2.0",
     "@types/react": "18.2.14",
     "@types/react-dom": "18.2.4",
     "@typescript-eslint/eslint-plugin": "5.59.9",
     "@typescript-eslint/parser": "5.59.9",
     "cross-env": "7.0.3",
+    "@vitejs/plugin-react-swc": "3.6.0",
     "eslint": "8.42.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-plugin-prettier": "4.2.1",
-    "parcel": "2.9.1",
     "prettier": "2.8.8",
     "process": "0.11.10",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "sass": "1.74.1",
     "typescript": "5.2.2",
-    "rimraf": "5.0.5"
+    "rimraf": "5.0.5",
+    "vite": "5.2.8"
   },
   "resolutions": {
     "@babel/preset-env": "7.13.8"

playground/CustomTest.tsx

@@ -0,0 +1,66 @@
+import { MermaidDiagram } from "./MermaidDiagram.tsx";
+import type { MermaidData, UpdateMermaidDefinition } from "./index.tsx";
+
+interface CustomTestProps {
+  onChange: UpdateMermaidDefinition;
+  mermaidData: MermaidData;
+  isActive: boolean;
+}
+
+const CustomTest = ({ onChange, mermaidData, isActive }: CustomTestProps) => {
+  return (
+    <>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+
+          const formData = new FormData(e.target as HTMLFormElement);
+
+          onChange(formData.get("mermaid-input")?.toString() || "", true);
+        }}
+      >
+        <textarea
+          id="mermaid-input"
+          rows={10}
+          cols={50}
+          name="mermaid-input"
+          onChange={(e) => {
+            if (!isActive) {
+              return;
+            }
+
+            onChange(e.target.value, true);
+          }}
+          style={{ marginTop: "1rem" }}
+          placeholder="Input Mermaid Syntax"
+        />
+        <br />
+        <button type="submit" id="render-excalidraw-btn">
+          {"Render to Excalidraw"}
+        </button>
+      </form>
+
+      {isActive && (
+        <>
+          <MermaidDiagram
+            definition={mermaidData.definition}
+            id="custom-diagram"
+          />
+
+          <details id="parsed-data-details">
+            <summary>{"Parsed data from parseMermaid"}</summary>
+            <pre id="custom-parsed-data">
+              {JSON.stringify(mermaidData.output, null, 2)}
+            </pre>
+          </details>
+
+          {typeof mermaidData.error === "string" && (
+            <div id="error">{mermaidData.error}</div>
+          )}
+        </>
+      )}
+    </>
+  );
+};
+
+export default CustomTest;

playground/ExcalidrawWrapper.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import {
+  Excalidraw,
+  convertToExcalidrawElements,
+} from "@excalidraw/excalidraw";
+import type { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types/types.js";
+import { graphToExcalidraw } from "../src/graphToExcalidraw";
+import { DEFAULT_FONT_SIZE } from "../src/constants";
+import type { MermaidData } from "./";
+
+interface ExcalidrawWrapperProps {
+  mermaidDefinition: MermaidData["definition"];
+  mermaidOutput: MermaidData["output"];
+}
+
+const ExcalidrawWrapper = ({
+  mermaidDefinition,
+  mermaidOutput,
+}: ExcalidrawWrapperProps) => {
+  const [excalidrawAPI, setExcalidrawAPI] =
+    useState<ExcalidrawImperativeAPI | null>(null);
+
+  useEffect(() => {
+    if (!excalidrawAPI) {
+      return;
+    }
+
+    if (mermaidDefinition === "" || mermaidOutput === null) {
+      excalidrawAPI.resetScene();
+      return;
+    }
+
+    const { elements, files } = graphToExcalidraw(mermaidOutput, {
+      fontSize: DEFAULT_FONT_SIZE,
+    });
+
+    excalidrawAPI.updateScene({
+      elements: convertToExcalidrawElements(elements),
+    });
+    excalidrawAPI.scrollToContent(excalidrawAPI.getSceneElements(), {
+      fitToContent: true,
+    });
+
+    if (files) {
+      excalidrawAPI.addFiles(Object.values(files));
+    }
+  }, [mermaidDefinition, mermaidOutput]);
+
+  return (
+    <div className="excalidraw-wrapper">
+      <Excalidraw
+        initialData={{
+          appState: {
+            viewBackgroundColor: "#fafafa",
+            currentItemFontFamily: 1,
+          },
+        }}
+        excalidrawAPI={(api) => setExcalidrawAPI(api)}
+      />
+    </div>
+  );
+};
+
+export default ExcalidrawWrapper;

playground/MermaidDiagram.tsx

@@ -0,0 +1,31 @@
+import { useState, useTransition, useEffect } from "react";
+import mermaid from "mermaid";
+
+interface MermaidProps {
+  id: string;
+  definition: string;
+}
+
+export const MermaidDiagram = ({ definition, id }: MermaidProps) => {
+  const [svg, setSvg] = useState("");
+  const [, startTransition] = useTransition();
+
+  useEffect(() => {
+    const render = async (id: string, definition: string) => {
+      const { svg } = await mermaid.render(`mermaid-diagram-${id}`, definition);
+      startTransition(() => {
+        setSvg(svg);
+      });
+    };
+
+    render(id, definition);
+  }, [definition, id]);
+
+  return (
+    <div
+      style={{ width: "50%" }}
+      className="mermaid"
+      dangerouslySetInnerHTML={{ __html: svg }}
+    />
+  );
+};

playground/Testcases.tsx

@@ -0,0 +1,114 @@
+import { useRef, useEffect, Fragment } from "react";
+
+import { FLOWCHART_DIAGRAM_TESTCASES } from "./testcases/flowchart";
+import { SEQUENCE_DIAGRAM_TESTCASES } from "./testcases/sequence.ts";
+import { CLASS_DIAGRAM_TESTCASES } from "./testcases/class.ts";
+import { UNSUPPORTED_DIAGRAM_TESTCASES } from "./testcases/unsupported.ts";
+
+import type { UpdateMermaidDefinition } from "./index.tsx";
+import { MermaidDiagram } from "./MermaidDiagram.tsx";
+
+interface TestCaseProps {
+  name: string;
+  testcases: { name: string; definition: string }[];
+  onChange: (definition: string, activeTestcaseIndex: number) => void;
+  error: string | null;
+  activeTestcase?: number;
+}
+
+const Testcase = ({
+  name,
+  testcases,
+  onChange,
+  error,
+  activeTestcase,
+}: TestCaseProps) => {
+  const baseId = name.toLowerCase();
+
+  useEffect(() => {
+    if (activeTestcase !== undefined) {
+      const { definition } = testcases[activeTestcase];
+
+      onChange(definition, activeTestcase);
+    }
+  }, [testcases]);
+
+  return (
+    <>
+      <h2>
+        {name} {"Diagrams"}
+      </h2>
+      <details>
+        <summary>
+          {name} {"Examples"}
+        </summary>
+        <div id={`${baseId}-container`} className="testcase-container">
+          {testcases.map(({ name, definition }, index) => {
+            const id = `${baseId}-${index}`;
+            return (
+              <Fragment key={id}>
+                <h2 style={{ marginTop: "50px", color: "#f06595" }}>{name}</h2>
+                <pre>{definition}</pre>
+                <button
+                  onClick={() => {
+                    onChange(definition, index);
+                  }}
+                >
+                  {"Render to Excalidraw"}
+                </button>
+
+                <MermaidDiagram definition={definition} id={id} />
+
+                {error && activeTestcase === index && (
+                  <div id="error">{error}</div>
+                )}
+              </Fragment>
+            );
+          })}
+        </div>
+      </details>
+    </>
+  );
+};
+
+interface TestcasesProps {
+  onChange: UpdateMermaidDefinition;
+  isCustomTest: boolean;
+  error: TestCaseProps["error"];
+}
+
+const Testcases = ({ onChange, error, isCustomTest }: TestcasesProps) => {
+  const activeTestcase = useRef<[number, number]>();
+
+  const testCases = [
+    { name: "Flowchart", testcases: FLOWCHART_DIAGRAM_TESTCASES },
+    { name: "Sequence", testcases: SEQUENCE_DIAGRAM_TESTCASES },
+    { name: "Class", testcases: CLASS_DIAGRAM_TESTCASES },
+    { name: "Unsupported", testcases: UNSUPPORTED_DIAGRAM_TESTCASES },
+  ];
+
+  return (
+    <>
+      {testCases.map(({ name, testcases }, index) => (
+        <Testcase
+          key={index}
+          name={name}
+          activeTestcase={
+            activeTestcase.current?.[0] === index
+              ? activeTestcase.current[1]
+              : undefined
+          }
+          onChange={(definition, activeTestcaseIndex) => {
+            activeTestcase.current = [index, activeTestcaseIndex];
+
+            onChange(definition, false);
+          }}
+          testcases={testcases}
+          error={!isCustomTest ? error : null}
+        />
+      ))}
+    </>
+  );
+};
+
+export default Testcases;

playground/global.d.ts

@@ -1,3 +1 @@
-declare const ExcalidrawLib: typeof import("@excalidraw/excalidraw");
-declare const React: typeof import("react");
-declare const ReactDOM: typeof import("react-dom/client");
+/// <reference types="vite/client" />