Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 6 commits into from
Dec 12, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8125320
feat: add vue-ts vue3-ts template
Dec 1, 2022
b5367f3
feat: add vue-ts vue3-ts template
Dec 1, 2022
81d9be8
feat: update vue vue-ts template
jerrywu001 Dec 3, 2022
c7f1cea
Merge branch 'main' of github.com:codesandbox/sandpack into feat/vue-…
Dec 12, 2022
f11c3c8
Merge branch 'feat/vue-typescript-template' of github.com:jerrywu001/…
Dec 12, 2022
53e4577
feat: remove vue-ts template
Dec 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions sandpack-react/src/templates/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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
Expand All @@ -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,
Expand Down
50 changes: 28 additions & 22 deletions sandpack-react/src/templates/vue.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -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",
}),
},
},
Expand Down
108 changes: 108 additions & 0 deletions sandpack-react/src/templates/vue3-ts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
};
52 changes: 21 additions & 31 deletions sandpack-react/src/templates/vue3.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Missing a line break between template and script?


<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": {
Expand All @@ -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",
}),
},
},
Expand Down