react-layout-sdk 1.1.0 → 1.1.2

package/bin/init.js

@@ -3,24 +3,29 @@ const fs = require('fs');
 const path = require('path');
 
 const projectRoot = process.cwd();
-const srcDir = path.join(projectRoot, 'src');
-const componentsDir = path.join(srcDir, 'components');
-const appDir = path.join(srcDir, 'app');
-const pageDir = path.join(appDir, '[[...slug]]');
+
+// Detect project structure
+const hasSrc = fs.existsSync(path.join(projectRoot, 'src'));
+const basePath = hasSrc ? path.join(projectRoot, 'src') : projectRoot;
+
+const componentsDir = path.join(basePath, 'components');
+const hasAppRouter = fs.existsSync(path.join(basePath, 'app'));
+const hasPagesRouter = fs.existsSync(path.join(basePath, 'pages'));
+
+if (!hasAppRouter && !hasPagesRouter) {
+  console.error("❌ Could not find an 'app' or 'pages' directory. Make sure you are running this in the root of a Next.js project.");
+  process.exit(1);
+}
 
 // Helper to ensure directory exists
 function ensureDirSync(dirPath) {
   if (!fs.existsSync(dirPath)) {
     fs.mkdirSync(dirPath, { recursive: true });
-    console.log(`Created directory: ${dirPath}`);
+    console.log(`📁 Created directory: ${dirPath}`);
   }
 }
 
-// Ensure base directories exist
-ensureDirSync(srcDir);
 ensureDirSync(componentsDir);
-ensureDirSync(appDir);
-ensureDirSync(pageDir);
 
 // 1. Create factory.ts
 const factoryPath = path.join(componentsDir, 'factory.ts');
