From 8125320622367f35ba3c46fb0d1a988e898cf681 Mon Sep 17 00:00:00 2001 From: jerrywu Date: Thu, 1 Dec 2022 13:03:31 +0800 Subject: [PATCH 1/4] feat: add vue-ts vue3-ts template --- sandpack-react/src/templates/index.tsx | 6 ++ sandpack-react/src/templates/vue-ts.ts | 134 ++++++++++++++++++++++++ sandpack-react/src/templates/vue.ts | 61 +++++++---- sandpack-react/src/templates/vue3-ts.ts | 114 ++++++++++++++++++++ sandpack-react/src/templates/vue3.ts | 52 +++++---- 5 files changed, 317 insertions(+), 50 deletions(-) create mode 100644 sandpack-react/src/templates/vue-ts.ts create mode 100644 sandpack-react/src/templates/vue3-ts.ts diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx index 526de8c34..98c869b0a 100644 --- a/sandpack-react/src/templates/index.tsx +++ b/sandpack-react/src/templates/index.tsx @@ -7,7 +7,9 @@ import { TEST_TYPESCRIPT_TEMPLATE } from "./tests-ts"; import { VANILLA_TEMPLATE } from "./vanilla"; import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript"; import { VUE_TEMPLATE } from "./vue"; +import { VUE_TS_TEMPLATE } from "./vue-ts"; 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 +20,8 @@ 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 } from "./vue-ts"; +export { VUE_TS_TEMPLATE_3 } from "./vue3-ts"; /** * @hidden @@ -26,9 +30,11 @@ export const SANDBOX_TEMPLATES = { react: REACT_TEMPLATE, "react-ts": REACT_TYPESCRIPT_TEMPLATE, vue: VUE_TEMPLATE, + "vue-ts": VUE_TS_TEMPLATE, 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.ts b/sandpack-react/src/templates/vue-ts.ts new file mode 100644 index 000000000..a5a69fb7a --- /dev/null +++ b/sandpack-react/src/templates/vue-ts.ts @@ -0,0 +1,134 @@ +/** + * @hidden + */ +export const VUE_TS_TEMPLATE = { + files: { + "/src/App.vue": { + code: ` + +`, + }, + "/src/main.ts": { + code: `import Vue from "vue"; +import App from "./App.vue"; +Vue.config.productionTip = false; +new Vue({ + render: h => h(App) +}).$mount("#app"); +`, + }, + "/public/index.html": { + code: ` + + + + + + + codesandbox + + + +
+ + + +`, + }, + "/src/shims-vue.d.ts": `declare module '*.vue' { + import Vue from 'vue' + export default Vue +}`, + "/package.json": { + code: JSON.stringify({ + name: "vue-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: "^2.7.14", + }, + 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", + "vue-template-compiler": "^2.7.14", + }, + }), + }, + "/tsconfig.json": { + code: JSON.stringify( + { + compilerOptions: { + target: "esnext", + module: "esnext", + strict: true, + jsx: "preserve", + moduleResolution: "node", + skipLibCheck: true, + esModuleInterop: true, + allowSyntheticDefaultImports: true, + forceConsistentCasingInFileNames: true, + useDefineForClassFields: true, + sourceMap: true, + 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"], + }, + null, + 2 + ), + }, + }, + main: "/src/App.vue", + environment: "vue-cli", +}; diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts index 3cd0052f5..17bfe3960 100644 --- a/sandpack-react/src/templates/vue.ts +++ b/sandpack-react/src/templates/vue.ts @@ -5,33 +5,38 @@ export const VUE_TEMPLATE = { files: { "/src/App.vue": { code: ` +import Vue from 'vue'; - -`, +export default Vue.extend({ + name: "App", + data() { + return { + msg: "", + count: 1, + }; + }, + methods: { + add() { + this.count += 1; + }, + }, + mounted() { + this.msg = "world"; + }, +}); +`, }, "/src/main.js": { code: `import Vue from "vue"; import App from "./App.vue"; - Vue.config.productionTip = false; new Vue({ @@ -64,11 +69,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 new file mode 100644 index 000000000..1eb14323d --- /dev/null +++ b/sandpack-react/src/templates/vue3-ts.ts @@ -0,0 +1,114 @@ +/** + * @hidden + */ +export const VUE_TS_TEMPLATE_3 = { + files: { + "/src/App.vue": { + code: ` + +`, + }, + "/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: ` + + + + + + codesandbox + + + +
+ + + +`, + }, + "/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 index 26bf46cbf..cf2b2f164 100644 --- a/sandpack-react/src/templates/vue3.ts +++ b/sandpack-react/src/templates/vue3.ts @@ -5,39 +5,25 @@ export const VUE_TEMPLATE_3 = { files: { "/src/App.vue": { code: ` - - -`, + +

count: {{ count }}

+`, }, "/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 +50,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", }), }, }, From b5367f309a98a7987a08c148e0072f6b72146a4b Mon Sep 17 00:00:00 2001 From: jerrywu Date: Thu, 1 Dec 2022 13:24:31 +0800 Subject: [PATCH 2/4] feat: add vue-ts vue3-ts template --- sandpack-react/src/templates/vue-ts.ts | 2 +- sandpack-react/src/templates/vue.ts | 2 +- sandpack-react/src/templates/vue3-ts.ts | 2 +- sandpack-react/src/templates/vue3.ts | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/sandpack-react/src/templates/vue-ts.ts b/sandpack-react/src/templates/vue-ts.ts index a5a69fb7a..8e38aa519 100644 --- a/sandpack-react/src/templates/vue-ts.ts +++ b/sandpack-react/src/templates/vue-ts.ts @@ -29,7 +29,7 @@ export default Vue.extend({ }, }, mounted() { - this.msg = "world"; + this.msg = "World"; }, }); `, diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts index 17bfe3960..471207b14 100644 --- a/sandpack-react/src/templates/vue.ts +++ b/sandpack-react/src/templates/vue.ts @@ -29,7 +29,7 @@ export default Vue.extend({ }, }, mounted() { - this.msg = "world"; + this.msg = "World"; }, }); `, diff --git a/sandpack-react/src/templates/vue3-ts.ts b/sandpack-react/src/templates/vue3-ts.ts index 1eb14323d..4d1ee5858 100644 --- a/sandpack-react/src/templates/vue3-ts.ts +++ b/sandpack-react/src/templates/vue3-ts.ts @@ -7,7 +7,7 @@ export const VUE_TS_TEMPLATE_3 = { code: ``, }, diff --git a/sandpack-react/src/templates/vue.ts b/sandpack-react/src/templates/vue.ts index 471207b14..009f85be7 100644 --- a/sandpack-react/src/templates/vue.ts +++ b/sandpack-react/src/templates/vue.ts @@ -7,8 +7,6 @@ export const VUE_TEMPLATE = { code: ` @@ -19,18 +17,9 @@ export default Vue.extend({ name: "App", data() { return { - msg: "", - count: 1, + msg: "World", }; }, - methods: { - add() { - this.count += 1; - }, - }, - mounted() { - this.msg = "World"; - }, }); `, }, diff --git a/sandpack-react/src/templates/vue3-ts.ts b/sandpack-react/src/templates/vue3-ts.ts index 4d1ee5858..df083ee9d 100644 --- a/sandpack-react/src/templates/vue3-ts.ts +++ b/sandpack-react/src/templates/vue3-ts.ts @@ -4,21 +4,15 @@ export const VUE_TS_TEMPLATE_3 = { files: { "/src/App.vue": { - code: ` - -`, +`, }, "/src/main.ts": { code: `import { createApp } from 'vue' diff --git a/sandpack-react/src/templates/vue3.ts b/sandpack-react/src/templates/vue3.ts index 5323016bb..ec5ed5a0b 100644 --- a/sandpack-react/src/templates/vue3.ts +++ b/sandpack-react/src/templates/vue3.ts @@ -4,21 +4,15 @@ export const VUE_TEMPLATE_3 = { files: { "/src/App.vue": { - code: ` - -`, +`, }, "/src/main.js": { code: `import { createApp } from 'vue' From 53e457732286fa4240af5c43696747d2ffdd3263 Mon Sep 17 00:00:00 2001 From: jerrywu Date: Mon, 12 Dec 2022 20:04:05 +0800 Subject: [PATCH 4/4] feat: remove vue-ts template --- sandpack-react/src/templates/index.tsx | 3 - sandpack-react/src/templates/vue-ts.ts | 123 ------------------------- 2 files changed, 126 deletions(-) delete mode 100644 sandpack-react/src/templates/vue-ts.ts diff --git a/sandpack-react/src/templates/index.tsx b/sandpack-react/src/templates/index.tsx index 98c869b0a..e8bd8e119 100644 --- a/sandpack-react/src/templates/index.tsx +++ b/sandpack-react/src/templates/index.tsx @@ -7,7 +7,6 @@ import { TEST_TYPESCRIPT_TEMPLATE } from "./tests-ts"; import { VANILLA_TEMPLATE } from "./vanilla"; import { VANILLA_TYPESCRIPT_TEMPLATE } from "./vanilla-typescript"; import { VUE_TEMPLATE } from "./vue"; -import { VUE_TS_TEMPLATE } from "./vue-ts"; import { VUE_TEMPLATE_3 } from "./vue3"; import { VUE_TS_TEMPLATE_3 } from "./vue3-ts"; export { ANGULAR_TEMPLATE } from "./angular"; @@ -20,7 +19,6 @@ 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 } from "./vue-ts"; export { VUE_TS_TEMPLATE_3 } from "./vue3-ts"; /** @@ -30,7 +28,6 @@ export const SANDBOX_TEMPLATES = { react: REACT_TEMPLATE, "react-ts": REACT_TYPESCRIPT_TEMPLATE, vue: VUE_TEMPLATE, - "vue-ts": VUE_TS_TEMPLATE, vanilla: VANILLA_TEMPLATE, "vanilla-ts": VANILLA_TYPESCRIPT_TEMPLATE, vue3: VUE_TEMPLATE_3, diff --git a/sandpack-react/src/templates/vue-ts.ts b/sandpack-react/src/templates/vue-ts.ts deleted file mode 100644 index cfd71e6db..000000000 --- a/sandpack-react/src/templates/vue-ts.ts +++ /dev/null @@ -1,123 +0,0 @@ -/** - * @hidden - */ -export const VUE_TS_TEMPLATE = { - files: { - "/src/App.vue": { - code: ` - -`, - }, - "/src/main.ts": { - code: `import Vue from "vue"; -import App from "./App.vue"; -Vue.config.productionTip = false; -new Vue({ - render: h => h(App) -}).$mount("#app"); -`, - }, - "/public/index.html": { - code: ` - - - - - - - codesandbox - - - -
- - - -`, - }, - "/src/shims-vue.d.ts": `declare module '*.vue' { - import Vue from 'vue' - export default Vue -}`, - "/package.json": { - code: JSON.stringify({ - name: "vue-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: "^2.7.14", - }, - 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", - "vue-template-compiler": "^2.7.14", - }, - }), - }, - "/tsconfig.json": { - code: JSON.stringify( - { - compilerOptions: { - target: "esnext", - module: "esnext", - strict: true, - jsx: "preserve", - moduleResolution: "node", - skipLibCheck: true, - esModuleInterop: true, - allowSyntheticDefaultImports: true, - forceConsistentCasingInFileNames: true, - useDefineForClassFields: true, - sourceMap: true, - 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"], - }, - null, - 2 - ), - }, - }, - main: "/src/App.vue", - environment: "vue-cli", -};