thoughts on extensible custom tags

So this may not be in the philosophy of bel, but how/should/can I easily 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 bel`<button>my ${opts.name} button</button>`
}

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

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

// which is actually just

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

// or

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

// which is actually

const customtagsuse2 = bel`<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 bel.

so something like:

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

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

[shama]

@SilentCicero webpack can run browserify transforms too.

But what about intercepting the actual yo or bel elements and doing it there, does that seem unfeasible or very difficult to accomplish on that level?

When parsing the template literal, it doesn’t know about the variables on the same scope of the literal, only the expressions passed in with ${}. So it would require registering each component as the above examples are doing and informing the parser about that registry, which can get pretty messy.

[timwis]

Hey guys, was thinking about this today and had a similar idea… what about using proper custom elements from the web components spec?

EDIT: Probably no matter what you do, the issue of passing in attributes other than strings will be annoying, ie. <MyElement codes=${ [ 'foo', 'bar' ] }></MyElement>

EDIT2: Threw together an example using choo