@contentful/live-preview - npm Package Compare versions

Comparing version 1.5.0 to 1.6.0

dist/graphql/assets.d.ts

 import { AssetProps } from 'contentful-management/types';
-import { SysProps } from '../types';
+import { EntryReferenceMap, SysProps } from '../types';
 /**
@@ -13,2 +13,2 @@ * Updates GraphQL response data based on CMA Asset object
     sys: SysProps;
-}, update: AssetProps, locale: string): Record<string, unknown>;
+}, update: AssetProps, locale: string, entityReferenceMap: EntryReferenceMap): Record<string, unknown>;

dist/graphql/entries.d.ts

 import { ContentTypeProps, EntryProps } from 'contentful-management/types';
-import { SysProps } from '../types';
+import { SysProps, EntryReferenceMap, Entity } from '../types';
 /**
@@ -7,11 +7,11 @@ * Updates GraphQL response data based on CMA entry object
  * @param contentType ContentTypeProps
- * @param data Record<string, unknown> - The GraphQL response to be updated
+ * @param data Entity - The GraphQL response to be updated
  * @param update EntryProps - CMA entry object containing the update
  * @param locale string - Locale code
- * @returns Record<string, unknown> - Updated GraphQL response data
+ * @returns Entity - Updated GraphQL response data
  */
-export declare function updateEntry(contentType: ContentTypeProps, data: Record<string, unknown> & {
+export declare function updateEntry(contentType: ContentTypeProps, data: Entity & {
     sys: SysProps;
-}, update: EntryProps, locale: string): Record<string, unknown> & {
+}, update: EntryProps, locale: string, entityReferenceMap: EntryReferenceMap): Entity & {
     sys: SysProps;
 };

dist/index.js

@@ -1,4 +0,5 @@
-import { C as r } from "./index-4579a1d3.js";
+import { C as r } from "./index-d93c4f0e.js";
 export {
   r as ContentfulLivePreview
 };
+//# sourceMappingURL=index.js.map

dist/live-updates.d.ts

@@ -13,5 +13,5 @@ import { Argument, SubscribeCallback } from './types';
     /** Receives the data from the message event handler and calls the subscriptions */
-    receiveMessage({ entity, contentType }: Record<string, unknown>): void;
+    receiveMessage({ entity, contentType, entityReferenceMap, }: Record<string, unknown>): void;
     /** Subscribe to data changes from the Editor, returns a function to unsubscribe */
     subscribe(data: Argument, locale: string, cb: SubscribeCallback): VoidFunction;
 }

dist/react.js

 import * as f from "react";
 import { useState as p } from "react";
-import { C as g, d as y } from "./index-4579a1d3.js";
+import { C as g, d as y } from "./index-d93c4f0e.js";
 var s = Object.prototype.hasOwnProperty;
@@ -86,1 +86,2 @@ function c(e, t, n) {
 };
+//# sourceMappingURL=react.js.map

dist/types.d.ts

@@ -0,1 +1,2 @@
+import type { AssetProps, EntryProps } from 'contentful-management';
 export type LivePreviewProps = {
@@ -20,2 +21,10 @@ fieldId: string | null | undefined;
     sys: SysProps;
+    __typename?: string;
 }
+export declare const enum MessageAction {
+    IFRAME_CONNECTED = "IFRAME_CONNECTED",
+    TAGGED_FIELD_CLICKED = "TAGGED_FIELD_CLICKED",
+    ENTITY_NOT_KNOWN = "ENTITY_NOT_KNOWN"
+}
+export declare class EntryReferenceMap extends Map<string, EntryProps | AssetProps> {
+}

dist/utils.d.ts

@@ -0,1 +1,2 @@
+import type { MessageAction } from './types';
 /**
@@ -5,3 +6,3 @@ * Sends the given message to the editor
  */
-export declare function sendMessageToEditor(data: Record<string, unknown>): void;
+export declare function sendMessageToEditor(action: MessageAction, data: Record<string, unknown>): void;
 type Callback = (...args: any[]) => void;
