use mermaid v10.x

hojas · Jul 8, 2023 · df72e0f · df72e0f
1 parent 7b12fce
commit df72e0f
Show file tree

Hide file tree

Showing 25 changed files with 3,166 additions and 513 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -0,0 +1,5 @@
+process.env.ESLINT_TSCONFIG = 'tsconfig.json'
+
+module.exports = {
+  extends: '@antfu'
+}
diff --git a/.gitignore b/.gitignore
@@ -14,7 +14,6 @@ dist-ssr
 
 # Editor directories and files
 .vscode
-!.vscode/extensions.json
 .idea
 .DS_Store
 *.suo

diff --git a/.prettierrc b/.prettierrc
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # vue-mermaid-render
 
-Vue component to render diagrams with Mermaid.
+Vue 3 component to render diagrams with Mermaid.
 
 ## Install
 
@@ -17,10 +17,10 @@ import { VueMermaidRender } from 'vue-mermaid-render'
 
 const content = `
 graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
 `
 </script>
 

diff --git a/package.json b/package.json
@@ -1,43 +1,11 @@
 {
   "name": "vue-mermaid-render",
-  "version": "0.0.3",
-  "packageManager": "[email protected]",
-  "license": "MIT",
-  "keywords": [
-    "vue",
-    "vue-component",
-    "component",
-    "mermaid",
-    "diagrams"
-  ],
-  "repository": "hojas/vue-mermaid-render",
-  "bugs": "https://github.com/hojas/vue-mermaid-render/issues",
   "type": "module",
-  "files": [
-    "dist"
-  ],
-  "types": "./dist/index.d.ts",
-  "main": "./dist/vue-mermaid-render.umd.cjs",
-  "module": "./dist/vue-mermaid-render.js",
-  "exports": {
-    ".": {
-      "import": "./dist/vue-mermaid-render.js",
-      "require": "./dist/vue-mermaid-render.umd.cjs"
-    }
-  },
-  "scripts": {
-    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
-  },
-  "dependencies": {
-    "mermaid": "^9.4.0"
-  },
+  "version": "0.0.0",
+  "packageManager": "[email protected]",
+  "license": "MIT",
   "devDependencies": {
-    "@types/node": "^18.14.0",
-    "@vitejs/plugin-vue": "^4.0.0",
-    "prettier": "^2.8.4",
-    "typescript": "^4.9.5",
-    "vite": "^4.1.3",
-    "vue": "^3.2.47",
-    "vue-tsc": "^1.1.5"
+    "@antfu/eslint-config": "^0.39.7",
+    "eslint": "^8.44.0"
   }
 }
