Merge pull request #327 from storyblok/feature/gatsby5

Gatsby 5 support feature

.gitignore

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

README.md

@@ -44,7 +44,8 @@ npm install gatsby-source-storyblok
 
 | Version to install                                                                                                              | Support                                              |
 | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
-| Latest `gatsby-source-storyblok`                                                                                                    | Modern browsers + Node 16+. [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) is implemented.                           |
+| Latest `gatsby-source-storyblok`                                                                                                    | Modern browsers + Node 16+. [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) is implemented. Supports Gatsby 5 (React Server Components)                            |
+| [Version 5](https://github.com/storyblok/gatsby-source-storyblok/tree/v5.0.0) `gatsby-source-storyblok@5 `                               | Modern browsers + Node 16+. [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch) is implemented.
 | [Version 4](https://github.com/storyblok/gatsby-source-storyblok/tree/v4.2.1) `gatsby-source-storyblok@4`                               | Node 14 and lower Node with no Fetch API support
 
 ### Initialization

lib/cypress.config.ts → lib/cypress.config.js

@@ -1,6 +1,7 @@
-import { defineConfig } from 'cypress'
 
-export default defineConfig({
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.

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

@@ -1,6 +1,6 @@
 {
   "name": "gatsby-source-storyblok",
-  "version": "4.0.0",
+  "version": "1.0.0",
   "description": "SDK to integrate Storyblok into your project using Gatsby.",
   "main": "./dist/gatsby-source-storyblok.js",
   "module": "./dist/gatsby-source-storyblok.mjs",
@@ -17,21 +17,20 @@
     "test:unit": "jest __tests__",
     "test:e2e": "start-server-and-test cy:playground http-get://localhost:8000/ cy:run",
     "test:e2e-watch": "start-server-and-test cy:playground http-get://localhost:8000/ cy:open",
-    "cy:playground": "npm run develop --prefix ../playground-test",
+    "cy:playground": "npm run develop --prefix ../playground",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "prepublishOnly": "npm run build && cp ../README.md ./"
   },
   "dependencies": {
-    "@storyblok/react": "^2.1.7",
-    "gatsby-source-filesystem": "^4.25.0",
+    "@storyblok/react": "^2.1.9",
+    "gatsby-source-filesystem": "^5.7.0",
     "isomorphic-fetch": "^3.0.0",
     "json-stringify-safe": "^5.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
-    "@cypress/react": "^7.0.3",
     "@cypress/vite-dev-server": "^5.0.5",
     "@tsconfig/recommended": "^1.0.2",
     "@vitejs/plugin-react": "^4.0.1",
@@ -40,14 +39,14 @@
     "eslint-plugin-cypress": "^2.13.3",
     "eslint-plugin-jest": "^27.2.2",
     "jest": "^29.5.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "start-server-and-test": "^2.0.0",
     "typescript": "^5.1.3",
     "vite": "^4.3.9"
   },
   "peerDependencies": {
-    "gatsby": "^3.0.0 || ^4.0.0"
+    "gatsby": "^5.0.0"
   },
   "babel": {
     "presets": [

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,
@@ -16,7 +17,7 @@
   "display": "Recommended",
   "include": [
     "./index.ts",
-    "./types.ts",
+    "./types.ts"
   ],
   "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";