Similar to Constructing an Abstract Syntax Tree with a list of Tokens but specific for React. To have a simple markdown renderer (no blocks, just a string with simple formatting elements (not even code).
Given the complex example:
Foo *italic **bold-italic** italic* **bold** Blah
I have a parser that generates the following tokens in this order
{ type: text, content: "Foo " }
{ type: em_open }
{ type: text, content: "italic " }
{ type: strong_open}
{ type: text, content: "bold-italic" }
{ type: strong_close}
{ type: text, content: " italic" }
{ type: em_close }
{ type: text, content: " " }
{ type: strong_open}
{ type: text, content: "bold" }
{ type: strong_close}
{ type: text, content: " Blah" }
It’s easy to take the above and translate it to a string containing markup, but what I want to do is to take the above an generate elements using React.createElement
So to simplify the example to
**foo**
would have
{ type: strong_open }
{ type: text, content: "foo" }
{ type: strong_close }
I would have a call
return createElement(Text, { fontWeight: "bold" }, [ "foo" ]);
And a slightly complex one would be
***foo***
to have
{ type: em_open }
{ type: strong_open }
{ type: text, content: "foo" }
{ type: strong_close }
{ type: em_close }
which would return
return createElement(Text, { fontStyle: "italic" }, [
createElement(Text, { fontWeight: "bold" }, [ "foo" ])
]);
Just wondering what patterns / techniques I can use to do this.