feat: support vue pr (#323)

Author: btea

src/components/Header.vue

@@ -86,13 +86,22 @@ function refreshView() {
             languageToolsVersion
           }}</el-tag
         >
-        <el-tag v-if="store.pr" size="small">
-          <el-link
-            type="primary"
-            :href="`https://github.com/element-plus/element-plus/pull/${store.pr}`"
-            >PR {{ store.pr }}</el-link
-          >
-        </el-tag>
+        <div flex="~ col gap-1">
+          <el-tag v-if="store.pr" size="small">
+            <el-link
+              type="primary"
+              :href="`https://github.com/element-plus/element-plus/pull/${store.pr}`"
+              >PR {{ store.pr }}</el-link
+            >
+          </el-tag>
+          <el-tag v-if="store.vuePr" size="small">
+            <el-link
+              type="primary"
+              :href="`https://github.com/vuejs/core/pull/${store.vuePr}`"
+              >Vue PR {{ store.vuePr }}</el-link
+            >
+          </el-tag>
+        </div>
       </div>
     </div>
 

src/composables/store.ts

@@ -31,6 +31,7 @@ export interface UserOptions {
   vueVersion?: string
   tsVersion?: string
   epVersion?: string
+  vuePr?: string
 }
 export type SerializeState = Record<string, string> & {
   _o?: UserOptions
@@ -51,18 +52,27 @@ export const useStore = (initial: Initial) => {
     new URLSearchParams(location.search).get('pr') ||
     saved?._o?.styleSource?.split('-', 2)[1]
   const prUrl = `https://preview-${pr}-element-plus.surge.sh/bundle/dist`
+  const vuePr =
+    new URLSearchParams(location.search).get('vue') || saved?._o?.vuePr
+  const vuePrUrl = `https://esm.sh/pr`
 
   const versions = reactive<Versions>({
     vue: saved?._o?.vueVersion ?? 'latest',
     elementPlus: pr ? 'preview' : (saved?._o?.epVersion ?? 'latest'),
     typescript: saved?._o?.tsVersion ?? 'latest',
   })
-  const userOptions: UserOptions = pr
-    ? {
-        showHidden: true,
-        styleSource: `${prUrl}/index.css`,
-      }
-    : {}
+  const userOptions: UserOptions = {}
+  if (pr) {
+    Object.assign(userOptions, {
+      showHidden: true,
+      styleSource: `${prUrl}/index.css`,
+    })
+  }
+  if (vuePr) {
+    Object.assign(userOptions, {
+      vuePr,
+    })
+  }
   Object.assign(userOptions, {
     vueVersion: saved?._o?.vueVersion,
     tsVersion: saved?._o?.tsVersion,
@@ -80,6 +90,14 @@ export const useStore = (initial: Initial) => {
           'element-plus/': 'unsupported',
         },
       })
+
+    if (vuePr)
+      importMap = mergeImportMap(importMap, {
+        imports: {
+          vue: `${vuePrUrl}/vue@${vuePr}`,
+          '@vue/shared': `${vuePrUrl}/@vue/shared@${vuePr}`,
+        },
+      })
     return importMap
   })
 
@@ -238,6 +256,7 @@ export const useStore = (initial: Initial) => {
     toggleNightly,
     serialize,
     init,
+    vuePr,
   }
   Object.assign(store, utils)