Skip to content

Slot component with SlotContext and SlotProvider #4

@qantrepreneur

Description

@qantrepreneur

What to build

Implement the core slot primitives that templates use to declare insertion points and pages use to fill them.

Three pieces:

  • SlotContext — React context holding a SlotMap (Record<string, ReactNode>)
  • SlotProvider — wraps the template tree, provides the slot map from the page
  • <Slot id="name" fallback={...} /> — reads from SlotContext, renders the matching slot content or falls back

Templates use <Slot> to declare where page content goes:

export default function MarketingTemplate({ head }) {
  return (
    <html><head>{head}</head><body>
      <Slot id="header" />
      <main><Slot id="content" /></main>
      <Slot id="footer" fallback={<DefaultFooter />} />
    </body></html>
  );
}

Acceptance criteria

  • SlotContext created with empty default
  • SlotProvider accepts slots: SlotMap and children
  • <Slot> renders matching content from context
  • <Slot> renders fallback when slot is not provided
  • <Slot> renders nothing when slot is not provided and no fallback
  • All three exported from @sundayceo/framework
  • Unit tests for each behavior

Blocked by

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions