Use the new content saved events for live preview

samples/music-festival-vue-decoupled/README.md

@@ -37,7 +37,7 @@ This project uses:
 
 ### On-Page Editing helpers
 
-- [epiBootstrap.js](frontend/src/epiBootstrap.js): registers the `contentSaved` and `epiReady` message handlers that updates the vuex store.
+- [livePreview.js](frontend/src/livePreview.js): subscribes to `contentSaved` events to update the vuex store which enabled live preview of content.
 - [epiEdit.js](frontend/src/directives/epiEdit.js): a directive that can be added on components to make them optionally editable (e.g. `<span v-epi-edit="Name">`), through `isEditable` and `epiDisableEditing`.
 - [EpiProperty.vue](frontend/src/components/EpiProperty.vue): a component that renders a button to edit a property (e.g. `<epi-property property-name="Name">`).
 

samples/music-festival-vue-decoupled/backend/MusicFestival.Backend.csproj

@@ -8,7 +8,7 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="EPiServer.CMS" Version="12.32.5" />
+    <PackageReference Include="EPiServer.CMS" Version="12.33.1" />
     <PackageReference Include="EPiServer.ContentDeliveryApi.Cms" Version="3.12.2" />
   </ItemGroup>
 

samples/music-festival-vue-decoupled/frontend/src/livePreview.js

@@ -0,0 +1,15 @@
+/*
+ * Sets up subscription to the `contentSaved` event that will update
+ * the model in the store during editing.
+ */
+
+import store from "@/store";
+import { parsePreviewToken } from "@/urlHelpers";
+import { UPDATE_PREVIEW_TOKEN } from "@/store/modules/epiContext";
+import { UPDATE_MODEL_BY_URL } from "@/store/modules/epiDataModel";
+
+window.addEventListener("optimizely:cms:contentSaved", (event) => {
+  var parsed = parsePreviewToken(event.detail.previewUrl);
+  store.commit(UPDATE_PREVIEW_TOKEN, parsed.previewToken);
+  store.dispatch(UPDATE_MODEL_BY_URL, parsed.url);
+});

samples/music-festival-vue-decoupled/frontend/src/main.js

@@ -1,33 +1,30 @@
-import { createApp } from 'vue';
-import App from './App.vue';
-import EpiEdit from './directives/epiEdit';
-import router from './router';
-import store from './store';
-import './epiBootstrap';
-import './assets/styles/main.less';
+import { createApp } from "vue";
+import App from "./App.vue";
+import EpiEdit from "./directives/epiEdit";
+import router from "./router";
+import store from "./store";
+import "./livePreview";
+import "./assets/styles/main.less";
 
-const app = createApp(App)
-  .directive('epi-edit', EpiEdit)
-  .use(store)
-  .use(router);
+const app = createApp(App).directive("epi-edit", EpiEdit).use(store).use(router);
 
 // Register all Optimizely view components globally. This requires webpack!
 // Otherwise we need to register all components manually here in main.js.
-const requireComponent = require.context('./views', true, /.vue$/);
+const requireComponent = require.context("./views", true, /.vue$/);
 
 requireComponent.keys().forEach((fileName) => {
   const componentConfig = requireComponent(fileName);
 
   // Gets the component name regardless folder depth
   const componentName = fileName
-    .split('/')
+    .split("/")
     .pop()
-    .replace(/\.\w+$/, '');
+    .replace(/\.\w+$/, "");
 
   // Look for the component options on `.default`, which will
   // exist if the component was exported with `export default`,
   // otherwise fall back to module's root.
   app.component(componentName, componentConfig.default || componentConfig);
 });
 
-app.mount('#app');
+app.mount("#app");