@podlite/diagram 0.0.5 → 0.0.9

package/CHANGELOG.md

@@ -1,7 +1,15 @@
 # @podlite/diagram
 
 ## Upcoming
-
+## 0.0.9
+- fix npm
+## 0.0.8
+- add :caption, :id support
+- upgrade mermaid to 8.12.1
+## 0.0.7
+- update deps
+## 0.0.6
+- update deps
 ## 0.0.5
 - update mermaid to latest version
 - fix error while diagrams renders

package/lib/index.d.ts

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { Plugin } from '@podlite/schema';
-declare const Diagram: ({ chart, isError }: {
+declare const Diagram: ({ chart, isError, caption, id }: {
     chart: string;
     isError: any;
+    caption?: string;
+    id?: string;
 }) => JSX.Element;
 export declare const plugin: Plugin;
 export default Diagram;

package/lib/index.js

@@ -1,32 +1,20 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.plugin = void 0;
-var react_1 = __importDefault(require("react"));
-var react_2 = require("react");
-var mermaid_1 = __importDefault(require("mermaid"));
-var i = 0;
-var Diagram = function (_a) {
-    var chart = _a.chart, isError = _a.isError;
-    var inputEl = react_2.useRef(null);
-    var config = {
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
+const mermaid_1 = __importDefault(require("mermaid"));
+let i = 0;
+const Diagram = ({ chart, isError, caption, id }) => {
+    const inputEl = (0, react_2.useRef)(null);
+    const config = {
         securityLevel: "loose",
         startOnLoad: false
     };
-    react_2.useEffect(function () {
+    (0, react_2.useEffect)(() => {
         var insertSvg = function (svgCode) {
             inputEl.current.innerHTML = svgCode;
         };
@@ -40,25 +28,27 @@ var Diagram = function (_a) {
             mermaid_1.default.render('graph-div' + i++, chart, insertSvg);
         }
         catch (e) {
-            console.log({ e: e });
+            console.log({ e });
         }
     }, [chart]);
-    return react_1.default.createElement("div", { className: "mermaid" + (isError ? ' error' : ''), ref: inputEl });
+    return react_1.default.createElement("div", { className: "diagram", id: id },
+        react_1.default.createElement("div", { className: `mermaid${isError ? ' error' : ''}`, ref: inputEl }),
+        caption ? react_1.default.createElement("div", { className: "caption" }, caption) : null);
 };
 exports.plugin = {
-    toAst: function (writer) { return function (node) {
+    toAst: (writer) => (node) => {
         if (typeof node !== "string" && 'type' in node && 'content' in node && node.type === 'block') {
-            var content = node.content[0];
+            const content = node.content[0];
             if (typeof content !== "string" && 'location' in node && 'value' in content) {
                 // get link and alt text
-                var data = content.value;
+                const data = content.value;
                 try {
                     mermaid_1.default.parse(data);
                 }
                 catch (err) {
                     // calculate line in relation to node
-                    var convert_line_to_absolute = function (line, location) {
-                        var lineoffset = line + location.start.line + 1;
+                    const convert_line_to_absolute = (line, location) => {
+                        const lineoffset = line + location.start.line + 1;
                         return { "start": {
                                 "offset": 0,
                                 "line": lineoffset,
@@ -71,12 +61,12 @@ exports.plugin = {
                             }
                         };
                     };
-                    node.custom = __assign(__assign({}, err), { location: convert_line_to_absolute(err['hash']['line'], node.location) });
+                    node.custom = { ...err, location: convert_line_to_absolute(err['hash']['line'], node.location) };
                     writer.emit("errors", node.location);
                 }
                 return node;
             }
         }
-    }; },
+    },
 };
 exports.default = Diagram;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@podlite/diagram",
-  "version": "0.0.5",
+  "version": "0.0.9",
   "description": "Diagram",
   "main": "index.js",
   "types": "./lib/index.d.ts",
@@ -8,26 +8,29 @@
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc",
-    "test": "jest --passWithNoTests"
+    "test": "yarn g:jest  --passWithNoTests"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "main": "index.js"
   },
   "dependencies": {
-    "@types/node": "^14.11.2",
-    "jest-watch-typeahead": "^0.6.1",
-    "mermaid": "8.10.1",
-    "react-is": "^16.12.0",
-    "ts-jest": "^26.4.1"
+    "@podlite/schema": "0.0.7",
+    "react-is": "^17.0.2"
   },
   "devDependencies": {
-    "@types/react-dom": "^17.0.3",
-    "react": "16.12.0",
-    "react-dom": "^17.0.2",
-    "typescript": "4.2.3"
+    "@podlite/to-jsx": "0.0.8",
+    "@types/node": "^16.11.9",
+    "@types/react": "^16.x",
+    "@types/react-dom": "^16.x",
+    "mermaid": "8.12.1",
+    "podlite": "0.0.13",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
   "peerDependencies": {
-    "react": "*"
-  },
-  "gitHead": "8c6f712b1b46052f6da0ede14c3271b92a7b6dc9"
-}
+    "mermaid": "*",
+    "react": "*",
+    "react-is": "*"
+  }
+}

package/src/index.tsx

@@ -3,7 +3,7 @@ import {useEffect, useRef} from 'react'
 import {Plugin, Location} from '@podlite/schema'
 import mermaid from 'mermaid';
 let i = 0;
-const Diagram = ({ chart , isError }: {chart:string, isError:any})=>{
+const Diagram = ({ chart , isError, caption, id }: {chart:string, isError:any, caption?:string, id?:string})=>{
     const inputEl = useRef(null);
     const config = {
         securityLevel: "loose",
@@ -27,7 +27,10 @@ const Diagram = ({ chart , isError }: {chart:string, isError:any})=>{
           }
     }, [chart])
 
-    return <div className={ `mermaid${ isError ? ' error' : ''}` } ref={inputEl}/>
+    return <div className="diagram" id={id}>
+            <div className={ `mermaid${ isError ? ' error' : ''}` } ref={inputEl}/>
+            { caption ? <div className="caption">{caption}</div> : null }
+            </div>
 }
 
 export const plugin:Plugin = {

package/t/plugin.test.tsx

@@ -8,6 +8,7 @@ import Diagram, { plugin as DiagramPlugin } from "../src/index";
 import Podlite from "@podlite/to-jsx";
 import React from "react";
 import ReactDOM from "react-dom";
+import makeAttrs from "pod6/built/helpers/config";
 
 const parse = (str: string): PodliteDocument => {
   let podlite = podlite_core({ importPlugins: false }).use({
@@ -31,6 +32,31 @@ const cleanHTML = (html: string) => {
   return html.replace(/\n+/g, "");
 };
 
+const plugins = (makeComponent) => {
+  return {
+    Diagram: () => (node, ctx, interator) => {
+      const conf = makeAttrs(node, ctx);
+      const caption = conf.exists("caption")
+        ? conf.getFirstValue("caption")
+        : null;
+      return makeComponent(
+        ({ children, key }) => {
+          return (
+            <Diagram
+              isError={node.custom}
+              key={key}
+              caption={caption}
+              chart={node.content[0].value}
+            />
+          );
+        },
+        node,
+        interator(node.content, { ...ctx })
+      );
+    },
+  };
+};
+
 const root = document.body.appendChild(document.createElement("div"));
 
 function render(jsx) {
@@ -73,25 +99,35 @@ B-->D(fa:fa-spinner aaaaa);
 it("=Diagrams: parse to html", () => {
   expect(parseToHtml(pod)).toMatchInlineSnapshot(`""`);
 });
+it("=Diagrams: caption", () => {
+  const pod = `
+=begin Diagram :caption('Caption test')
+    graph LR
+            A-->B
+            B-->C
+            C-->A
+            D-->C
+=end Diagram
+`;
+  render(<Podlite plugins={plugins}>{pod}</Podlite>);
+  expect(root.innerHTML).toMatchInlineSnapshot(`
+    <div class="diagram">
+      <div class="mermaid">
+      </div>
+      <div class="caption">
+        Caption test
+      </div>
+    </div>
+  `);
+});
 
 it("accepts =Diagram", () => {
-  const plugins = (makeComponent) => {
-    return {
-      Diagram: () => (node, ctx, interator) => {
-        return makeComponent(
-          ({ children, key }) => {
-            return <Diagram isError= {node.custom} key={key} chart={node.content[0].value} />;
-          },
-          node,
-          interator(node.content, { ...ctx })
-        );
-      },
-    };
-  };
   render(<Podlite plugins={plugins}>{pod}</Podlite>);
   expect(root.innerHTML).toMatchInlineSnapshot(`
     <div>
-      <div class="mermaid">
+      <div class="diagram">
+        <div class="mermaid">
+        </div>
       </div>
     </div>
   `);

package/tsconfig.json

@@ -2,9 +2,10 @@
   "extends": "../core/tsconfig.json",
   "include": ["src/**/*"],
   "compilerOptions": {
+    "jsx": "react",
     "outDir": "./lib",
     "rootDir": "./src",
-    "jsx": "react",
+    "baseUrl": "."
   },
   "references": [
     {