@@ -8,0 +9,0 @@ type DebouncedFunction<T extends Callback> = (...args: Parameters<T>) => void;

package.json

 {
   "name": "@contentful/live-preview",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "author": "Contentful GmbH",
@@ -5,0 +5,0 @@ "license": "MIT",

README.md

@@ -18,3 +18,3 @@ # @contentful/live-preview
 
-```
+```bash
 yarn add @contentful/live-preview
@@ -25,3 +25,3 @@ ```
 
-```
+```bash
 npm install @contentful/live-preview
@@ -36,3 +36,3 @@ ```
 
-```
+```jsx
 import { ContentfulLivePreview } from '@contentful/live-preview';
@@ -51,3 +51,3 @@
 
-```
+```jsx
 import { ContentfulLivePreview } from '@contentful/live-preview';
@@ -67,9 +67,101 @@ import '@contentful/live-preview/dist/style.css';
 ```tsx
-import { useContentfulLiveUpdates } from "@contentful/live-preview/dist/react"
+import { useContentfulLiveUpdates } from '@contentful/live-preview/dist/react';
 
 // ...
-const updated = useContentfulLiveUpdates(originalData, locale)
+const updated = useContentfulLiveUpdates(originalData, locale);
 // ...
 ```
 
+### Integrating with Gatsby
+
+To use the Contentful Live Preview SDK with Gatsby, you can start with the [gatsby starter contentful homepage](https://www.gatsbyjs.com/starters/gatsbyjs/gatsby-starter-contentful-homepage)
+
+1. Add the @contentful/live-preview package to your Gatsby project by running one of the following commands:
+
+```bash
+yarn add @contentful/live-preview
+```
+
+or
+
+```bash
+npm install @contentful/live-preview
+```
+
+2. In your gatsby-browser.js file, import the live preview styles and initialize the SDK:
+
+```tsx
+import '@contentful/live-preview/dist/style.css';
+import { ContentfulLivePreview } from '@contentful/live-preview';
+
+ContentfulLivePreview.init();
+```
+
+3. In order to tag fields and use live updates, you need to add the contentful_id property to the GraphQL schema. For example, to extend the HomepageHero interface:
+
+```graphql
+interface HomepageHero implements Node & HomepageBlock {
+  id: ID!
+  contentful_id: String! # add this property
+  heading: String!
+  text: String
+}
+
+type ContentfulHomepageHero implements Node & HomepageHero & HomepageBlock @dontInfer {
+  id: ID!
+  contentful_id: String! # and also here
+  heading: String!
+  text: String
+}
+```
+
+4. Update the corresponding component to load the contentful_id property:
+
+```jsx
+export const query = graphql`
+  fragment HomepageHeroContent on HomepageHero {
+    __typename
+    id
+    contentful_id # add this property
+    heading
+    text
+  }
+`;
+```
+
+5. Add tagging and live updates to your component:
+
+```jsx
+export default function Hero({ contentful_id, ...props }) {
+  // Live updates for this component
+  const data = useContentfulLiveUpdates(
+    {
+      ...props,
+      sys: { id: props.contentful_id },
+    },
+    locale
+  );
+
+  return (
+    <Section>
+      <Heading as="h1">{data.heading}</Heading>
+      {/* Text is tagged and can be clicked to open the editor */}
+      <Text
+        as="p"
+        {...ContentfulLivePreview.getProps({
+          entryId: contentful_id,
+          fieldId: 'text',
+          locale,
+        })}>
+        {data.text}
+      </Text>
+    </Section>
+  );
+}
+```
+
+6. In Contentful, define the preview environment and configure the preview URL for your Gatsby site. Once you open an entry with a configured preview URL, you can use the Live Preview and all its features.
+
+That's it! You should now be able to use the Contentful Live Preview SDK with Gatsby.
+
 ## Code of Conduct
@@ -76,0 +168,0 @@

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

107644

239.68%

Number of package files

27

28.57%

Lines of code

540

14.16%

Number of lines in readme file

179

105.75%

No dependency changes