marko

marko copied to clipboard

Description

Rename renderBody to one of the following:

• body
• children
• content

Why

I don't like renderBody. It feels like an implementation detail that the user should not have to worry about. But the current state is that they do have to worry about it... kinda.

The <${dynamic}> tag looks for a renderBody property on an object, so we've allowed the user to include content without having knowledge of renderBody.

<${input}/> // calls input.renderBody
<${input.header}/> // calls input.header.renderBody

This looks and feels pretty clean, but it hides the renderBody property which is an indicator of whether the tag had children in its body. So, for default content, knowledge of renderBody is still needed.

<if(input.renderBody)>
  <${input.renderBody}/>
</if>
<else>
   Default content
</else>

Renaming renderBody

I think the main reason renderBody feels like an implementation detail is its name. In older versions of Marko, users had to call this function and pass out. But that's no longer the case. It's written as a tag, and when writing other tags, we don't name them <render-app-layout> and <render-drop-down>.

From the user's perspective, it's not a function that renders the body, it is the body.

Even if you look at the implementation, when you parse the document, you don't get a renderBody function. You get a tag body. It isn't until code-generation that it becomes a function.

Perhaps we should just call it body. Or, since it isn't so much the body users care about, but the contents of the body, how about children or content?

This actually reads better with <${dynamic}>. I'm not including a function, I'm including the children of the tag. I don't know about you, but this feels cleaner to me.

<if(input.children)>
  <${input.children}/>
</if>
<else>
   Default content
</else>

Repeating myself for posterity: I would love it if I never had to say “render the children” ever again (thanks React)

While rewriting some docs, “nested content” seemed to strike a pretty good balance. How about input.nested?