Skip to content

Commit b11b6ce

Browse files
kiakingkiaking
committed
chore: add playground
1 parent a3063a9 commit b11b6ce

File tree

13 files changed

+428
-4
lines changed

13 files changed

+428
-4
lines changed

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"dist"
1313
],
1414
"scripts": {
15+
"dev": "vite serve playground",
1516
"build": "node scripts/build.js",
1617
"lint": "prettier --check --write --parser typescript \"{src,test}/**/*.ts\"",
1718
"lint:fail": "prettier --check --parser typescript \"{src,test}/**/*.ts\"",
@@ -42,6 +43,8 @@
4243
"@rollup/plugin-commonjs": "^17.1.0",
4344
"@rollup/plugin-node-resolve": "^11.1.1",
4445
"@types/jest": "^26.0.20",
46+
"@vitejs/plugin-vue": "^1.1.4",
47+
"@vue/compiler-sfc": "^3.0.5",
4548
"brotli": "^1.3.2",
4649
"buble": "^0.20.0",
4750
"chalk": "^4.1.0",
@@ -58,6 +61,7 @@
5861
"ts-jest": "^26.5.0",
5962
"tslib": "^2.1.0",
6063
"typescript": "^4.1.3",
64+
"vite": "^2.0.0-beta.64",
6165
"vue": "^3.0.5",
6266
"vue-router": "^4.0.2",
6367
"vuex": "^4.0.0"

‎playground/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vuex Router Sync</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/src/main.ts"></script>
11+
</body>
12+
</html>

‎playground/src/App.vue

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<template>
2+
<h1 class="title">Vuex Router Sync</h1>
3+
4+
<ul class="nav">
5+
<li class="nav-item">
6+
<RouterLink class="nav-link" to="/">Home</RouterLink>
7+
</li>
8+
<li class="nav-item">
9+
<RouterLink class="nav-link" to="/about">About</RouterLink>
10+
</li>
11+
</ul>
12+
13+
<div class="store">
14+
<pre class="store-view">{{ $store.state.route }}</pre>
15+
</div>
16+
17+
<RouterView />
18+
</template>
19+
20+
<style>
21+
*,
22+
::before,
23+
::after {
24+
box-sizing: border-box;
25+
}
26+
27+
body {
28+
padding: 64px 32px 96px;
29+
width: 100%;
30+
min-width: 320px;
31+
min-height: 100vh;
32+
letter-spacing: .4px;
33+
line-height: 24px;
34+
font-family: Avenir, Helvetica, Arial, sans-serif;
35+
font-size: 16px;
36+
font-weight: 400;
37+
color: #2c3e50;
38+
background-color: #ffffff;
39+
direction: ltr;
40+
font-synthesis: none;
41+
text-rendering: optimizeLegibility;
42+
-webkit-font-smoothing: antialiased;
43+
-moz-osx-font-smoothing: grayscale;
44+
}
45+
46+
body,
47+
p,
48+
h1,
49+
pre {
50+
margin: 0;
51+
}
52+
53+
.title {
54+
text-align: center;
55+
font-size: 24px;
56+
font-weight: 700;
57+
}
58+
59+
.nav {
60+
display: flex;
61+
justify-content: center;
62+
margin: 0 -8px;
63+
padding: 24px 0 0;
64+
list-style: none;
65+
}
66+
67+
.nav-item {
68+
padding: 0 8px;
69+
}
70+
71+
.nav-link {
72+
display: block;
73+
border-radius: 4px;
74+
padding: 0 12px;
75+
line-height: 32px;
76+
font-size: 14px;
77+
font-weight: 500;
78+
color: #2c3e50;
79+
text-decoration: none;
80+
background-color: #f2f2f2;
81+
transition: color .25s, background-color .25s;
82+
}
83+
84+
.nav-link:hover,
85+
.nav-link.router-link-active {
86+
color: #ffffff;
87+
background-color: #3eaf7c;
88+
}
89+
90+
.store {
91+
margin: 24px auto 0;
92+
padding: 24px;
93+
border-radius: 8px;
94+
max-width: 480px;
95+
background-color: #282c34;
96+
}
97+
98+
.store-view {
99+
font-family: monospace;
100+
font-size: 16px;
101+
color: #ffffff;
102+
}
103+
</style>

‎playground/src/components/About.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div class="About" />
3+
</template>

‎playground/src/components/Home.vue

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<div class="Home" />
3+
</template>

‎playground/src/main.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { createApp } from 'vue'
2+
import { sync } from '../../src'
3+
import { router } from './router'
4+
import { store } from './store'
5+
import App from './App.vue'
6+
7+
sync(store, router)
8+
9+
createApp(App)
10+
.use(router)
11+
.use(store)
12+
.mount('#app')

‎playground/src/router.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { createRouter, createWebHistory } from 'vue-router'
2+
import Home from './components/Home.vue'
3+
import About from './components/About.vue'
4+
5+
export const router = createRouter({
6+
history: createWebHistory(),
7+
routes: [
8+
{ path: '/', component: Home },
9+
{ path: '/about', component: About }
10+
]
11+
})

‎playground/src/store.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import { createStore } from 'vuex'
2+
3+
export const store = createStore({})

‎playground/src/vue-shim.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare module '*.vue' {
2+
import { ComponentOptions } from 'vue'
3+
const comp: ComponentOptions
4+
export default comp
5+
}

‎playground/vite.config.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import vue from '@vitejs/plugin-vue'
2+
3+
export default {
4+
plugins: [vue()]
5+
}

‎rollup.config.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ function createEntry(config) {
5757
declaration: config.format === 'es' && config.browser && config.env === 'development',
5858
target: config.format === 'iife' || config.format === 'cjs' ? 'es5' : 'es2018'
5959
},
60-
exclude: ['test']
60+
exclude: ['test', 'playground']
6161
}
6262
}))
6363

‎tsconfig.json

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
"moduleResolution": "node",
88
"esModuleInterop": true,
99
"allowSyntheticDefaultImports": true,
10+
"isolatedModules": true,
1011
"baseUrl": ".",
1112
"rootDir": ".",
1213
"outDir": "dist",
@@ -39,6 +40,7 @@
3940

4041
"include": [
4142
"src",
42-
"test"
43+
"test",
44+
"playground"
4345
]
4446
}

0 commit comments

Comments
 (0)