Skip to content

Commit 09232ee

Browse files
yyx990803yyx990803
committed
add playground
1 parent 672fcde commit 09232ee

31 files changed

+1924
-120
lines changed

‎.prettierrc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
semi: false
2+
singleQuote: true
3+
printWidth: 80
4+
trailingComma: 'none'
5+
arrowParens: 'avoid'

‎package.json‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,7 @@
1818
},
1919
"scripts": {
2020
"dev": "unbuild --stub",
21-
"build": "unbuild && esno scripts/patchCJS.ts",
22-
"prepublishOnly": "npm run build"
21+
"build": "unbuild && esno scripts/patchCJS.ts"
2322
},
2423
"engines": {
2524
"node": ">=14.6.0"
@@ -39,15 +38,22 @@
3938
},
4039
"devDependencies": {
4140
"@rollup/pluginutils": "^4.2.1",
41+
"conventional-changelog-cli": "^2.2.2",
4242
"debug": "^4.3.4",
43+
"enquirer": "^2.3.6",
4344
"esno": "^0.16.3",
45+
"execa": "^4.1.0",
4446
"hash-sum": "^2.0.0",
47+
"minimist": "^1.2.6",
4548
"picocolors": "^1.0.0",
49+
"prettier": "^2.7.1",
4650
"rollup": "^2.75.6",
47-
"slash": "^4.0.0",
51+
"semver": "^7.3.7",
52+
"slash": "^3.0.0",
4853
"source-map": "^0.6.1",
4954
"unbuild": "^0.7.4",
5055
"vite": "^2.9.12",
51-
"vue": "^2.7.0-alpha.12"
56+
"vitest": "^0.15.1",
57+
"vue": "^2.7.0-beta.1"
5258
}
5359
}

‎playground/.pnpm-debug.log‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"0 debug pnpm:scope": {
3+
"selected": 1
4+
},
5+
"1 error pnpm": {
6+
"errno": 1,
7+
"code": "ELIFECYCLE",
8+
"pkgid": "[email protected]",
9+
"stage": "dev",
10+
"script": "vite --debug",
11+
"pkgname": "vite-vue2-playground",
12+
"err": {
13+
"name": "pnpm",
14+
"message": "[email protected] dev: `vite --debug`\nExit status 1",
15+
"code": "ELIFECYCLE",
16+
"stack": "pnpm: [email protected] dev: `vite --debug`\nExit status 1\n at EventEmitter.<anonymous> (/Users/evan/Library/pnpm/global/5/.pnpm/[email protected]/node_modules/pnpm/dist/pnpm.cjs:106976:20)\n at EventEmitter.emit (node:events:390:28)\n at ChildProcess.<anonymous> (/Users/evan/Library/pnpm/global/5/.pnpm/[email protected]/node_modules/pnpm/dist/pnpm.cjs:93542:18)\n at ChildProcess.emit (node:events:390:28)\n at maybeClose (node:internal/child_process:1064:16)\n at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)"
17+
}
18+
},
19+
"2 warn pnpm:global": " Local package.json exists, but node_modules missing, did you mean to install?"
20+
}

‎playground/App.vue‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
import ScriptSetup from './ScriptSetup.vue'
3+
import TestMultiplySrcImport from './src-import/TestMultiplySrcImport.vue'
4+
import TestBlockSrcImport from './src-import/TestBlockSrcImport.vue'
5+
import TestScopedCss from './css/TestScopedCss.vue'
6+
import TestCssModules from './css/TestCssModules.vue'
7+
import TestEmptyCss from './css/TestEmptyCss.vue'
8+
import TestCustomBlock from './custom/TestCustomBlock.vue'
9+
import TestHmr from './hmr/TestHmr.vue'
10+
import TestAssets from './test-assets/TestAssets.vue'
11+
import TestES2020Features from './TestES2020Features.vue'
12+
</script>
13+
14+
<template>
15+
<div>
16+
<h1>Vite-Plugin-Vue2 Playground</h1>
17+
<ScriptSetup msg="prop from parent" />
18+
<TestMultiplySrcImport />
19+
<TestBlockSrcImport />
20+
<TestScopedCss />
21+
<TestCssModules />
22+
<TestCustomBlock />
23+
<TestEmptyCss />
24+
<TestHmr />
25+
<TestAssets />
26+
<TestES2020Features />
27+
</div>
28+
</template>

‎playground/ScriptSetup.vue‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script setup lang="ts">
2+
import { ref } from 'vue'
3+
4+
defineProps<{
5+
msg: string
6+
}>()
7+
8+
const count = ref(0)
9+
10+
const vRed = {
11+
bind(el: HTMLElement) {
12+
el.style.color = 'red'
13+
}
14+
}
15+
</script>
16+
17+
<template>
18+
<div v-red class="script-setup">
19+
This should be red.
20+
<span class="prop">{{ msg }}</span>
21+
<button @click="count++">Count: {{ count }}</button>
22+
</div>
23+
</template>

‎playground/TestES2020Features.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<script lang="ts">
2+
import Vue from 'vue'
3+
4+
export default Vue.extend({
5+
name: 'TestES2020Features',
6+
7+
data() {
8+
return {
9+
spreadArray: ['s', 'p', 'r', 'ead'],
10+
}
11+
},
12+
13+
computed: {
14+
nullish() {
15+
return {
16+
a: {
17+
d: undefined as unknown as undefined | { e: string },
18+
b: {
19+
c: '2',
20+
},
21+
},
22+
}
23+
},
24+
},
25+
})
26+
</script>
27+
28+
<template>
29+
<div>
30+
<h2>ES2020 Features</h2>
31+
<h3>Nullish Coalescing and Optional Chaining</h3>
32+
<code>
33+
[nullish.a.b.c.d ?? 'not found']
34+
<br>
35+
//returns {{ nullish.a.d?.e ?? 'not found' }}
36+
<br>
37+
<br>
38+
[nullish.a.b.c ?? 'not found']
39+
<br>
40+
//returns {{ nullish.a.b.c ?? 'not found' }}
41+
</code>
42+
<h3>Spread Operator</h3>
43+
<code>
44+
["Test", 1, ...('abc').split('')]
45+
<br>
46+
//returns {{ ['Test', 1, ...'abc'.split('')] }}
47+
</code>
48+
</div>
49+
</template>

‎playground/css/TestCssModules.vue‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script>
2+
import imported from './testCssModules.module.css'
3+
4+
export default {
5+
data: () => ({ imported }),
6+
}
7+
</script>
8+
9+
<template>
10+
<div>
11+
<h2>CSS Modules</h2>
12+
<div class="css-modules-sfc" :class="$style.blue">
13+
&lt;style module&gt; - this should be blue
14+
</div>
15+
<div class="css-modules-import" :class="imported.turquoise">
16+
CSS modules import - this should be orange
17+
</div>
18+
</div>
19+
</template>
20+
21+
<style module>
22+
.blue {
23+
color: blue;
24+
}
25+
</style>

‎playground/css/TestEmptyCss.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<template>
2+
<div>
3+
<h2>Empty CSS</h2>
4+
<div>
5+
&lt;style&gt;: empty style
6+
</div>
7+
</div>
8+
</template>
9+
10+
<style scoped></style>
11+
<style module></style>

‎playground/css/TestScopedCss.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div>
3+
<h2>Scoped CSS</h2>
4+
<div class="style-scoped">
5+
&lt;style scoped&gt;: only this should be purple
6+
</div>
7+
</div>
8+
</template>
9+
10+
<style scoped>
11+
div {
12+
color: rgb(138, 43, 226);
13+
}
14+
</style>

‎playground/css/testCssModules.module.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.turquoise {
2+
color: rgb(255, 140, 0);
3+
}

0 commit comments

Comments
 (0)