Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(playground): playground only supply latest 3 version #2488

Merged
merged 1 commit into from
Nov 6, 2024
Merged

docs(playground): playground only supply latest 3 version #2488

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 51 additions & 32 deletions examples/sites/playground/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,18 @@
<script setup>
<script setup lang="jsx">
import { onMounted, reactive, nextTick } from 'vue'
import { Repl, useStore, File } from '@opentiny/vue-repl'
import '@opentiny/vue-repl/dist/style.css'

import Editor from '@vue/repl/codemirror-editor'
import {
ButtonGroup as TinyButtonGroup,
Select as TinySelect,
Option as TinyOption,
Switch as TinySwitch,
Notify
} from '@opentiny/vue'
import { TinyButtonGroup, TinyButton, TinySelect, TinyOption, TinySwitch, Notify } from '@opentiny/vue'
import { staticDemoPath, getWebdocPath } from '@/views/components/cmp-config'
import { fetchDemosFile } from '@/tools/utils'
import logoUrl from './assets/opentiny-logo.svg?url'
import GitHub from './icons/Github.vue'
import Share from './icons/Share.vue'

const VERSION = 'tiny-vue-version-3.16'
const VERSION = 'tiny-vue-version-3.19'
const NOTIFY = 'tiny-vue-playground-notify'
const LAYOUT = 'playground-layout'
const LAYOUT_REVERSE = 'playground-layout-reverse'

Expand All @@ -28,40 +23,57 @@ const isMobileFirst = tinyMode === 'mobile-first'
const isSaas = tinyTheme === 'saas'
const isPreview = searchObj.get('openMode') === 'preview' // 是否多端弹窗预览

const versions = ['3.19', '3.18', '3.17', '3.16', '3.15', '3.14', '3.13', '3.12', '3.11', '3.10', '3.9', '3.8']
const latestVersion = isPreview ? versions[0] : localStorage.getItem(VERSION) || versions[0]
const versions = ['3.19', '3.18', '3.17']
const getVersion = () => {
if (isPreview) {
return versions[0]
}
if (versions.includes(localStorage.getItem(VERSION))) {
localStorage.getItem(VERSION)
}
return versions[0]
}
const latestVersion = getVersion()
Comment on lines +27 to +35
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix logical error in getVersion function

The function has a bug in the conditional block that checks localStorage value. The return statement is missing, causing the function to always return versions[0].

