upgrade deps

package.json

@@ -1,8 +1,8 @@
 {
   "name": "vue-mermaid-render",
   "type": "module",
-  "version": "0.1.1",
-  "packageManager": "pnpm@8.10.2",
+  "version": "0.1.2",
+  "packageManager": "pnpm@8.13.1",
   "license": "MIT",
   "repository": "hojas/vue-mermaid-render",
   "bugs": "https://github.com/hojas/vue-mermaid-render/issues",
@@ -16,8 +16,8 @@
   "exports": {
     ".": {
       "types": "./dist/main.d.ts",
-      "require": "./dist/vue-mermaid-render.umd.cjs",
-      "import": "./dist/vue-mermaid-render.js"
+      "import": "./dist/vue-mermaid-render.js",
+      "require": "./dist/vue-mermaid-render.umd.cjs"
     }
   },
   "main": "./dist/vue-mermaid-render.umd.cjs",
@@ -29,20 +29,21 @@
   "scripts": {
     "dev": "node ./scripts/dev.cjs",
     "build": "node ./scripts/build.cjs",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "push": "pnpm build && npm publish"
   },
   "dependencies": {
     "mermaid": "^10.6.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^1.1.0",
-    "@types/node": "^20.9.0",
-    "@vitejs/plugin-vue": "^4.4.1",
-    "eslint": "^8.53.0",
+    "@antfu/eslint-config": "^2.6.1",
+    "@types/node": "^20.10.6",
+    "@vitejs/plugin-vue": "^5.0.2",
+    "eslint": "^8.56.0",
     "shelljs": "^0.8.5",
-    "typescript": "^5.2.2",
-    "vite": "^4.5.0",
-    "vue": "^3.3.8",
-    "vue-tsc": "^1.8.22"
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vue": "^3.4.3",
+    "vue-tsc": "^1.8.27"
   }
 }

packages/demo/tsconfig.json

@@ -1,25 +1,21 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "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 */
+    "allowImportingTsExtensions": true,
     "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noEmit": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

packages/demo/tsconfig.node.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
   },
   "include": ["vite.config.ts"]
 }

packages/vue-mermaid-render/package.json

@@ -6,8 +6,8 @@
   "exports": {
     ".": {
       "types": "./dist/main.d.ts",
-      "require": "./dist/vue-mermaid-render.umd.cjs",
-      "import": "./dist/vue-mermaid-render.js"
+      "import": "./dist/vue-mermaid-render.js",
+      "require": "./dist/vue-mermaid-render.umd.cjs"
     }
   },
   "main": "./dist/vue-mermaid-render.umd.cjs",

packages/vue-mermaid-render/src/components/VueMermaidRender.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { onMounted, ref, watchEffect } from 'vue'
-import type { MermaidConfig } from 'mermaid'
+import { ref, watchEffect } from 'vue'
 import mermaid from 'mermaid'
+import type { MermaidConfig } from 'mermaid'
 
-const props = defineProps<{ content: string; config?: MermaidConfig }>()
+const props = defineProps<{ content: string, config?: MermaidConfig }>()
 
 const el = ref()
-const mounted = ref(false)
 const mermaidString = ref('')
 
 function genSvgId() {
@@ -22,7 +21,7 @@ async function updateGraph(graphDefinition: string) {
 }
 
 watchEffect(() => {
-  if (!mounted.value)
+  if (!el.value)
     return
 
   if (props.config)
@@ -32,16 +31,12 @@ watchEffect(() => {
 })
 
 watchEffect(() => {
-  if (!mounted.value)
+  if (!el.value)
     return
 
   if (props.content)
     updateGraph(props.content)
 })
-
-onMounted(() => {
-  mounted.value = true
-})
 </script>
 
 <template>

packages/vue-mermaid-render/tsconfig.json

@@ -1,26 +1,22 @@
 {
   "compilerOptions": {
     "target": "ES2020",
+    "jsx": "preserve",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
     "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 */
+    "allowImportingTsExtensions": true,
     "strict": true,
+    "noFallthroughCasesInSwitch": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noEmit": false,
+    "outDir": "dist",
+    "isolatedModules": true,
+    "skipLibCheck": true
   },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }

packages/vue-mermaid-render/tsconfig.node.json

@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true
   },
   "include": ["vite.config.ts"]
 }