Skip to content

Commit d80d40a

Browse files
yyx990803yyx990803
committed
chore(sfc-playground): use standalone version of @vue/repl
1 parent 4178d5d commit d80d40a

23 files changed

+47
-2343
lines changed

‎packages/global.d.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/// <reference types="vite/client" />
2+
13
// Global compile-time constants
24
declare var __DEV__: boolean
35
declare var __TEST__: boolean
@@ -25,10 +27,6 @@ declare namespace jest {
2527
}
2628

2729
declare module '*.vue' {}
28-
declare module '*?raw' {
29-
const content: string
30-
export default content
31-
}
3230

3331
declare module 'file-saver' {
3432
export function saveAs(blob: any, name: any): void
@@ -39,3 +37,10 @@ declare module 'stream/web' {
3937
const t: typeof TransformStream
4038
export { r as ReadableStream, t as TransformStream }
4139
}
40+
41+
declare module '@vue/repl' {
42+
import { ComponentOptions } from '@vue/runtime-core'
43+
const Repl: ComponentOptions
44+
const ReplStore: any
45+
export { Repl, ReplStore }
46+
}

‎packages/sfc-playground/package.json

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,12 @@
88
"serve": "vite preview"
99
},
1010
"devDependencies": {
11-
"@types/codemirror": "^0.0.108",
1211
"@vitejs/plugin-vue": "^1.2.0",
13-
"codemirror": "^5.60.0",
1412
"vite": "^2.4.0"
1513
},
1614
"dependencies": {
15+
"@vue/repl": "^0.1.0",
1716
"file-saver": "^2.0.5",
18-
"jszip": "^3.6.0",
19-
"sucrase": "^3.19.0"
17+
"jszip": "^3.6.0"
2018
}
2119
}

‎packages/sfc-playground/src/App.vue

Lines changed: 18 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,38 @@
11
<script setup lang="ts">
22
import Header from './Header.vue'
3-
import SplitPane from './SplitPane.vue'
4-
import Editor from './editor/Editor.vue'
5-
import Output from './output/Output.vue'
3+
import { Repl, ReplStore } from '@vue/repl'
4+
import { watchEffect } from 'vue'
5+
6+
document.documentElement.style.setProperty('--vh', window.innerHeight + `px`)
7+
8+
const store = new ReplStore({
9+
serializedState: location.hash.slice(1),
10+
defaultVueRuntimeURL: import.meta.env.PROD
11+
? `${location.origin}/vue.runtime.esm-browser.js`
12+
: `${location.origin}/src/vue-dev-proxy`
13+
})
14+
15+
// persist state
16+
watchEffect(() => history.replaceState({}, '', store.serialize()))
617
</script>
718

819
<template>
9-
<Header />
10-
<div class="wrapper">
11-
<SplitPane>
12-
<template #left>
13-
<Editor />
14-
</template>
15-
<template #right>
16-
<Output />
17-
</template>
18-
</SplitPane>
19-
</div>
20+
<Header :store="store" />
21+
<Repl :store="store" :showCompileOutput="true" />
2022
</template>
2123

2224
<style>
2325
body {
2426
font-size: 13px;
2527
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
2628
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
27-
color: var(--base);
2829
margin: 0;
29-
background-color: #f8f8f8;
3030
--base: #444;
3131
--nav-height: 50px;
32-
--font-code: 'Source Code Pro', monospace;
33-
--color-branding: #3ca877;
34-
--color-branding-dark: #416f9c;
3532
}
3633
37-
.wrapper {
38-
height: calc(100vh - var(--nav-height));
34+
.vue-repl {
35+
height: calc(var(--vh) - var(--nav-height));
3936
}
4037
4138
button {

‎packages/sfc-playground/src/Header.vue

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
<script setup lang="ts">
22
import { downloadProject } from './download/download'
3-
import { setVersion, resetVersion } from './transform'
43
import { ref, onMounted } from 'vue'
54
5+
// @ts-ignore
6+
const { store } = defineProps(['store'])
7+
68
const currentCommit = __COMMIT__
79
const activeVersion = ref(`@${currentCommit}`)
810
const publishedVersions = ref<string[]>()
@@ -17,13 +19,13 @@ async function toggle() {
1719
1820
async function setVueVersion(v: string) {
1921
activeVersion.value = `loading...`
20-
await setVersion(v)
22+
await store.setVueVersion(v)
2123
activeVersion.value = `v${v}`
2224
expanded.value = false
2325
}
2426
2527
function resetVueVersion() {
26-
resetVersion()
28+
store.resetVueVersion()
2729
activeVersion.value = `@${currentCommit}`
2830
expanded.value = false
2931
}
@@ -113,7 +115,7 @@ async function fetchVersions(): Promise<string[]> {
113115
</g>
114116
</svg>
115117
</button>
116-
<button class="download" @click="downloadProject">
118+
<button class="download" @click="downloadProject(store)">
117119
<svg width="1.7em" height="1.7em" viewBox="0 0 24 24">
118120
<g fill="#626262">
119121
<rect x="4" y="18" width="16" height="2" rx="1" ry="1" />
@@ -241,7 +243,7 @@ h1 img {
241243
}
242244
243245
.versions a:hover {
244-
color: var(--color-branding);
246+
color: #3ca877;
245247
}
246248
247249
.versions.expanded {

‎packages/sfc-playground/src/Message.vue

Lines changed: 0 additions & 81 deletions
This file was deleted.

‎packages/sfc-playground/src/SplitPane.vue

Lines changed: 0 additions & 87 deletions
This file was deleted.

0 commit comments

Comments
 (0)