code-style

Code Style

Vibe-Coding Principles

Core Philosophy:

• Write clean, modular, and idiomatic code
• Prefer declarative over imperative patterns
• Make code readable and self-documenting
• TypeScript-first development approach
• Component-driven architecture with XM Cloud integration

Code Organization:

• Use modern JavaScript/TypeScript features
• Export public types at module boundaries
• Prefer pure functions and thin wrappers
• No top-level side effects (except page entry points)
• Modular architecture with clear separation of concerns

Code Quality Standards

TypeScript Usage:

• Enable strict mode in all projects
• Prefer explicit types over any
• Use discriminated unions for complex state
• Export types at module boundaries for reusability
• Define proper interfaces for XM Cloud data structures

Functional Programming:

• Prefer pure functions where possible
• Use immutable data patterns
• Avoid side effects in business logic
• Compose small, focused functions
• Use React hooks appropriately

Readability:

• Use descriptive variable and function names
• Keep functions small and focused (single responsibility)
• Prefer self-documenting code over extensive comments
• Use consistent naming patterns across all starters

Component Development

React Best Practices:

• Use functional components with hooks
• Implement proper prop validation with TypeScript
• Handle loading and error states explicitly
• Use React.memo for performance optimization when needed
• Follow React 18+ patterns and concurrent features

XM Cloud Component Patterns:

• Always validate field existence before rendering
• Provide meaningful fallbacks for missing content
• Use Sitecore field components for proper rendering
• Handle both editing and preview modes
• Implement proper error boundaries
• Handle destructuring, undefined errors and null values in datasource and field values gracefully

// Good component pattern
import { Text, Image, useSitecore } from '@sitecore-content-sdk/nextjs';

interface HeroProps {
  fields: {
    data?: {
      datasource?: {
        title?: { jsonValue?: Field };
        subtitle?: { jsonValue?: Field };
        backgroundImage?: { jsonValue?: Field };
      };
    };
  };
}

export default function Hero({ fields }: HeroProps) {
  const { page } = useSitecore();
  const { isEditing } = page.mode;

  if (!fields) {
    return <div>Hero content not configured</div>;
  }

  // Handle destructuring errors with safe fallbacks
  const { data } = fields || {};
  const { datasource } = data || {};
  const { title, subtitle, backgroundImage } = datasource || {};

  return (
    <section className="hero">
      {/* Show field components in editing mode even if no content */}
      {(title?.jsonValue?.value || isEditing) && <Text field={title?.jsonValue} tag="h1" />}
      {(subtitle?.jsonValue?.value || isEditing) && <Text field={subtitle?.jsonValue} tag="p" />}
      {(backgroundImage?.jsonValue?.value?.src || isEditing) && (
        <Image field={backgroundImage?.jsonValue} />
      )}
    </section>
  );
}