teleporthq / teleport-code-generators

A collection of code generators for modern JavaScript applications
https://teleporthq.io
MIT License
1k stars 159 forks source link

(feat): support named slots which helps in passing jsx to the components #905

Closed JayaKrishnaNamburu closed 3 months ago

JayaKrishnaNamburu commented 3 months ago

Implement named-slot for next and html generators to pass jsx to components.

{
    "type": "element",
    "content": {
        "elementType": "component",
        "dependency": {
            "type": "local"
        },
        "referencedStyles": {},
        "abilities": {},
        "children": [],
        "attrs": {
            "heading": {
                "type": "element",
                "content": {
                  "elementType": "container",
                  "style": {
                    "padding": "20px"
                  },
                  "children": ["This is amazing"]
                }
              }
        },
        "semanticType": "Hero"
    }
}

Declaration of the prop is

{
  "heading": {
      "defaultValue": "Magnificent things are very simple",
      "type": "element"
  }
}

This will help in creating jsx that can pass jsx as a prop to the component

<Hero heading={<div>This is amazing</div>}></Hero>
const Hero = () => {
  return <div className="hero-text">{props.heading}</div>
}
JayaKrishnaNamburu commented 3 months ago

Related to #897