From 838730f000eb53f6b2d6595308fd12c04c81ddd9 Mon Sep 17 00:00:00 2001
From: kazuya kawaguchi <kawakazu80@gmail.com>
Date: Sun, 18 Jun 2017 01:06:30 +0900
Subject: [PATCH] :up: update: show the error at storybook/vue

---
 app/vue/src/client/preview/ErrorDisplay.vue | 54 +++++++++++++++++++++
 app/vue/src/client/preview/error_display.js | 50 -------------------
 app/vue/src/client/preview/render.js        | 27 +++++++----
 3 files changed, 71 insertions(+), 60 deletions(-)
 create mode 100644 app/vue/src/client/preview/ErrorDisplay.vue
 delete mode 100644 app/vue/src/client/preview/error_display.js

diff --git a/app/vue/src/client/preview/ErrorDisplay.vue b/app/vue/src/client/preview/ErrorDisplay.vue
new file mode 100644
index 000000000000..0c8a652c89a6
--- /dev/null
+++ b/app/vue/src/client/preview/ErrorDisplay.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="main">
+    <div class="heading">{{ message }}</div>
+    <pre class="code">
+      <code>
+        {{ stack }}
+      </code>
+    </pre>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'error-display',
+    props: {
+      message: {
+        type: String,
+        required: true
+      },
+      stack: {
+        type: String,
+        required: true
+      }
+    }
+  }
+</script>
+
+<style>
+  .main {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 20;
+    background-color: rgb(187, 49, 49);
+    color: #FFF;
+    webkit-font-smoothing: antialiased;
+  }
+
+  .heading {
+    font-size: 20;
+    font-weight: 600;
+    letter-spacing: 0.2;
+    margin: 10px 0;
+    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+  }
+  
+  .code {
+    font-size: 14;
+    width: 100vw;
+    overflow: auto;
+  }
+</style>
diff --git a/app/vue/src/client/preview/error_display.js b/app/vue/src/client/preview/error_display.js
deleted file mode 100644
index fcdf905a66b9..000000000000
--- a/app/vue/src/client/preview/error_display.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const mainStyle = {
-  position: 'fixed',
-  top: 0,
-  bottom: 0,
-  left: 0,
-  right: 0,
-  padding: 20,
-  backgroundColor: 'rgb(187, 49, 49)',
-  color: '#FFF',
-  WebkitFontSmoothing: 'antialiased',
-};
-
-const headingStyle = {
-  fontSize: 20,
-  fontWeight: 600,
-  letterSpacing: 0.2,
-  margin: '10px 0',
-  fontFamily: `
-    -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI",
-    "Helvetica Neue", "Lucida Grande", sans-serif
-    `,
-};
-
-const codeStyle = {
-  fontSize: 14,
-  width: '100vw',
-  overflow: 'auto',
-};
-
-const ErrorDisplay = ({ error }) =>
-  <div style={mainStyle}>
-    <div style={headingStyle}>{error.message}</div>
-    <pre style={codeStyle}>
-      <code>
-        {error.stack}
-      </code>
-    </pre>
-  </div>;
-
-ErrorDisplay.propTypes = {
-  error: PropTypes.shape({
-    message: PropTypes.string,
-    stack: PropTypes.string,
-  }).isRequired,
-};
-
-export default ErrorDisplay;
diff --git a/app/vue/src/client/preview/render.js b/app/vue/src/client/preview/render.js
index 937674e3172f..615201a5d9e7 100644
--- a/app/vue/src/client/preview/render.js
+++ b/app/vue/src/client/preview/render.js
@@ -1,8 +1,8 @@
 import Vue from 'vue';
+import ErrorDisplay from './ErrorDisplay.vue';
 
 import { window } from 'global';
 // import { stripIndents } from 'common-tags';
-// import ErrorDisplay from './error_display';
 
 // check whether we're running on node/browser
 const isBrowser = typeof window !== 'undefined';
@@ -12,22 +12,29 @@ const logger = console;
 let previousKind = '';
 let previousStory = '';
 let app = null;
+let err = null;
 
-export function renderError(error) {
-  const properError = new Error(error.title);
-  properError.stack = error.description;
+function renderErrorDisplay(error) {
+  if (err) err.$destroy();
 
-  // const redBox = <ErrorDisplay error={properError} />;
-  // ReactDOM.render(redBox, rootEl);
+  err = new Vue({
+    el: '#error-display',
+    render(h) {
+      return h('div', { attrs: { id: 'error-display' } }, [
+        h(ErrorDisplay, { props: { message: error.message, stack: error.stack } })
+      ]);
+    },
+  });
+}
+
+export function renderError(error) {
+  renderErrorDisplay(error);
 }
 
 export function renderException(error) {
   // We always need to render redbox in the mainPage if we get an error.
   // Since this is an error, this affects to the main page as well.
-  const realError = new Error(error.message);
-  realError.stack = error.stack;
-  // const redBox = <ErrorDisplay error={realError} />;
-  // ReactDOM.render(redBox, rootEl);
+  renderErrorDisplay(error);
 
   // Log the stack to the console. So, user could check the source code.
   logger.error(error.stack);