More documentation on slots

[ddorstijn]

Hey prevwong,

The examples and guides are nice to get started. One thing that seemingly is missing is documentation about slots. It seems, looking at the example AST on the main side, one is able to filter possible components for specific slots. There seem to be named slots, but it is hard to find more details about the way it has been implemented. Could you maybe elaborate a little further on the topic?

Also, is it possible to have placeholder data in slots? What happens if you have multiple unnamed slots on a component, etc.

Probably the same for kinds.

[prevwong]

Slots/kinds are super experimental at the moment and they are not fully implemented yet (eg: kinds are not really enforced in the evaluator so even if you put a numeric value for variable with a string kind, it would still work when in reality we should not allow this). I added them so I could quickly unblock myself with the integration work for Craft.js that I am working on internally. I will add docs for them once I have them in a more stable state.

As for the questions regarding slots:-

1. At the moment, you can't have placeholder in slots (although this will probably be something I implement soon).
2. Named/un-named slots can be used like so

   
   component Section() -> (
   <div>
     <slot name="header" />
     <slot />
   </div>
   )

component App() -> (

// will be rendered in the "header" slot template // will be rendered in the unnamed slot template

)

3. When you have multiple unnamed/named slots in the component, it will just render the template contents multiple times. Tbh this is unlikely to be desirable in a real page editor, so there must be some rules to be enforced in the evaluator. For example, we should prevent having multiple unnamed slots or multiple named slots with the same name. 

Hope this helps! 

[ddorstijn]

This helps already! It is quite logical but it would be nice to be able to see it in the documentation