From 92ccbffecccfa76d42a461b3c45f248b5bd9a288 Mon Sep 17 00:00:00 2001
From: Justineo <justice360@gmail.com>
Date: Thu, 18 Nov 2021 12:26:17 +0800
Subject: [PATCH] feat: expose `success` event and adjust the order of emitting
 `error`

---
 README.md       | 13 +++++++++++++
 src/Preview.vue |  8 ++++++--
 src/VueLive.vue |  8 ++++++--
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index bcb668e..dded570 100644
--- a/README.md
+++ b/README.md
@@ -117,6 +117,19 @@ When the template compilation or the script evaluation fail, errors are returned
 </template>
 ```
 
+### `@success`
+
+When the template compilation and the script evaluation succeed, the `@success` event is emitted. If you provided extra info to your user about previous errors, you can use this event to clear the error message.
+
+```vue
+<template>
+  <VueLive
+    :code="code"
+    @success="error = undefined"
+  />
+</template>
+```
+
 ## Props
 
 ### `code`
diff --git a/src/Preview.vue b/src/Preview.vue
index 9977b17..10936b0 100644
--- a/src/Preview.vue
+++ b/src/Preview.vue
@@ -110,12 +110,12 @@ export default {
        * @event
        * @property { Error } - the error thrown
        */
-      this.$emit("error", e);
       if (e.constructor === VueLiveParseTemplateError) {
         e.message = `Cannot parse template expression: ${JSON.stringify(
           e.expression.content || e.expression
         )}\n\n${e.message}`;
       }
+      this.$emit("error", e);
       this.error = e.message;
     },
     renderComponent(code) {
@@ -125,7 +125,11 @@ export default {
         const renderedComponent = compileScript(
           code,
           this.jsx
-            ? { jsx: "__pragma__(h)", objectAssign: "__concatenate__", transforms: {asyncAwait: false} }
+            ? {
+                jsx: "__pragma__(h)",
+                objectAssign: "__concatenate__",
+                transforms: { asyncAwait: false },
+              }
             : { transforms: { asyncAwait: false } }
         );
         style = renderedComponent.style;
diff --git a/src/VueLive.vue b/src/VueLive.vue
index 7df628e..2a55fbe 100644
--- a/src/VueLive.vue
+++ b/src/VueLive.vue
@@ -4,7 +4,7 @@
     v-bind="layoutProps"
     :code="stableCode"
     :language="lang"
-    :prismLang="prismLang"
+    :prism-lang="prismLang"
     :requires="requires"
     :data-scope="dataScope"
     :components="components"
@@ -33,7 +33,7 @@
         :code="model"
         @detect-language="switchLanguage"
         @error="handleError"
-        @success="error = undefined"
+        @success="handleSuccess"
         :components="components"
         :requires="requires"
         :jsx="jsx"
@@ -191,6 +191,10 @@ export default {
         this.stableCode = this.model;
       }
     },
+    handleSuccess() {
+      this.error = undefined;
+      this.$emit("success");
+    },
     handleError(e) {
       this.error = e;
       this.$emit("error", e);