Skip to content

Strengthen layout composition documentation with pitfall warnings #232

@bcomnes

Description

@bcomnes

This issue was originally identified in voxpelli/voxpelli.github.com#32

Problem

The DomStack README has a "Nested layouts" section that documents the core layout composition pattern. However, the documentation does not cover several practical pitfalls that users encounter when composing layouts:

  1. What breaks when scripts/styles are not forwarded — forgetting to forward them causes silent failure (pages render without CSS/JS bundles, no error)
  2. Modifying vars before forwarding — the README example uses rest spread to forward everything, but doesn't show adding layout-specific flags
  3. Forwarding page, pages, and workers — easy to forget when layouts need page introspection
  4. Layout-specific CSS/JS with nested layouts — must manually @import / import parent layout assets

What's missing

1. Warning about the silent failure mode

If scripts and styles are not forwarded to the base layout, the page renders without CSS or JS bundles — no error message, the page simply appears unstyled:

// WRONG -- scripts and styles are silently lost
return rootLayout({ children: wrappedContent, vars });

// CORRECT -- scripts and styles are forwarded
return rootLayout({ children: wrappedContent, vars, scripts, styles });

2. Pattern for modifying vars before forwarding

const layoutVars = {
  ...vars,
  author: true,
  hfeed: true,
  webmentionable: true,
};
return rootLayout({ children: wrappedContent, vars: layoutVars, scripts, styles });

3. Explicit param forwarding checklist

export default function articleLayout ({ children, vars, scripts, styles, page, pages, workers }) {
  return rootLayout({
    children: wrappedContent,
    vars: layoutVars,
    scripts,    // Hash-busted CSS/JS paths — MUST forward
    styles,     // Hash-busted CSS/JS paths — MUST forward
    page,       // Forward if base layout uses page introspection
    pages,      // Forward if base layout uses page listing
    workers,    // Forward if base layout uses web workers
  });
}

Proposed solution

Add a "Layout composition pitfalls" subsection to the existing "Nested layouts" documentation:

  1. A warning about the silent failure when scripts/styles are not forwarded
  2. An example showing vars modification before forwarding
  3. A quick-reference list of params that should be forwarded and why

This is a small addition to existing documentation, not a new section.

Key pitfall confirmed

The non-cascading styles/scripts is the primary pitfall. Users expect CSS from a parent layout to "just work" in child layouts, but DomStack requires explicit @import. This is the main documentation gap.

Metadata

Metadata

Assignees

No one assigned

    Labels

    documentationImprovements or additions to documentationdx

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions