-
Notifications
You must be signed in to change notification settings - Fork 77
Description
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 onlyclass
andchildren
.copy="!children"
— Copy all props exceptchildren
.
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.