YPerf
/
tiny-vue
forked from opentiny/tiny-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(sites): 切换 sites 引用 @opentiny/vue-repl包 (#391)

This commit is contained in:
申君健 2023-08-16 09:17:14 +08:00 committed by GitHub
parent a74390d125
commit ee044891c0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/sites/package.json
View File

@ -32,7 +32,8 @@
"marked": "^4.3.0",
"dompurify": "^3.0.1",
"@playwright/test": "^1.29.2",
"sortablejs": "1.15.0"
"sortablejs": "1.15.0",
"@opentiny/vue-repl": "^1.0.2"
},
"devDependencies": {
"@opentiny-internal/unplugin-virtual-template": "workspace:~",

42
examples/sites/playground/App.vue
View File

@ -1,8 +1,8 @@
<script setup>
import { reactive, ref } from 'vue'
import { Repl, ReplStore, File } from '@vue/repl'
import { Repl, useStore, File } from '@opentiny/vue-repl'
import '@opentiny/vue-repl/dist/style.css'
import Monaco from '@vue/repl/monaco-editor'
import '@vue/repl/style.css'
import { ButtonGroup as TinyButtonGroup, Select as TinySelect, Option as TinyOption, Notify } from '@opentiny/vue'
import { staticDemoPath, getWebdocPath } from '@/views/components/cmpConfig'
import { fetchDemosFile } from '@/tools/utils'
@ -12,16 +12,17 @@ import Sun from './icons/Sun.vue'
import Moon from './icons/Moon.vue'
import Share from './icons/Share.vue'
const versions = ['3.9.1', '3.8.4']
const versions = ['3.10.0', '3.9.1', '3.8.4']
const latestVersion = versions[0]
const cdnHost = 'https://unpkg.com'
const createImportMap = (version) => {
return {
imports: {
'@opentiny/vue': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
'@opentiny/vue-icon': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
'@opentiny/vue-locale': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
'@opentiny/vue-common': `https://unpkg.com/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
'@opentiny/vue': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue.mjs`,
'@opentiny/vue-icon': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-icon.mjs`,
'@opentiny/vue-locale': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-locale.mjs`,
'@opentiny/vue-common': `${cdnHost}/@opentiny/vue@${version}/runtime/tiny-vue-common.mjs`
}
}
}
@ -29,10 +30,15 @@ const createImportMap = (version) => {
const hash = location.hash.slice(1)
const shareData = hash.split('|')
const store = new ReplStore({
const store = new useStore({
serializedState: shareData.length === 2 ? shareData[1] : '',
showOutput: true,
outputMode: 'preview'
outputMode: 'preview',
versions: {
vue: '3.2.47',
opentiny: latestVersion,
typescript: '5.1.3'
}
})
// 切换主题
@ -58,10 +64,19 @@ const state = reactive({
function versionChange(version) {
const importMap = createImportMap(version)
store.setImportMap(importMap)
state.previewOptions.headHTML = `<link rel="stylesheet" href="https://unpkg.com/@opentiny/vue-theme@${version}/index.css">`
}
const langReg = / lang="jsx"/
const iframeWin = document.querySelector('iframe').contentWindow
const styleDom = iframeWin.document.getElementById('tiny-theme')
if (styleDom) {
styleDom.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
} else {
const link = iframeWin.document.createElement('link')
link.id = 'tiny-theme'
link.rel = 'stylesheet'
link.href = `${cdnHost}/@opentiny/vue-theme@${version}/index.css`
iframeWin.document.head.append(link)
}
}
function getDemoName(name, apiMode) {
return name.replace(/\.vue$/, `${apiMode === 'Options' ? '' : '-composition-api'}.vue`)
@ -83,10 +98,9 @@ const getDemoCode = async ({ cmpId, fileName, apiMode }) => {
const loadFileCode = async ({ cmpId, fileName, apiMode }) => {
const code = await getDemoCode({ cmpId, fileName, apiMode })
const resultCode = code.replace(langReg, '')
store.state.mainFile = fileName
store.state.activeFile = fileName
store.addFile(new File(fileName, resultCode, false))
store.addFile(new File(fileName, code, false))
versionChange(latestVersion)
}