feat: custom error handling (#30)

Author: dword-design

README.md

@@ -173,6 +173,27 @@ export default {
 </script>
 ```
 
+## Error handling
+
+Mermaid has its own default error handling behavior, outputting a little graphical error message if a parsing error occurs. If you want to have custom error handling, you can react to the `@parse-error` event. Here is a simple example that outputs the error message as a plain string:
+
+```html
+<template>
+  <div v-if="error">{{ error }}</div>
+  <self v-else value="foo" @parse-error="error = $event" />
+</template>
+```
+
+```js
+<script>
+export default {
+  data: () => ({
+    error: undefined,
+  }),
+}
+</script>
+```
+
 <!-- LICENSE/ -->
 ## Contribute
 

src/__image_snapshots__/index-spec-js-index-error-handling-1-snap.png

@@ -5,12 +5,34 @@ import testerPluginPuppeteer from '@dword-design/tester-plugin-puppeteer'
 
 export default tester(
   {
+    'error handling': {
+      page: endent`
+      <template>
+        <div v-if="error" class="foo">{{ error }}</div>
+        <self v-else class="foo" value="foo" @parse-error="error = $event" />
+      </template>
+
+      <script>
+      export default {
+        data: () => ({
+          error: undefined,
+        }),
+      }
+      </script>
+
+    `,
+      async test() {
+        await this.page.goto('http://localhost:3000')
+        await this.page.waitForSelector('.foo')
+        expect(
+          await this.page.screenshot({ fullPage: true })
+        ).toMatchImageSnapshot(this)
+      },
+    },
     works: {
       page: endent`
       <template>
-        <client-only>
-          <self class="foo" :value="diagram" />
-        </client-only>
+        <self class="foo" :value="diagram" />
       </template>
 
       <script>

src/index.spec.js

@@ -1,10 +1,12 @@
 <script>
 import mermaid from 'mermaid'
 
-mermaid.parseError = error => console.error(error)
-
 export default {
   mounted() {
+    mermaid.parseError = error => {
+      console.log('this is a parse error')
+      this.$emit('parse-error', error)
+    }
     mermaid.initialize({
       securityLevel: 'loose',
       startOnLoad: false,
@@ -17,7 +19,7 @@ export default {
     value: { type: String },
   },
   render() {
-    return <div class="foo">{this.value}</div>
+    return <div>{this.value}</div>
   },
 }
 </script>