Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
torchsmith opened this issue Jul 14, 2023 · 4 comments
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)

Comments

@torchsmith
Copy link

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.

@natemoo-re natemoo-re added the - P3: minor bug An edge case that only affects very specific usage (priority) label Jul 18, 2023
@torchsmith
Copy link
Author

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.

@natemoo-re
Copy link
Member

@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?

@torchsmith
Copy link
Author

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
Copy link
Author

@natemoo-re just checking in on this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
- P3: minor bug An edge case that only affects very specific usage (priority)
Projects
None yet
Development

No branches or pull requests

2 participants