removing the ":" prefix on component names

[vitalipe]

["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 ?

[giltayar]

I'm of fan of TOOWTDI (There's only one way to do it). If you can do this - ["div", "a thing that is not a component"], then why would you need the other capability to enable multiple strings? If you have an array, and want multiple words, just .join(' ') and you're done.

Thus, as a LISP fan myself, the first word in the "brackets" is always the element, and there's no confusion anytime.

[vitalipe]

@giltayar - I'm also a fan of this design philosophy, unfortunately this can't work when there is no way to enforce the one true way... I'll update the FAQ, and add a prefix config option:

// done once per app:
const H = ReactHut.createHut(React, {prefix : ""});

// then:
H("div", 
    ["span.my-span", 42])

thanks for the input :)