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.

Sign up for GitHub

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

Jump to bottom

Props not being passed to some slots #7610

Closed
1 task
salami-art opened this issue Jul 10, 2023 · 8 comments · Fixed by #10747
Closed
1 task

Props not being passed to some slots #7610

salami-art opened this issue Jul 10, 2023 · 8 comments · Fixed by #10747
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: rendering Related to prop serialization, html escaping, and framework components (scope) pkg: astro Related to the core `astro` package (scope)

Comments

@salami-art
Copy link

salami-art commented Jul 10, 2023 •
edited
Loading

What version of astro are you using?

2.8.0

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

I am attaching a stripped-down example of what I am experiencing.

Basically, at least one of the slots I'm trying to render does not receive props ( hence the error ), usually the one named after. I found out about this when trying to build a component that receives multiple slots, all were passed props, except the one named after (or anything starting with A, weirdly enough) .
If I remove the props destructuring from the slotted function the slot is rendered.

By debugging the code into node_modules/astro/dist/core/render/result.js, I found out that that slot's expressions sometimes has an Object [Generator] {} as its first member (therefore the getFunctionExpression returns undefined because the expressions length is greater than 1) and I don't know where it comes from. However, sometimes, by changing the slot's name from after to something else the Object [Generator] {} disappears

What's the expected result?

I would like the props to be passed to all slots. It seems like the issue has something to do with my example not having a tag and the after slot being the first in alphabetical order ( but I have seen it happening even if the tag is included in other examples )

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-927mjd?file=src%2Fpages%2Findex.astro

Participation

  • I am willing to submit a pull request for this issue.
@BryceRussell
Copy link
Member

BryceRussell commented Jul 10, 2023 •
edited
Loading

I was looking at this issue in #support and what I found is:

// src/pages/index.astro
---
import Test from '../Test.astro';
---

<Test>
    <div slot="B">
	{v => console.log('\n', 'Render B', v)}
    </div>
    <div slot="C">
	{v => console.log('\n', 'Render C', v)}
    </div>
    <div slot="A">
	{/* 'v' is undefined  */}
	{v => console.log('\n', 'Render A', v)}
    </div>
</Test>

The maybeRenderHead() generator is added as an expression to the first named slot function alphabetically. When the slot is rendered the contents of the head are rendered first causing the next expression (the slot function) to not receive any of the arguments that were passed when using Astro.slots.render('A', [value])

@salami-art
Copy link
Author

salami-art commented Jul 12, 2023 •
edited
Loading

That does fix that example, but there are also cases where the problem persists when adding a <head> tag.

see this: https://stackblitz.com/edit/github-32w1iv?file=README.md

@Princesseuh Princesseuh added the - P4: important Violate documented behavior or significantly impacts performance (priority) label Jul 17, 2023
@lilnasy
Copy link
Contributor

lilnasy commented Jan 5, 2024

Relevant proposal:

@matthewp
Copy link
Contributor

Names slots can't be function. In these examples the div is the slot. The functions are just regular expressions. It would be the same as passing a function as an expression anywhere else, the template calls them without arguments.

This should work for default slots (the only valid way to define a function as a slot).

@lilnasy lilnasy mentioned this issue Feb 23, 2024
Closed
1 task
@BryceRussell
Copy link
Member

BryceRussell commented Feb 23, 2024 •
edited
Loading

@matthewp

This used to work in previous versions of Astro, is there a reason this is not supported anymore? I built a library of components that uses this principal of passing template functions to named slot to customize the rendering of a component https://github.com/BryceRussell/astro-headless-ui/wiki#named-slot-functions would this be considered a regression?

@matthewp
Copy link
Contributor

Oh I didn't know that. What version worked?

@matthewp matthewp reopened this Feb 23, 2024
@github-actions github-actions bot added the needs triage Issue needs to be triaged label Feb 23, 2024
@BryceRussell
Copy link
Member

I am not too sure I will do some testing and see which version it got changed

@BryceRussell
Copy link
Member

BryceRussell commented Feb 23, 2024 •
edited
Loading

@matthewp I tested this a bunch, passing a function to a named slot does still work but there is a caveat with the name of the tag, if the tag includes a dash - it breaks:

  • ✅ <tag slot="named">{() => ...}: tag is NOT included in the markup, arguments ARE passed to slot function
  • ❌ <tag-with-dashes slot="named">{() => ...}: tag IS included in the markup, arguments are NOT passed to slot function

But this is unrelated to the original issue

I made a minimal reproduction for the original issue here: https://stackblitz.com/edit/github-s9fusc?file=src%2Fpages%2Findex.astro,src%2FTest.astro,.gitignore

I have a limited knowledge of how the rendering works but the way I understand it is:

  • If a component is the very first expression/element/tag on the page, the first slot alphabetically of the component will receive a maybeRenderHead() expression before the slot's function expression. When this slot is rendered, the maybeRenderHead() expression receives or "eats" the arguments meant for the the slot function.

@lilnasy lilnasy removed the needs triage Issue needs to be triaged label Feb 26, 2024
@ematipico ematipico added the pkg: astro Related to the core `astro` package (scope) label Feb 28, 2024
@lilnasy lilnasy added the feat: rendering Related to prop serialization, html escaping, and framework components (scope) label Mar 25, 2024
@lilnasy lilnasy mentioned this issue Apr 10, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
- P4: important Violate documented behavior or significantly impacts performance (priority) feat: rendering Related to prop serialization, html escaping, and framework components (scope) pkg: astro Related to the core `astro` package (scope)
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(rendering): remove render instructions from slot expressions lilnasy/astro
6 participants
@matthewp @ematipico @Princesseuh @salami-art @BryceRussell @lilnasy