There is a bug in the rendering order of Astro components

J-env commented 1 month ago

Astro Info

Astro                    v4.11.5
Node                     v18.18.0
System                   macOS (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             astro-icon

If this issue only occurs in one browser, which browser is a problem?

Chrome

Describe the Bug

When the same component uses Astro.request to record the first rendering state, the first rendering state is not in the frontmost component

---
import { Icon } from "astro-icon/components";
---

// Nav.astro
<nav>
 <Icon name="mdi:account" />
</nav>

// Footer.astro
<footer>
 <Icon name="mdi:account" />
</footer>

Rendering results:

What's the expected result?

The example in the link is just a reproducible situation, it seems like there are other situations where this problem may also occur, perhaps related to slot rendering?

<symbol /> should appear as the first icon on the page, otherwise the first icon will be blank when the page is loaded.

Astro Icon: Automatically optimized sprites

Link to Minimal Reproducible Example

https://stackblitz.com/edit/withastro-astro-8pstxv?file=src%2Fpages%2Findex.astro

Participation

[ ] I am willing to submit a pull request for this issue.

TheElegantCoding commented 1 month ago

maybe this is related i hace a component that simulates a for each and render components it works like this.

---
type Props<T> =
{
  each: T | null | false | undefined;
};

const { each } = Astro.props;

const slots: string[] = [];

if(each)
{
  await Promise.all(each.map(async (element: string, index: number) =>
  {
    slots.push(await Astro.slots.render('default', [ element, index ]));
  }));
}
---
<Fragment set:html={slots} />

this just put all slots or childrens and render the components, but after the new updates, the maps is not in order. this is how you use the component

---
const data = [ '1', '2', '3', '4', '5', '6' ];
---

<For each={data}>
  {(data: string) => <p>{data}</p>}
</For>

the order of how this render change in dev sometimes and when i do the build also change the order one more time

matthewp commented 3 weeks ago

I don't think this is a bug. I'm not sure of anywhere that we say that components render in a top-down order.

J-env commented 3 weeks ago

I don't think this is a bug. I'm not sure of anywhere that we say that components render in a top-down order.

But it affects some issues that are difficult to understand. For example: Astro Icon records the first rendering, <symbol /> should be rendered first.

TheElegantCoding commented 3 weeks ago

@matthewp I think it is, components should render in order, otherwise, this can affect the UI and how it looks

withastro / astro