feat: add vue-ts vue3-ts template (#650)

Co-authored-by: jerrywu <[email protected]>
codesandbox · Dec 12, 2022 · 035d1b9 · 035d1b9
1 parent 272855e
commit 035d1b9
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 53 deletions.
diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx
@@ -8,6 +8,7 @@ import { VANILLA_TEMPLATE } from "./vanilla";
 import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 import { VUE_TEMPLATE } from "./vue";
 import { VUE_TEMPLATE_3 } from "./vue3";
+import { VUE_TS_TEMPLATE_3 } from "./vue3-ts";
 export { ANGULAR_TEMPLATE } from "./angular";
 export { REACT_TEMPLATE } from "./react";
 export { REACT_TYPESCRIPT_TEMPLATE } from "./react-typescript";
@@ -18,6 +19,7 @@ export { VANILLA_TEMPLATE } from "./vanilla";
 export { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript";
 export { VUE_TEMPLATE } from "./vue";
 export { VUE_TEMPLATE_3 } from "./vue3";
+export { VUE_TS_TEMPLATE_3 } from "./vue3-ts";
 
 /**
  * @hidden
@@ -29,6 +31,7 @@ export const SANDBOX_TEMPLATES = {
   vanilla: VANILLA_TEMPLATE,
   "vanilla-ts": VANILLA_TYPESCRIPT_TEMPLATE,
   vue3: VUE_TEMPLATE_3,
+  "vue3-ts": VUE_TS_TEMPLATE_3,
   angular: ANGULAR_TEMPLATE,
   svelte: SVELTE_TEMPLATE,
   solid: SOLID_TEMPLATE,

diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts
@@ -5,33 +5,27 @@ export const VUE_TEMPLATE = {
   files: {
     "/src/App.vue": {
       code: `<template>
-  <main id="app">
-    <h1>Hello World</h1>
-  </main>
+  <div id="app">
+    <h1>Hello {{ msg }}</h1>
+  </div>
 </template>
 
 <script>
-export default {
-  name: "App",
-};
-</script>
+import Vue from 'vue';
 
-<style>
-#app {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
-`,
+export default Vue.extend({
+  name: "App",
+  data() {
+    return {
+      msg: "World",
+    };
+  },
+});
+</script>`,
     },
     "/src/main.js": {
       code: `import Vue from "vue";
 import App from "./App.vue";
-
 Vue.config.productionTip = false;
 
 new Vue({
@@ -64,11 +58,23 @@ new Vue({
     },
     "/package.json": {
       code: JSON.stringify({
+        name: "vue",
+        version: "0.1.0",
+        private: true,
+        main: "/src/main.js",
+        scripts: {
+          serve: "vue-cli-service serve",
+          build: "vue-cli-service build",
+        },
         dependencies: {
-          vue: "^2.6.11",
-          "@vue/cli-plugin-babel": "4.1.1",
+          "core-js": "^3.26.1",
+          vue: "^2.7.14",
+        },
+        devDependencies: {
+          "@vue/cli-plugin-babel": "^5.0.8",
+          "@vue/cli-service": "^5.0.8",
+          "vue-template-compiler": "^2.7.14",
         },
-        main: "/src/main.js",
       }),
     },
   },

diff --git a/sandpack-react/src/templates/vue3-ts.ts b/sandpack-react/src/templates/vue3-ts.ts
@@ -0,0 +1,108 @@
+/**
+ * @hidden
+ */
+export const VUE_TS_TEMPLATE_3 = {
+  files: {
+    "/src/App.vue": {
+      code: `<template>
+  <h1>Hello {{ msg }}</h1>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const msg = ref<string>('World');
+</script>`,
+    },
+    "/src/main.ts": {
+      code: `import { createApp } from 'vue'
+import App from './App.vue'
+createApp(App).mount('#app')
+`,
+    },
+    "/src/shims-vue.d.ts": `/* eslint-disable */
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}`,
+    "/public/index.html": {
+      code: `<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>codesandbox</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but codesandbox doesn't work properly without JavaScript
+        enabled. Please enable it to continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
+`,
+    },
+    "/package.json": {
+      code: JSON.stringify({
+        name: "vue3-ts",
+        version: "0.1.0",
+        private: true,
+        main: "/src/main.ts",
+        scripts: {
+          serve: "vue-cli-service serve",
+          build: "vue-cli-service build",
+        },
+        dependencies: {
+          "core-js": "^3.26.1",
+          vue: "^3.2.45",
+        },
+        devDependencies: {
+          "@vue/cli-plugin-babel": "^5.0.8",
+          "@vue/cli-plugin-typescript": "^5.0.8",
+          "@vue/cli-service": "^5.0.8",
+          typescript: "^4.9.3",
+        },
+      }),
+    },
+    "/tsconfig.json": {
+      code: JSON.stringify({
+        compilerOptions: {
+          target: "esnext",
+          module: "esnext",
+          strict: true,
+          jsx: "preserve",
+          moduleResolution: "node",
+          experimentalDecorators: true,
+          skipLibCheck: true,
+          esModuleInterop: true,
+          allowSyntheticDefaultImports: true,
+          forceConsistentCasingInFileNames: true,
+          useDefineForClassFields: true,
+          sourceMap: false,
+          baseUrl: ".",
+          types: ["webpack-env"],
+          paths: {
+            "@/*": ["src/*"],
+          },
+          lib: ["esnext", "dom", "dom.iterable", "scripthost"],
+        },
+        include: [
+          "src/**/*.ts",
+          "src/**/*.tsx",
+          "src/**/*.vue",
+          "tests/**/*.ts",
+          "tests/**/*.tsx",
+        ],
+        exclude: ["node_modules"],
+      }),
+    },
+  },
+  main: "/src/App.vue",
+  environment: "vue-cli",
+};
diff --git a/sandpack-react/src/templates/vue3.ts b/sandpack-react/src/templates/vue3.ts
@@ -4,40 +4,20 @@
 export const VUE_TEMPLATE_3 = {
   files: {
     "/src/App.vue": {
-      code: `<script setup>
-import { ref } from "vue";
-
-const msg = ref("world");
-</script>
-
-<template>
+      code: `<template>
   <h1>Hello {{ msg }}</h1>
 </template>
-                             
-<style>
-body {
-  font-family: sans-serif;
-  -webkit-font-smoothing: auto;
-  -moz-font-smoothing: auto;
-  -moz-osx-font-smoothing: grayscale;
-  font-smoothing: auto;
-  text-rendering: optimizeLegibility;
-  font-smooth: always;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
 
-h1 {
-  font-size: 1.5rem;
-}
-</style>   
-`,
+<script setup>
+import { ref } from 'vue';
+
+const msg = ref('World');
+</script>`,
     },
     "/src/main.js": {
       code: `import { createApp } from 'vue'
 import App from './App.vue'
-            
-createApp(App).mount('#app')            
+createApp(App).mount('#app')
 `,
     },
     "/public/index.html": {
@@ -64,12 +44,22 @@ createApp(App).mount('#app')
     },
     "/package.json": {
       code: JSON.stringify({
+        name: "vue3",
+        version: "0.1.0",
+        private: true,
+        main: "/src/main.js",
+        scripts: {
+          serve: "vue-cli-service serve",
+          build: "vue-cli-service build",
+        },
         dependencies: {
-          "core-js": "^3.6.5",
-          vue: "^3.0.0-0",
-          "@vue/cli-plugin-babel": "4.5.0",
+          "core-js": "^3.26.1",
+          vue: "^3.2.45",
+        },
+        devDependencies: {
+          "@vue/cli-plugin-babel": "^5.0.8",
+          "@vue/cli-service": "^5.0.8",
         },
-        main: "/src/main.js",
       }),
     },
   },