slinkity / slinkity

To eleventy and beyond! The all-in-one tool for templates where you want them, component frameworks where you need them 🚀

Home Page:https://slinkity.dev

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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:

  1. island component:
    _islands/Dropdown.jsx
export default function Dropdown(props) {
  return (
    <>
      HELLO WORLD
      <details>
        <summary>{props.heading}</summary>
        {JSON.stringify(props, null, 2)}
      </details>
    </>
  )
}
  1. 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 👊
  1. Enable the plugins:
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(
    slinkity.plugin,
    slinkity.defineConfig({
      renderers: [preact()],
    }),
    EleventyRenderPlugin
  )
...
}
  1. 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.