Skip to content
This repository has been archived by the owner on Mar 22, 2024. It is now read-only.

children props not passing in markdown #241

Open
TotalLag opened this issue Mar 29, 2023 · 1 comment
Open

children props not passing in markdown #241

TotalLag opened this issue Mar 29, 2023 · 1 comment
Labels
🐞 bug Something isn't working

Comments

@TotalLag
Copy link

TotalLag commented Mar 29, 2023

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!

@TotalLag TotalLag added the 🐞 bug Something isn't working label Mar 29, 2023
@insanity54
Copy link

insanity54 commented Mar 29, 2023

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants