Skip to content

fix(fast-html): a hydrating repeat with no items has no hydration markers #7211

@radium-v

Description

@radium-v

🐛 Bug Report

When a repeat (f-repeat) is present in the template but the stale/initial state has no items, there's no way to know where the repeat should bind to, because there are no hydration markers to indicate its mapped position.

💻 Repro or Code Sample

<test-element>
  <template shadowrootmode="open">
    <!--fe-b$$start$$0$$f-when-binding$$fe-b--><!--fe-b$$end$$0$$f-when-binding$$fe-b-->
  </template>
</test-element>

<f-template name="test-element">
  <template>
    <f-when value="{items}">
      <f-repeat value="{item in items}">{{item}}</f-repeat>
    </f-when>
  </template>
</f-template>

<test-element-breaks>
  <template shadowrootmode="open">
  </template>
</test-element-breaks>

<f-template name="test-element-breaks">
  <template>
    <f-repeat value="{item in items}">{{item}}</f-repeat>
  </template>
</f-template>

🤔 Expected Behavior

Both components would render without hydration errors.

😯 Current Behavior

The test-element renders because the f-repeat is guarded by the wrapping f-when.

The test-element-breaks component fails with a hydration error.

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions