Extending with own components?

[shokurov]

As I see from the heml-elements/index.js there is no mechanism for plugging in additional components. That limits usability and, I believe, prevents real world use in large projects.

I understand that SparkPost would be having trouble allowing custom JS to be run within parse or render phases on their servers, however adding extension mechanism would have grand effect on spread of HEML as open standard.

[colestrode]

Hi @shokurov! Thanks for checking out HEML :) It turns out you can pass in your own elements in the options object you pass to the exported heml function:

const heml = require('heml')
heml(`<heml>...</heml>`, { elements: [ /* elements go here */ ] })

There isn't much documentation on custom elements yet (that will be coming soon I believe), but I they need to be created using the createElement function found in @heml/utils. I would look at the elements in @heml/elements for which attributes are accepted.

[shokurov]

Thanks for pointing out!

This definitely needs a bit more documentation..

Please, could you clarify couple more things:

1. do components have to utilise React or is it just convenience that you use JSX in internal components?
2. is there a description of <Style > component interface? It seems crucial for use in all other components, however I could not find a description of its interface.

[colestrode]

I'm not sure about the first question, I'll defer to @avigoldman on that. I imagine you do need to use React, though you don't need JSX.

For the Style element, you can find the docs here: https://heml.io/docs/elements/style/ You use it just like a regular HTML style tag.

[shokurov]

For the Style element, you can find the docs here: https://heml.io/docs/elements/style/ You use it just like a regular HTML style tag.

Thank you. I think I mixed it up, looking at the code fragment utilising <Style > as React component and also having an extra for attribute. Now I see it's the same one from Style.js. https://github.com/SparkPost/heml/blob/3d247d6d55472df0a5cb908e394475d6ca389a00/packages/heml-elements/src/Container.js#L45-L51

[colestrode]

Oh I'm sorry, you were looking for the programmatic interface. I misunderstood.