Handle upgrading and rendering not yet upgraded component instances of components with newly removed props or slots
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3568906. -->
Reported by: [effulgentsia](https://www.drupal.org/user/78040)
Related to !612 !540
>>>
<h3 id="overview">Overview</h3>
<p>Follow-up to <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3567413" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3567413</a></span>. After that issue lays the initial groundwork by handling the cases listed there, this issue is for adding support for two other cases:</p>
<ul>
<li>A Component's active version does not have a prop that the component instance's (old) version has (i.e., a prop got removed from the component).</li>
<li>A Component's active version does not have a slot that the component instance's (old) version has (i.e., a slot got removed from the component).</li>
</ul>
<p>For the cases above, we need to handle both:</p>
<ul>
<li>Upgrading the component instance's version when the component instance is edited (same as in <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3567413" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3567413</a></span>).</li>
<li>Rendering component instances that haven't been upgraded yet (haven't been edited since the Component got changed).</li>
</ul>
<h3 id="proposed-resolution">Proposed resolution</h3>
<p>Improve the updater t support removed props and slots.</p>
<ul>
<li>Upon upgrading the component instance, remove values of props that don't exist in the component's active version.</li>
<li>Upon upgrading the component instance, remove child component instances from slots that don't exist in the component's active version. This requires modifying the entire component tree.</li>
</ul>
<p>Removed from scope, as rendering components with extraneous data does not break rendering. When the component is upgraded, data will be cleaned up.</p>
<p><del>When rendering a not-yet-upgraded component instance (component instance's version not equal to the component's active version), remove prop values and slot children from the ephemeral component instance data prior to rendering. In other words, when rendering, don't pass prop and slot values that aren't expected (aka <em>supported!</em>) by the component's code.</del></p>
<p>This issue's scope DOES NOT include bulk upgrading all component instances (i.e., deleting orphaned data from all component instances). It only covers upgrading component instances when they are edited.</p>
<p>A consequence of the above is that if someone removes a prop/slot from their component, then adds it back a short while later, component instances that haven't been edited in the meantime continue functioning as before (their old prop/slot values were never removed, so effectively get restored). Ensure there's test coverage for this, whether that's added in this issue or being added in other issues such as <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3557272" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3557272</a></span>.</p>
<h3 id="ui-changes">User interface changes</h3>
<ul>
<li>When a prop or slot is removed from a component, published pages will start rendering without them.</li>
<li>If/when a prop or slot of the same name is re-added, component instances that had been edited in the meantime will have had that data removed already, but component instances that had not been edited in the meantime will start rendering with that old data again.</li>
</ul>
issue