Skip to content

Commit 4e93c72

Browse files
posvaposva
committed
refactor: move playground
1 parent 4729a13 commit 4e93c72

36 files changed

+831
-102
lines changed

‎.prettierignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1-
e2e/__build__
1+
__build__
22
dist
3+
coverage

‎package.json

+11-2
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,16 @@
1515
"docs:build": "pnpm run -r docs:build --filter ./packages/docs",
1616
"play": "pnpm run -r play",
1717
"build:size": "pnpm run -r build:size",
18-
"lint": "prettier -c --parser typescript \"packages/*/{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
19-
"lint:fix": "pnpm run lint --write",
18+
"lint": "pnpm run lint:script && pnpm run lint:html",
19+
"lint:script": "prettier -c --parser typescript \"packages/*/{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
20+
"lint:html": "prettier -c --parser html \"packages/**/*.html\"",
21+
"lint:fix": "pnpm run lint:script --write && pnpm run lint:html --write",
2022
"test": "pnpm run -r test"
2123
},
2224
"devDependencies": {
25+
"@vue/compiler-sfc": "^3.2.31",
26+
"@vue/server-renderer": "^3.2.37",
27+
"@vue/test-utils": "^2.0.0-rc.3",
2328
"brotli": "^1.3.3",
2429
"chalk": "^4.1.2",
2530
"enquirer": "^2.3.6",
@@ -28,7 +33,11 @@
2833
"lint-staged": "^13.0.0",
2934
"minimist": "^1.2.6",
3035
"p-series": "^3.0.0",
36+
"prettier": "^2.4.1",
3137
"semver": "^7.3.7",
38+
"typescript": "~4.7.2",
39+
"vue": "^3.2.37",
40+
"vue-tsc": "^0.37.2",
3241
"yorkie": "^2.0.0"
3342
},
3443
"gitHooks": {

‎playground/App.vue renamed to ‎packages/playground/App.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@
186186
<script>
187187
import { defineComponent, inject, computed, ref } from 'vue'
188188
import { scrollWaiter } from './scrollWaiter'
189-
import { useLink, useRoute } from '../src'
189+
import { useLink, useRoute } from 'vue-router'
190190
import AppLink from './AppLink.vue'
191191
192192
export default defineComponent({

‎playground/shim.d.ts renamed to ‎packages/playground/env.d.ts

+3
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
/// <reference types="vite/client" />
2+
/// <reference path="vue-router/global.d.ts"/>
3+
14
declare module '*.vue' {
25
import { Component } from 'vue'
36
var component: Component

‎playground/index.html renamed to ‎packages/playground/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -63,9 +63,8 @@
6363
}
6464
</style>
6565
</head>
66-
6766
<body>
6867
<div id="app"></div>
69-
<script type="module" src="/main.ts"></script>
68+
<script type="module" src="/src/main.ts"></script>
7069
</body>
7170
</html>

‎packages/playground/package.json

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{
2+
"name": "@vue/router-playground",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview --port 4173"
9+
},
10+
"dependencies": {
11+
"vue": "^3.2.36"
12+
},
13+
"devDependencies": {
14+
"@types/node": "^16.11.36",
15+
"@vitejs/plugin-vue": "^2.3.3",
16+
"@vue/tsconfig": "^0.1.3",
17+
"typescript": "~4.7.2",
18+
"vite": "^2.9.9",
19+
"vue-router": "workspace:*",
20+
"vue-tsc": "^0.37.2"
21+
}
22+
}

‎packages/playground/src/App.vue

+233
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,233 @@
1+
<template>
2+
<div>
3+
<pre>{{ currentLocation }}</pre>
4+
<section class="info">
5+
Name:
6+
<pre id="name">{{ currentLocation.name }}</pre>
7+
</section>
8+
9+
<section class="info">
10+
Params:
11+
<pre id="params">{{ currentLocation.params }}</pre>
12+
</section>
13+
14+
<section class="info">
15+
Query:
16+
<pre id="query">{{ currentLocation.query }}</pre>
17+
</section>
18+
19+
<section class="info">
20+
Hash:
21+
<pre id="hash">{{ currentLocation.hash }}</pre>
22+
</section>
23+
24+
<section class="info">
25+
FullPath:
26+
<pre id="fullPath">{{ currentLocation.fullPath }}</pre>
27+
</section>
28+
29+
<section class="info">
30+
path:
31+
<pre id="path">{{ currentLocation.path }}</pre>
32+
</section>
33+
34+
<hr />
35+
36+
<label>
37+
<input type="checkbox" v-model="state.cancelNextNavigation" /> Cancel Next
38+
Navigation
39+
</label>
40+
<ul>
41+
<li>
42+
<router-link to="/n/%E2%82%AC">/n/%E2%82%AC</router-link>
43+
</li>
44+
<li>
45+
<router-link :to="{ name: 'docs', params: { id: '€uro' } }"
46+
>/docs/€uro (object)</router-link
47+
>
48+
</li>
49+
<li>
50+
<router-link :to="{ path: '/', query: { currency: '€uro', é: 'e' } }"
51+
>/currency=€uro&é=e (object)</router-link
52+
>
53+
</li>
54+
<li>
55+
<router-link to="/documents/€">/n/€</router-link>
56+
</li>
57+
<li>
58+
<a href="/documents/%E2%82%AC">/documents/%E2%82%AC (force reload)</a>
59+
</li>
60+
<li>
61+
<a href="/documents/€">/documents/€ (force reload): not valid tho</a>
62+
</li>
63+
<li>
64+
<router-link to="/home">Home (redirects)</router-link>
65+
</li>
66+
<li>
67+
<router-link to="/">Home</router-link>
68+
</li>
69+
<li>
70+
<AppLink to="/">AppLink Home</AppLink>
71+
</li>
72+
<li>
73+
<router-link to="/always-redirect">/always-redirect</router-link>
74+
</li>
75+
<li>
76+
<router-link to="/children">/children</router-link>
77+
</li>
78+
<li>
79+
<router-link to="/children/alias">/children/alias</router-link>
80+
</li>
81+
<li>
82+
<router-link :to="{ name: 'default-child' }"
83+
>/children (child named)</router-link
84+
>
85+
</li>
86+
<li>
87+
<router-link :to="{ name: 'WithChildren' }"
88+
>/children (parent named)</router-link
89+
>
90+
</li>
91+
<li>
92+
<router-link to="/children/a">/children/a</router-link>
93+
</li>
94+
<li>
95+
<router-link to="/children/b">/children/b</router-link>
96+
</li>
97+
<li>
98+
<router-link to="/children/b/a2">/children/b/a2</router-link>
99+
</li>
100+
<li>
101+
<router-link to="/children/b/b2">/children/b/b2</router-link>
102+
</li>
103+
<li>
104+
<router-link to="/nested">/nested</router-link>
105+
</li>
106+
<li>
107+
<router-link to="/anidado">/anidado</router-link>
108+
</li>
109+
<li>
110+
<router-link to="/long-0">/long-0</router-link>
111+
</li>
112+
<li>
113+
<router-link to="/users/5">/users/5</router-link>
114+
</li>
115+
<li>
116+
<router-link
117+
:to="{
118+
name: 'user',
119+
params: { id: '' + (Number(currentLocation.params.id || 0) + 1) },
120+
}"
121+
>/users/{{ Number(currentLocation.params.id || 0) + 1 }}</router-link
122+
>
123+
</li>
124+
<li>
125+
<router-link to="/with-data">/with-data</router-link>
126+
</li>
127+
<li>
128+
<router-link to="/cant-leave">/cant-leave</router-link>
129+
</li>
130+
<li>
131+
<router-link :to="{ name: 'docs', params: { id: 'é' } }"
132+
>/docs/é</router-link
133+
>
134+
</li>
135+
<li>
136+
<router-link to="/rep">/rep</router-link>
137+
</li>
138+
<li>
139+
<router-link to="/rep/a">/rep/a</router-link>
140+
</li>
141+
<li>
142+
<router-link to="/rep/a/b">/rep/a/b</router-link>
143+
</li>
144+
<li>
145+
<router-link to="/parent/1">/parent/1</router-link>
146+
</li>
147+
<li>
148+
<router-link to="/p/1">/p/1</router-link>
149+
</li>
150+
<li>
151+
<router-link to="/parent/1/as-absolute-a"
152+
>/parent/1/as-absolute-a</router-link
153+
>
154+
</li>
155+
<li>
156+
<router-link to="/p/1/as-absolute-a">/p/1/as-absolute-a</router-link>
157+
</li>
158+
<li>
159+
<router-link to="/p_1/absolute-a">/p_1/absolute-a</router-link>
160+
</li>
161+
</ul>
162+
<button @click="toggleViewName">Toggle view</button>
163+
<Suspense>
164+
<template #default>
165+
<router-view :name="viewName" v-slot="{ Component, route }">
166+
<transition
167+
:name="route.meta.transition || 'fade'"
168+
mode="out-in"
169+
@before-enter="flushWaiter"
170+
@before-leave="setupWaiter"
171+
>
172+
<keep-alive>
173+
<component
174+
:is="Component"
175+
:key="route.name === 'repeat' ? route.path : undefined"
176+
/>
177+
</keep-alive>
178+
</transition>
179+
</router-view>
180+
</template>
181+
<template #fallback> Loading... </template>
182+
</Suspense>
183+
</div>
184+
</template>
185+
186+
<script>
187+
import { defineComponent, inject, computed, ref } from 'vue'
188+
import { scrollWaiter } from './scrollWaiter'
189+
import { useLink, useRoute } from 'vue-router'
190+
import AppLink from './AppLink.vue'
191+
192+
export default defineComponent({
193+
name: 'App',
194+
components: { AppLink },
195+
setup() {
196+
const route = useRoute()
197+
const state = inject('state')
198+
const viewName = ref('default')
199+
200+
useLink({ to: '/' })
201+
useLink({ to: '/documents/hello' })
202+
useLink({ to: '/children' })
203+
204+
const currentLocation = computed(() => {
205+
const { matched, ...rest } = route
206+
return rest
207+
})
208+
209+
function flushWaiter() {
210+
scrollWaiter.flush()
211+
}
212+
function setupWaiter() {
213+
scrollWaiter.add()
214+
}
215+
216+
const nextUserLink = computed(
217+
() => '/users/' + String((Number(route.value.params.id) || 0) + 1)
218+
)
219+
220+
return {
221+
currentLocation,
222+
nextUserLink,
223+
state,
224+
flushWaiter,
225+
setupWaiter,
226+
viewName,
227+
toggleViewName() {
228+
viewName.value = viewName.value === 'default' ? 'other' : 'default'
229+
},
230+
}
231+
},
232+
})
233+
</script>

‎playground/AppLink.vue renamed to ‎packages/playground/src/AppLink.vue

+2-3
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,12 @@
2727
</template>
2828

2929
<script>
30-
import { RouterLinkImpl } from '../src/RouterLink'
30+
import { RouterLink, START_LOCATION, useLink, useRoute } from 'vue-router'
3131
import { computed, defineComponent, toRefs } from 'vue'
32-
import { START_LOCATION, useLink, useRoute } from '../src'
3332
3433
export default defineComponent({
3534
props: {
36-
...RouterLinkImpl.props,
35+
...RouterLink.props,
3736
disabled: Boolean,
3837
},
3938

‎packages/playground/src/api/index.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export let delay = (t = 100) => new Promise(resolve => setTimeout(resolve, t))
2+
export async function getData() {
3+
await delay(500)
4+
return {
5+
message: 'Hello',
6+
time: Date.now(),
7+
}
8+
}

‎playground/api/index.ts renamed to ‎packages/playground/src/api/index.ts

File renamed without changes.

‎packages/playground/src/main.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// necessary for webpack
2+
import { createApp } from 'vue'
3+
import { router, routerHistory } from './router'
4+
import { globalState } from './store'
5+
import App from './App.vue'
6+
// for testing purposes
7+
window.h = routerHistory
8+
window.r = router
9+
const app = createApp(App)
10+
app.mixin({
11+
beforeRouteEnter() {
12+
console.log('mixin enter')
13+
},
14+
})
15+
app.provide('state', globalState)
16+
app.use(router)
17+
window.vm = app.mount('#app')

‎playground/main.ts renamed to ‎packages/playground/src/main.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// necessary for webpack
2-
///<reference path="../src/global.d.ts"/>
3-
import { createApp, ComponentPublicInstance } from 'vue'
2+
import { createApp } from 'vue'
3+
import type { ComponentPublicInstance } from 'vue'
44
import { router, routerHistory } from './router'
55
import { globalState } from './store'
66
import App from './App.vue'

0 commit comments

Comments
 (0)