@vue/repl - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

dist/vue-repl.d.ts

@@ -246,3 +246,4 @@ import type { Component } from 'vue';
 export declare function useStore({ files, activeFilename, // set later
-    mainFile, template, builtinImportMap, errors, showOutput, outputMode, sfcOptions, compiler, vueVersion, locale, typescriptVersion, dependencyVersion, reloadLanguageTools, }?: Partial<StoreState>, serializedState?: string): ReplStore;
+    mainFile, template, builtinImportMap, // set later
+    errors, showOutput, outputMode, sfcOptions, compiler, vueVersion, locale, typescriptVersion, dependencyVersion, reloadLanguageTools, }?: Partial<StoreState>, serializedState?: string): ReplStore;
 
@@ -253,2 +254,3 @@ export declare function useVueImportMap(defaults?: {
     serverRenderer?: string | (() => string);
+    vueVersion?: string | null;
 }): {
@@ -255,0 +257,0 @@ productionMode: Ref<boolean>;

package.json

 {
   "name": "@vue/repl",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Vue component for editing Vue components",
@@ -5,0 +5,0 @@ "packageManager": "pnpm@8.15.1",

README.md

@@ -7,3 +7,3 @@ # @vue/repl
 
-**Note: 2.0 now supports Monaco Editor, but also requires explicitly passing in the editor to be used for tree-shaking.**
+**Note: `@vue/repl` >= 2 now supports Monaco Editor, but also requires explicitly passing in the editor to be used for tree-shaking.**
 
@@ -48,6 +48,8 @@ ### With CodeMirror Editor
 
+See [v4 Migration Guide](https://github.com/vuejs/repl/releases/tag/v4.0.0)
+
 ```vue
 <script setup>
-import { watchEffect } from 'vue'
-import { Repl, ReplStore } from '@vue/repl'
+import { watchEffect, ref } from 'vue'
+import { Repl, useStore, useVueImportMap } from '@vue/repl'
 import Monaco from '@vue/repl/monaco-editor'
@@ -58,30 +60,37 @@
 
-const store = new ReplStore({
-  // initialize repl with previously serialized state
-  serializedState: location.hash.slice(1),
-
-  // starts on the output pane (mobile only) if the URL has a showOutput query
-  showOutput: query.has('showOutput'),
-  // starts on a different tab on the output pane if the URL has a outputMode query
-  // and default to the "preview" tab
-  outputMode: query.get('outputMode') || 'preview',
-
+const {
+  importMap: builtinImportMap,
+  vueVersion,
+  productionMode,
+} = useVueImportMap({
   // specify the default URL to import Vue runtime from in the sandbox
   // default is the CDN link from jsdelivr.com with version matching Vue's version
   // from peerDependency
-  defaultVueRuntimeURL: 'cdn link to vue.runtime.esm-browser.js',
+  runtimeDev: 'cdn link to vue.runtime.esm-browser.js',
+  runtimeProd: 'cdn link to vue.runtime.esm-browser.prod.js',
+  serverRenderer: 'cdn link to server-renderer.esm-browser.js',
 })
 
+const store = useStore(
+  {
+    // pre-set import map
+    builtinImportMap,
+    vueVersion,
+    // starts on the output pane (mobile only) if the URL has a showOutput query
+    showOutput: ref(query.has('showOutput')),
+    // starts on a different tab on the output pane if the URL has a outputMode query
+    // and default to the "preview" tab
+    outputMode: ref(query.get('outputMode') || 'preview'),
+  },
+  // initialize repl with previously serialized state
+  location.hash,
+)
+
 // persist state to URL hash
 watchEffect(() => history.replaceState({}, '', store.serialize()))
 
-// pre-set import map
-store.setImportMap({
-  imports: {
-    myLib: 'cdn link to esm build of myLib',
-  },
-})
-
 // use a specific version of Vue
-store.setVueVersion('3.2.8')
+vueVersion.value = '3.2.8'
+// production mode is enabled
+productionMode.value = true
 </script>
@@ -88,0 +97,0 @@

No alert changes

Improved metrics

Total package byte prevSize

18395250

Lines of code

70261

increased by0.01%

Number of lines in readme file

99

increased by10%

No dependency changes