create-nextblock 0.2.77 → 0.8.0

package/templates/nextblock-template/components/BlockRenderer.tsx

@@ -1,79 +1,158 @@
- // components/BlockRenderer.tsx
+// components/BlockRenderer.tsx
 import React from "react";
-import dynamic from "next/dynamic";
 import type { Database } from "@nextblock-cms/db";
-import { getBlockDefinition, type SectionBlockContent, type BlockType } from "../lib/blocks/blockRegistry";
+import type { SectionBlockContent } from "../lib/blocks/blockRegistry";
+import { buildVisualEditAttributes } from "../lib/visual-editing/edit-info";
+import type {
+  VisualEditAttributes,
+  VisualEditingDocumentContext,
+} from "../lib/visual-editing/types";
+import { getPublicBlockRendererLoader } from "./blocks/publicRendererLoaders";
+import { createClient as createSupabaseServerClient } from "@nextblock-cms/db/server";
+import { headers } from "next/headers";
 
 type Block = Database['public']['Tables']['blocks']['Row'];
-import HeroBlockRenderer from "./blocks/renderers/HeroBlockRenderer"; // Static import for LCP
+import SectionBlockRenderer from "./blocks/renderers/SectionBlockRenderer"; // Static import for LCP
 import ClientTextBlockRenderer from "./blocks/renderers/ClientTextBlockRenderer"; // Static import for client component
+import { getCachedCustomBlockDefinitionBySlug } from "../lib/custom-block-definitions";
+import { CachedDynamicLayoutEngine } from "./renderers/CachedDynamicLayoutEngine";
+import { resolveBlockRelations } from "../lib/resolve-block-relations";
+
+const ECOMMERCE_BLOCK_TYPES = new Set([
+  "product_grid",
+  "featured_product",
+  "cart",
+  "checkout",
+  "product_details",
+]);
+
+function loadEcommerceBlockRenderer(blockType: string) {
+  return import("./blocks/ecommerceRendererLoaders").then((module) =>
+    module.loadEcommerceBlockRenderer(blockType)
+  );
+}
 
 interface BlockRendererProps {
   blocks: Block[];
   languageId: number;
+  excludeProductId?: string;
+  excludeTranslationGroupId?: string | null;
+  visualEditing?: VisualEditingDocumentContext;
+  productVisualEditingEnabled?: boolean;
 }
 