Apply this diff to fix the logic:

 const getVersion = () => {
   if (isPreview) {
     return versions[0]
   }
-  if (versions.includes(localStorage.getItem(VERSION))) {
-    localStorage.getItem(VERSION)
+  const storedVersion = localStorage.getItem(VERSION)
+  if (versions.includes(storedVersion)) {
+    return storedVersion
   }
   return versions[0]
 }
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
const getVersion = () => {
if (isPreview) {
return versions[0]
}
if (versions.includes(localStorage.getItem(VERSION))) {
localStorage.getItem(VERSION)
}
return versions[0]
}
const getVersion = () => {
if (isPreview) {
return versions[0]
}
const storedVersion = localStorage.getItem(VERSION)
if (versions.includes(storedVersion)) {
return storedVersion
}
return versions[0]
}

const cdnHost = localStorage.getItem('setting-cdn')

const versionDelimiter = cdnHost.includes('npmmirror') ? '/' : '@'
const fileDelimiter = cdnHost.includes('npmmirror') ? 'files/' : ''

const isOldVersion = (version) => {
const minorVersion = version?.split('.')?.[1]
return minorVersion && minorVersion < 16
}

// 3.16.0版本之前的runtime还没有抽离单独的包
const getRuntime = (version) => {
if (isOldVersion(version)) {
return `${cdnHost}/@opentiny/vue${versionDelimiter}${version}/${fileDelimiter}runtime/`
let notify
const showNotify = () => {
if (localStorage.getItem(NOTIFY) !== 'true' && !notify) {
const muteNotify = () => {
notify.close()
localStorage.setItem(NOTIFY, true)
}
notify = Notify({
type: 'info',
title: '温馨提示：',
message: () => (
<div>
<div>演练场仅保留最新的三个版本可选。</div>
<div style="text-align: right;margin-top: 12px;">
<TinyButton onClick={muteNotify} type={'primary'}>
不再提示
</TinyButton>
</div>
</div>
),
duration: -1,
position: 'top-right',
verticalOffset: 200
})
}
return `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`
}

// 3.16.0版本之前的runtime没有tiny-vue-pc.mjs文件
const getPcRuntime = (version) => {
if (isOldVersion(version)) {
return `${getRuntime(version)}tiny-vue.mjs`
}
return `${getRuntime(version)}tiny-vue-pc.mjs`
}
const getRuntime = (version) => `${cdnHost}/@opentiny/vue-runtime${versionDelimiter}${version}/${fileDelimiter}dist3/`

const createImportMap = (version) => {
const imports = {
'vue': `${cdnHost}/vue${versionDelimiter}3.4.27/${fileDelimiter}dist/vue.runtime.esm-browser.js`,
'echarts': `${cdnHost}/echarts${versionDelimiter}5.4.1/${fileDelimiter}dist/echarts.esm.js`,
'@vue/compiler-sfc': `${cdnHost}/@vue/compiler-sfc${versionDelimiter}3.4.27/${fileDelimiter}dist/compiler-sfc.esm-browser.js`,
'@opentiny/vue': getPcRuntime(version),
'@opentiny/vue': `${getRuntime(version)}tiny-vue-pc.mjs`,
'@opentiny/vue-icon': `${getRuntime(version)}tiny-vue-icon.mjs`,
'@opentiny/vue-locale': `${getRuntime(version)}tiny-vue-locale.mjs`,
'@opentiny/vue-common': `${getRuntime(version)}tiny-vue-common.mjs`,
Expand All @@ -72,8 +84,9 @@ const createImportMap = (version) => {
'sortablejs': `${cdnHost}/sortablejs${versionDelimiter}1.15.0/${fileDelimiter}modular/sortable.esm.js`
}
if (['aurora', 'saas'].includes(tinyTheme)) {
imports[`@opentiny/vue-design-${tinyTheme}`] =
`${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
imports[
`@opentiny/vue-design-${tinyTheme}`
] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
}
Comment on lines +87 to +89
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix template literal formatting

The current formatting of the imports object key causes ESLint errors.

Apply this diff to fix the formatting:

-    imports[
-      `@opentiny/vue-design-${tinyTheme}`
-    ] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
+    imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
imports[
`@opentiny/vue-design-${tinyTheme}`
] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
imports[`@opentiny/vue-design-${tinyTheme}`] = `${cdnHost}/@opentiny/vue-design-${tinyTheme}${versionDelimiter}${version}/${fileDelimiter}index.js`
🧰 Tools
🪛 eslint

[error] 87-88: Replace ⏎······@opentiny/vue-design-${tinyTheme}with@opentiny/vue-design-${tinyTheme}]·=

(prettier/prettier)

[error] 89-89: Replace ]·= with ·

(prettier/prettier)

if (isSaas) {
imports['@opentiny/vue-icon'] = `${getRuntime(version)}tiny-vue-icon-saas.mjs`
Expand Down Expand Up @@ -291,7 +304,13 @@ function share() {
</span>
<span class="ml20">
OpenTiny Vue 版本:
<tiny-select v-model="state.selectVersion" @change="selectVersion" style="width: 150px" :disabled="isPreview">
<tiny-select
v-model="state.selectVersion"
style="width: 150px"
:disabled="isPreview"
@change="selectVersion"
@click="showNotify"
>
<tiny-option v-for="item in state.versions" :key="item.value" :label="item.value" :value="item.value">
</tiny-option>
</tiny-select>
Expand Down
Loading