v4.0.0
Notable Changes
ReplStore
is an interface instead of a class. Replacenew ReplStore()
withuseStore()
.sfcOptions
is removed from props, and renamedoptions
tosfcOptions
in store.- Removed
store.state
property and merged it as the top level ofStore
. - Moved
serializedState
as the second argument ofuseStore
. - Removed
StoreOptions
and merged toStoreState
. - Removed
customElement
option, now get it fromsfcOptions.script.customElement
. defaultVueRuntimeURL
,defaultVueRuntimeProdURL
,defaultVueServerRendererURL
is removed fromuseStore
, useuseVueImportMap
instead.
Please take a look at d01bf55 for full changes.
Migration Guide
Please read Advanced Usage first.
ReplStore
Usage
-
Replace
new ReplStore()
withuseStore()
. -
The first parameter accepted by
useStore
is a Ref Map; please useref
to wrap the options.const sfcOptions = ref({}) useStore({ sfcOptions })
-
Methods like
store.setVueVersion
andstore.toggleProduction
have been removed. Please manually pass theref
and directly assign values to it.store.vueVersion = '3.4.6'
-
Moved
serializedState
as the second argument ofuseStore
.const store = useStore( {}, // initial state // initialize repl with previously serialized state location.hash, )
useVueImportMap
- The logic related to Vue versions has been abstracted to
useVueImportMap
.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 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', vueVersion: 'initial vue version' }) const store = useStore({ builtinImportMap, vueVersion, })
🚨 Breaking Changes
🚀 Features
🐞 Bug Fixes
- Don't re-create import map file - by @sxzz (9e6f0)
- Pass readonly in code mirror editor - by @sxzz (11001)