fix: vue 3, component is client-only now, CDN doesn't require mermaid anymore

BREAKING CHANGE: Migrated to Vue 3
BREAKING CHANGE: The component is client-only now. This means that if you use SSR, you need to make sure that the component is only instantiated on the client (e.g. use <client-only> with Nuxt). Having this flexible led to some issues.

Author: renovate[bot]

.baserc.json

@@ -1,9 +1,6 @@
 {
   "name": "@dword-design/component",
   "testInContainer": true,
-  "cdnExtraScripts": [
-    "<script src=\"https://unpkg.com/mermaid/dist/mermaid.min.js\"></script>"
-  ],
   "seeAlso": [
     { "repository": "nuxt-mermaid-string", "description": "Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string." }
   ]

.devcontainer/devcontainer.json

@@ -0,0 +1,7 @@
+{
+  "features": {
+    "ghcr.io/devcontainers/features/docker-in-docker:2": {}
+  },
+  "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16",
+  "updateContentCommand": "yarn --frozen-lockfile"
+}

.gitpod.Dockerfile

@@ -7,7 +7,6 @@ RUN git lfs install
 
 # https://www.gitpod.io/docs/languages/javascript
 RUN bash -c 'VERSION="16"       && source $HOME/.nvm/nvm.sh && nvm install $VERSION       && nvm use $VERSION && nvm alias default $VERSION'
-RUN echo "nvm use default &>/dev/null" >> ~/.bashrc.d/51-nvm-fix
 
 RUN echo "\nexport PATH=$(yarn global bin):\$PATH" >> /home/gitpod/.bashrc
 

.vscode/settings.json

@@ -6,6 +6,7 @@
     ".browserslistrc": true,
     ".commitlintrc.json": true,
     ".cz.json": true,
+    ".devcontainer": true,
     ".editorconfig": true,
     ".eslintrc.json": true,
     ".gitattributes": true,
@@ -17,6 +18,7 @@
     ".nyc_output": true,
     ".releaserc.json": true,
     ".renovaterc.json": true,
+    ".vscode": true,
     "CHANGELOG.md": true,
     "LICENSE.md": true,
     "coverage": true,

README.md

@@ -101,8 +101,7 @@ Vue.use(VueMermaidString)
 ## Install via CDN
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
-<script src="https://unpkg.com/mermaid/dist/mermaid.min.js"></script>
+<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
 <script src="https://unpkg.com/vue-mermaid-string"></script>
 ```
 <!-- /INSTALL -->

package.json

@@ -30,11 +30,11 @@
   },
   "devDependencies": {
     "@dword-design/base": "^9.1.10",
-    "@dword-design/base-config-component": "^1.1.7",
+    "@dword-design/base-config-component": "^2.0.0",
     "@dword-design/functions": "^4.0.0",
     "@dword-design/puppeteer": "^6.0.0",
     "@dword-design/tester": "^2.0.0",
-    "@dword-design/tester-plugin-component": "^2.0.0",
+    "@dword-design/tester-plugin-component": "^3.0.0",
     "@dword-design/tester-plugin-puppeteer": "^2.0.0"
   },
   "engines": {

src/index.spec.js

@@ -42,6 +42,8 @@ export default tester(
       async test() {
         await this.page.goto('http://localhost:3000')
         await this.page.waitForSelector('.foo')
+        console.log('ready')
+        await new Promise(resolve => setTimeout(resolve, 30000))
         await this.page.click('button')
         expect(
           await this.page.screenshot({ fullPage: true })

src/index.vue

@@ -3,12 +3,13 @@
 </template>
 
 <script>
+import mermaid from 'mermaid'
 import { nanoid } from 'nanoid'
 
 import addClickEvent from './add-click-event.js'
 
 export default {
-  beforeDestroy() {
+  beforeUnmount() {
     delete window[`mermaidClick_${this.id}`]
   },
   computed: {
@@ -20,22 +21,15 @@ export default {
   methods: {
     update() {
       if (typeof window !== 'undefined') {
-        const mermaid = window.mermaid || require('mermaid').default
-        mermaid.parseError = error => this.$emit('parse-error', error)
         this.$el.removeAttribute('data-processed')
-        this.$el.replaceChild(
-          document.createTextNode(this.finalValue),
-          this.$el.firstChild
-        )
+        mermaid.parseError = error => this.$emit('parse-error', error)
         mermaid.init(this.finalValue, this.$el)
       }
     },
   },
   mounted() {
     if (typeof window !== 'undefined') {
       window[`mermaidClick_${this.id}`] = id => this.$emit('node-click', id)
-
-      const mermaid = window.mermaid || require('mermaid').default
       mermaid.initialize({
         securityLevel: 'loose',
         startOnLoad: false,
@@ -52,8 +46,11 @@ export default {
     value: { required: true, type: String },
   },
   watch: {
-    finalValue() {
-      return this.update()
+    finalValue: {
+      flush: 'post',
+      async handler() {
+        await this.update()
+      },
     },
   },
 }