compiler icon indicating copy to clipboard operation
compiler copied to clipboard

🐛 BUG: Resolve framework component slots when we can't statically analyze them.

Open torchsmith opened this issue 2 years ago • 4 comments
trafficstars

What version of @astrojs/compiler are you using?

1.3.2

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Using preact/react-compat for this example.

The following (.astro file) contents:

return (
<ContainerTwo id={mod.id}>
    {[
        <Container slot="mySlot">hello</Container>,

        <Container slot="slot2">
            <Heading
              text="myheading"
              id="asd"
            />
        </Container>,
    ].map((child, index) => {
        return child;
    })}
</ContainerTwo>
);

Turns into

return $$render`${$$renderComponent(
      $$result,
      'ContainerTwo',
      ContainerTwo,
      { id: mod.id },
      $$mergeSlots(
        {},
        [
          {
            mySlot: () =>
              $$render`${$$renderComponent(
                $$result,
                'Container',
                Container,
                { slot: 'mySlot' },
                { default: () => $$render`hello` }
              )}`,
          },
          {
            slot2: () =>
              $$render`${$$renderComponent(
                $$result,
                'Container',
                Container,
                { slot: 'slot2' },
                {
                  default: () => $$render`
            ${$$renderComponent($$result, 'Heading', Heading, {
                      text: 'myheading',
                      id: 'asd',
                    })}
                                    `,
                }
              )}`,
          },
        ].map((child, index) => {
          return child;
        })
      )
    )}`;

The issue is that astro cannot statically analyze the slots and is falling back on this $$mergeSlots.

Because of this slots are simply not being rendered.

More info at this discord convo with Nate: https://discord.com/channels/830184174198718474/845430950191038464/1129498064592310408

Link to Minimal Reproducible Example

Not yet. Maybe later.

torchsmith avatar Jul 14 '23 19:07 torchsmith

Hi @natemoo-re , it's been a month and I know this is minor for you guys, but is there any way we can get this into the pipeline? Quite important for me :) I'm out of country until a month from now so I won't really be able to look into it myself.

torchsmith avatar Aug 10 '23 17:08 torchsmith

@torchsmith not sure when we'll be able to get to this, as it's a pretty involved change to the design of our slot handling.

Thinking of ways to possibly unblock you, would it be possible to move this logic into a Preact component so you can take advantage of the full dynamicism of JSX?

natemoo-re avatar Aug 10 '23 17:08 natemoo-re

I saw that Astro 3.0 has some stuff to do with slots, was wondering if any of that relates to this or not?

torchsmith avatar Aug 25 '23 15:08 torchsmith

@natemoo-re just checking in on this

torchsmith avatar Oct 31 '23 13:10 torchsmith