-interface DynamicBlockRendererProps {
+interface BlockRenderContext {
   block: Block;
+  blockIndex: number;
   languageId: number;
+  excludeProductId?: string;
+  excludeTranslationGroupId?: string | null;
+  visualEditing?: VisualEditingDocumentContext;
+  productVisualEditingEnabled?: boolean;
+  visualEditAttributes?: VisualEditAttributes;
+  botProtectionPublic?: {
+    provider: 'none' | 'turnstile' | 'recaptcha';
+    siteKey: string;
+  };
+  scriptNonce?: string;
 }
 
-// Dynamic renderer component that handles the dynamic import logic for non-LCP blocks
-const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
+async function renderLoadedBlock({
   block,
+  blockIndex,
   languageId,
-}) => {
-  const blockDefinition = getBlockDefinition(block.block_type as BlockType);
-  
-  if (!blockDefinition) {
+  excludeProductId,
+  excludeTranslationGroupId,
+  visualEditing,
+  productVisualEditingEnabled,
+  visualEditAttributes,
+  botProtectionPublic,
+  scriptNonce,
+}: BlockRenderContext) {
+  const rendererLoader = getPublicBlockRendererLoader(block.block_type);
+
+  if (!rendererLoader) {
+    if (ECOMMERCE_BLOCK_TYPES.has(block.block_type)) {
+      const { default: EcommerceRendererComponent } = await loadEcommerceBlockRenderer(
+        block.block_type
+      );
+
+      return (
+        <EcommerceRendererComponent
+          content={block.content}
+          languageId={languageId}
+          excludeProductId={excludeProductId}
+          excludeTranslationGroupId={excludeTranslationGroupId}
+          visualEditAttributes={visualEditAttributes}
+          productVisualEditingEnabled={productVisualEditingEnabled}
+          visualEditing={visualEditing}
+        />
+      );
+    }
+
+    const definition = await getCachedCustomBlockDefinitionBySlug(block.block_type);
+    if (definition) {
+      const resolvedBlock = (await resolveBlockRelations({
+        data: block.content as Record<string, any>,
+        fields: definition.fields,
+      })) as any;
+
+      return (
+        <div key={block.id} {...visualEditAttributes}>
+          <CachedDynamicLayoutEngine
+            definition={definition}
+            layoutSchema={definition.layout_schema}
+            fields={definition.fields}
+            data={{
+              ...(resolvedBlock.data || {}),
+              resolved_relations: resolvedBlock.resolved_relations || {},
+            }}
+          />
+        </div>
+      );
+    }
+
+    // No renderer and no matching custom block definition. Public visitors
+    // should never see a raw error/JSON dump, so only surface the diagnostic
+    // when visual editing is actually enabled (the page always passes a
+    // visualEditing object, so check the enabled flag); otherwise render nothing.
+    if (!visualEditing?.enabled) {
+      return null;
+    }
+
     return (
       <div
         key={block.id}
         className="my-4 p-4 border rounded bg-destructive/10 text-destructive"
+        {...visualEditAttributes}
       >
         <p>
           <strong>Unsupported block type:</strong> {block.block_type}
         </p>
-        <pre className="text-xs whitespace-pre-wrap">
+        <p className="text-xs mt-1">
+          No custom block definition was found for the slug{' '}
+          <code>{block.block_type}</code>. Save a custom block with this exact slug,
+          or re-add the block from the picker.
+        </p>
+        <pre className="text-xs whitespace-pre-wrap mt-2">
           {JSON.stringify(block.content, null, 2)}
         </pre>
       </div>
     );
   }
 
-  // Handle the text block type by rendering the client component wrapper
+  // Keep common LCP-adjacent text blocks out of the dynamic renderer manifest.
   if (block.block_type === 'text') {
-    return <ClientTextBlockRenderer content={block.content as any} languageId={languageId} />;
-  }
-
-  // Check if the block definition provides a direct component (e.g., from SDK plugins)
-  if (blockDefinition.RendererComponent) {
-    const RendererComponent = blockDefinition.RendererComponent;
     return (
-      <RendererComponent
-        content={block.content}
+      <ClientTextBlockRenderer
+        content={block.content as any}
         languageId={languageId}
-        isInEditor={false} // Assuming public view
-        className="my-4"
+        visualEditAttributes={visualEditAttributes}
       />
     );
   }
 
-  // Create dynamic component with proper SSR handling for other blocks
-  const RendererComponent = dynamic(
-    () => import(`./blocks/renderers/${blockDefinition.rendererComponentFilename}`),
-    {
-      loading: () => (
-        <div className="my-4 p-4 border rounded-lg">
-          <div className="h-8 w-1/2 mb-4 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-full mb-2 bg-muted/40 animate-pulse rounded" />
-          <div className="h-4 w-3/4 bg-muted/40 animate-pulse rounded" />
-        </div>
-      ),
-      ssr: true,
-    }
-  ) as React.ComponentType<any>;
+  const { default: RendererComponent } = await rendererLoader();
 
   // Handle different prop requirements for different renderers
   // PostsGridBlockRenderer needs the full block object
@@ -83,6 +162,7 @@ const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
         content={block.content}
         languageId={languageId}
         block={block}
+        visualEditAttributes={visualEditAttributes}
       />
     );
   }
