fix: allow to change diagram (#61)

Author: dword-design

src/__image_snapshots__/index-spec-js-index-change-value-1-snap.png

@@ -5,6 +5,46 @@ import testerPluginPuppeteer from '@dword-design/tester-plugin-puppeteer'
 
 export default tester(
   {
+    'change value': {
+      page: endent`
+        <template>
+          <div>
+            <self class="foo" :value="diagram" />
+            <button @click="change" />
+          </div>
+        </template>
+
+        <script>
+        import { endent } from '@dword-design/functions'
+
+        export default {
+          data: () => ({
+            diagram: endent\`
+              graph TD
+                A --> B
+            \`,
+          }),
+          methods: {
+            change() {
+              this.diagram = endent\`
+                graph TD
+                  B --> C
+              \`
+            },
+          },
+        }
+        </script>
+
+      `,
+      async test() {
+        await this.page.goto('http://localhost:3000')
+        await this.page.waitForSelector('.foo')
+        await this.page.click('button')
+        expect(
+          await this.page.screenshot({ fullPage: true })
+        ).toMatchImageSnapshot(this)
+      },
+    },
     click: {
       page: endent`
       <template>

src/index.spec.js

@@ -13,18 +13,33 @@ export default {
     },
     id: () => nanoid(),
   },
+  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.init(this.finalValue, this.$el)
+      }
+    },
+  },
   mounted() {
     if (typeof window !== 'undefined') {
-      const mermaid = window.mermaid || require('mermaid').default
       window[`mermaidClick_${this.id}`] = id => this.$emit('node-click', id)
-      mermaid.parseError = error => this.$emit('parse-error', error)
+
+      const mermaid = window.mermaid || require('mermaid').default
       mermaid.initialize({
         securityLevel: 'loose',
         startOnLoad: false,
         theme: 'default',
       })
-      mermaid.init(this.finalValue, this.$el)
     }
+
+    return this.update()
   },
   name: 'VueMermaidString',
   props: {
@@ -33,5 +48,10 @@ export default {
   render() {
     return <div>{this.finalValue}</div>
   },
+  watch: {
+    finalValue() {
+      return this.update()
+    },
+  },
 }
 </script>