feat(VersionSelect): support set init vue version

vant-ui · Jan 6, 2024 · e40e0d2 · e40e0d2
1 parent b8b33d3
commit e40e0d2
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 52 deletions.
diff --git a/components.d.ts b/components.d.ts
@@ -7,10 +7,10 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    Console: (typeof import('./src/components/Console.vue'))['default'];
-    Header: (typeof import('./src/components/Header.vue'))['default'];
-    Message: (typeof import('./src/components/Message.vue'))['default'];
-    VanIcon: (typeof import('vant/es'))['Icon'];
-    VersionSelect: (typeof import('./src/components/VersionSelect.vue'))['default'];
+    Console: typeof import('./src/components/Console.vue')['default']
+    Header: typeof import('./src/components/Header.vue')['default']
+    Message: typeof import('./src/components/Message.vue')['default']
+    VanIcon: typeof import('vant/es')['Icon']
+    VersionSelect: typeof import('./src/components/VersionSelect.vue')['default']
   }
 }
diff --git a/src/App.vue b/src/App.vue
@@ -55,18 +55,12 @@ watchEffect(() => history.replaceState({}, '', store.serialize()));
   <Header :config="config" :lang-configs="langConfigs" lang="zh-CN"> </Header>
   <div class="van-repl">
     <splitpanes class="default-theme">
-      <pane
-        :size="20"
-        :min-size="20"
-      >
+      <pane :size="20" :min-size="20">
         <div class="van-output">
           <Preview ref="previewRef" :show="true" :ssr="false" />
         </div>
       </pane>
-      <pane
-        :size="40"
-        :min-size="40"
-      >
+      <pane :size="40" :min-size="40">
         <div class="van-editor">
           <Repl
             ref="replRef"

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ReplStore } from '@vue/repl';
 import { gte } from 'semver';
 import VersionSelect from './VersionSelect.vue';
 import { defineProps, computed, reactive, unref, type Ref, inject } from 'vue';
@@ -13,14 +12,15 @@ import {
 } from '@vueuse/core';
 import { showToast } from 'vant';
 import { genCdnLink } from '@/utils';
+import type { VantReplStore } from '@/store';
 
 interface Version {
   text: string;
   published: Ref<string[]>;
   active: string;
 }
 
-const store = inject('store') as ReplStore;
+const store = inject('store') as VantReplStore;
 
 const onChangeVersion = (key: keyof typeof versions, version: string) => {
   versions[key].active = version;
@@ -73,6 +73,12 @@ const getSupportedTSVersions = () => {
   );
 };
 
+const getVersionActive = (pkg: 'vue') => {
+  switch (pkg) {
+    case 'vue':
+      return store.getVueVersion()
+  }
+};
 const versions = reactive<Record<string, Version>>({
   vant: {
     text: 'Vant',
@@ -82,7 +88,7 @@ const versions = reactive<Record<string, Version>>({
   vue: {
     text: 'Vue',
     published: getSupportedVueVersions(),
-    active: '',
+    active: getVersionActive('vue'),
   },
   typescript: {
     text: 'TypeScript',

diff --git a/src/store.ts b/src/store.ts
@@ -23,40 +23,40 @@ const genVantCode = () => {
   return vantCode.replace('#STYLE#', genCdnLink('vant', '', '/lib/index.css'));
 };
 
-const getImportMap = () => {
-  const deps: Record<string, Dependency> = {
-    vue: {
-      pkg: '@vue/runtime-dom',
-      version: '',
-      path: '/dist/runtime-dom.esm-browser.js',
-    },
-    'vue/server-renderer': {
-      pkg: '@vue/server-renderer',
-      version: '',
-      path: '/dist/server-renderer.esm-browser.js',
-    },
-    '@vue/shared': {
-      version: '',
-      path: '/dist/shared.esm-bundler.js',
-    },
-    'vant/lib/index.css': {
-      version: '',
-      path: '',
-    },
-    vant: {
-      version: '',
-      path: '/es/index.mjs',
-    },
-    '@vant/use': {
-      version: '',
-      path: '/dist/index.esm.mjs',
-    },
-    '@vant/popperjs': {
-      version: '',
-      path: '/dist/index.esm.mjs',
-    },
-  };
+const deps: Record<string, Dependency> = {
+  vue: {
+    pkg: '@vue/runtime-dom',
+    version: '',
+    path: '/dist/runtime-dom.esm-browser.js',
+  },
+  'vue/server-renderer': {
+    pkg: '@vue/server-renderer',
+    version: '',
+    path: '/dist/server-renderer.esm-browser.js',
+  },
+  '@vue/shared': {
+    version: '',
+    path: '/dist/shared.esm-bundler.js',
+  },
+  'vant/lib/index.css': {
+    version: '',
+    path: '',
+  },
+  vant: {
+    version: '',
+    path: '/es/index.mjs',
+  },
+  '@vant/use': {
+    version: '',
+    path: '/dist/index.esm.mjs',
+  },
+  '@vant/popperjs': {
+    version: '',
+    path: '/dist/index.esm.mjs',
+  },
+};
 
+const getImportMap = () => {
   const res = {
     imports: Object.fromEntries(
       Object.entries(deps).map(([key, dep]) => [
@@ -74,17 +74,31 @@ const _files = {
   [TSCONFIG]: tsconfigCode,
 };
 
-// const userFiles = location.hash.slice(1);
-const userFiles = '';
+const userFiles = location.hash.slice(1);
+// const userFiles = '';
 
-class VantReplStore extends ReplStore {
+export class VantReplStore extends ReplStore {
   constructor(storeOptions: StoreOptions = {}) {
     super(storeOptions);
     this.state.mainFile = MAIN_FILE;
     this.addFile(new File(MAIN_FILE, mainCode, true));
     this.addFile(new File(VANT_FILE, genVantCode(), true));
     this.setActive(WELCOME_FILE);
   }
+  async setVueVersion(version: string) {
+    super.setVueVersion(version);
+    console.log('nemo set vue version', version);
+    this.vueVersion = version;
+  }
+  getVueVersion() {
+    const json = this.getImportMap()
+    console.log(json.imports.vue)
+    // TODO: @vue/repl 初始化阶段就应该提供 getVueVersion，初始化时的 this.vueVersion 是无效的
+    // ! 这种写法后续应该通过获取 this.vueVersion 替代
+    const reg = new RegExp(`.*${deps.vue.pkg}|${deps.vue.path}|@`, 'g')
+    const version = json.imports.vue.replace(reg, '')
+    return version || '';
+  }
 }
 const store = new VantReplStore({
   serializedState: userFiles ? userFiles : utoa(JSON.stringify(_files)),