choojs / nanohtml

:dragon: HTML template strings for the Browser with support for Server Side Rendering in Node.
MIT License
687 stars 49 forks source link

Support custom components #79

Open YerkoPalma opened 7 years ago

YerkoPalma commented 7 years ago

First of all, I want to know if this makes sense to you, I have more doubts than answer but here are my thoughs. Basically, allow to write this code (taking the list example from readme):

// ...
function render (selected) {
    return bel`<div className="app">
      <h1>Selected: ${selected}</h1>
      ${list(bears, onselected)}
    </div>`
  }
// ...

like this

// ...
function render (selected) {
    return bel`<div className="app">
      <h1>Selected: ${selected}</h1>
      <CustomList source=${JSON.stringify(bears)} onselected=${onselected}>
      </CustomList>
    </div>`
  }
// ...

Implementation shouldn't be so hard, unless I'm missing something, it would need a registration method for components, and when evaluating tags, if the tag is a registered component, use the registered function for that component. The benefit I see here is for frameworks/libraries depending on bel in supporting components, like in choo . and also the similarity with other component based libraries like React and Vue. Now my doubt is if those benefit are enough for changing bel. Also, this change wouldn't be a breaking change, just a minor release.

Any thoughts about it? Am I talking nonsense? :speak_no_evil:

aaaristo commented 7 years ago

Had the same "issue", and solved it like this: https://github.com/aaaristo/rbel

Would be cool to know if there is any better way.