Skip to content

Commit

Permalink
feat: support vue3 template setup & vue-ts template
Browse files Browse the repository at this point in the history
  • Loading branch information
jerrywu committed Dec 1, 2022
1 parent 2f722cf commit 2f77e6e
Show file tree
Hide file tree
Showing 7 changed files with 358 additions and 66 deletions.
30 changes: 15 additions & 15 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@
"@codemirror/state": "~0.19.9",
"@codemirror/stream-parser": "~0.19.9",
"@codemirror/view": "~0.19.48",
"@codesandbox/sandpack-client": "^1.12.1",
"@codesandbox/sandpack-client": "^1.17.1",
"@codesandbox/sandpack-themes": "^1.17.0",
"@stitches/core": "^1.2.8",
"clean-set": "^1.1.2",
Expand All @@ -81,31 +81,31 @@
"lz-string": "^1.4.4"
},
"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/core": "^7.20.5",
"@babel/plugin-transform-runtime": "^7.19.6",
"@babel/plugin-transform-typescript": "^7.20.2",
"@babel/preset-env": "^7.20.2",
"@babel/preset-typescript": "^7.18.6",
"@commitlint/cli": "^17.2.0",
"@commitlint/cli": "^17.3.0",
"@commitlint/config-conventional": "^17.3.0",
"@storybook/addon-actions": "~6.4.22",
"@storybook/addon-docs": "~6.4.22",
"@storybook/addon-essentials": "~6.4.22",
"@storybook/addon-links": "~6.4.22",
"@storybook/builder-vite": "0.1.37",
"@storybook/vue3": "~6.4.22",
"@swc/core": "^1.3.19",
"@swc/core": "^1.3.21",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/user-event": "^14.4.3",
"@testing-library/vue": "^6.6.1",
"@types/lodash.isequal": "^4.5.6",
"@types/lz-string": "^1.3.34",
"@types/node": "^18.11.9",
"@typescript-eslint/eslint-plugin": "^5.44.0",
"@typescript-eslint/parser": "^5.44.0",
"@types/node": "^18.11.10",
"@typescript-eslint/eslint-plugin": "^5.45.0",
"@typescript-eslint/parser": "^5.45.0",
"@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.1.1",
"@vitest/ui": "^0.25.2",
"@vitest/ui": "^0.25.3",
"@vue/babel-plugin-jsx": "^1.1.1",
"@vue/eslint-config-typescript": "^11.0.2",
"autoprefixer": "^10.4.13",
Expand All @@ -121,14 +121,14 @@
"eslint-config-airbnb-typescript": "^17.0.0",
"eslint-plugin-import": "^2.26.0",
"eslint-plugin-jsx-a11y": "^6.6.1",
"eslint-plugin-vue": "^9.7.0",
"eslint-plugin-vue": "^9.8.0",
"husky": "^8.0.2",
"jsdom": "^20.0.3",
"lint-staged": "^13.0.3",
"npm": "^9.1.2",
"lint-staged": "^13.0.4",
"npm": "^9.1.3",
"postcss": "^8.4.19",
"postcss-cli": "^10.0.0",
"postcss-loader": "^7.0.1",
"postcss-cli": "^10.1.0",
"postcss-loader": "^7.0.2",
"postcss-nested": "^6.0.0",
"rimraf": "^3.0.2",
"shelljs": "^0.8.5",
Expand All @@ -142,8 +142,8 @@
"vite": "^3.2.4",
"vite-plugin-dts": "^1.7.1",
"vite-plugin-windicss": "^1.8.8",
"vitest": "^0.25.2",
"vue-tsc": "^1.0.9"
"vitest": "^0.25.3",
"vue-tsc": "^1.0.10"
},
"peerDependencies": {
"vue": "^3.2.0"
Expand Down
6 changes: 3 additions & 3 deletions playground/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
"vue-router": "^4.1.6"
},
"devDependencies": {
"@iconify-json/carbon": "^1.1.10",
"@unocss/reset": "^0.46.5",
"@iconify-json/carbon": "^1.1.11",
"@unocss/reset": "^0.47.4",
"cross-env": "^7.0.3",
"unocss": "^0.46.5",
"unocss": "^0.47.4",
"vite-plugin-pages": "^0.27.1",
"vue-loader": "^17.0.1"
}
Expand Down
6 changes: 6 additions & 0 deletions src/templates/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -18,7 +20,9 @@ export { TEST_TYPESCRIPT_TEMPLATE } from './tests-ts';
export { VANILLA_TEMPLATE } from './vanilla';
export { VANILLA_TYPESCRIPT_TEMPLATE } from './vanilla-typescript';
export { VUE_TEMPLATE } from './vue';
export { VUE_TS_TEMPLATE } from './vue-ts';
export { VUE_TEMPLATE_3 } from './vue3';
export { VUE_TS_TEMPLATE_3 } from './vue3-ts';

/**
* @hidden
Expand All @@ -27,9 +31,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,
Expand Down
141 changes: 141 additions & 0 deletions src/templates/vue-ts.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,141 @@
/**
* @hidden
*/
export const VUE_TS_TEMPLATE = {
files: {
'/src/App.vue': {
code: `<template>
<div id="app">
<h1>Hello {{ msg }}</h1>
<button @click="add">add</button>
<p>count: {{ count }}</p>
</div>
</template>
<script lang="ts">
import Vue from "vue";
export default Vue.extend({
name: "App",
data() {
return {
msg: "",
count: 1,
};
},
methods: {
add() {
this.count += 1;
},
},
mounted() {
this.msg = "world";
},
});
</script>`,
},
'/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: `<!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" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<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>
`,
},
'/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',
};
60 changes: 40 additions & 20 deletions src/templates/vue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,34 @@ 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>
<button @click="add">add</button>
<p>count: {{ count }}</p>
</div>
</template>
<script>
export default {
import Vue from 'vue';
export default Vue.extend({
name: "App",
};
</script>
<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>
`,
data() {
return {
msg: "",
count: 1,
};
},
methods: {
add() {
this.count += 1;
},
},
mounted() {
this.msg = "world";
},
});
</script>`,
},
'/src/main.js': {
code: `import Vue from "vue";
Expand Down Expand Up @@ -60,11 +68,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
Loading

0 comments on commit 2f77e6e

Please sign in to comment.