@podlite/diagram 0.0.4 → 0.0.8

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # @podlite/diagram
 
 ## Upcoming
+## 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
 
 ## 0.0.4
 - update deps

package/README.md

@@ -1 +1,114 @@
-# @podlite/diagram
+# =Diagram block
+### `=Diagram` - use diagrams
+
+To render beautiful graphs, sequence and Gantt diagrams and flowcharts, one can use the `=Diagram` blocks.
+
+```
+=begin Diagram 
+graph LR
+        A-->B
+        B-->C
+        C-->A
+        D-->C
+=end Diagram
+```
+![sample1](./doc/diagram-sample1.png)
+
+[Open this example in pod6.in](https://pod6.in/#p=%3Dbegin+Diagram+%0Agraph+LR%0A++++++++A--%3EB%0A++++++++B--%3EC%0A++++++++C--%3EA%0A++++++++D--%3EC%0A%3Dend+Diagram)
+
+#### Flowchart
+
+```
+=Diagram
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+```
+![Flowchart](./doc/diagram-sample2.png)
+
+[Open this example in pod6.in](https://pod6.in/#p=%3Dhead1+Graph%0A%0A%3DDiagram%0Agraph+LR%0A++A--%3EB%0A++B--%3EC%0A++C--%3EA%0A++D--%3EC%0A%0A%3DDiagram%0Agraph+LR%0A++++A%5BSquare+Rect%5D+--+Link+text+--%3E+B%28%28Circle%29%29%0A++++A+--%3E+C%28Round+Rect%29%0A++++B+--%3E+D%7BRhombus%7D%0A++++C+--%3E+D%0A%0A%0A+%0A%0A)
+
+```
+=Diagram
+graph TD
+   A(Coffee machine <br>not working) --> B{Machine has power?}
+   B -->|No| H(Plug in and turn on)
+   B -->|Yes| C{Out of beans or water?} -->|Yes| G(Refill beans and water)
+   C -->|No| D{Filter warning?} -->|Yes| I(Replace or clean filter)
+   D -->|No| F(Send for repair)
+```
+![Flowchart](./doc/diagram-sample6.png)
+
+[Open this example in pod6.in](https://pod6.in/#p=%3Dhead1+Flowchart%0A%3DDiagram%0Agraph+TD%0A+++A%28Coffee+machine+%3Cbr%3Enot+working%29+--%3E+B%7BMachine+has+power%3F%7D%0A+++B+--%3E%7CNo%7C+H%28Plug+in+and+turn+on%29%0A+++B+--%3E%7CYes%7C+C%7BOut+of+beans+or+water%3F%7D+--%3E%7CYes%7C+G%28Refill+beans+and+water%29%0A+++C+--%3E%7CNo%7C+D%7BFilter+warning%3F%7D+--%3E%7CYes%7C+I%28Replace+or+clean+filter%29%0A+++D+--%3E%7CNo%7C+F%28Send+for+repair%29)
+#### UML sequence diagram
+
+```
+=Diagram
+sequenceDiagram
+    autonumber
+    Student->>Admin: Can I enrol this semester?
+    loop enrolmentCheck
+        Admin->>Admin: Check previous results
+    end
+    Note right of Admin: Exam results may <br> be delayed
+    Admin-->>Student: Enrolment success
+    Admin->>Professor: Assign student to tutor
+    Professor-->>Admin: Student is assigned
+```
+![Flowchart](./doc/diagram-sample3.png)
+
+[Open this example in pod6.in](https://pod6.in/#p=+%3Dhead2+UML+sequence+diagram%0A%0A%3DDiagram%0AsequenceDiagram%0A++++autonumber%0A++++Student-%3E%3EAdmin%3A+Can+I+enrol+this+semester%3F%0A++++loop+enrolmentCheck%0A++++++++Admin-%3E%3EAdmin%3A+Check+previous+results%0A++++end%0A++++Note+right+of+Admin%3A+Exam+results+may+%3Cbr%3E+be+delayed%0A++++Admin--%3E%3EStudent%3A+Enrolment+success%0A++++Admin-%3E%3EProfessor%3A+Assign+student+to+tutor%0A++++Professor--%3E%3EAdmin%3A+Student+is+assigned)
+
+
+#### UML class diagram
+
+
+```
+=Diagram
+classDiagram
+   Person <|-- Student
+   Person <|-- Professor
+   Person : +String name
+   Person : +String phoneNumber
+   Person : +String emailAddress
+   Person: +purchaseParkingPass()
+   Address "1" <-- "0..1" Person:lives at
+   class Student{
+      +int studentNumber
+      +int averageMark
+      +isEligibleToEnrol()
+      +getSeminarsTaken()
+    }
+    class Professor{
+      +int salary
+    }
+    class Address{
+      +String street
+      +String city
+      +String state
+      +int postalCode
+      +String country
+      -validate()
+      +outputAsLabel()  
+    }
+```
+![Flowchart](./doc/diagram-sample4.png)
+
+[Open this example in pod6.in](https://pod6.in/#p=%3Dhead1+%0AUML+class+diagram%0A%0A%3DDiagram%0AclassDiagram%0A+++Person+%3C%7C--+Student%0A+++Person+%3C%7C--+Professor%0A+++Person+%3A+%2BString+name%0A+++Person+%3A+%2BString+phoneNumber%0A+++Person+%3A+%2BString+emailAddress%0A+++Person%3A+%2BpurchaseParkingPass%28%29%0A+++Address+%221%22+%3C--+%220..1%22+Person%3Alives+at%0A+++class+Student%7B%0A++++++%2Bint+studentNumber%0A++++++%2Bint+averageMark%0A++++++%2BisEligibleToEnrol%28%29%0A++++++%2BgetSeminarsTaken%28%29%0A++++%7D%0A++++class+Professor%7B%0A++++++%2Bint+salary%0A++++%7D%0A++++class+Address%7B%0A++++++%2BString+street%0A++++++%2BString+city%0A++++++%2BString+state%0A++++++%2Bint+postalCode%0A++++++%2BString+country%0A++++++-validate%28%29%0A++++++%2BoutputAsLabel%28%29++%0A++++%7D)
+
+
+## Contributing
+
+This is an open source program. Feel free to fork and contribute.
+
+In order to keep the match between this documentation and the last release, please contribute and pull requests on the dedicated develop branch.
+
+## AUTHOR
+
+Copyright (c) 2021 Alexandr Zahatski
+
+## License
+
+Released under a MIT License.

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,36 +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
     };
-    if (inputEl) {
-        mermaid_1.default.initialize(config);
-        mermaid_1.default.init(inputEl);
-    }
-    react_2.useEffect(function () {
+    (0, react_2.useEffect)(() => {
         var insertSvg = function (svgCode) {
             inputEl.current.innerHTML = svgCode;
         };
@@ -39,28 +23,32 @@ var Diagram = function (_a) {
             return;
         }
         try {
+            mermaid_1.default.initialize(config);
+            mermaid_1.default.init(undefined, inputEl.current);
             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,
@@ -73,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,33 +1,35 @@
 {
   "name": "@podlite/diagram",
-  "version": "0.0.4",
+  "version": "0.0.8",
   "description": "Diagram",
-  "main": "index.js",
+  "main": "./src/index.tsx",
   "types": "./lib/index.d.ts",
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf dist lib tsconfig.tsbuildinfo",
     "build": "tsc",
-    "test": "jest --passWithNoTests"
+    "test": "yarn g:jest  --passWithNoTests"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "@types/node": "^14.11.2",
-    "jest-watch-typeahead": "^0.6.1",
-    "mermaid": "^8.9.2",
-    "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.12",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
   },
   "peerDependencies": {
-    "react": "*"
-  },
-  "gitHead": "658ca02b7366520f9516d86249622bc47f60a620"
-}
+    "mermaid": "*",
+    "react": "*",
+    "react-is": "*"
+  }
+}

package/src/index.tsx

@@ -3,16 +3,12 @@ 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",
         startOnLoad: false 
     }
-    if ( inputEl ) {
-    mermaid.initialize(config)
-    mermaid.init( inputEl)
-    }
 
     useEffect(()=>{
         var insertSvg = function(svgCode:any){
@@ -23,13 +19,18 @@ const Diagram = ({ chart , isError }: {chart:string, isError:any})=>{
             return
         }
         try {
+            mermaid.initialize(config)
+            mermaid.init(undefined,  inputEl.current)
             mermaid.render('graph-div' + i++, chart, insertSvg)
         }  catch (e) {
             console.log({e});
           }
     }, [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": [
     {