@myst-theme/diagrams 0.1.0

package/README.md

@@ -0,0 +1,6 @@
+# @myst-theme/diagrams
+
+[![myst-demo on npm](https://img.shields.io/npm/v/myst-demo.svg)](https://www.npmjs.com/package/myst-demo)
+[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/curvenote/curvenote/blob/main/LICENSE)
+
+A demo component for MyST

package/dist/cjs/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function MermaidRenderer({ id, value }: {
+    value: string;
+    id: string;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/cjs/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAWA,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,eA0B3E"}

package/dist/cjs/index.js

@@ -0,0 +1,64 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MermaidRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+function parse(id, text) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { default: mermaid } = yield Promise.resolve().then(() => __importStar(require('mermaid')));
+        return yield new Promise((resolve) => {
+            mermaid.render(id, text, (code) => {
+                resolve(code);
+            });
+        });
+    });
+}
+function MermaidRenderer({ id, value }) {
+    const [graph, setGraph] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        parse(id, value)
+            .then((svg) => {
+            setGraph(svg);
+            setError(undefined);
+        })
+            .catch((err) => {
+            setGraph(undefined);
+            setError(err);
+        });
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("figure", Object.assign({ className: "" }, { children: [graph && (0, jsx_runtime_1.jsx)("div", { dangerouslySetInnerHTML: { __html: graph } }), error && ((0, jsx_runtime_1.jsxs)("pre", { children: ["Error parsing mermaid graph.", '\n\n', value] }))] })));
+}
+exports.MermaidRenderer = MermaidRenderer;

package/dist/esm/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function MermaidRenderer({ id, value }: {
+    value: string;
+    id: string;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAWA,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,eA0B3E"}

package/dist/esm/index.js

@@ -0,0 +1,37 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+function parse(id, text) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const { default: mermaid } = yield import('mermaid');
+        return yield new Promise((resolve) => {
+            mermaid.render(id, text, (code) => {
+                resolve(code);
+            });
+        });
+    });
+}
+export function MermaidRenderer({ id, value }) {
+    const [graph, setGraph] = useState();
+    const [error, setError] = useState();
+    useEffect(() => {
+        parse(id, value)
+            .then((svg) => {
+            setGraph(svg);
+            setError(undefined);
+        })
+            .catch((err) => {
+            setGraph(undefined);
+            setError(err);
+        });
+    }, []);
+    return (_jsxs("figure", Object.assign({ className: "" }, { children: [graph && _jsx("div", { dangerouslySetInnerHTML: { __html: graph } }), error && (_jsxs("pre", { children: ["Error parsing mermaid graph.", '\n\n', value] }))] })));
+}

package/dist/types/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare function MermaidRenderer({ id, value }: {
+    value: string;
+    id: string;
+}): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAWA,wBAAgB,eAAe,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,eA0B3E"}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@myst-theme/diagrams",
+  "version": "0.1.0",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "compile": "tsc",
+    "lint": "eslint \"src/**/*.ts*\" \"src/**/*.tsx\" -c ./.eslintrc.js",
+    "lint:format": "prettier --check \"src/**/*.{ts,tsx,md}\"",
+    "dev": "npm-run-all --parallel \"build:* -- --watch\"",
+    "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "build:esm": "tsc --module es2020 --outDir dist/esm",
+    "build:types": "tsc --declaration --emitDeclarationOnly --declarationMap --outDir dist/types",
+    "build": "npm-run-all -l clean -p build:cjs build:esm build:types"
+  },
+  "dependencies": {
+    "mermaid": "^9.1.7"
+  },
+  "peerDependencies": {
+    "@types/react": "^16.8 || ^17.0 || ^18.0",
+    "@types/react-dom": "^16.8 || ^17.0 || ^18.0",
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.5",
+    "@types/mermaid": "^8.2.9",
+    "eslint": "^8.21.0",
+    "eslint-config-curvenote": "latest",
+    "npm-run-all": "^4.1.5",
+    "tsconfig": "latest",
+    "typescript": "latest"
+  }
+}