feat: add resflush button to error overlay

jerrywu001 · Jan 31, 2023 · 221f848 · 221f848
1 parent caf74fc
commit 221f848
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "@codemirror/language": "^6.4.0",
     "@codemirror/state": "^6.2.0",
     "@codemirror/view": "^6.7.3",
-    "@codesandbox/sandpack-client": "1.20.1",
+    "@codesandbox/sandpack-client": "^1.20.7",
     "@lezer/highlight": "^1.1.3",
     "@stitches/core": "^1.2.8",
     "clean-set": "^1.1.2",
@@ -89,7 +89,7 @@
     "@storybook/addon-links": "~6.4.22",
     "@storybook/builder-vite": "0.1.37",
     "@storybook/vue3": "~6.4.22",
-    "@swc/core": "^1.3.30",
+    "@swc/core": "^1.3.31",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
@@ -132,7 +132,7 @@
     "stylelint-config-standard": "^29.0.0",
     "stylelint-prettier": "^2.0.0",
     "tsup": "^6.5.0",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
     "vite": "^4.0.4",
     "vite-plugin-dts": "^1.7.1",
     "vite-plugin-windicss": "^1.8.10",

diff --git a/src/common/ErrorOverlay.tsx b/src/common/ErrorOverlay.tsx
@@ -4,10 +4,18 @@ import { defineComponent } from 'vue';
 import { useErrorMessage } from '../hooks/useErrorMessage';
 import { THEME_PREFIX } from '../styles';
 import { absoluteClassName, errorClassName, errorMessageClassName } from '../styles/shared';
+import { RefreshButton } from '../components';
 
 export const ErrorOverlay = defineComponent({
   name: 'ErrorOverlay',
-  setup(_, { slots, attrs }) {
+  props: {
+    clientId: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+  setup(props, { slots, attrs }) {
     const error = useErrorMessage();
     const c = useClasser(THEME_PREFIX);
 
@@ -27,6 +35,14 @@ export const ErrorOverlay = defineComponent({
               <div class={classNames(c('error-message'), errorMessageClassName)}>
                 {error.value.message || (slots.default ? slots.default() : null) }
               </div>
+              <RefreshButton
+                clientId={props.clientId}
+                style={{
+                  position: 'absolute',
+                  right: '6px',
+                  bottom: '6px',
+                }}
+              />
             </div>
           )
         }

diff --git a/src/common/Layout.tsx b/src/common/Layout.tsx
@@ -38,10 +38,7 @@ export const layoutClassName = css({
   [`> .${THEME_PREFIX}-file-explorer`]: {
     flex: 0.2,
     minWidth: '200px',
-    // height: '$layout$height',
-
     '@media screen and (max-width: 768px)': {
-
       '&': {
         minWidth: '100% !important',
       },

diff --git a/src/components/preview/index.tsx b/src/components/preview/index.tsx
@@ -166,7 +166,7 @@ export const SandpackPreview = defineComponent({
             title="Sandpack Preview"
           />
 
-          { props.showSandpackErrorOverlay && <ErrorOverlay /> }
+          { props.showSandpackErrorOverlay && <ErrorOverlay clientId={clientId.value} /> }
 
           <div
             class={classNames(

diff --git a/src/components/transpiled-code/index.tsx b/src/components/transpiled-code/index.tsx
@@ -98,7 +98,7 @@ export const SandpackTranspiledCode = defineComponent({
           style={{ display: 'none' }}
           title="transpiled sandpack code"
         />
-        <ErrorOverlay />
+        <ErrorOverlay clientId="hidden" />
         <LoadingOverlay clientId="hidden" showOpenInCodeSandbox={false} />
       </div>
     );