@@ -91,42 +171,108 @@ const DynamicBlockRenderer: React.FC<DynamicBlockRendererProps> = ({
     <RendererComponent
       content={block.content}
       languageId={languageId}
+      excludeProductId={excludeProductId}
+      excludeTranslationGroupId={excludeTranslationGroupId}
+      visualEditAttributes={visualEditAttributes}
+      productVisualEditingEnabled={productVisualEditingEnabled}
+      visualEditing={visualEditing}
+      parentBlockId={block.id}
+      parentBlockIndex={blockIndex}
+      botProtectionPublic={botProtectionPublic}
+      scriptNonce={scriptNonce}
     />
   );
-};
+}
+
+async function renderBlock(context: BlockRenderContext) {
+  const { block, blockIndex, languageId, visualEditAttributes, visualEditing } = context;
 
-const BlockRenderer: React.FC<BlockRendererProps> = ({
+  if (block.block_type === 'section') {
+    return (
+      <SectionBlockRenderer
+        content={block.content as unknown as SectionBlockContent}
+        languageId={languageId}
+        visualEditAttributes={visualEditAttributes}
+        visualEditing={visualEditing}
+        parentBlockId={block.id}
+        parentBlockIndex={blockIndex}
+        blockType={block.block_type}
+        botProtectionPublic={context.botProtectionPublic}
+        scriptNonce={context.scriptNonce}
+      />
+    );
+  }
+
+  return renderLoadedBlock(context);
+}
+
+export default async function BlockRenderer({
   blocks,
   languageId,
-}) => {
+  excludeProductId,
+  excludeTranslationGroupId,
+  visualEditing,
+  productVisualEditingEnabled,
+}: BlockRendererProps) {
   if (!blocks || blocks.length === 0) {
     return null;
   }
 
+  let botProtectionPublic: { provider: 'none' | 'turnstile' | 'recaptcha'; siteKey: string } | undefined;
+  let scriptNonce = '';
+
+  try {
+    scriptNonce = (await headers()).get('x-nonce') || '';
+  } catch (e) {
+    console.error("[Bot Protection] Error loading CSP nonce in BlockRenderer:", e);
+  }
+
+  try {
+    const supabase = createSupabaseServerClient();
+    const { data: publicSetting } = await supabase
+      .from('site_settings')
+      .select('value')
+      .eq('key', 'bot_protection_public')
+      .maybeSingle();
+    if (publicSetting?.value) {
+      const publicVal = publicSetting.value as Record<string, any>;
+      botProtectionPublic = {
+        provider: publicVal.provider || 'none',
+        siteKey: publicVal.siteKey || '',
+      };
+    }
+  } catch (e) {
+    console.error("[Bot Protection] Error loading settings in BlockRenderer:", e);
+  }
+
+  const renderedBlocks = await Promise.all(
+    blocks.map(async (block, blockIndex) => ({
+      id: block.id,
+      node: await renderBlock({
+        block,
+        blockIndex,
+        languageId,
+        excludeProductId,
+        excludeTranslationGroupId,
+        visualEditing,
+        productVisualEditingEnabled,
+        botProtectionPublic,
+        scriptNonce,
+        visualEditAttributes: buildVisualEditAttributes(visualEditing, {
+          kind: "top-level",
+          blockId: block.id,
+          blockIndex,
+          blockType: block.block_type,
+        }),
+      }),
+    }))
+  );
+
   return (
     <>
-      {blocks.map((block) => {
-        // Statically render the Hero block for LCP optimization
-        if (block.block_type === 'hero') {
-          return (
-            <HeroBlockRenderer
-              key={block.id}
-              content={block.content as unknown as SectionBlockContent}
-              languageId={languageId}
-            />
-          );
-        }
-        // Dynamically render all other blocks
-        return (
-          <DynamicBlockRenderer
-            key={block.id}
-            block={block}
-            languageId={languageId}
-          />
-        );
-      })}
+      {renderedBlocks.map(({ id, node }) => (
+        <React.Fragment key={id}>{node}</React.Fragment>
+      ))}
     </>
   );
-};
-
-export default BlockRenderer;
+}

package/templates/nextblock-template/components/CartDrawerLoader.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { CartDrawer } from '@nextblock-cms/ecommerce/components/CartDrawer';
+
+export function CartDrawerLoader() {
+  return <CartDrawer />;
+}

package/templates/nextblock-template/components/CartTranslator.tsx

