From b6293aa5aea11a238d4e2cc47dff8a076aadf2fa Mon Sep 17 00:00:00 2001 From: Edoardo Dusi Date: Mon, 7 Oct 2024 17:10:11 +0200 Subject: [PATCH] feat: refactor React Server Components support --- lib/common/client.ts | 2 + lib/package.json | 3 +- lib/rsc/common.ts | 46 +- lib/rsc/index.ts | 8 +- lib/rsc/live-edit-update-action.ts | 19 + lib/rsc/story-server-component.tsx | 39 ++ lib/rsc/story.tsx | 24 - lib/rsc/storyblok-live-editing.tsx | 29 ++ ...ent.tsx => storyblok-server-component.tsx} | 29 +- lib/vite.config.ts | 2 +- package-lock.json | 412 ++++++++++++++++-- playground-next13-live-editing/app/layout.tsx | 8 +- playground-next13-live-editing/app/page.tsx | 11 +- .../components/Page.tsx | 5 +- .../components/StoryblokProvider.tsx | 19 +- .../components/Teaser.tsx | 1 - .../lib/storyblok.ts | 12 +- playground-next13-rsc/app/layout.tsx | 14 - playground-next13-rsc/app/page.tsx | 6 +- playground-next13-rsc/components/Page.tsx | 4 +- playground-next13-rsc/lib/storyblok.ts | 10 +- playground-next13-rsc/tsconfig.json | 23 +- 22 files changed, 553 insertions(+), 173 deletions(-) create mode 100644 lib/rsc/live-edit-update-action.ts create mode 100644 lib/rsc/story-server-component.tsx delete mode 100644 lib/rsc/story.tsx create mode 100644 lib/rsc/storyblok-live-editing.tsx rename lib/rsc/{storyblok-component.tsx => storyblok-server-component.tsx} (59%) diff --git a/lib/common/client.ts b/lib/common/client.ts index 34532b03..77dd8fda 100644 --- a/lib/common/client.ts +++ b/lib/common/client.ts @@ -1,3 +1,5 @@ +"use client"; + import { useEffect, useState } from 'react'; import type { TUseStoryblokState } from '../types'; import { registerStoryblokBridge } from '@storyblok/js'; diff --git a/lib/package.json b/lib/package.json index 351a9593..387b05b1 100644 --- a/lib/package.json +++ b/lib/package.json @@ -57,7 +57,8 @@ "react-dom": "^17.0.0 || ^18.0.0" }, "dependencies": { - "@storyblok/js": "^3.1.1" + "@storyblok/js": "^3.1.1", + "next": "14.2.14" }, "devDependencies": { "@babel/core": "^7.25.2", diff --git a/lib/rsc/common.ts b/lib/rsc/common.ts index b909028e..fc45528e 100644 --- a/lib/rsc/common.ts +++ b/lib/rsc/common.ts @@ -1,20 +1,23 @@ -import { storyblokInit as sbInit } from "@storyblok/js"; - -import { +import { storyblokInit as sbInit } from '@storyblok/js'; +import type { + ISbStoryData, SbReactComponentsMap, SbReactSDKOptions, StoryblokClient, -} from "../types"; +} from '../types'; let storyblokApiInstance: StoryblokClient = null; -let componentsMap: SbReactComponentsMap = {}; +const componentsMap: Map = new Map(); let enableFallbackComponent: boolean = false; let customFallbackComponent: React.ElementType = null; +// Cache for storyblok stories to allow for live editing +globalThis.storyCache = new Map(); + export const useStoryblokApi = (): StoryblokClient => { if (!storyblokApiInstance) { console.error( - "You can't use getStoryblokApi if you're not loading apiPlugin." + 'You can\'t use getStoryblokApi if you\'re not loading apiPlugin.', ); } @@ -22,25 +25,25 @@ export const useStoryblokApi = (): StoryblokClient => { }; export const setComponents = (newComponentsMap: SbReactComponentsMap) => { - componentsMap = newComponentsMap; + Object.entries(newComponentsMap).forEach(([key, value]) => { + componentsMap.set(key, value); + }); return componentsMap; }; -export const getComponent = (componentKey: string) => { - if (!componentsMap[componentKey]) { +export const getComponent = (componentKey: string): React.ElementType | false => { + if (!componentsMap.has(componentKey)) { console.error(`Component ${componentKey} doesn't exist.`); return false; } - return componentsMap[componentKey]; + return componentsMap.get(componentKey); }; export const getEnableFallbackComponent = () => enableFallbackComponent; export const getCustomFallbackComponent = () => customFallbackComponent; -export const storyblokInit = ( - pluginOptions: SbReactSDKOptions = {} -): (() => StoryblokClient) => { +export const storyblokInit = (pluginOptions: SbReactSDKOptions = {},): (() => StoryblokClient) => { if (storyblokApiInstance) { return () => storyblokApiInstance; } @@ -48,23 +51,26 @@ export const storyblokInit = ( const { storyblokApi } = sbInit(pluginOptions); storyblokApiInstance = storyblokApi; - componentsMap = pluginOptions.components; + if (pluginOptions.components) { + setComponents(pluginOptions.components); + } enableFallbackComponent = pluginOptions.enableFallbackComponent; customFallbackComponent = pluginOptions.customFallbackComponent; return () => storyblokApi; }; -export { default as StoryblokComponent } from "./storyblok-component"; +export * from '../types'; +export { useStoryblokApi as getStoryblokApi }; +export { default as SbServerComponent } from './storyblok-server-component'; + export { - storyblokEditable, apiPlugin, loadStoryblokBridge, - useStoryblokBridge, registerStoryblokBridge, renderRichText, RichTextResolver, RichTextSchema, -} from "@storyblok/js"; - -export * from "../types"; + storyblokEditable, + useStoryblokBridge, +} from '@storyblok/js'; diff --git a/lib/rsc/index.ts b/lib/rsc/index.ts index 2e8e3a6b..1a7af969 100644 --- a/lib/rsc/index.ts +++ b/lib/rsc/index.ts @@ -1,4 +1,4 @@ -export * from "./common"; -export { default as StoryblokStory } from "./story"; -export { default as BridgeLoader } from "../bridge-loader"; -export { default as StoryblokBridgeLoader } from "../bridge-loader"; +export { default as BridgeLoader } from '../bridge-loader'; +export { default as StoryblokBridgeLoader } from '../bridge-loader'; +export * from './common'; +export { default as SbStoryServerComponent } from './story-server-component'; diff --git a/lib/rsc/live-edit-update-action.ts b/lib/rsc/live-edit-update-action.ts new file mode 100644 index 00000000..880b70ce --- /dev/null +++ b/lib/rsc/live-edit-update-action.ts @@ -0,0 +1,19 @@ +'use server'; + +export async function liveEditUpdateAction({ story, pathToRevalidate }) { + if (!story || !pathToRevalidate) { + console.error('liveEditUpdateAction: story or pathToRevalidate is not provided'); + return; + } + + globalThis.storyCache.set(story.uuid, story); + + if (process.env.NEXT_RUNTIME) { + import('next/cache').then(({ revalidatePath }) => { + console.log('Revalidating path:', pathToRevalidate); + revalidatePath(pathToRevalidate); + }).catch((error) => { + console.error('liveEditUpdateAction: error while revalidating path', error); + }); + } +} diff --git a/lib/rsc/story-server-component.tsx b/lib/rsc/story-server-component.tsx new file mode 100644 index 00000000..7189ccef --- /dev/null +++ b/lib/rsc/story-server-component.tsx @@ -0,0 +1,39 @@ +import React, { forwardRef } from 'react'; +import type { ISbStoryData, StoryblokBridgeConfigV2 } from '../types'; +import { SbServerComponent } from './common'; +import StoryblokLiveEditing from './storyblok-live-editing'; + +interface SbStoryServerComponentProps { + story: ISbStoryData; + bridgeOptions: StoryblokBridgeConfigV2; + [key: string]: unknown; +} + +const SbStoryServerComponent = forwardRef( + ({ story, bridgeOptions, ...restProps }, ref) => { + if (!story) { + console.error( + 'Please provide a \'story\' property to the SbStoryServerComponent', + ); + return null; + } + + if (!globalThis.storyCache.has(story.uuid)) { + globalThis.storyCache.set(story.uuid, story); + } else { + story = globalThis.storyCache.get(story.uuid); + } + if (typeof story.content === 'string') { + story.content = JSON.parse(story.content); + } + + return ( + <> + + + + ); + }, +); + +export default SbStoryServerComponent; diff --git a/lib/rsc/story.tsx b/lib/rsc/story.tsx deleted file mode 100644 index aed63e3a..00000000 --- a/lib/rsc/story.tsx +++ /dev/null @@ -1,24 +0,0 @@ -"use client"; - -import React, { forwardRef } from "react"; -import { useStoryblokState } from "../common/client"; -import { ISbStoryData, StoryblokBridgeConfigV2 } from "../types"; -import { StoryblokComponent } from "./common"; - -interface StoryblokStoryRSCProps { - story: ISbStoryData; - bridgeOptions: StoryblokBridgeConfigV2; - [key: string]: unknown; -} - -const StoryblokStory = forwardRef( - ({ story, bridgeOptions, ...restProps }, ref) => { - if (typeof story.content === "string") { - story.content = JSON.parse(story.content); - } - story = useStoryblokState(story, bridgeOptions); - return ; - } -); - -export default StoryblokStory; diff --git a/lib/rsc/storyblok-live-editing.tsx b/lib/rsc/storyblok-live-editing.tsx new file mode 100644 index 00000000..e1041aef --- /dev/null +++ b/lib/rsc/storyblok-live-editing.tsx @@ -0,0 +1,29 @@ +"use client"; + +import { registerStoryblokBridge } from "@storyblok/js"; +import { useEffect, startTransition } from "react"; +import { liveEditUpdateAction } from "./live-edit-update-action"; + +const StoryblokLiveEditing = ({ story = null, bridgeOptions = {} }) => { + if (typeof window === 'undefined') { + return null; + } + + const handleInput = (story) => { + if (!story) { + return; + } + startTransition(() => { + liveEditUpdateAction({ story, pathToRevalidate: window.location.pathname }); + }); + }; + + const storyId = story?.internalId ?? story?.id ?? 0; + useEffect(() => { + registerStoryblokBridge(storyId, (newStory) => handleInput(newStory), bridgeOptions); + }, []); + + return null; +}; + +export default StoryblokLiveEditing; diff --git a/lib/rsc/storyblok-component.tsx b/lib/rsc/storyblok-server-component.tsx similarity index 59% rename from lib/rsc/storyblok-component.tsx rename to lib/rsc/storyblok-server-component.tsx index 1ec207c8..9dd30a63 100644 --- a/lib/rsc/storyblok-component.tsx +++ b/lib/rsc/storyblok-server-component.tsx @@ -1,21 +1,21 @@ -import React, { forwardRef } from "react"; +import React, { forwardRef } from 'react'; import { getComponent, - getEnableFallbackComponent, getCustomFallbackComponent, -} from "./index"; -import type { SbBlokData } from "../types"; + getEnableFallbackComponent, +} from './index'; +import type { SbBlokData } from '../types'; -interface StoryblokComponentProps { +interface SbServerComponentProps { blok: SbBlokData; [key: string]: unknown; } -const StoryblokComponent = forwardRef( +const SbServerComponent = forwardRef( ({ blok, ...restProps }, ref) => { if (!blok) { console.error( - "Please provide a 'blok' property to the StoryblokComponent" + 'Please provide a \'blok\' property to the StoryblokComponent', ); return (
Please provide a blok property to the StoryblokComponent
@@ -33,12 +33,15 @@ const StoryblokComponent = forwardRef( if (CustomFallbackComponent) { return ; - } else { + } + else { return ( <>

- Component could not be found for blok{" "} - {blok.component}! Is it configured correctly? + Component could not be found for blok + {' '} + {blok.component} + ! Is it configured correctly?

); @@ -46,9 +49,9 @@ const StoryblokComponent = forwardRef( } return
; - } + }, ); -StoryblokComponent.displayName = "StoryblokComponent"; +SbServerComponent.displayName = 'StoryblokComponent'; -export default StoryblokComponent; +export default SbServerComponent; diff --git a/lib/vite.config.ts b/lib/vite.config.ts index 99eebc6b..0f54abdd 100644 --- a/lib/vite.config.ts +++ b/lib/vite.config.ts @@ -18,7 +18,7 @@ export default defineConfig({ }, }, rollupOptions: { - external: ['react'], + external: ['react', 'next'], output: { preserveModules: true, globals: { react: 'React' }, diff --git a/package-lock.json b/package-lock.json index 270c6a25..e601c2bd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -26,7 +26,8 @@ "name": "@storyblok/react", "version": "0.0.1", "dependencies": { - "@storyblok/js": "^3.1.1" + "@storyblok/js": "^3.1.1", + "next": "14.2.14" }, "devDependencies": { "@babel/core": "^7.25.2", @@ -52,11 +53,248 @@ "react-dom": "^17.0.0 || ^18.0.0" } }, + "lib/node_modules/@next/env": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz", + "integrity": "sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg==", + "license": "MIT" + }, + "lib/node_modules/@next/swc-darwin-arm64": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.14.tgz", + "integrity": "sha512-bsxbSAUodM1cjYeA4o6y7sp9wslvwjSkWw57t8DtC8Zig8aG8V6r+Yc05/9mDzLKcybb6EN85k1rJDnMKBd9Gw==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-darwin-x64": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.14.tgz", + "integrity": "sha512-cC9/I+0+SK5L1k9J8CInahduTVWGMXhQoXFeNvF0uNs3Bt1Ub0Azb8JzTU9vNCr0hnaMqiWu/Z0S1hfKc3+dww==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-linux-arm64-gnu": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.14.tgz", + "integrity": "sha512-RMLOdA2NU4O7w1PQ3Z9ft3PxD6Htl4uB2TJpocm+4jcllHySPkFaUIFacQ3Jekcg6w+LBaFvjSPthZHiPmiAUg==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-linux-arm64-musl": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.14.tgz", + "integrity": "sha512-WgLOA4hT9EIP7jhlkPnvz49iSOMdZgDJVvbpb8WWzJv5wBD07M2wdJXLkDYIpZmCFfo/wPqFsFR4JS4V9KkQ2A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-linux-x64-gnu": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.14.tgz", + "integrity": "sha512-lbn7svjUps1kmCettV/R9oAvEW+eUI0lo0LJNFOXoQM5NGNxloAyFRNByYeZKL3+1bF5YE0h0irIJfzXBq9Y6w==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-linux-x64-musl": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.14.tgz", + "integrity": "sha512-7TcQCvLQ/hKfQRgjxMN4TZ2BRB0P7HwrGAYL+p+m3u3XcKTraUFerVbV3jkNZNwDeQDa8zdxkKkw2els/S5onQ==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "linux" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-win32-arm64-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.14.tgz", + "integrity": "sha512-8i0Ou5XjTLEje0oj0JiI0Xo9L/93ghFtAUYZ24jARSeTMXLUx8yFIdhS55mTExq5Tj4/dC2fJuaT4e3ySvXU1A==", + "cpu": [ + "arm64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-win32-ia32-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.14.tgz", + "integrity": "sha512-2u2XcSaDEOj+96eXpyjHjtVPLhkAFw2nlaz83EPeuK4obF+HmtDJHqgR1dZB7Gb6V/d55FL26/lYVd0TwMgcOQ==", + "cpu": [ + "ia32" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@next/swc-win32-x64-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.14.tgz", + "integrity": "sha512-MZom+OvZ1NZxuRovKt1ApevjiUJTcU2PmdJKL66xUPaJeRywnbGGRWUlaAOwunD6dX+pm83vj979NTC8QXjGWg==", + "cpu": [ + "x64" + ], + "license": "MIT", + "optional": true, + "os": [ + "win32" + ], + "engines": { + "node": ">= 10" + } + }, + "lib/node_modules/@swc/helpers": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz", + "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==", + "license": "Apache-2.0", + "dependencies": { + "@swc/counter": "^0.1.3", + "tslib": "^2.4.0" + } + }, + "lib/node_modules/next": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/next/-/next-14.2.14.tgz", + "integrity": "sha512-Q1coZG17MW0Ly5x76shJ4dkC23woLAhhnDnw+DfTc7EpZSGuWrlsZ3bZaO8t6u1Yu8FVfhkqJE+U8GC7E0GLPQ==", + "license": "MIT", + "dependencies": { + "@next/env": "14.2.14", + "@swc/helpers": "0.5.5", + "busboy": "1.6.0", + "caniuse-lite": "^1.0.30001579", + "graceful-fs": "^4.2.11", + "postcss": "8.4.31", + "styled-jsx": "5.1.1" + }, + "bin": { + "next": "dist/bin/next" + }, + "engines": { + "node": ">=18.17.0" + }, + "optionalDependencies": { + "@next/swc-darwin-arm64": "14.2.14", + "@next/swc-darwin-x64": "14.2.14", + "@next/swc-linux-arm64-gnu": "14.2.14", + "@next/swc-linux-arm64-musl": "14.2.14", + "@next/swc-linux-x64-gnu": "14.2.14", + "@next/swc-linux-x64-musl": "14.2.14", + "@next/swc-win32-arm64-msvc": "14.2.14", + "@next/swc-win32-ia32-msvc": "14.2.14", + "@next/swc-win32-x64-msvc": "14.2.14" + }, + "peerDependencies": { + "@opentelemetry/api": "^1.1.0", + "@playwright/test": "^1.41.2", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "sass": "^1.3.0" + }, + "peerDependenciesMeta": { + "@opentelemetry/api": { + "optional": true + }, + "@playwright/test": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "lib/node_modules/postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, "lib/node_modules/react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -68,7 +306,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -4926,6 +5163,12 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==", + "license": "Apache-2.0" + }, "node_modules/@swc/helpers": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", @@ -6617,7 +6860,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", - "dev": true, "dependencies": { "streamsearch": "^1.1.0" }, @@ -6672,7 +6914,6 @@ "version": "1.0.30001651", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", - "dev": true, "funding": [ { "type": "opencollective", @@ -6848,7 +7089,6 @@ }, "node_modules/client-only": { "version": "0.0.1", - "dev": true, "license": "MIT" }, "node_modules/cliui": { @@ -10018,7 +10258,6 @@ }, "node_modules/graceful-fs": { "version": "4.2.11", - "dev": true, "license": "ISC" }, "node_modules/graphemer": { @@ -11450,7 +11689,6 @@ }, "node_modules/js-tokens": { "version": "4.0.0", - "dev": true, "license": "MIT" }, "node_modules/js-yaml": { @@ -11906,7 +12144,6 @@ }, "node_modules/loose-envify": { "version": "1.4.0", - "dev": true, "license": "MIT", "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" @@ -12863,7 +13100,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -12977,7 +13213,6 @@ }, "node_modules/object-assign": { "version": "4.1.1", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -13335,8 +13570,7 @@ "node_modules/picocolors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", - "dev": true + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" }, "node_modules/picomatch": { "version": "2.3.1", @@ -13709,7 +13943,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "peer": true, "dependencies": { "loose-envify": "^1.1.0", @@ -14262,7 +14495,6 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" } @@ -14399,7 +14631,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -14594,7 +14825,6 @@ "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", - "dev": true, "engines": { "node": ">=10.0.0" } @@ -14805,7 +15035,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", - "dev": true, "dependencies": { "client-only": "0.0.1" }, @@ -15113,8 +15342,7 @@ "node_modules/tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", - "dev": true + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/tunnel-agent": { "version": "0.6.0", @@ -19857,6 +20085,7 @@ "eslint-plugin-cypress": "^3.5.0", "eslint-plugin-jest": "^28.8.3", "jest": "^29.7.0", + "next": "14.2.14", "react": "^18.3.1", "react-dom": "^18.3.1", "rollup-plugin-preserve-directives": "^0.4.0", @@ -19864,11 +20093,111 @@ "vite": "^5.4.3" }, "dependencies": { + "@next/env": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.14.tgz", + "integrity": "sha512-/0hWQfiaD5//LvGNgc8PjvyqV50vGK0cADYzaoOOGN8fxzBn3iAiaq3S0tCRnFBldq0LVveLcxCTi41ZoYgAgg==" + }, + "@next/swc-darwin-arm64": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.14.tgz", + "integrity": "sha512-bsxbSAUodM1cjYeA4o6y7sp9wslvwjSkWw57t8DtC8Zig8aG8V6r+Yc05/9mDzLKcybb6EN85k1rJDnMKBd9Gw==", + "optional": true + }, + "@next/swc-darwin-x64": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.14.tgz", + "integrity": "sha512-cC9/I+0+SK5L1k9J8CInahduTVWGMXhQoXFeNvF0uNs3Bt1Ub0Azb8JzTU9vNCr0hnaMqiWu/Z0S1hfKc3+dww==", + "optional": true + }, + "@next/swc-linux-arm64-gnu": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.14.tgz", + "integrity": "sha512-RMLOdA2NU4O7w1PQ3Z9ft3PxD6Htl4uB2TJpocm+4jcllHySPkFaUIFacQ3Jekcg6w+LBaFvjSPthZHiPmiAUg==", + "optional": true + }, + "@next/swc-linux-arm64-musl": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.14.tgz", + "integrity": "sha512-WgLOA4hT9EIP7jhlkPnvz49iSOMdZgDJVvbpb8WWzJv5wBD07M2wdJXLkDYIpZmCFfo/wPqFsFR4JS4V9KkQ2A==", + "optional": true + }, + "@next/swc-linux-x64-gnu": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.14.tgz", + "integrity": "sha512-lbn7svjUps1kmCettV/R9oAvEW+eUI0lo0LJNFOXoQM5NGNxloAyFRNByYeZKL3+1bF5YE0h0irIJfzXBq9Y6w==", + "optional": true + }, + "@next/swc-linux-x64-musl": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.14.tgz", + "integrity": "sha512-7TcQCvLQ/hKfQRgjxMN4TZ2BRB0P7HwrGAYL+p+m3u3XcKTraUFerVbV3jkNZNwDeQDa8zdxkKkw2els/S5onQ==", + "optional": true + }, + "@next/swc-win32-arm64-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.14.tgz", + "integrity": "sha512-8i0Ou5XjTLEje0oj0JiI0Xo9L/93ghFtAUYZ24jARSeTMXLUx8yFIdhS55mTExq5Tj4/dC2fJuaT4e3ySvXU1A==", + "optional": true + }, + "@next/swc-win32-ia32-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.14.tgz", + "integrity": "sha512-2u2XcSaDEOj+96eXpyjHjtVPLhkAFw2nlaz83EPeuK4obF+HmtDJHqgR1dZB7Gb6V/d55FL26/lYVd0TwMgcOQ==", + "optional": true + }, + "@next/swc-win32-x64-msvc": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.14.tgz", + "integrity": "sha512-MZom+OvZ1NZxuRovKt1ApevjiUJTcU2PmdJKL66xUPaJeRywnbGGRWUlaAOwunD6dX+pm83vj979NTC8QXjGWg==", + "optional": true + }, + "@swc/helpers": { + "version": "0.5.5", + "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz", + "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==", + "requires": { + "@swc/counter": "^0.1.3", + "tslib": "^2.4.0" + } + }, + "next": { + "version": "14.2.14", + "resolved": "https://registry.npmjs.org/next/-/next-14.2.14.tgz", + "integrity": "sha512-Q1coZG17MW0Ly5x76shJ4dkC23woLAhhnDnw+DfTc7EpZSGuWrlsZ3bZaO8t6u1Yu8FVfhkqJE+U8GC7E0GLPQ==", + "requires": { + "@next/env": "14.2.14", + "@next/swc-darwin-arm64": "14.2.14", + "@next/swc-darwin-x64": "14.2.14", + "@next/swc-linux-arm64-gnu": "14.2.14", + "@next/swc-linux-arm64-musl": "14.2.14", + "@next/swc-linux-x64-gnu": "14.2.14", + "@next/swc-linux-x64-musl": "14.2.14", + "@next/swc-win32-arm64-msvc": "14.2.14", + "@next/swc-win32-ia32-msvc": "14.2.14", + "@next/swc-win32-x64-msvc": "14.2.14", + "@swc/helpers": "0.5.5", + "busboy": "1.6.0", + "caniuse-lite": "^1.0.30001579", + "graceful-fs": "^4.2.11", + "postcss": "8.4.31", + "styled-jsx": "5.1.1" + } + }, + "postcss": { + "version": "8.4.31", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", + "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "requires": { + "nanoid": "^3.3.6", + "picocolors": "^1.0.0", + "source-map-js": "^1.0.2" + } + }, "react": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0" } @@ -19877,7 +20206,6 @@ "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", - "dev": true, "requires": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -19953,6 +20281,11 @@ } } }, + "@swc/counter": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz", + "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==" + }, "@swc/helpers": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", @@ -21130,7 +21463,6 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz", "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==", - "dev": true, "requires": { "streamsearch": "^1.1.0" } @@ -21163,8 +21495,7 @@ "caniuse-lite": { "version": "1.0.30001651", "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001651.tgz", - "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==", - "dev": true + "integrity": "sha512-9Cf+Xv1jJNe1xPZLGuUXLNkE1BoDkqRqYyFJ9TDYSqhduqA4hu4oR9HluGoWYQC/aj8WHjsGVV+bwkh0+tegRg==" }, "caseless": { "version": "0.12.0", @@ -21268,8 +21599,7 @@ } }, "client-only": { - "version": "0.0.1", - "dev": true + "version": "0.0.1" }, "cliui": { "version": "8.0.1", @@ -23445,8 +23775,7 @@ } }, "graceful-fs": { - "version": "4.2.11", - "dev": true + "version": "4.2.11" }, "graphemer": { "version": "1.4.0", @@ -24419,8 +24748,7 @@ } }, "js-tokens": { - "version": "4.0.0", - "dev": true + "version": "4.0.0" }, "js-yaml": { "version": "4.1.0", @@ -24759,7 +25087,6 @@ }, "loose-envify": { "version": "1.4.0", - "dev": true, "requires": { "js-tokens": "^3.0.0 || ^4.0.0" } @@ -25375,8 +25702,7 @@ "nanoid": { "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", - "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true + "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==" }, "natural-compare": { "version": "1.4.0", @@ -25762,8 +26088,7 @@ } }, "object-assign": { - "version": "4.1.1", - "dev": true + "version": "4.1.1" }, "object-inspect": { "version": "1.13.1", @@ -26004,8 +26329,7 @@ "picocolors": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz", - "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==", - "dev": true + "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==" }, "picomatch": { "version": "2.3.1", @@ -26246,7 +26570,6 @@ "version": "17.0.2", "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "dev": true, "peer": true, "requires": { "loose-envify": "^1.1.0", @@ -26641,7 +26964,6 @@ "version": "0.23.2", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", - "dev": true, "requires": { "loose-envify": "^1.1.0" } @@ -26739,8 +27061,7 @@ "source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", - "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==" }, "source-map-support": { "version": "0.5.13", @@ -26905,8 +27226,7 @@ "streamsearch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz", - "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==", - "dev": true + "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==" }, "string-length": { "version": "4.0.2", @@ -27060,7 +27380,6 @@ "version": "5.1.1", "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz", "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==", - "dev": true, "requires": { "client-only": "0.0.1" } @@ -27264,8 +27583,7 @@ "tslib": { "version": "2.7.0", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", - "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==", - "dev": true + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "tunnel-agent": { "version": "0.6.0", diff --git a/playground-next13-live-editing/app/layout.tsx b/playground-next13-live-editing/app/layout.tsx index 38b02c19..923b47a8 100644 --- a/playground-next13-live-editing/app/layout.tsx +++ b/playground-next13-live-editing/app/layout.tsx @@ -1,10 +1,4 @@ -import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'; -import StoryblokProvider from '../components/StoryblokProvider'; - -storyblokInit({ - accessToken: 'OurklwV5XsDJTIE1NJaD2wtt', - use: [apiPlugin], -}); +import StoryblokProvider from '@/components/StoryblokProvider'; export const metadata = { title: 'Create Next App', diff --git a/playground-next13-live-editing/app/page.tsx b/playground-next13-live-editing/app/page.tsx index 64308e08..a6c12733 100644 --- a/playground-next13-live-editing/app/page.tsx +++ b/playground-next13-live-editing/app/page.tsx @@ -2,9 +2,9 @@ import type { ISbStoriesParams, StoryblokClient, } from '@storyblok/react/rsc'; -import { getStoryblokApi } from "@/lib/storyblok"; +import { getStoryblokApi } from '@/lib/storyblok'; import { - StoryblokStory, + SbStoryServerComponent, } from '@storyblok/react/rsc'; export default async function Home() { @@ -12,11 +12,8 @@ export default async function Home() { return (
-

- Story: - {data.story.id} -

- +

Story: {data.story.id}

+
); } diff --git a/playground-next13-live-editing/components/Page.tsx b/playground-next13-live-editing/components/Page.tsx index d7b71cb4..bbb4d1d8 100644 --- a/playground-next13-live-editing/components/Page.tsx +++ b/playground-next13-live-editing/components/Page.tsx @@ -1,10 +1,9 @@ -// "use server"; -import { StoryblokComponent, storyblokEditable } from '@storyblok/react/rsc'; +import { SbServerComponent, storyblokEditable } from '@storyblok/react/rsc'; const Page = ({ blok }) => (
{blok.body.map(nestedBlok => ( - + ))}
); diff --git a/playground-next13-live-editing/components/StoryblokProvider.tsx b/playground-next13-live-editing/components/StoryblokProvider.tsx index 07f0e719..00c19e9a 100644 --- a/playground-next13-live-editing/components/StoryblokProvider.tsx +++ b/playground-next13-live-editing/components/StoryblokProvider.tsx @@ -1,21 +1,8 @@ -/** 1. Tag it as client component */ 'use client'; -import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'; -/** 2. Import your components */ -import Page from './Page'; -import Teaser from './Teaser'; +import { getStoryblokApi } from '@/lib/storyblok'; -/** 3. Initialize it as usual */ -storyblokInit({ - accessToken: 'OurklwV5XsDJTIE1NJaD2wtt', - use: [apiPlugin], - components: { - teaser: Teaser, - page: Page, - }, -}); - -export default function StoryblokProvider({ children }) { +export default function StoryblokProvider({ children }: any) { + getStoryblokApi(); return children; } diff --git a/playground-next13-live-editing/components/Teaser.tsx b/playground-next13-live-editing/components/Teaser.tsx index 781b3a67..255539b2 100644 --- a/playground-next13-live-editing/components/Teaser.tsx +++ b/playground-next13-live-editing/components/Teaser.tsx @@ -1,4 +1,3 @@ -// "use server"; import { storyblokEditable } from '@storyblok/react/rsc'; const Teaser = ({ blok }) => { diff --git a/playground-next13-live-editing/lib/storyblok.ts b/playground-next13-live-editing/lib/storyblok.ts index 9218b0c4..3091c29a 100644 --- a/playground-next13-live-editing/lib/storyblok.ts +++ b/playground-next13-live-editing/lib/storyblok.ts @@ -1,6 +1,12 @@ -import { apiPlugin, storyblokInit } from "@storyblok/react/rsc"; +import Page from '@/components/Page'; +import Teaser from '@/components/Teaser'; +import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'; export const getStoryblokApi = storyblokInit({ - accessToken: "OurklwV5XsDJTIE1NJaD2wtt", + accessToken: 'OurklwV5XsDJTIE1NJaD2wtt', use: [apiPlugin], -}); + components: { + teaser: Teaser, + page: Page, + }, +}); \ No newline at end of file diff --git a/playground-next13-rsc/app/layout.tsx b/playground-next13-rsc/app/layout.tsx index 12495b5f..4e638663 100644 --- a/playground-next13-rsc/app/layout.tsx +++ b/playground-next13-rsc/app/layout.tsx @@ -1,21 +1,7 @@ import { - apiPlugin, StoryblokBridgeLoader, - storyblokInit, } from '@storyblok/react/rsc'; -import Page from '../components/Page'; -import Teaser from '../components/Teaser'; - -storyblokInit({ - accessToken: 'RVLbQ7MG4kCi3r1sQQ4VEAtt', - use: [apiPlugin], - components: { - teaser: Teaser, - page: Page, - }, -}); - export const metadata = { title: 'Create Next App', description: 'Generated by create next app', diff --git a/playground-next13-rsc/app/page.tsx b/playground-next13-rsc/app/page.tsx index 82ff1613..0b582f63 100644 --- a/playground-next13-rsc/app/page.tsx +++ b/playground-next13-rsc/app/page.tsx @@ -2,9 +2,9 @@ import type { ISbStoriesParams, StoryblokClient, } from '@storyblok/react/rsc'; -import { getStoryblokApi } from "@/lib/storyblok"; +import { getStoryblokApi } from '@/lib/storyblok'; import { - StoryblokComponent, + SbServerComponent, } from '@storyblok/react/rsc'; export default async function Home() { @@ -16,7 +16,7 @@ export default async function Home() { Story: {data.story.id} - + ); } diff --git a/playground-next13-rsc/components/Page.tsx b/playground-next13-rsc/components/Page.tsx index 86487cfe..bbb4d1d8 100644 --- a/playground-next13-rsc/components/Page.tsx +++ b/playground-next13-rsc/components/Page.tsx @@ -1,9 +1,9 @@ -import { StoryblokComponent, storyblokEditable } from '@storyblok/react/rsc'; +import { SbServerComponent, storyblokEditable } from '@storyblok/react/rsc'; const Page = ({ blok }) => (
{blok.body.map(nestedBlok => ( - + ))}
); diff --git a/playground-next13-rsc/lib/storyblok.ts b/playground-next13-rsc/lib/storyblok.ts index 9218b0c4..c27bfa31 100644 --- a/playground-next13-rsc/lib/storyblok.ts +++ b/playground-next13-rsc/lib/storyblok.ts @@ -1,6 +1,12 @@ -import { apiPlugin, storyblokInit } from "@storyblok/react/rsc"; +import Page from '@/components/Page'; +import Teaser from '@/components/Teaser'; +import { apiPlugin, storyblokInit } from '@storyblok/react/rsc'; export const getStoryblokApi = storyblokInit({ - accessToken: "OurklwV5XsDJTIE1NJaD2wtt", + accessToken: 'RVLbQ7MG4kCi3r1sQQ4VEAtt', use: [apiPlugin], + components: { + teaser: Teaser, + page: Page, + }, }); diff --git a/playground-next13-rsc/tsconfig.json b/playground-next13-rsc/tsconfig.json index cd7f29e9..5067f472 100644 --- a/playground-next13-rsc/tsconfig.json +++ b/playground-next13-rsc/tsconfig.json @@ -3,11 +3,17 @@ "incremental": true, "target": "es5", "jsx": "preserve", - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "module": "esnext", - "moduleResolution": "bundler", + "moduleResolution": "node", "paths": { - "@/*": ["./*"] + "@/*": [ + "./*" + ] }, "resolveJsonModule": true, "allowJs": true, @@ -23,6 +29,13 @@ } ] }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] }