Skip to content

Commit

Permalink
refactor: move playground
Browse files Browse the repository at this point in the history
  • Loading branch information
posva committed Jun 30, 2022
1 parent 4729a13 commit 4e93c72
Show file tree
Hide file tree
Showing 36 changed files with 831 additions and 102 deletions.
3 changes: 2 additions & 1 deletion .prettierignore
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
e2e/__build__
__build__
dist
coverage
13 changes: 11 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,16 @@
"docs:build": "pnpm run -r docs:build --filter ./packages/docs",
"play": "pnpm run -r play",
"build:size": "pnpm run -r build:size",
"lint": "prettier -c --parser typescript \"packages/*/{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
"lint:fix": "pnpm run lint --write",
"lint": "pnpm run lint:script && pnpm run lint:html",
"lint:script": "prettier -c --parser typescript \"packages/*/{src,__tests__,e2e}/**/*.[jt]s?(x)\"",
"lint:html": "prettier -c --parser html \"packages/**/*.html\"",
"lint:fix": "pnpm run lint:script --write && pnpm run lint:html --write",
"test": "pnpm run -r test"
},
"devDependencies": {
"@vue/compiler-sfc": "^3.2.31",
"@vue/server-renderer": "^3.2.37",
"@vue/test-utils": "^2.0.0-rc.3",
"brotli": "^1.3.3",
"chalk": "^4.1.2",
"enquirer": "^2.3.6",
Expand All @@ -28,7 +33,11 @@
"lint-staged": "^13.0.0",
"minimist": "^1.2.6",
"p-series": "^3.0.0",
"prettier": "^2.4.1",
"semver": "^7.3.7",
"typescript": "~4.7.2",
"vue": "^3.2.37",
"vue-tsc": "^0.37.2",
"yorkie": "^2.0.0"
},
"gitHooks": {
Expand Down
2 changes: 1 addition & 1 deletion playground/App.vue → packages/playground/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@
<script>
import { defineComponent, inject, computed, ref } from 'vue'
import { scrollWaiter } from './scrollWaiter'
import { useLink, useRoute } from '../src'
import { useLink, useRoute } from 'vue-router'
import AppLink from './AppLink.vue'
export default defineComponent({
Expand Down
3 changes: 3 additions & 0 deletions playground/shim.d.ts → packages/playground/env.d.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/// <reference types="vite/client" />
/// <reference path="vue-router/global.d.ts"/>

declare module '*.vue' {
import { Component } from 'vue'
var component: Component
Expand Down
3 changes: 1 addition & 2 deletions playground/index.html → packages/playground/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -63,9 +63,8 @@
}
</style>
</head>

<body>
<div id="app"></div>
<script type="module" src="/main.ts"></script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions packages/playground/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "@vue/router-playground",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview --port 4173"
},
"dependencies": {
"vue": "^3.2.36"
},
"devDependencies": {
"@types/node": "^16.11.36",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/tsconfig": "^0.1.3",
"typescript": "~4.7.2",
"vite": "^2.9.9",
"vue-router": "workspace:*",
"vue-tsc": "^0.37.2"
}
}
233 changes: 233 additions & 0 deletions packages/playground/src/App.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,233 @@
<template>
<div>
<pre>{{ currentLocation }}</pre>
<section class="info">
Name:
<pre id="name">{{ currentLocation.name }}</pre>
</section>

<section class="info">
Params:
<pre id="params">{{ currentLocation.params }}</pre>
</section>

<section class="info">
Query:
<pre id="query">{{ currentLocation.query }}</pre>
</section>

<section class="info">
Hash:
<pre id="hash">{{ currentLocation.hash }}</pre>
</section>

<section class="info">
FullPath:
<pre id="fullPath">{{ currentLocation.fullPath }}</pre>
</section>

<section class="info">
path:
<pre id="path">{{ currentLocation.path }}</pre>
</section>

<hr />

<label>
<input type="checkbox" v-model="state.cancelNextNavigation" /> Cancel Next
Navigation
</label>
<ul>
<li>
<router-link to="/n/%E2%82%AC">/n/%E2%82%AC</router-link>
</li>
<li>
<router-link :to="{ name: 'docs', params: { id: '€uro' } }"
>/docs/€uro (object)</router-link
>
</li>
<li>
<router-link :to="{ path: '/', query: { currency: '€uro', é: 'e' } }"
>/currency=€uro&é=e (object)</router-link
>
</li>
<li>
<router-link to="/documents/€">/n/€</router-link>
</li>
<li>
<a href="/documents/%E2%82%AC">/documents/%E2%82%AC (force reload)</a>
</li>
<li>
<a href="/documents/€">/documents/€ (force reload): not valid tho</a>
</li>
<li>
<router-link to="/home">Home (redirects)</router-link>
</li>
<li>
<router-link to="/">Home</router-link>
</li>
<li>
<AppLink to="/">AppLink Home</AppLink>
</li>
<li>
<router-link to="/always-redirect">/always-redirect</router-link>
</li>
<li>
<router-link to="/children">/children</router-link>
</li>
<li>
<router-link to="/children/alias">/children/alias</router-link>
</li>
<li>
<router-link :to="{ name: 'default-child' }"
>/children (child named)</router-link
>
</li>
<li>
<router-link :to="{ name: 'WithChildren' }"
>/children (parent named)</router-link
>
</li>
<li>
<router-link to="/children/a">/children/a</router-link>
</li>
<li>
<router-link to="/children/b">/children/b</router-link>
</li>
<li>
<router-link to="/children/b/a2">/children/b/a2</router-link>
</li>
<li>
<router-link to="/children/b/b2">/children/b/b2</router-link>
</li>
<li>
<router-link to="/nested">/nested</router-link>
</li>
<li>
<router-link to="/anidado">/anidado</router-link>
</li>
<li>
<router-link to="/long-0">/long-0</router-link>
</li>
<li>
<router-link to="/users/5">/users/5</router-link>
</li>
<li>
<router-link
:to="{
name: 'user',
params: { id: '' + (Number(currentLocation.params.id || 0) + 1) },
}"
>/users/{{ Number(currentLocation.params.id || 0) + 1 }}</router-link
>
</li>
<li>
<router-link to="/with-data">/with-data</router-link>
</li>
<li>
<router-link to="/cant-leave">/cant-leave</router-link>
</li>
<li>
<router-link :to="{ name: 'docs', params: { id: 'é' } }"
>/docs/é</router-link
>
</li>
<li>
<router-link to="/rep">/rep</router-link>
</li>
<li>
<router-link to="/rep/a">/rep/a</router-link>
</li>
<li>
<router-link to="/rep/a/b">/rep/a/b</router-link>
</li>
<li>
<router-link to="/parent/1">/parent/1</router-link>
</li>
<li>
<router-link to="/p/1">/p/1</router-link>
</li>
<li>
<router-link to="/parent/1/as-absolute-a"
>/parent/1/as-absolute-a</router-link
>
</li>
<li>
<router-link to="/p/1/as-absolute-a">/p/1/as-absolute-a</router-link>
</li>
<li>
<router-link to="/p_1/absolute-a">/p_1/absolute-a</router-link>
</li>
</ul>
<button @click="toggleViewName">Toggle view</button>
<Suspense>
<template #default>
<router-view :name="viewName" v-slot="{ Component, route }">
<transition
:name="route.meta.transition || 'fade'"
mode="out-in"
@before-enter="flushWaiter"
@before-leave="setupWaiter"
>
<keep-alive>
<component
:is="Component"
:key="route.name === 'repeat' ? route.path : undefined"
/>
</keep-alive>
</transition>
</router-view>
</template>
<template #fallback> Loading... </template>
</Suspense>
</div>
</template>

