feat: Gastby 5 RSC support modifications

.gitignore

@@ -3,4 +3,5 @@ node_modules
 dist
 dist-v2
 lib/cypress/videos
-.next
+.next
+tsconfig.tsbuildinfo

lib/index.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { useStoryblokBridge as useSbBridge } from "@storyblok/react";
+import { useStoryblokBridge as useSbBridge } from "@storyblok/react/rsc";
 export {
   useStoryblokBridge,
   storyblokInit,
@@ -9,24 +9,13 @@ export {
   useStoryblokApi,
   getStoryblokApi,
   renderRichText,
-} from "@storyblok/react";
+} from "@storyblok/react/rsc";
+export { default as StoryblokStory } from "@storyblok/react/story";
 
 import type {
   SbGatsbyStory,
   StoryblokBridgeConfigV2
 } from './types'
 
-export function useStoryblokState(originalStory: SbGatsbyStory,
-  bridgeOptions: StoryblokBridgeConfigV2 = {}) {
-  if (typeof originalStory.content === "string") originalStory.content = JSON.parse(originalStory.content);
-
-  let [story, setStory] = useState(originalStory);
-  useEffect(() => {
-    useSbBridge(story.internalId, (newStory: SbGatsbyStory) => setStory(newStory), bridgeOptions);
-  }, []);
-
-  return story;
-}
-
 // Reexport all types so users can have access to them
 export * from "./types";

lib/package.json

@@ -23,7 +23,7 @@
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/react": "^2.1.4",
+    "@storyblok/react": "^2.1.7",
     "gatsby-source-filesystem": "^5.7.0",
     "isomorphic-fetch": "^3.0.0",
     "json-stringify-safe": "^5.0.1"

lib/tsconfig.json

@@ -1,9 +1,10 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
     "isolatedModules": true,
     "target": "ESNext",
     "strict": false,
+    "module": "esnext",
+    "moduleResolution": "bundler",
     "esModuleInterop": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
@@ -21,4 +22,33 @@
   "exclude": [
     "node_modules"
   ]
-}
+}
+// {
+//   "compilerOptions": {
+//     "target": "es5",
+//     "lib": [
+//       "dom",
+//       "dom.iterable",
+//       "esnext"
+//     ],
+//     "allowJs": true,
+//     "skipLibCheck": true,
+//     "strict": true,
+//     "forceConsistentCasingInFileNames": true,
+//     "noEmit": true,
+//     "esModuleInterop": true,
+//     "module": "esnext",
+//     "moduleResolution": "nodenext",
+//     "resolveJsonModule": true,
+//     "isolatedModules": true,
+//     "jsx": "preserve",
+//     "incremental": true
+//   },
+//   "include": [
+//     "**/*.ts",
+//     "**/*.tsx"
+//   ],
+//   "exclude": [
+//     "node_modules"
+//   ]
+// }

lib/types.ts

@@ -1,9 +1,10 @@
-import type { ISbStoryData, StoryblokComponentType } from "@storyblok/react";
+import type { ISbStoryData, StoryblokComponentType } from "@storyblok/react/rsc";
 
 export interface SbGatsbyStory extends ISbStoryData<StoryblokComponentType<string> & { [index: string]: any; }> {
   internalId: number
 }
 
+
 export type {
   ISbConfig,
   ISbCache,
@@ -33,4 +34,4 @@ export type {
   StoryblokBridgeV2,
   StoryblokClient,
   StoryblokComponentType,
-} from "@storyblok/react";
+} from "@storyblok/react/rsc";

playground/package.json

@@ -25,6 +25,6 @@
     "@types/node": "^18.14.0",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
-    "typescript": "^4.9.5"
+    "typescript": "^5.1.6"
   }
 }

playground/src/components/Feature.jsx

@@ -1,11 +1,8 @@
-"use server"// TRY OUT THIS LINE TO SEE IF IT FAILS
-import React, { useEffect } from "react";
+import React from "react";
 import { storyblokEditable } from "gatsby-source-storyblok";
 
 const Feature = ({ blok }) => {
-  useEffect(() => {
-    console.log("Feature component mounted"); // THIS SHOULD FAIL OR BE IGNORED
-  });
+
   return (
     <div className="py-2" {...storyblokEditable(blok)} key={blok._uid} data-test="feature">
       <h2 className="text-lg">{blok.name}</h2>

playground/src/components/Page.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { storyblokEditable, StoryblokComponent } from "gatsby-source-storyblok";
+
+const Page = ({ blok }) => (
+  <main {...storyblokEditable(blok)}>
+    {blok.body.map((nestedBlok) => (
+      <StoryblokComponent blok={nestedBlok} key={nestedBlok._uid} />
+    ))}
+  </main>
+);
+
+export default Page;

playground/src/components/layout.jsx

@@ -4,12 +4,13 @@
  *
  * See: https://www.gatsbyjs.com/docs/use-static-query/
  */
-
-import * as React from "react"
+"use client";
+import React, { useEffect } from "react"
 import PropTypes from "prop-types"
 import { storyblokInit, apiPlugin } from "gatsby-source-storyblok"
 import Teaser from './Teaser'
 import Grid from './Grid'
+import Page from './Page'
 import Feature from './Feature'
 import configuration from '../../gatsby-config'
 
@@ -21,7 +22,8 @@ storyblokInit({
   components: {
     teaser: Teaser,
     grid: Grid,
-    feature: Feature
+    feature: Feature,
+    page: Page
   }
 });
 

playground/src/pages/index.tsx

@@ -1,20 +1,16 @@
 import * as React from "react"
 import { graphql } from "gatsby"
 
-import { StoryblokComponent, storyblokEditable, useStoryblokState } from "gatsby-source-storyblok"
+import { StoryblokComponent, storyblokEditable, useStoryblokState, StoryblokStory } from "gatsby-source-storyblok"
 
 import Layout from "../components/layout"
 
 const IndexPage = ({ data }) => {
-  let story = useStoryblokState(data.storyblokEntry)
-  const components = story.content.body.map(blok => (<StoryblokComponent blok={blok} key={blok._uid} />))
+  if (typeof data.storyblokEntry.content === "string") data.storyblokEntry.content = JSON.parse(data.storyblokEntry.content);
 
   return (
     <Layout>
-      <div {...storyblokEditable(story.content)}>
-        <h1>{story.name}</h1>
-        {components}
-      </div>
+      <StoryblokStory story={data.storyblokEntry} />
     </Layout>
   )
 }