Skip to content

Allow the copy prop to mark specific props for copying #292

@brainkim

Description

@brainkim

Allow the copy prop to mark specific props for copying

Background

The copy prop (née crank-static, c-static, $static) is a special boolean prop that skips rendering for an element. When true, a host element will not re-render its props/attrs, and children will not be re-rendered, even if these have changed from the previous renders.

// Neither class nor children will change in subsequent renders.
<div copy={true} class={someValue}>{children}</div>

Motivation

It would be useful to extend this prop so that you can skip re-rendering specific props, or just the children of an element. This would allow for advanced performance optimizations, enable dynamic props to be “controlled” or “uncontrolled” without React’s defaultValue API, and make Crank more attractive for JSX transforms, where static parts of expressions could be identified and skipped from re-rendering.

Proposal

Extend the copy prop so it can accept a space-delimited string, in addition to a boolean. The syntax is lightweight and similar to class/className. If a string is passed, only the named props are copied. If the string is prefixed with !, all named props are excluded from copying (all other props are copied).

Examples:

  • copy={true} — Copy all props and children.
  • copy={false} — Copy none of the props or children (render normally).
  • copy="class children" — Copy only class and children.
  • copy="!children" — Copy all props except children.

This syntax makes conditional expressions easy:

<div copy={copyChildren ? "children" : false} />

Mixing inclusion and exclusion (e.g., copy="class !id") is not allowed, making this prop to reason about.

Open Question

Should the copy prop with a string value extend to Components? If so, what should the expected behavior be? This could be explored in a future enhancement.

Next Steps

  • Implement the new API.
  • Add documentation for the new prop syntax, including examples and edge cases.
  • Throw errors for ambiguous or mixed inclusion/exclusion cases.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions