@opentiny/vue-docs 2.0.0 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-docs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "dependencies": {
     "@unocss/reset": "0.38.2",
     "@vue/repl": "^2.5.5",
@@ -15,15 +15,16 @@
     "dompurify": "^3.0.1",
     "@playwright/test": "^1.29.2",
     "sortablejs": "1.15.0",
+    "@opentiny/vue-repl": "^1.0.2",
     "@opentiny/vue": "~3.10.0",
     "@opentiny/vue-common": "~3.10.0",
     "@opentiny/vue-icon": "~3.10.0",
-    "@opentiny/vue-design-smb": "~3.10.0",
     "@opentiny/vue-design-aurora": "~3.10.0",
+    "@opentiny/vue-design-smb": "~3.10.0",
+    "@opentiny/vue-theme": "~3.10.0",
     "@opentiny/vue-theme-saas": "~3.10.0",
-    "@opentiny/vue-theme-mobile": "~3.10.0",
     "@opentiny/vue-vite-import": "~1.1.5",
-    "@opentiny/vue-theme": "~3.10.0"
+    "@opentiny/vue-theme-mobile": "~3.10.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^12.2.3",

package/playground/App.vue

@@ -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)
 }