chore: update docs for v4

README.md

@@ -4,7 +4,7 @@ Vue SFC REPL as a Vue 3 component.
 
 ## Basic Usage
 
-**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.**
 
 ### With CodeMirror Editor
 
@@ -46,41 +46,42 @@ Customize the behavior of the REPL by manually initializing the store.
 
 ```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'
 
 // retrieve some configuration options from the URL
 const query = new URLSearchParams(location.search)
 
-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 } = 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'
 </script>
 
 <template>