children props not passing in markdown
TotalLag opened this issue · comments
Describe the bug
Following the examples on https://slinkity.dev/docs/component-shortcodes/ the children
prop is not getting passed to the island as expected.
To Reproduce
Steps to reproduce the behavior:
- island component:
_islands/Dropdown.jsx
export default function Dropdown(props) {
return (
<>
HELLO WORLD
<details>
<summary>{props.heading}</summary>
{JSON.stringify(props, null, 2)}
</details>
</>
)
}
- Inside the
index.md
:
---
title: It's Slinkity time
layout: layout
---
{% island 'Dropdown.jsx' %}
{% prop 'heading', 'Full disclosure' %}
<p>"details" and "summary" are kinda confusing element names</p>
{% endisland %}
If you're reading this from your browser... congrats! You just built (or dev server-ed) you're first Slinkity site 👊
- Enable the plugins:
module.exports = function (eleventyConfig) {
eleventyConfig.addPlugin(
slinkity.plugin,
slinkity.defineConfig({
renderers: [preact()],
}),
EleventyRenderPlugin
)
...
}
- Only the
heading
props show
Expected behavior
The children prop gets passed to the island.
(please complete the following information):
- OS: Windows
- Browser: Edge
- Version: ^2.0.0-canary.25 / ^1.0.0-canary.0
Additional context
The EleventyRenderPlugin was intended to test our the renderTemplate
function. This still doesn't work without it. I added the snippet to the layout.njk file as well in case it was something with markdown, but same issue.
Great project! Just learned about it and I'm probably doing something wrong, but hope to explore it further!
I tried to reproduce your issue and I was seeing the same thing.
I think you gotta hydrate your island.
{% island 'Dropdown.jsx', 'client:load' %}
https://slinkity.dev/docs/partial-hydration/
Also I think your Preact component needs to reference the children. Something like the following.
{props?.children?.default}
In my testing, the <p>...</p>
html tags show up. Not sure what to do about that just yet.