@buildinams/react-storyblok - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

dist/client/getBlocksRenderer/index.js

@@ -16,17 +16,4 @@ "use strict";
 const jsx_runtime_1 = require("react/jsx-runtime");
+const useStoryblokPreviewSpread_1 = require("../useStoryblokPreviewSpread");
 /**
- * Gives the required HTML attributes to mark a section in Storyblok.
- *
- * @param editable - Value from Storyblok to mark the section as editable.
- */
-const useEditableContentAttributes = (editable) => {
-    if (!editable)
-        return {};
-    const options = JSON.parse(editable.replace(/^<!--#storyblok#/, "").replace(/-->$/, ""));
-    return {
-        "data-blok-c": JSON.stringify(options),
-        "data-blok-uid": `${options.id}-${options.uid}`,
-    };
-};
-/**
  * Generates a component that uses key / value lookup to render components and provides them with the `containerSpread` for Storyblok editable.
@@ -88,6 +75,6 @@ *
                 return null;
-            const { _uid, _editable } = item, itemRest = __rest(item, ["_uid", "_editable"]);
-            const containerSpread = useEditableContentAttributes(_editable);
+            const { _editable } = item, itemRest = __rest(item, ["_editable"]);
+            const containerSpread = (0, useStoryblokPreviewSpread_1.useStoryblokPreviewSpread)(_editable);
             const additionalItemProps = propsPerItem === null || propsPerItem === void 0 ? void 0 : propsPerItem(item, index);
-            return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ index: index, containerSpread: containerSpread }, propsRest, itemRest, additionalItemProps), _uid));
+            return ((0, jsx_runtime_1.jsx)(Component, Object.assign({ index: index, containerSpread: containerSpread }, propsRest, itemRest, additionalItemProps), item.component));
         });
@@ -94,0 +81,0 @@ };

dist/client/index.d.ts

 export { getBlocksRenderer } from "./getBlocksRenderer";
+export { useStoryblokPreviewSpread } from "./useStoryblokPreviewSpread";
 export { withStoryblokPreviewHOC } from "./withStoryblokPreviewHOC";

dist/client/index.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.withStoryblokPreviewHOC = exports.getBlocksRenderer = void 0;
+exports.withStoryblokPreviewHOC = exports.useStoryblokPreviewSpread = exports.getBlocksRenderer = void 0;
 var getBlocksRenderer_1 = require("./getBlocksRenderer");
 Object.defineProperty(exports, "getBlocksRenderer", { enumerable: true, get: function () { return getBlocksRenderer_1.getBlocksRenderer; } });
+var useStoryblokPreviewSpread_1 = require("./useStoryblokPreviewSpread");
+Object.defineProperty(exports, "useStoryblokPreviewSpread", { enumerable: true, get: function () { return useStoryblokPreviewSpread_1.useStoryblokPreviewSpread; } });
 var withStoryblokPreviewHOC_1 = require("./withStoryblokPreviewHOC");
 Object.defineProperty(exports, "withStoryblokPreviewHOC", { enumerable: true, get: function () { return withStoryblokPreviewHOC_1.withStoryblokPreviewHOC; } });

dist/client/withStoryblokPreviewHOC/index.js

@@ -57,8 +57,5 @@ "use strict";
             return;
-        let connected = true;
         const connectToStoryblok = () => __awaiter(void 0, void 0, void 0, function* () {
             const { storyblokBridge } = yield Promise.resolve().then(() => __importStar(require("./bridge")));
             storyblokBridge(data.id, resolveRelations, (data) => {
-                if (!connected)
-                    return;
                 setAdaptedData(storyBlokAdaptor.adaptData(data));
@@ -68,5 +65,2 @@ });
         connectToStoryblok();
-        return () => {
-            connected = false;
-        };
     }, [data.id, isPreview, resolveRelations, storyBlokAdaptor]);
@@ -73,0 +67,0 @@ return adaptedData;

dist/types.d.ts

@@ -108,3 +108,3 @@ import { ISbCache, ISbComponentType, ISbStoriesParams, ISbStoryData, ISbStoryParams } from "storyblok-js-client";
 }
-export interface EditableContentAttributes {
+export interface StoryblokPreviewSpreadAttributes {
     "data-blok-c"?: string;
@@ -111,0 +111,0 @@ "data-blok-uid"?: string;

package.json

 {
   "name": "@buildinams/react-storyblok",
   "description": "Opinionated Reactjs Storyblok wrapper",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "license": "MIT",
@@ -6,0 +6,0 @@ "author": "Build in Amsterdam <[e-mail]> (https://www.buildinamsterdam.com/)",

README.md

@@ -285,3 +285,3 @@ # react-storyblok
 
-Within this renderer there is a hook that will provide all props to make an HTML element show up as the editable element. We still need to attach this to whichever element you want to use in your block. This can be done like so:
+Under the hood the renderer uses the `useStoryblokPreviewSpread` hook to provide all the props to make an HTML element show up as the editable element. We still need to attach this to whichever element you want to use in your block. This can be done like so:
 
@@ -329,2 +329,16 @@ ```js
 
+### Using The `useStoryblokPreviewSpread` Hook
+
+If you want to use the `useStoryblokPreviewSpread` hook directly you can do so. This is useful if you want to use the spread on a custom component. For example:
+
+```jsx
+const FooBlock = ({ title, _editable }) => {
+  const previewSpread = useStoryblokPreviewSpread(_editable);
+
+  return <h1 {...previewSpread}>{title}</h1>;
+};
+```
+
+Now in the CMS you'll see the component highlighted when you hover over it.
+
 ## Requirements
@@ -331,0 +345,0 @@

src/client/index.ts

 export { getBlocksRenderer } from "./getBlocksRenderer";
+export { useStoryblokPreviewSpread } from "./useStoryblokPreviewSpread";
 export { withStoryblokPreviewHOC } from "./withStoryblokPreviewHOC";

src/types.ts

@@ -190,3 +190,3 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
 
-export interface EditableContentAttributes {
+export interface StoryblokPreviewSpreadAttributes {
   "data-blok-c"?: string;
@@ -193,0 +193,0 @@ "data-blok-uid"?: string;

No alert changes

Improved metrics

Total package byte prevSize

105971

increased by1.75%

Number of package files

58

increased by5.45%

Lines of code

2010

increased by0.45%

Number of lines in readme file

356

increased by4.09%

No dependency changes