[NextJS] Fix dev mode fast refresh in Experience Editor (#532)

packages/sitecore-jss-nextjs/src/index.ts

@@ -47,6 +47,8 @@ export {
   useComponentProps,
 } from './components/ComponentPropsContext';
 
+export { handleExperienceEditorFastRefresh } from './utils';
+
 export { EditingData, EditingPreviewData, isEditingData } from './sharedTypes/editing-data';
 export {
   EditingDataService,

packages/sitecore-jss-nextjs/src/utils.ts

@@ -1,4 +1,5 @@
 import chalk from 'chalk';
+import { isExperienceEditorActive, resetExperienceEditorChromes } from '@sitecore-jss/sitecore-jss';
 
 export const getPublicUrl = (): string => {
   let url = process.env.PUBLIC_URL;
@@ -20,6 +21,44 @@ export const getPublicUrl = (): string => {
   return url.toString().replace(/\/$/, '');
 };
 
+/**
+ * Since Experience Editor does not support Fast Refresh:
+ * 1. Subscribe on events provided by webpack.
+ * 2. Reset experience editor chromes when build is finished
+ * @param {boolean} [forceReload] force page reload instead of reset chromes
+ * @default forceReload false
+ */
+export const handleExperienceEditorFastRefresh = (forceReload = false): void => {
+  if (isExperienceEditorActive()) {
+    const eventSource = new window.EventSource(`${getPublicUrl()}/_next/webpack-hmr`);
+
+    window.addEventListener('beforeunload', () => eventSource.close());
+
+    eventSource.onopen = () => console.log('[Experience Editor Fast Refresh Listener] Online');
+
+    eventSource.onmessage = (event) => {
+      if (event.data.indexOf('{') === -1) return; // heartbeat
+
+      const payload = JSON.parse(event.data);
+
+      console.debug(
+        `[Experience Editor Fast Refresh Listener] Saw event: ${JSON.stringify(payload)}`
+      );
+
+      if (payload.action !== 'built') return;
+
+      if (forceReload) return window.location.reload();
+
+      setTimeout(() => {
+        console.log(
+          '[Experience Editor HMR Listener] Experience Editor does not support Fast Refresh, reloading chromes...'
+        );
+        resetExperienceEditorChromes();
+      }, 500);
+    };
+  }
+};
+
 export const getJssEditingSecret = (): string => {
   const secret = process.env.JSS_EDITING_SECRET;
   if (!secret || secret.length === 0) {

samples/nextjs/src/pages/[[...path]].tsx

@@ -1,13 +1,23 @@
+import { useEffect } from 'react';
 import { GetStaticPaths, GetStaticProps } from 'next';
 import NotFound from 'components/NotFound';
 import Layout from 'components/Layout';
-import { SitecoreContext, ComponentPropsContext } from '@sitecore-jss/sitecore-jss-nextjs';
+import {
+  SitecoreContext,
+  ComponentPropsContext,
+  handleExperienceEditorFastRefresh,
+} from '@sitecore-jss/sitecore-jss-nextjs';
 import { StyleguideSitecoreContextValue } from 'lib/component-props';
 import { SitecorePageProps } from 'lib/page-props';
 import { sitecorePagePropsFactory } from 'lib/page-props-factory';
 import { componentFactory } from 'temp/componentFactory';
 
 const SitecorePage = ({ notFound, layoutData, componentProps }: SitecorePageProps): JSX.Element => {
+  useEffect(() => {
+    // Since Experience Editor does not support Fast Refresh need to refresh EE chromes after Fast Refresh finished
+    handleExperienceEditorFastRefresh();
+  }, []);
+
   if (notFound) {
     return <NotFound context={layoutData?.sitecore?.context} />;
   }