chore: refactoring

package.json

@@ -50,7 +50,7 @@
     "jest-environment-jsdom": "^29.0.3",
     "lint-staged": "^11.1.2",
     "prettier": "3.2.5",
-    "turbo": "^2.0.3"
+    "turbo": "^2.0.11"
   },
   "nextBundleAnalysis": {
     "buildOutputDirectory": "./projects/wp-nextjs/.next",

packages/next/src/rsc/actions/preview.ts

@@ -0,0 +1,12 @@
+'use server';
+
+import { cookies, draftMode, headers } from 'next/headers';
+import { redirect } from 'next/navigation';
+import { COOKIE_NAME } from '../handlers/previewRouteHandler';
+
+export async function disableDraftMode() {
+	const currentUrl = headers().get('x-headstartwp-current-url') ?? '/';
+	draftMode().disable();
+	cookies().delete(COOKIE_NAME);
+	redirect(currentUrl);
+}

packages/next/src/rsc/blocks/LinkBlock.tsx

@@ -17,7 +17,7 @@ interface LinkBlockProps extends BlockProps<IDataWPBlock> {
  * import { BlocksRenderer } from "@headstartwp/core/react";
  * import { LinkBlock } from "@headstartwp/next/app";
  *
- * <BlocksRenderer html={html}>
+ * <BlocksRenderer html={html settings={settings} }>
  * 	<LinkBlock />
  * </BlocksRenderer>
  * ```

packages/next/src/rsc/blocks/__tests__/LinkBlock.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { BlocksRenderer } from '@headstartwp/core/react';
+import { getHeadstartWPConfig, setHeadstartWPConfig } from '@headstartwp/core';
+import { LinkBlock } from '../LinkBlock';
+
+describe('LinkBlock', () => {
+	it('shound replace internal links with next/link', () => {
+		setHeadstartWPConfig({
+			sourceUrl: 'http://wpadmin.com',
+			hostUrl: 'http://domain.com',
+		});
+
+		const { container } = render(
+			<BlocksRenderer
+				html="<div class='content'><a href='http://wpadmin.com/post-name'>This is an internal link</a>></div>"
+				settings={getHeadstartWPConfig()}
+			>
+				<LinkBlock />
+			</BlocksRenderer>,
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+});

packages/next/src/rsc/blocks/__tests__/__snapshots__/LinkBlock.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinkBlock shound replace internal links with next/link 1`] = `
+<div>
+  <div
+    class="content"
+  >
+    <a
+      class=""
+      href="/post-name"
+    >
+      This is an internal link
+    </a>
+    &gt;
+  </div>
+</div>
+`;

packages/next/src/rsc/components/HeadstartWPApp.tsx

@@ -0,0 +1,33 @@
+import {
+	SettingsContextProps,
+	SettingsProvider,
+	ThemeSettingsProvider,
+} from '@headstartwp/core/react';
+import React, { FC, ReactNode } from 'react';
+import { AppEntity } from '@headstartwp/core';
+
+type HeadstartWPAppProps = {
+	/**
+	 * Supported settings by the framework. Such as custom image component, custom link component etc.
+	 *
+	 * @see {@link SettingsContextProps}
+	 */
+	settings: SettingsContextProps;
+
+	/**
+	 * Theme settings from the `theme.json`.
+	 *
+	 * Passing this will expose theme json through `useThemeSettings` hook.
+	 */
+	themeJSON?: AppEntity['theme.json'];
+
+	children?: ReactNode;
+};
+
+export const HeadstartWPApp: FC<HeadstartWPAppProps> = ({ settings, children, themeJSON = {} }) => {
+	return (
+		<SettingsProvider settings={settings}>
+			<ThemeSettingsProvider data={themeJSON}>{children}</ThemeSettingsProvider>
+		</SettingsProvider>
+	);
+};

packages/next/src/rsc/components/PreviewIndicator.tsx

@@ -1,8 +1,6 @@
-import { cookies, draftMode, headers } from 'next/headers';
+import { draftMode } from 'next/headers';
 import React from 'react';
-import { redirect } from 'next/navigation';
-
-import { COOKIE_NAME } from '../handlers/previewRouteHandler';
+import { disableDraftMode } from '../actions/preview';
 
 export type PreviewIndicatorProps = {
 	className?: string;
@@ -15,15 +13,6 @@ export const PreviewIndicator: React.FC<PreviewIndicatorProps> = ({ className })
 		return null;
 	}
 
-	async function disableDraftMode() {
-		'use server';
-
-		const currentUrl = headers().get('x-headstartwp-current-url') ?? '/';
-		draftMode().disable();
-		cookies().delete(COOKIE_NAME);
-		redirect(currentUrl);
-	}
-
 	return (
 		<div className={className}>
 			<form action={disableDraftMode}>

packages/next/src/rsc/components/__tests__/Link.tsx

@@ -0,0 +1,21 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { SettingsProvider } from '@headstartwp/core/react';
+import { Link } from '../Link';
+
+describe('Link', () => {
+	it('shound replace internal links with next/link', () => {
+		const { container } = render(
+			<SettingsProvider
+				settings={{
+					sourceUrl: 'http://wpadmin.com',
+					hostUrl: 'http://domain.com',
+				}}
+			>
+				<Link href="http://wpadmin.com/post-name" />
+			</SettingsProvider>,
+		);
+
+		expect(container).toMatchSnapshot();
+	});
+});

packages/next/src/rsc/components/__tests__/__snapshots__/Link.tsx.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Link shound replace internal links with next/link 1`] = `
+<div>
+  <a
+    href="/post-name"
+  />
+</div>
+`;

packages/next/src/rsc/index.ts

@@ -10,6 +10,7 @@ export * from './handlers/revalidateRouterHandler';
 export * from './components/PreviewIndicator';
 export * from './components/JSONLD';
 export * from './components/Link';
+export * from './components/HeadstartWPApp';
 
 // blocks
 export * from './blocks/LinkBlock';

projects/wp-nextjs-app/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import { Inter } from 'next/font/google';
 import './globals.css';
-import { Link, PreviewIndicator, queryAppSettings } from '@headstartwp/next/app';
-import { Menu, SettingsProvider, ThemeSettingsProvider } from '@headstartwp/core/react';
+import { Link, PreviewIndicator, queryAppSettings, HeadstartWPApp } from '@headstartwp/next/app';
+import { Menu, SettingsContextProps } from '@headstartwp/core/react';
 
 const inter = Inter({ subsets: ['latin'] });
 
@@ -12,17 +12,20 @@ const RootLayout = async ({
 }>) => {
 	const { menu, data, config } = await queryAppSettings({ menu: 'primary' });
 
+	const settings: SettingsContextProps = {
+		...config,
+		// @ts-expect-error
+		linkComponent: Link,
+	};
+
 	return (
 		<html lang="en">
 			<body className={inter.className}>
-				<ThemeSettingsProvider data={data['theme.json']}>
-					<SettingsProvider settings={config}>
-						{/* @ts-expect-error */}
-						{menu ? <Menu items={menu} linkWrapper={Link} /> : null}
-						{children}
-						<PreviewIndicator className="form-container" />
-					</SettingsProvider>
-				</ThemeSettingsProvider>
+				<HeadstartWPApp settings={settings} themeJSON={data['theme.json']}>
+					{menu ? <Menu items={menu} /> : null}
+					{children}
+					<PreviewIndicator className="form-container" />
+				</HeadstartWPApp>
 			</body>
 		</html>
 	);