fix: test components bug

README.md

@@ -12,6 +12,20 @@ import { Sandpack } from 'codesandbox-sandpack-vue3';
 
 [Read more](https://sandpack.codesandbox.io/)
 
+## online demo
+
+[demo](https://stackblitz.com/edit/vitejs-vite-s6jdds)
+
+[ssg demo](https://stackblitz.com/edit/vitejs-vite-ha17a9)
+
+*Here's an example of a react version for comparison*
+
+https://stackblitz.com/edit/vitejs-vite-axyaxx
+
+## releases
+
+https://github.com/jerrywu001/sandpack-vue3/releases
+
 ## Sandpack Themes
 
 A list of themes to customize your Sandpack components.
@@ -30,16 +44,6 @@ For full documentation, visit [https://sandpack.codesandbox.io/docs/](https://sa
 
 **This project removes [devtools component && useSandpackLint hook]**
 
-## online demo
-
-[demo](https://stackblitz.com/edit/vitejs-vite-s6jdds)
-
-[ssg demo](https://stackblitz.com/edit/vitejs-vite-ha17a9)
-
-*Here's an example of a react version for comparison*
-
-https://stackblitz.com/edit/vitejs-vite-axyaxx
-
 
 ## SSG/SSR
 
@@ -69,6 +73,8 @@ app.use(SanpackPlugin());
 
 - [Sandpack](https://sandpack.codesandbox.io/docs/api/react/#sandpack)
 - [SandpackLayout](https://sandpack.codesandbox.io/docs/api/react/interfaces/SandpackLayoutProps)
+- [SandpackConsole](https://sandpack.codesandbox.io/docs/advanced-usage/components#console)
+- [SandpackTests](https://sandpack.codesandbox.io/docs/advanced-usage/components#tests)
 - [CodeEditor](https://sandpack.codesandbox.io/docs/api/react/#codeeditor)
 - [SandpackProvider](https://sandpack.codesandbox.io/docs/api/react/classes/SandpackProvider)
 - [ErrorOverlay](https://sandpack.codesandbox.io/docs/api/react/#erroroverlay)

global.d.ts

@@ -2,6 +2,8 @@ import '@vue/runtime-core';
 import {
   Sandpack,
   SandpackLayout,
+  SandpackConsole,
+  SandpackTests,
   CodeEditor,
   SandpackProvider,
   ErrorOverlay,
@@ -18,6 +20,9 @@ declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     Sandpack: typeof Sandpack;
     SandpackLayout: typeof SandpackLayout;
+    SandpackConsole: typeof SandpackConsole;
+    SandpackTests: typeof SandpackTests;
+    SandpackLayout: typeof SandpackLayout;
     SandpackProvider: typeof SandpackProvider;
     ErrorOverlay: typeof ErrorOverlay;
     LoadingOverlay: typeof LoadingOverlay;

package.json

@@ -91,7 +91,7 @@
     "@storybook/addon-links": "~6.4.22",
     "@storybook/builder-vite": "0.1.37",
     "@storybook/vue3": "~6.4.22",
-    "@swc/core": "^1.2.245",
+    "@swc/core": "^1.2.246",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/user-event": "^14.4.3",
     "@testing-library/vue": "^6.6.1",
@@ -122,7 +122,7 @@
     "husky": "^8.0.1",
     "jsdom": "^20.0.0",
     "lint-staged": "^13.0.3",
-    "npm": "^8.19.0",
+    "npm": "^8.19.1",
     "postcss": "^8.4.16",
     "postcss-cli": "^10.0.0",
     "postcss-loader": "^7.0.1",

playground/src/pages/index.vue

@@ -3,12 +3,11 @@ import isEqual from 'lodash.isequal';
 import { ref } from 'vue';
 import { githubLight, aquaBlue } from '@codesandbox/sandpack-themes';
 import {
-  // Sandpack,
+  Sandpack,
   // SandpackLayout,
   // SandpackTranspiledCode,
   // SandpackProvider,
   // SandpackCodeEditor,
-  SandpackConsole,
   SandpackPredefinedTemplate,
   SandpackTheme,
 } from 'codesandbox-sandpack-vue3';
@@ -70,22 +69,34 @@ const toggleReadOnly = () => {
         showReadOnly: true,
         readOnly: readOnly,
         wrapContent: wrapContent,
+        showConsoleButton: true,
+        showConsole: false,
       }"
     />
 
     <br>
     <br>
 
+    <hr>
+
+    <br>
+    <br>
+
     <SandpackProvider template="react">
       <SandpackLayout>
         <SandpackCodeEditor />
         <SandpackTranspiledCode />
       </SandpackLayout>
-      <SandpackLayout>
-        <SandpackConsole />
-      </SandpackLayout>
     </SandpackProvider>
 
+    <br>
+    <br>
+
+    <Sandpack template="test-ts" />
+
+    <br>
+    <br>
+
     <Sandpack
       template="vue3"
       :files="{

playground/stories/Console.stories.tsx

@@ -100,31 +100,35 @@ export const Main = () => {
 };
 
 export const Preset = () => (
-    <div style={{ width: 'auto' }}>
-      <Sandpack template="react" />
-
-      <br />
-
-      <Sandpack
-        files={files(false)}
-        options={{ showConsoleButton: true, showConsole: true }}
-        template="react"
-      />
-
-      <br />
-
-      <Sandpack
-        files={files(false)}
-        options={{ showConsoleButton: false, showConsole: true }}
-        template="react"
-      />
-
-      <br />
-
-      <Sandpack
-        files={files(false)}
-        options={{ showConsoleButton: true, showConsole: false }}
-        template="react"
-      />
-    </div>
+  <div style={{ width: 'auto' }}>
+    <h3><pre>showConsoleButton: false, showConsole: false</pre></h3>
+    <Sandpack template="react" />
+
+    <br />
+
+    <h3><pre>showConsoleButton: true, showConsole: true</pre></h3>
+    <Sandpack
+      files={files(false)}
+      options={{ showConsoleButton: true, showConsole: true }}
+      template="react"
+    />
+
+    <br />
+
+    <h3><pre>showConsoleButton: false, showConsole: true</pre></h3>
+    <Sandpack
+      files={files(false)}
+      options={{ showConsoleButton: false, showConsole: true }}
+      template="react"
+    />
+
+    <br />
+
+    <h3><pre>showConsoleButton: true, showConsole: false</pre></h3>
+    <Sandpack
+      files={files(false)}
+      options={{ showConsoleButton: true, showConsole: false }}
+      template="react"
+    />
+  </div>
 );