<script>
import { defineComponent, inject, computed, ref } from 'vue'
import { scrollWaiter } from './scrollWaiter'
import { useLink, useRoute } from 'vue-router'
import AppLink from './AppLink.vue'
export default defineComponent({
name: 'App',
components: { AppLink },
setup() {
const route = useRoute()
const state = inject('state')
const viewName = ref('default')
useLink({ to: '/' })
useLink({ to: '/documents/hello' })
useLink({ to: '/children' })
const currentLocation = computed(() => {
const { matched, ...rest } = route
return rest
})
function flushWaiter() {
scrollWaiter.flush()
}
function setupWaiter() {
scrollWaiter.add()
}
const nextUserLink = computed(
() => '/users/' + String((Number(route.value.params.id) || 0) + 1)
)
return {
currentLocation,
nextUserLink,
state,
flushWaiter,
setupWaiter,
viewName,
toggleViewName() {
viewName.value = viewName.value === 'default' ? 'other' : 'default'
},
}
},
})
</script>
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,12 @@
</template>

<script>
import { RouterLinkImpl } from '../src/RouterLink'
import { RouterLink, START_LOCATION, useLink, useRoute } from 'vue-router'
import { computed, defineComponent, toRefs } from 'vue'
import { START_LOCATION, useLink, useRoute } from '../src'
export default defineComponent({
props: {
...RouterLinkImpl.props,
...RouterLink.props,
disabled: Boolean,
},
Expand Down
8 changes: 8 additions & 0 deletions packages/playground/src/api/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
export let delay = (t = 100) => new Promise(resolve => setTimeout(resolve, t))
export async function getData() {
await delay(500)
return {
message: 'Hello',
time: Date.now(),
}
}
File renamed without changes.
17 changes: 17 additions & 0 deletions packages/playground/src/main.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// necessary for webpack
import { createApp } from 'vue'
import { router, routerHistory } from './router'
import { globalState } from './store'
import App from './App.vue'
// for testing purposes
window.h = routerHistory
window.r = router
const app = createApp(App)
app.mixin({
beforeRouteEnter() {
console.log('mixin enter')
},
})
app.provide('state', globalState)
app.use(router)
window.vm = app.mount('#app')
4 changes: 2 additions & 2 deletions playground/main.ts → packages/playground/src/main.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// necessary for webpack
///<reference path="../src/global.d.ts"/>
import { createApp, ComponentPublicInstance } from 'vue'
import { createApp } from 'vue'
import type { ComponentPublicInstance } from 'vue'
import { router, routerHistory } from './router'
import { globalState } from './store'
import App from './App.vue'
Expand Down
Loading

0 comments on commit 4e93c72

Please sign in to comment.