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>