react-layout-sdk 1.1.8 → 1.1.10

package/dist/index.d.mts

@@ -34,6 +34,35 @@ interface JDLayoutProps {
  */
 declare const JDLayout: React.FC<JDLayoutProps>;
 
+interface JDPageProps {
+    params: Promise<{
+        slug?: string[];
+    }>;
+    apiUrl: string;
+    componentMap: Record<string, React.ComponentType<any>>;
+    supportedLocales?: string[];
+    defaultLocale?: string;
+    notFoundComponent?: React.ReactNode;
+    maintenanceComponent?: React.ReactNode;
+    /**
+     * Optional custom layout component. If not provided, uses JDLayout.
+     */
+    layoutComponent?: React.ComponentType<{
+        layoutData: any;
+        placeholderComponent: any;
+    }>;
+}
+declare const JDPage: ({ params, apiUrl, componentMap, supportedLocales, defaultLocale, notFoundComponent, maintenanceComponent, layoutComponent: LayoutWrapper }: JDPageProps) => Promise<React.JSX.Element>;
+declare const generateJDMetadata: (params: Promise<{
+    slug?: string[];
+}>, apiUrl: string, supportedLocales?: string[], defaultLocale?: string) => Promise<{
+    title: string;
+    description: string | undefined;
+} | {
+    title: string;
+    description?: undefined;
+}>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -64,4 +93,4 @@ interface JDLayoutResponse {
 }
 declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
 
-export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
+export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, JDPage, type JDPageProps, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout, generateJDMetadata };

package/dist/index.d.ts

@@ -34,6 +34,35 @@ interface JDLayoutProps {
  */
 declare const JDLayout: React.FC<JDLayoutProps>;
 
+interface JDPageProps {
+    params: Promise<{
+        slug?: string[];
+    }>;
+    apiUrl: string;
+    componentMap: Record<string, React.ComponentType<any>>;
+    supportedLocales?: string[];
+    defaultLocale?: string;
+    notFoundComponent?: React.ReactNode;
+    maintenanceComponent?: React.ReactNode;
+    /**
+     * Optional custom layout component. If not provided, uses JDLayout.
+     */
+    layoutComponent?: React.ComponentType<{
+        layoutData: any;
+        placeholderComponent: any;
+    }>;
+}
+declare const JDPage: ({ params, apiUrl, componentMap, supportedLocales, defaultLocale, notFoundComponent, maintenanceComponent, layoutComponent: LayoutWrapper }: JDPageProps) => Promise<React.JSX.Element>;
+declare const generateJDMetadata: (params: Promise<{
+    slug?: string[];
+}>, apiUrl: string, supportedLocales?: string[], defaultLocale?: string) => Promise<{
+    title: string;
+    description: string | undefined;
+} | {
+    title: string;
+    description?: undefined;
+}>;
+
 interface JDPlaceholderData {
     __component: string;
     [key: string]: any;
@@ -64,4 +93,4 @@ interface JDLayoutResponse {
 }
 declare const fetchJDLayout: (apiUrl: string, slug: string, locale?: string, options?: RequestInit) => Promise<JDLayoutResponse | null>;
 
-export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout };
+export { ComponentFactory, type ComponentFactoryProps, type JDContext, JDLayout, type JDLayoutProps, type JDLayoutResponse, JDPage, type JDPageProps, type JDPlaceholderData, type JDRoute, Placeholder, type PlaceholderProps, fetchJDLayout, generateJDMetadata };

package/dist/index.js

@@ -32,8 +32,10 @@ var index_exports = {};
 __export(index_exports, {
   ComponentFactory: () => ComponentFactory,
   JDLayout: () => JDLayout,
+  JDPage: () => JDPage,
   Placeholder: () => Placeholder,
-  fetchJDLayout: () => fetchJDLayout
+  fetchJDLayout: () => fetchJDLayout,
+  generateJDMetadata: () => generateJDMetadata
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -101,6 +103,66 @@ var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
   )), /* @__PURE__ */ import_react2.default.createElement("main", { className: "grow", style: { flexGrow: 1 } }, /* @__PURE__ */ import_react2.default.createElement(Placeholder2, { name: "main", rendering: route.placeholders.main || [] })), /* @__PURE__ */ import_react2.default.createElement("footer", null, /* @__PURE__ */ import_react2.default.createElement(Placeholder2, { name: "footer", rendering: route.placeholders.footer || [] })));
 };
 
+// src/Page.tsx
+var import_react3 = __toESM(require("react"));
+var JDPage = async ({
+  params,
+  apiUrl,
+  componentMap,
+  supportedLocales = ["en"],
+  defaultLocale = "en",
+  notFoundComponent = /* @__PURE__ */ import_react3.default.createElement("h1", null, "404 - Not Found"),
+  maintenanceComponent = /* @__PURE__ */ import_react3.default.createElement("h1", null, "Error Loading Layout"),
+  layoutComponent: LayoutWrapper = JDLayout
+}) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, notFoundComponent);
+    }
+    const CustomPlaceholder = (props) => /* @__PURE__ */ import_react3.default.createElement(Placeholder, { ...props, componentMap });
+    return /* @__PURE__ */ import_react3.default.createElement(LayoutWrapper, { layoutData, placeholderComponent: CustomPlaceholder });
+  } catch (error) {
+    console.error("[JD SDK] JDPage Error:", error);
+    return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, maintenanceComponent);
+  }
+};
+var generateJDMetadata = async (params, apiUrl, supportedLocales = ["en"], defaultLocale = "en") => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || ""
+    };
+  } catch (error) {
+    return { title: "" };
+  }
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -122,6 +184,8 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 0 && (module.exports = {
   ComponentFactory,
   JDLayout,
+  JDPage,
   Placeholder,
-  fetchJDLayout
+  fetchJDLayout,
+  generateJDMetadata
 });

