chore(docs): implement dynamic links for playground based on preview state (#19612)

docs/.vitepress/vitepress/components/full-screen/vp-menu-link.vue

@@ -1,11 +1,13 @@
 <script lang="ts" setup>
+import { usePlaygroundPreview } from '../../composables/use-playground'
 import VPLink from '../common/vp-link.vue'
-
 import type { Link } from '../../types'
 
-defineProps<{
+const props = defineProps<{
   item: Link
 }>()
+
+const targetLink = usePlaygroundPreview(props)
 </script>
 
 <template>
@@ -13,7 +15,7 @@ defineProps<{
     :class="{
       'is-menu-link': true,
     }"
-    :href="item.link"
+    :href="targetLink"
     :no-icon="true"
   >
     {{ item.text }}

docs/.vitepress/vitepress/components/navbar/vp-menu-link.vue

@@ -3,18 +3,24 @@ import { useRoute } from 'vitepress'
 import { useStorage } from '@vueuse/core'
 import VPLink from '../common/vp-link.vue'
 import { isActive } from '../../utils'
-
+import { usePlaygroundPreview } from '../../composables/use-playground'
 import type { Link } from '../../types'
+
 const USER_VISITED_NEW_RESOURCE_PAGE = 'USER_VISITED_NEW_RESOURCE_PAGE'
-defineProps<{
+
+const props = defineProps<{
   item: Link
 }>()
 
 const route = useRoute()
+
 const isVisited = useStorage<boolean | string>(
   USER_VISITED_NEW_RESOURCE_PAGE,
   false
 )
+
+const targetLink = usePlaygroundPreview(props)
+
 const isNewPage = (item: Link) => item.activeMatch === '/some_fake_path/'
 
 const onNavClick = (item: Link) => {
@@ -34,7 +40,7 @@ const onNavClick = (item: Link) => {
         !!item.activeMatch
       ),
     }"
-    :href="item.link"
+    :href="targetLink"
     :no-icon="true"
     @click="onNavClick(item)"
   >

docs/.vitepress/vitepress/components/navbar/vp-social-link.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { usePreview, usePreviewPR } from '../../composables/use-playground'
 import type { Component } from 'vue'
 
 const props = defineProps<{
@@ -9,13 +10,10 @@ const props = defineProps<{
 }>()
 
 const targetLink = ref(props.link)
+
 onMounted(() => {
-  if (props.text === 'GitHub') {
-    const isPreview = globalThis.location?.host.startsWith('preview')
-    if (isPreview) {
-      const pr = globalThis.location.host.split('-', 2)[1]
-      targetLink.value = `${targetLink.value}/pull/${pr}`
-    }
+  if (props.text === 'GitHub' && usePreview()) {
+    targetLink.value = `${targetLink.value}/pull/${usePreviewPR()}`
   }
 })
 </script>

docs/.vitepress/vitepress/composables/use-playground.ts

@@ -1,31 +1,60 @@
+import { onMounted, ref, watch } from 'vue'
 import { utoa } from '../utils'
 import { isDark } from './dark'
+import type { Link } from '../types'
 
 const MAIN_FILE_NAME = 'App.vue'
 
+export const usePreview = () => location.host.startsWith('preview')
+
+export const usePreviewPR = () => location.host.split('-', 2)[1]
+
 export const usePlayground = (source: string) => {
-  const code = decodeURIComponent(source)
+  const code = source ? decodeURIComponent(source) : source
   const originCode = {
     [MAIN_FILE_NAME]: code,
   }
 
-  const encoded = utoa(JSON.stringify(originCode))
-  const isPreview = location.host.startsWith('preview')
+  const encoded = code ? utoa(JSON.stringify(originCode)) : ''
+
   let link = `https://element-plus.run/`
-  if (isPreview) {
-    const pr = location.host.split('-', 2)[1]
-    link = `${link}?pr=${pr}`
+
+  if (usePreview()) {
+    link = `${link}?pr=${usePreviewPR()}`
   }
+
   if (isDark.value) {
-    if (isPreview) {
-      link += '&theme=dark'
-    } else {
-      link = `${link}?theme=dark`
-    }
+    link = `${link}${usePreview() ? '&' : '?'}theme=dark`
   }
-  link += `#${encoded}`
+
+  if (code) {
+    link += `#${encoded}`
+  }
+
   return {
     encoded,
     link,
   }
 }
+
+export const usePlaygroundPreview = (
+  props: Readonly<{
+    item: Link
+  }>
+) => {
+  const targetLink = ref(props.item.link)
+
+  const handler = () => {
+    if (props.item.text === 'Playground') {
+      const { link } = usePlayground('')
+
+      targetLink.value = link
+    }
+  }
+
+  watch(() => isDark.value, handler)
+
+  onMounted(handler)
+
+  return targetLink
+}