Skip to content

v4.0.0

Compare
Choose a tag to compare
@github-actions github-actions released this 10 Feb 09:03
· 24 commits to main since this release
v4.0.0
9fd15ba

Notable Changes

  • ReplStore is an interface instead of a class. Replace new ReplStore() with useStore().
  • sfcOptions is removed from props, and renamed options to sfcOptions in store.
  • Removed store.state property and merged it as the top level of Store.
  • Moved serializedState as the second argument of useStore.
  • Removed StoreOptions and merged to StoreState.
  • Removed customElement option, now get it from sfcOptions.script.customElement.
  • defaultVueRuntimeURL, defaultVueRuntimeProdURL, defaultVueServerRendererURL is removed from useStore, use useVueImportMap instead.

Please take a look at d01bf55 for full changes.

Migration Guide

Please read Advanced Usage first.

ReplStore Usage

  • Replace new ReplStore() with useStore().

  • The first parameter accepted by useStore is a Ref Map; please use ref to wrap the options.

     const sfcOptions = ref({})
     useStore({ sfcOptions })
  • Methods like store.setVueVersion and store.toggleProduction have been removed. Please manually pass the ref and directly assign values to it.

    store.vueVersion = '3.4.6'
  • Moved serializedState as the second argument of useStore.

     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,
     })

See Usage Diff


   🚨 Breaking Changes

   🚀 Features

   🐞 Bug Fixes

    View changes on GitHub