@@ -34,9 +39,7 @@ export const componentMap = {
 `;
 if (!fs.existsSync(factoryPath)) {
   fs.writeFileSync(factoryPath, factoryContent);
-  console.log('✅ Created src/components/factory.ts');
-} else {
-  console.log('⚠️  src/components/factory.ts already exists, skipping.');
+  console.log('✅ Created components/factory.ts');
 }
 
 // 2. Create Header.tsx
@@ -54,9 +57,6 @@ export default function Header(props: any) {
           {logoUrl && <img src={logoUrl} alt="Logo" width="40" />}
           <h1 style={{ margin: 0, fontSize: '1.5rem' }}>{title}</h1>
         </div>
-        <nav>
-          {/* Navigation links will go here */}
-        </nav>
       </div>
     </header>
   );
@@ -64,9 +64,7 @@ export default function Header(props: any) {
 `;
 if (!fs.existsSync(headerPath)) {
   fs.writeFileSync(headerPath, headerContent);
-  console.log('✅ Created src/components/Header.tsx');
-} else {
-  console.log('⚠️  src/components/Header.tsx already exists, skipping.');
+  console.log('✅ Created components/Header.tsx');
 }
 
 // 3. Create Footer.tsx
@@ -75,7 +73,6 @@ const footerContent = `import React from 'react';
 
 export default function Footer(props: any) {
   const text = props?.text || '© 2026 Velox Layout';
-  
   return (
     <footer style={{ padding: '20px', background: '#333', color: '#fff', textAlign: 'center', marginTop: '40px' }}>
       <p style={{ margin: 0 }}>{text}</p>
@@ -85,77 +82,108 @@ export default function Footer(props: any) {
 `;
 if (!fs.existsSync(footerPath)) {
   fs.writeFileSync(footerPath, footerContent);
-  console.log('✅ Created src/components/Footer.tsx');
-} else {
-  console.log('⚠️  src/components/Footer.tsx already exists, skipping.');
+  console.log('✅ Created components/Footer.tsx');
 }
 
-// 4. Create app/[[...slug]]/page.tsx
-const pagePath = path.join(pageDir, 'page.tsx');
-const pageContent = `import React from 'react';
+// 4. Generate Page routing
+if (hasAppRouter) {
+  console.log('🔍 Detected Next.js App Router');
+  
+  // Prevent Next.js route conflict by renaming existing app/page.tsx
+  const existingAppPage = path.join(basePath, 'app', 'page.tsx');
+  if (fs.existsSync(existingAppPage)) {
+    const backupPath = path.join(basePath, 'app', 'page.tsx.bak');
+    fs.renameSync(existingAppPage, backupPath);
+    console.log('⚠️  Renamed existing app/page.tsx to app/page.tsx.bak to avoid catch-all route conflict.');
+  }
+
+  const pageDir = path.join(basePath, 'app', '[[...slug]]');
+  ensureDirSync(pageDir);
+  
+  const appPagePath = path.join(pageDir, 'page.tsx');
+  const appPageContent = `import React from 'react';
 import { fetchVeloxLayout, Placeholder } from 'react-layout-sdk';
 import { componentMap } from '@/components/factory';
 
 export default async function Page({ params }: { params: { slug?: string[] } }) {
   const slugArray = params.slug || [];
   const path = slugArray.join('/') || '/';
-
-  // Make sure to replace this URL with your actual Strapi URL
   const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || 'http://localhost:1337';
   
   try {
     const layoutData = await fetchVeloxLayout(STRAPI_URL, path, 'en');
-
-    if (!layoutData || !layoutData.strapi) {
-      return (
-        <div style={{ textAlign: 'center', padding: '50px' }}>
-          <h1>404 - Page/Layout Not Found</h1>
-          <p>Could not fetch layout for path: {path}</p>
-        </div>
-      );
-    }
+    if (!layoutData || !layoutData.strapi) return <h1>404 - Not Found</h1>;
 
     const { route } = layoutData.strapi;
 
     return (
       <div className="layout-wrapper">
-        <Placeholder 
-          name="header" 
-          rendering={route.placeholders.header || []} 
-          componentMap={componentMap} 
-        />
-
+        <Placeholder name="header" rendering={route.placeholders.header || []} componentMap={componentMap} />
         <main style={{ minHeight: '60vh', padding: '20px' }}>
-          <Placeholder 
-            name="main" 
-            rendering={route.placeholders.main || []} 
-            componentMap={componentMap} 
-          />
+          <Placeholder name="main" rendering={route.placeholders.main || []} componentMap={componentMap} />
         </main>
-
-        <Placeholder 
-          name="footer" 
-          rendering={route.placeholders.footer || []} 
-          componentMap={componentMap} 
-        />
+        <Placeholder name="footer" rendering={route.placeholders.footer || []} componentMap={componentMap} />
       </div>
     );
   } catch (error) {
-    console.error('Error fetching layout:', error);
-    return (
-      <div style={{ textAlign: 'center', padding: '50px', color: 'red' }}>
-        <h1>Error Loading Layout</h1>
-        <p>Please check your Strapi server connection.</p>
-      </div>
-    );
+    return <h1>Error Loading Layout</h1>;
   }
 }
 `;
-if (!fs.existsSync(pagePath)) {
-  fs.writeFileSync(pagePath, pageContent);
-  console.log('✅ Created src/app/[[...slug]]/page.tsx');
-} else {
-  console.log('⚠️  src/app/[[...slug]]/page.tsx already exists, skipping.');
+  if (!fs.existsSync(appPagePath)) {
+    fs.writeFileSync(appPagePath, appPageContent);
+    console.log('✅ Created app/[[...slug]]/page.tsx');
+  }
+} else if (hasPagesRouter) {
+  console.log('🔍 Detected Next.js Pages Router');
+
+  // Prevent Next.js route conflict by renaming existing pages/index.tsx
+  const existingPagesIndex = path.join(basePath, 'pages', 'index.tsx');
+  if (fs.existsSync(existingPagesIndex)) {
+    const backupPath = path.join(basePath, 'pages', 'index.tsx.bak');
+    fs.renameSync(existingPagesIndex, backupPath);
+    console.log('⚠️  Renamed existing pages/index.tsx to pages/index.tsx.bak to avoid catch-all route conflict.');
+  }
+
+  const pagePath = path.join(basePath, 'pages', '[[...slug]].tsx');
+  const pagesContent = `import React from 'react';
+import { fetchVeloxLayout, Placeholder } from 'react-layout-sdk';
+import { componentMap } from '@/components/factory';
+
+export default function LayoutPage({ layoutData, error }: any) {
+  if (error || !layoutData?.strapi) return <h1>404 - Layout Not Found</h1>;
+
+  const { route } = layoutData.strapi;
+  return (
+    <div className="layout-wrapper">
+      <Placeholder name="header" rendering={route.placeholders.header || []} componentMap={componentMap} />
+      <main style={{ minHeight: '60vh', padding: '20px' }}>
+        <Placeholder name="main" rendering={route.placeholders.main || []} componentMap={componentMap} />
+      </main>
+      <Placeholder name="footer" rendering={route.placeholders.footer || []} componentMap={componentMap} />
+    </div>
+  );
+}
+
+export async function getServerSideProps(context: any) {
+  const slugArray = context.params?.slug || [];
+  const path = slugArray.join('/') || '/';
+  const STRAPI_URL = process.env.NEXT_PUBLIC_STRAPI_URL || 'http://localhost:1337';
+
+  try {
+    const layoutData = await fetchVeloxLayout(STRAPI_URL, path, 'en');
+    if (!layoutData) return { notFound: true };
+
+    return { props: { layoutData } };
+  } catch (error) {
+    return { props: { error: true } };
+  }
+}
+`;
+  if (!fs.existsSync(pagePath)) {
+    fs.writeFileSync(pagePath, pagesContent);
+    console.log('✅ Created pages/[[...slug]].tsx');
+  }
 }
 
-console.log('\\n🚀 Layout setup complete! Please verify your Strapi URL in src/app/[[...slug]]/page.tsx.');
+console.log('\n🚀 Layout setup complete! Please verify your Strapi URL in your routing page.');

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "react-layout-sdk",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "React components for Velox SDK (Sitecore-like routing)",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "bin": {
-    "react-layout-sdk": "./bin/init.js"
+    "react-layout-sdk": "bin/init.js"
   },
   "peerDependencies": {
     "react": ">=18.0.0",