feat: debug component shows nesting

.storybook/preview.ts

@@ -17,6 +17,8 @@ const preview: Preview = {
         space: "621006g5gybw",
         accessToken: "UaqOlFCYE6lFHd_Cmvp2xD__UBceBcKA4j8KkFoCdac",
         isPreview: true,
+        livePreview: true,
+        debugMode: true,
       }
     }
   },

src/LivePreviewRenderer.tsx

@@ -0,0 +1,51 @@
+import {ContentfulLivePreview} from "@contentful/live-preview";
+import {ContentfulLivePreviewProvider, useContentfulLiveUpdates} from "@contentful/live-preview/react";
+import React from "react";
+import {PartialStoryFn as StoryFunction, Renderer, StoryContext} from "@storybook/types";
+
+type LiveRendererProps = {
+  StoryFn: StoryFunction<Renderer>,
+  context: StoryContext<Renderer>
+  initialContent: any
+  locale: string
+  debugMode: boolean
+}
+
+export function LivePreviewRenderer(
+  {
+    StoryFn,
+    context,
+    initialContent,
+    locale,
+    debugMode
+  }: LiveRendererProps) {
+
+  if (!ContentfulLivePreview.initialized) {
+    ContentfulLivePreview.init({
+      locale,
+      debugMode,
+      enableLiveUpdates: true,
+      enableInspectorMode: true,
+    });
+  }
+
+  function renderStory() {
+    const content = useContentfulLiveUpdates(initialContent);
+    context.args = {
+      ...context.args,
+      ...content.fields,
+      entry: content,
+      entryId: content.sys.id
+    }
+
+    console.log({context})
+
+    return <>{StoryFn(context)}</>;
+  }
+
+  return (
+    <ContentfulLivePreviewProvider locale={locale}>
+      {renderStory()}
+    </ContentfulLivePreviewProvider>
+  )
+}

src/preview.ts

@@ -26,8 +26,9 @@ const preview: ProjectAnnotations<Renderer> = {
       // accessToken: "accessToken",
       environment: "master",
       locale: "en-US",
-      // livePreview: true,
-      // debugMode: false,
+      livePreview: true,
+      isPreview: true,
+      debugMode: false,
     },
   },
 };

src/stories/ContentfulDebugComponent.tsx

@@ -3,7 +3,9 @@ import {useContentfulInspectorMode} from "@contentful/live-preview/react";
 
 type AnyEntry =
   {
-    entryId: string
+    entryId: string,
+    depth: number,
+    breadcrumbs: string[],
   }
   & Record<string, any>;
 
@@ -14,15 +16,44 @@ type AnyEntry =
   * - entry: The entry object
   * - <fieldId>: value
  */
-export function ContentfulDebugComponent({entryId, ...fields}: AnyEntry) {
+export function ContentfulDebugComponent({entryId, depth = 0, breadcrumbs = [], ...fields}: AnyEntry) {
   // For this example, we don't need the entry as full object
   delete fields.entry;
   const inspectorProps = useContentfulInspectorMode({entryId});
   const fieldComponents = Object.entries(fields).map(([key, value]) => {
+
+    if (!value) {
+      return null;
+    }
+
+    if (Array.isArray(value)) {
+      return value.map((v, i) => {
+        if (typeof v === 'object' && v.sys) {
+          return <ContentfulDebugComponent
+            key={v.sys.id} depth={depth + 1}
+            entryId={v.sys.id} {...v.fields}
+            breadcrumbs={[...breadcrumbs, key]}
+          />
+        }
+      })
+    }
+
+    if (value.type === 'Entry') {
+      return <ContentfulDebugComponent
+        key={key} entryId={value.sys.id}
+        depth={depth + 1}
+        breadcrumbs={[...breadcrumbs, key]}
+        {...value.fields}
+      />
+    }
+
     return (
-      <pre key={key} {...inspectorProps({fieldId: key})}>
-      {JSON.stringify(value, null, 2)}
-    </pre>
+      <div key={key}  style={{margin: 10, paddingLeft: depth * 20}}>
+        <h5>{[...breadcrumbs, key].join(' > ')}</h5>
+        <pre style={{padding: 10, backgroundColor: '#eee'}} {...inspectorProps({fieldId: key})}>
+          {JSON.stringify(value, null, 2)}
+        </pre>
+      </div>
     );
   })
   return (

src/withContentfulPreview.tsx

@@ -2,6 +2,8 @@ import {PartialStoryFn as StoryFunction, Renderer, StoryContext} from "@storyboo
 import {PARAM_KEY} from "./constants";
 import {useContentful} from "./useContentful";
 import {mergeParam} from "./utils";
+import React from "react";
+import {LivePreviewRenderer} from "./LivePreviewRenderer";
 
 export const withContentfulPreview = (
   StoryFn: StoryFunction<Renderer>,
@@ -14,10 +16,14 @@ export const withContentfulPreview = (
   const space = mergeParam([contentfulPreview.space, globalContentfulPreview.space])
   const accessToken = mergeParam([contentfulPreview.accessToken, globalContentfulPreview.accessToken])
   const entryId = searchParams.get('entryId') || contentfulPreview.entryId
-  const isPreview = mergeParam([contentfulPreview.isPreview, globalContentfulPreview.isPreview])
   const locale = mergeParam([searchParams.get('locale'), contentfulPreview.locale, globalContentfulPreview.locale], 'en-US')
   const environment = mergeParam([searchParams.get('environment'), contentfulPreview.environment, globalContentfulPreview.environment], 'master')
 
+  // Neither merge Params nor this is working
+  const livePreview = contentfulPreview.livePreview || globalContentfulPreview.livePreview
+  const isPreview = contentfulPreview.isPreview || globalContentfulPreview.isPreview
+  const debugMode = contentfulPreview.debugMode || globalContentfulPreview.debugMode
+
   const params = {
     space,
     accessToken,
@@ -26,7 +32,7 @@ export const withContentfulPreview = (
     locale
   }
 
-  // console.log({context, globalContentfulPreview, contentfulPreview, params, entryId})
+  console.log({context, globalContentfulPreview, contentfulPreview, params, entryId, livePreview, debugMode, isPreview})
   const {content, isLoading} = useContentful(entryId, params);
 
   if (content) {
@@ -40,5 +46,23 @@ export const withContentfulPreview = (
   if (isLoading) {
     return null
   }
-  return StoryFn(context);
+  console.log('Live preview enabled: ', livePreview )
+
+  if (livePreview) {
+    return (
+      <LivePreviewRenderer
+        StoryFn={StoryFn}
+        context={context}
+        initialContent={content}
+        locale={locale}
+        debugMode={debugMode}
+      />
+    )
+  }
+
+  return (
+    <>
+      {StoryFn(context)}
+    </>
+  );
 }