custom elements

[SilentCicero]

note, I posted this question to the bel issues as well.

So this may not be in the philosophy of bel/yoyo, but how/should/can I create an extensible module for bel/yoyo (the module I use) that allows for custom tags/props that just render functions.

Here is what I'm thinking:

const Button = function (opts) {
    return yo`<button>my ${opts.name} button</button>`
}

const customtagsuse = yo`<div><Button name="Nick" /></div>`

// which is actually just

const customtagsuse = yo`<div>${Button({name: "Nick"})}</div>`

// or

const Col = function (_yield, opts) {
   return yo`<div class="column">${_yield}</div>`
}

const customtagsuse2 = yo`<div><Col> some cols </Col></div>`

// which is actually

const customtagsuse2 = yo`<div>${Col(" some cols ")}</div>`

Kinda reactish, but all it's doing is regexing the string, and replacing it with the element.

I'm thinking of providing a layer to yo/bel.

so something like:

var extensible = require("bel-custom")
var yo = extensible(require("yo"))
yo.customElements = {"Button": Button}; // sort of thing

Any thoughts on design patterns, approaches, potential pitfalls, potential benefits?

[shama]

Ref https://github.com/shama/bel/issues/25

[shama]

Closing as the conversation has moved in https://github.com/shama/bel/issues/25