@@ -0,0 +1,210 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useLanguage } from '../context/LanguageContext';
+import { useCartStore } from '@nextblock-cms/ecommerce/cart-store';
+import { isDigitalItem, type CartItem } from '@nextblock-cms/ecommerce/types';
+import { useIsCartHydrated } from '@nextblock-cms/ecommerce/use-cart';
+import { mapRawVariantRelations } from '@nextblock-cms/ecommerce/variation-utils';
+import { getTranslatedProductsForCart } from '@nextblock-cms/ecommerce/server-actions/product-actions';
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || '';
+
+function resolveMediaUrl(filePath?: string | null) {
+  if (!filePath) {
+    return null;
+  }
+
+  if (filePath.startsWith('http')) {
+    return filePath;
+  }
+
+  return R2_BASE_URL ? `${R2_BASE_URL}/${filePath}` : filePath;
+}
+
+function resolveProductImageUrl(product: any, fallback?: string | null) {
+  const firstMedia = product?.product_media?.[0]?.media;
+  return resolveMediaUrl(firstMedia?.file_path || firstMedia?.object_key) || fallback || null;
+}
+
+function buildCartTranslationSignature(items: CartItem[]) {
+  return JSON.stringify(
+    items.map((item) => ({
+      id: item.id,
+      product_id: item.product_id,
+      variant_id: item.variant_id ?? null,
+      sku: item.sku,
+      quantity: item.quantity,
+      language_id: item.language_id ?? null,
+      translation_group_id: item.translation_group_id ?? null,
+    }))
+  );
+}
+
+function syncCartItem(item: CartItem, translatedProduct: any, currentLocale: string): CartItem {
+  const productImageUrl = resolveProductImageUrl(translatedProduct, item.image_url);
+  const nextBase: CartItem = {
+    ...item,
+    id: translatedProduct.id,
+    product_id: translatedProduct.id,
+    title: translatedProduct.title,
+    slug: translatedProduct.slug,
+    sku: translatedProduct.sku || item.sku,
+    stock: typeof translatedProduct.stock === 'number' ? translatedProduct.stock : item.stock,
+    language_id: translatedProduct.language_id,
+    translation_group_id: translatedProduct.translation_group_id,
+    image_url: productImageUrl || item.image_url,
+    is_taxable: translatedProduct.is_taxable ?? item.is_taxable,
+    product_type: translatedProduct.product_type ?? item.product_type,
+    payment_provider: translatedProduct.payment_provider ?? item.payment_provider,
+    provider: translatedProduct.payment_provider ?? item.provider,
+    freemius_product_id: translatedProduct.freemius_product_id ?? item.freemius_product_id,
+    freemius_plan_id: translatedProduct.freemius_plan_id ?? item.freemius_plan_id,
+    trial_period_days: translatedProduct.trial_period_days ?? item.trial_period_days ?? 0,
+    trial_requires_payment_method:
+      translatedProduct.trial_requires_payment_method ??
+      item.trial_requires_payment_method ??
+      false,
+    prices: translatedProduct.prices || item.prices,
+    sale_prices: translatedProduct.sale_prices || item.sale_prices,
+    has_variants: Boolean(translatedProduct.product_variants?.length),
+  };
+
+  if (isDigitalItem(item)) {
+    return nextBase;
+  }
+
+  const isVariantLine = Boolean(item.variant_id || item.variant_label);
+  if (!isVariantLine) {
+    return {
+      ...nextBase,
+      price: translatedProduct.price,
+      prices: translatedProduct.prices || item.prices,
+      sale_price: translatedProduct.sale_price ?? null,
+      sale_prices: translatedProduct.sale_prices || item.sale_prices,
+    };
+  }
+
+  const { variants } = mapRawVariantRelations(translatedProduct.product_variants || [], currentLocale);
+  const matchedVariant = variants.find((variant) => variant.sku === item.sku);
+
+  if (!matchedVariant) {
+    return item;
+  }
+
+  return {
+    ...nextBase,
+    id: matchedVariant.id,
+    sku: matchedVariant.sku,
+    price: matchedVariant.price,
+    prices: matchedVariant.prices || item.prices,
+    sale_price: matchedVariant.sale_price ?? null,
+    sale_prices: matchedVariant.sale_prices || item.sale_prices,
+    stock: matchedVariant.stock_quantity,
+    image_url: matchedVariant.image_url || productImageUrl || item.image_url,
+    variant_id: matchedVariant.id,
+    variant_label: matchedVariant.label,
+    selected_options: matchedVariant.selected_options,
+  };
+}
+
+export function CartTranslator() {
+  const { currentLocale, availableLanguages } = useLanguage();
+  const { items, setItems } = useCartStore();
+  const isHydrated = useIsCartHydrated();
+  const prevLocaleRef = useRef<string | null>(null);
+
+  useEffect(() => {
+    async function translateCart() {
+      if (!items || items.length === 0) {
+        return;
+      }
+
+      const requestSignature = buildCartTranslationSignature(items);
+
+      const translationGroupIds = items
+        .map((item) => item.translation_group_id)
+        .filter(Boolean) as string[];
+      const skus = items
+        .map((item) => item.sku)
+        .filter(Boolean) as string[];
+      const productIds = items
+        .map((item) => item.product_id)
+        .filter(Boolean) as string[];
+
+      if (translationGroupIds.length === 0 && skus.length === 0 && productIds.length === 0) {
+        return;
+      }
+
+      try {
+        const translatedProducts = await getTranslatedProductsForCart(
+          translationGroupIds,
+          currentLocale,
+          skus,
+          productIds
+        ) as any[];
+
+        if (!translatedProducts || translatedProducts.length === 0) {
+          return;
+        }
+
+        const latestItems = useCartStore.getState().items;
+
+        if (buildCartTranslationSignature(latestItems) !== requestSignature) {
+          return;
+        }
+
+        const newItems = latestItems.map((item) => {
+          const translated = translatedProducts.find((product) =>
+            (item.translation_group_id && product.translation_group_id === item.translation_group_id) ||
+            product.id === item.product_id ||
+            product.sku === item.sku
+          );
+
+          if (!translated) {
+            return item;
+          }
+
+          return syncCartItem(item, translated, currentLocale);
+        });
+
+        const mergedItems = newItems.reduce((accumulator: CartItem[], current) => {
+          const existingIndex = accumulator.findIndex((item) => item.id === current.id);
+          if (existingIndex > -1) {
+            accumulator[existingIndex] = {
+              ...accumulator[existingIndex],
+              quantity: accumulator[existingIndex].quantity + current.quantity,
+            };
+            return accumulator;
+          }
+
+          accumulator.push({ ...current });
+          return accumulator;
+        }, []);
+
+        if (JSON.stringify(mergedItems) !== JSON.stringify(latestItems)) {
+          setItems(mergedItems);
+        }
+      } catch (error) {
+        console.error("[CartTranslator] Translation failed:", error);
+      }
+    }
+
+    if (!isHydrated || availableLanguages.length === 0) {
+      return;
+    }
+
+    const currentLanguage = availableLanguages.find((language) => language.code === currentLocale);
+    const hasLocaleMismatch = items.some((item) => item.language_id !== currentLanguage?.id);
+
+    if (currentLocale !== prevLocaleRef.current || hasLocaleMismatch) {
+      const timeoutId = setTimeout(() => {
+        translateCart();
+      }, 300);
+      prevLocaleRef.current = currentLocale;
+      return () => clearTimeout(timeoutId);
+    }
+  }, [availableLanguages, currentLocale, isHydrated, items, setItems]);
+
+  return null;
+}

