From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 11 Oct 2023 13:09:10 +0000 (+0200)
Subject: fix(playground): fix import map in prod
X-Git-Tag: @pinia/nuxt@0.5.0~17
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=d578a2b22db0f7058355d082befa81b60a109c3e;p=thirdparty%2Fvuejs%2Fpinia.git

fix(playground): fix import map in prod
---

diff --git a/packages/online-playground/src/App.vue b/packages/online-playground/src/App.vue
index a6d18ea4..bd5bc79a 100644
--- a/packages/online-playground/src/App.vue
+++ b/packages/online-playground/src/App.vue
@@ -2,7 +2,7 @@
 import Header from './Header.vue'
 import { Repl, ReplStore, SFCOptions, ReplProps } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
-import { ref, watchEffect, onMounted, inject, provide, onUnmounted } from 'vue'
+import { ref, watchEffect, onMounted, provide } from 'vue'
 import { AppVue, PiniaVersionKey, counterTs } from './defaults'
 
 const setVH = () => {
@@ -56,30 +56,32 @@ provide(PiniaVersionKey, piniaVersion)
 //     piniaVersion.value === 'latest' ? '^2.1.0' : piniaVersion.value
 // })
 
+console.log('files', store.getFiles()['import-map.json'])
+
 if (!hash) {
   store.setImportMap({
     imports: {
       ...store.getImportMap().imports,
       pinia: import.meta.env.PROD
-        ? `${location.origin}/'pinia.esm-browser.js'`
+        ? `${location.origin}/pinia.esm-browser.js`
         : `${location.origin}/src/pinia-dev-proxy`,
+      ...(import.meta.env.PROD
+        ? {
+            '@vue/devtools-api':
+              'https://cdn.jsdelivr.net/npm/@vue/devtools-api@6.5.1/lib/esm/index.js',
+            'vue-demi':
+              'https://cdn.jsdelivr.net/npm/vue-demi@0.14.6/lib/v3/index.mjs',
+          }
+        : {}),
     },
   })
 
-  store
-    .setFiles({
-      // gets the tsconfig and import map
-      ...store.getFiles(),
-      'App.vue': AppVue,
-      'counter.ts': counterTs,
-    })
-    .then(() => {
-      console.log(store.state.mainFile)
-    })
-
-  // store.setFiles({}, 'main.ts').then(() => {
-  //   console.log('done')
-  // })
+  store.setFiles({
+    // gets the tsconfig and import map
+    ...store.getFiles(),
+    'App.vue': AppVue,
+    'counter.ts': counterTs,
+  })
 }
 
 // persist state
diff --git a/packages/online-playground/src/Header.vue b/packages/online-playground/src/Header.vue
index e8d465d6..15a98ca9 100644
--- a/packages/online-playground/src/Header.vue
+++ b/packages/online-playground/src/Header.vue
@@ -64,7 +64,7 @@ function toggleDark() {
       <VersionSelect
         v-model="store.state.typescriptVersion"
         pkg="typescript"
-        label="TypeScript Version"
+        label="TypeScript"
       />
       <!-- <VersionSelect
         :model-value="vueVersion"
@@ -87,7 +87,7 @@ function toggleDark() {
         :model-value="store.vueVersion || 'latest'"
         @update:model-value="setVueVersion"
         pkg="vue"
-        label="Vue Version"
+        label="Vue"
       />
       <button
         title="Toggle development production mode"