diff --git a/packages/demo/index.html b/packages/demo/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>VueMermaidRender Demo</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "demo",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite"
+  },
+  "dependencies": {
+    "vue": "^3.3.4",
+    "vue-mermaid-render": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2",
+    "vue-tsc": "^1.8.4"
+  }
+}
diff --git a/packages/demo/src/App.vue b/packages/demo/src/App.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { VueMermaidRender } from 'vue-mermaid-render'
+
+const content = ref(`
+graph TD;
+  A-->B;
+  A-->C;
+  B-->D;
+  C-->D;
+`)
+
+setTimeout(() => {
+  content.value = `
+  sequenceDiagram
+    participant Alice
+    participant Bob
+    Alice->>John: Hello John, how are you?
+    loop Healthcheck
+        John->>John: Fight against hypochondria
+    end
+    Note right of John: Rational thoughts <br/>prevail!
+    John-->>Alice: Great!
+    John->>Bob: How about you?
+    Bob-->>John: Jolly good!
+`
+}, 2000)
+</script>
+
+<template>
+  <VueMermaidRender :content="content" />
+</template>
diff --git a/packages/demo/src/main.ts b/packages/demo/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/src/vite-env.d.ts → packages/demo/src/vite-env.d.ts b/src/vite-env.d.ts → packages/demo/src/vite-env.d.ts
diff --git a/packages/demo/tsconfig.json b/packages/demo/tsconfig.json
@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json → packages/demo/tsconfig.node.json b/tsconfig.node.json → packages/demo/tsconfig.node.json
@@ -1,8 +1,9 @@
 {
   "compilerOptions": {
     "composite": true,
+    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "bundler",
     "allowSyntheticDefaultImports": true
   },
   "include": ["vite.config.ts"]

diff --git a/packages/demo/vite.config.ts b/packages/demo/vite.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+})
diff --git a/packages/vue-mermaid-render/package.json b/packages/vue-mermaid-render/package.json
@@ -0,0 +1,41 @@
+{
+  "name": "vue-mermaid-render",
+  "type": "module",
+  "version": "0.1.0",
+  "packageManager": "[email protected]",
+  "license": "MIT",
+  "repository": "hojas/vue-mermaid-render",
+  "bugs": "https://github.com/hojas/vue-mermaid-render/issues",
+  "keywords": [
+    "vue",
+    "vue-component",
+    "component",
+    "mermaid",
+    "diagrams"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "require": "./dist/vue-mermaid-render.umd.cjs",
+      "import": "./dist/vue-mermaid-render.js"
+    }
+  },
+  "main": "./dist/vue-mermaid-render.umd.cjs",
+  "module": "./dist/vue-mermaid-render.js",
+  "types": "./dist/main.d.ts",
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && vue-tsc --declaration --emitDeclarationOnly"
+  },
+  "dependencies": {
+    "mermaid": "^10.2.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.4.1",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "typescript": "^5.1.6",
+    "vite": "^4.4.2",
+    "vue": "^3.3.4",
+    "vue-tsc": "^1.8.4"
+  }
+}
diff --git a/packages/vue-mermaid-render/src/components/VueMermaidRender.vue b/packages/vue-mermaid-render/src/components/VueMermaidRender.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { onMounted, ref, watchEffect } from 'vue'
+import type { MermaidConfig } from 'mermaid'
+import mermaid from 'mermaid'
+
+const props = defineProps<{ content: string; config?: MermaidConfig }>()
+
+const mounted = ref(false)
+const el = ref()
+const mermaidString = ref('')
+
+function genSvgId() {
+  const min = Math.ceil(1)
+  const max = Math.floor(100000)
+  return `mermaid-svg-${Math.floor(Math.random() * (max - min + 1))}${min}`
+}
+
+async function updateGraph(graphDefinition: string) {
+  const id = genSvgId()
+  const res = await mermaid.render(id, graphDefinition, el.value)
+  mermaidString.value = res.svg
+}
+
+watchEffect(() => {
+  if (!mounted.value)
+    return
+
+  if (props.config)
+    mermaid.initialize({ startOnLoad: false, ...props.config })
+  else
+    mermaid.initialize({ startOnLoad: false })
+})
+
+watchEffect(() => {
+  if (!mounted.value)
+    return
+
+  if (props.content)
+    updateGraph(props.content)
+})
+
+onMounted(() => {
+  mounted.value = true
+})
+</script>
+
+<template>
+  <pre ref="el" class="mermaid" v-html="mermaidString" />
+</template>
diff --git a/packages/vue-mermaid-render/src/main.ts b/packages/vue-mermaid-render/src/main.ts
@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+import VueMermaidRender from './components/VueMermaidRender.vue'
+
+export { VueMermaidRender }
+
+export default {
+  install: (app: App) => {
+    app.component('VueMermaidRender', VueMermaidRender)
+  },
+}
diff --git a/packages/vue-mermaid-render/src/vite-env.d.ts b/packages/vue-mermaid-render/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue'
diff --git a/packages/vue-mermaid-render/tsconfig.json b/packages/vue-mermaid-render/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "outDir": "dist",
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": false,
+    "jsx": "preserve",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/packages/vue-mermaid-render/tsconfig.node.json b/packages/vue-mermaid-render/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/vite.config.ts → packages/vue-mermaid-render/vite.config.ts b/vite.config.ts → packages/vue-mermaid-render/vite.config.ts
@@ -1,11 +1,11 @@
-import { resolve } from 'path'
+import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 export default defineConfig({
   build: {
     lib: {
-      entry: resolve(__dirname, 'src/index.ts'),
+      entry: resolve(__dirname, 'src/main.ts'),
       name: 'VueMermaidRender',
       fileName: 'vue-mermaid-render',
     },
@@ -14,6 +14,7 @@ export default defineConfig({
       output: {
         globals: {
           vue: 'Vue',
+          mermaid: 'mermaid',
         },
       },
     },
-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,6 @@ dist-ssr @@
     # Editor directories and files
     .vscode
-    !.vscode/extensions.json
     .idea
     .DS_Store
     *.suo
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		/// <reference types="vite/client" />

		declare module '*.vue'