vitalipe / react-hut Goto Github PK

["div", 
    ["a", "thing", "that is not a component"]]

wll be evaluated to the same thing as this (in JSX):

<div><a>thing, that is not a component</a></div>

but we actually want this:

<div>a thing, that is not a component</div>

:(

Tags like "b", "article", "header", etc are common words.. nested array children are
not that common, but can happen when calling map:

let wordsThatIKnow = ["a", "article", "blah"];
["label.starts-with-a", 
    wordsThatIKnow.filter(word => world[0] === "a")]

By adding a prefix ":" be can almost avoid this edge case:

[":div", 
        ["a", "thing", "that is not a component"]]

and it also allows me to add syntax highlighting to the first string that starts with ":" in an array.

I also considered 3 alternatives:

1. to create our own map/filter functions:
2. Use symbols or some kind of identifier, some options:

   [H.div, ....]
   [H.div("some.class-name-here"), ...]
   [H("div.some.class-name-here"), ...]
   [[H, "div"], .....]

3. to always wrap with an extra array:

["div.parent", [["a"], ["a"]]]

option 1 sucks because sooner or later someone will call .filter..
and I don't have a way to protect against it, the rules of the system are correct,
it's the data that is "bad"..

option 2 can be easily implemented on top of this library.
option 3 is what I implemented initially and didn't like it at all, too much ]]]]]]]]] (I'm a LISP fan, I like my brackets round :P ).

any other ideas are welcome :)

@giltayar ?