package/dist/index.mjs

@@ -62,6 +62,66 @@ var JDLayout = ({ layoutData, placeholderComponent: Placeholder2 }) => {
   )), /* @__PURE__ */ React2.createElement("main", { className: "grow", style: { flexGrow: 1 } }, /* @__PURE__ */ React2.createElement(Placeholder2, { name: "main", rendering: route.placeholders.main || [] })), /* @__PURE__ */ React2.createElement("footer", null, /* @__PURE__ */ React2.createElement(Placeholder2, { name: "footer", rendering: route.placeholders.footer || [] })));
 };
 
+// src/Page.tsx
+import React3 from "react";
+var JDPage = async ({
+  params,
+  apiUrl,
+  componentMap,
+  supportedLocales = ["en"],
+  defaultLocale = "en",
+  notFoundComponent = /* @__PURE__ */ React3.createElement("h1", null, "404 - Not Found"),
+  maintenanceComponent = /* @__PURE__ */ React3.createElement("h1", null, "Error Loading Layout"),
+  layoutComponent: LayoutWrapper = JDLayout
+}) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return /* @__PURE__ */ React3.createElement(React3.Fragment, null, notFoundComponent);
+    }
+    const CustomPlaceholder = (props) => /* @__PURE__ */ React3.createElement(Placeholder, { ...props, componentMap });
+    return /* @__PURE__ */ React3.createElement(LayoutWrapper, { layoutData, placeholderComponent: CustomPlaceholder });
+  } catch (error) {
+    console.error("[JD SDK] JDPage Error:", error);
+    return /* @__PURE__ */ React3.createElement(React3.Fragment, null, maintenanceComponent);
+  }
+};
+var generateJDMetadata = async (params, apiUrl, supportedLocales = ["en"], defaultLocale = "en") => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+  const path = layoutSlug.join("/") || "home";
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || ""
+    };
+  } catch (error) {
+    return { title: "" };
+  }
+};
+
 // src/index.ts
 var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
   try {
@@ -82,6 +142,8 @@ var fetchJDLayout = async (apiUrl, slug, locale = "en", options) => {
 export {
   ComponentFactory,
   JDLayout,
+  JDPage,
   Placeholder,
-  fetchJDLayout
+  fetchJDLayout,
+  generateJDMetadata
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.1.8",
+  "version": "1.1.10",
   "description": "React components for JD SDK (Sitecore-like routing)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/Page.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { fetchJDLayout } from './index';
+import { JDLayout } from './Layout';
+import { Placeholder } from './Placeholder';
+
+export interface JDPageProps {
+  params: Promise<{ slug?: string[] }>;
+  apiUrl: string;
+  componentMap: Record<string, React.ComponentType<any>>;
+  supportedLocales?: string[];
+  defaultLocale?: string;
+  notFoundComponent?: React.ReactNode;
+  maintenanceComponent?: React.ReactNode;
+  /**
+   * Optional custom layout component. If not provided, uses JDLayout.
+   */
+  layoutComponent?: React.ComponentType<{ layoutData: any; placeholderComponent: any }>;
+}
+
+export const JDPage = async ({ 
+  params, 
+  apiUrl, 
+  componentMap, 
+  supportedLocales = ['en'], 
+  defaultLocale = 'en',
+  notFoundComponent = <h1>404 - Not Found</h1>,
+  maintenanceComponent = <h1>Error Loading Layout</h1>,
+  layoutComponent: LayoutWrapper = JDLayout
+}: JDPageProps) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+
+  const path = layoutSlug.join('/') || 'home';
+
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (!layoutData || !layoutData.strapi) {
+      return <>{notFoundComponent}</>;
+    }
+
+    const CustomPlaceholder = (props: any) => (
+       <Placeholder {...props} componentMap={componentMap} />
+    );
+
+    return <LayoutWrapper layoutData={layoutData} placeholderComponent={CustomPlaceholder} />;
+  } catch (error) {
+    console.error('[JD SDK] JDPage Error:', error);
+    return <>{maintenanceComponent}</>;
+  }
+};
+
+export const generateJDMetadata = async (
+  params: Promise<{ slug?: string[] }>, 
+  apiUrl: string,
+  supportedLocales: string[] = ['en'],
+  defaultLocale: string = 'en'
+) => {
+  const resolvedParams = await params;
+  const slugArray = resolvedParams?.slug || [];
+  
+  let currentLocale = defaultLocale;
+  let layoutSlug = [...slugArray];
+
+  if (layoutSlug.length > 0 && supportedLocales.includes(layoutSlug[0])) {
+    currentLocale = layoutSlug[0];
+    layoutSlug = layoutSlug.slice(1);
+  }
+
+  const path = layoutSlug.join('/') || 'home';
+
+  try {
+    const layoutData = await fetchJDLayout(apiUrl, path, currentLocale);
+    if (layoutData?.strapi?.route?.seo) {
+      const { metaTitle, metaDescription } = layoutData.strapi.route.seo;
+      return {
+        title: metaTitle || layoutData.strapi.route.displayName,
+        description: metaDescription,
+      };
+    }
+    return {
+      title: layoutData?.strapi?.route?.displayName || "",
+    };
+  } catch (error) {
+    return { title: '' };
+  }
+};

package/src/index.ts

@@ -2,6 +2,8 @@ export { Placeholder, ComponentFactory } from './Placeholder';
 export type { PlaceholderProps, ComponentFactoryProps } from './Placeholder';
 export { JDLayout } from './Layout';
 export type { JDLayoutProps } from './Layout';
+export { JDPage, generateJDMetadata } from './Page';
+export type { JDPageProps } from './Page';
 
 // Useful type definitions for the API response
 export interface JDPlaceholderData {