yeojz / metalsmith-react-templates

A metalsmith plugin to render files using React / Preact / JSX based templates.
MIT License
92 stars 17 forks source link

Using template instead of rtemplate #1

Closed dahmian closed 9 years ago

dahmian commented 9 years ago

Hi, thanks for writing this plugin, it's really useful! I'm curious though, why pull from rtemplate instead of template?

yeojz commented 9 years ago

@dahmian thanks.

Pulling from rtemplate was to give flexibility and maintain compatibility with other templating engines. It was to support the use case where you may want to use React to modify your content, but still want to take advantage of other functionalities which templating engines may provide.

I do not know if it will be a common use case though. So I erred on the side of caution.

What do you think?

dahmian commented 9 years ago

Thank you for explaining! That sounds like an interesting use case, so you could embed a React template inside another template like the example below? That might be useful for rendering tags that React does not support. Or if you want to do something that React doesn't allow, like having two root nodes. Are there other use cases?

index.html:

---
template: master.mustache
rtemplate: detail.jsx 
---
Hello World!

detail.jsx:

var React = require('react'); 
module.exports = React.createClass({
  render: function() {
    return <p>{this.props.content}</p>
  }
});

master.mustache:

<customtag>
  {{{ contents }}} 
</customtag>
yeojz commented 9 years ago

@dahmian Great example! Yes. That's about it. I didn't even consider 2 root nodes actually..

The initial thought started from needing to insert the contents of metalsmith somewhere. In an actual React app, that will be an index.html which calls:

React.render(<Handler/>, document.getElementById('container'));

In the case of this plugin, it's the base.html file and the plugin will insert into it's contents placeholder: i.e.

{{contents}}

However, this solution will not give the option of having multiple base templates for different sections of the site or have the option of logic (like if-else) statements. For example in in lodash:

<%= if (typeof(title) !== "undefined") { %> Do Something <%= } %>

This is something I didn't want to recreate or introduce additional external dependencies as it's not the main purpose of the plugin.

So for the above use-case, you can leave out the baseFile option in this plugin and subsequently choose to use another plugin like metalsmith-templates to do the final html file rendering with all the power of html templating if desired.