feat: add graphviz plugin

pd4d10 · pd4d10 · commit a652b256c71e · 2020-03-08T00:49:53.000+08:00
diff --git a/packages/example/src/App.svelte b/packages/example/src/App.svelte
@@ -2,6 +2,7 @@
   import { Editor } from 'bytemd';
   import highlight from '@bytemd/plugin-highlight'
   import katex from '@bytemd/plugin-katex'
+  import graphviz from '@bytemd/plugin-graphviz'
   let source = `# bytemd
 
 [![npm](https://img.shields.io/npm/v/bytemd.svg)](https://npm.im/bytemd)
@@ -34,4 +35,4 @@ MIT
 `
 </script>
 
-<Editor {source} plugins={[highlight, katex]} />
+<Editor {source} plugins={[highlight, katex, graphviz]} />
diff --git a/packages/plugin-graphviz/LICENSE b/packages/plugin-graphviz/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Rongjian Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/plugin-graphviz/package.json b/packages/plugin-graphviz/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "@bytemd/plugin-graphviz",
+  "version": "0.0.1",
+  "description": "Graphviz plugin for bytemd",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "index.d.ts",
+  "svelte": "src/index.js",
+  "keywords": [],
+  "files": [
+    "dist",
+    "index.d.ts"
+  ],
+  "author": "Rongjian Zhang <pd4d10@gmail.com>",
+  "license": "MIT",
+  "peerDependencies": {
+    "bytemd": "*"
+  },
+  "dependencies": {
+    "viz.js": "^2.1.2"
+  }
+}
diff --git a/packages/plugin-graphviz/src/GraphvizView.svelte b/packages/plugin-graphviz/src/GraphvizView.svelte
@@ -0,0 +1,16 @@
+<script>
+  import Viz from 'viz.js'
+  import workerURL from 'viz.js/full.render.js';
+
+  const viz = new Viz(workerURL)
+
+  export let value
+</script>
+
+{#await viz.renderString(value)}
+	<p>...</p>
+{:then raw}
+	{@html raw}
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}
diff --git a/packages/plugin-graphviz/src/index.js b/packages/plugin-graphviz/src/index.js
@@ -0,0 +1,9 @@
+import GraphvizView from './GraphvizView.svelte';
+
+export default {
+  transformNode(node) {},
+  shouldTransformElement(node) {
+    return node.type === 'code' && ['graphviz', 'dot'].includes(node.lang);
+  },
+  component: GraphvizView
+};
diff --git a/rollup.config.js b/rollup.config.js
@@ -14,8 +14,9 @@ const production = !process.env.ROLLUP_WATCH;
 
 const corePkg = require('./packages/bytemd/package.json');
 const reactPkg = require('./packages/bytemd-react/package.json');
-const pluginHighlightPkg = require('./packages/plugin-highlight/package.json');
-const pluginKatexPkg = require('./packages/plugin-katex/package.json');
+const highlightPkg = require('./packages/plugin-highlight/package.json');
+const katexPkg = require('./packages/plugin-katex/package.json');
+const graphvizPkg = require('./packages/plugin-graphviz/package.json');
 
 function serve() {
   let started = false;
@@ -118,11 +119,11 @@ const configs = {
     output: [
       {
         format: 'es',
-        file: pluginHighlightPkg.module
+        file: highlightPkg.module
       },
       {
         format: 'cjs',
-        file: pluginHighlightPkg.main
+        file: highlightPkg.main
       }
     ],
     plugins: [
@@ -140,11 +141,33 @@ const configs = {
     output: [
       {
         format: 'es',
-        file: pluginKatexPkg.module
+        file: katexPkg.module
       },
       {
         format: 'cjs',
-        file: pluginKatexPkg.main
+        file: katexPkg.main
+      }
+    ],
+    plugins: [
+      svelte({ dev: !production }),
+      resolve({
+        browser: true,
+        dedupe: ['svelte']
+      }),
+      commonjs(),
+      production && terser()
+    ]
+  },
+  'plugin-graphviz': {
+    input: 'src/index.js',
+    output: [
+      {
+        format: 'es',
+        file: graphvizPkg.module
+      },
+      {
+        format: 'cjs',
+        file: graphvizPkg.main
       }
     ],
     plugins: [