package/templates/nextblock-template/components/CurrentContentSetter.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useCurrentContent } from '../context/CurrentContentContext';
+
+interface CurrentContentSetterProps {
+  id: string | number | null;
+  type: 'page' | 'post' | 'product' | null;
+  slug: string | null;
+  translation_group_id?: string | null;
+}
+
+export const CurrentContentSetter = ({ id, type, slug, translation_group_id }: CurrentContentSetterProps) => {
+  const { setCurrentContent } = useCurrentContent();
+
+  useEffect(() => {
+    // Only set if different to avoid potential loops if dependencies are unstable
+    setCurrentContent({ id, type, slug, translation_group_id });
+    
+    // Cleanup on unmount
+    return () => setCurrentContent({ id: null, type: null, slug: null, translation_group_id: null });
+  }, [id, type, slug, translation_group_id, setCurrentContent]);
+
+  return null;
+};

package/templates/nextblock-template/components/DeferredCartDrawer.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useCartStore } from '@nextblock-cms/ecommerce/cart-store';
+
+const CartDrawer = dynamic(
+  () => import('./CartDrawerLoader').then((module) => module.CartDrawerLoader),
+  { ssr: false }
+);
+
+export function DeferredCartDrawer() {
+  const isOpen = useCartStore((state) => state.isOpen);
+  const [shouldLoadDrawer, setShouldLoadDrawer] = useState(false);
+
+  useEffect(() => {
+    if (isOpen) {
+      setShouldLoadDrawer(true);
+    }
+  }, [isOpen]);
+
+  return shouldLoadDrawer ? <CartDrawer /> : null;
+}

package/templates/nextblock-template/components/DeferredCartTranslator.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { useEffect, useState, type ComponentType } from "react";
+
+type CartTranslatorComponent = ComponentType<Record<string, never>>;
+
+function scheduleIdleWork(callback: () => void) {
+  if (typeof window === "undefined") {
+    return undefined;
+  }
+
+  const browserWindow = window as Window & {
+    requestIdleCallback?: (
+      callback: IdleRequestCallback,
+      options?: IdleRequestOptions
+    ) => number;
+    cancelIdleCallback?: (handle: number) => void;
+  };
+
+  if (browserWindow.requestIdleCallback && browserWindow.cancelIdleCallback) {
+    const idleId = browserWindow.requestIdleCallback(callback, { timeout: 3_000 });
+    return () => browserWindow.cancelIdleCallback?.(idleId);
+  }
+
+  const timeoutId = window.setTimeout(callback, 2_000);
+  return () => window.clearTimeout(timeoutId);
+}
+
+export function DeferredCartTranslator() {
+  const [CartTranslator, setCartTranslator] =
+    useState<CartTranslatorComponent | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    const cancelIdleWork = scheduleIdleWork(() => {
+      void import("./CartTranslator").then((module) => {
+        if (!cancelled) {
+          setCartTranslator(() => module.CartTranslator as CartTranslatorComponent);
+        }
+      });
+    });
+
+    return () => {
+      cancelled = true;
+      cancelIdleWork?.();
+    };
+  }, []);
+
+  return CartTranslator ? <CartTranslator /> : null;
+}