Add dotted component name support for babel-plugin-transform-jsx-to-htm

[jviide]

This pull request is an offshoot of #85 (by @blikblum), and modifies babel-plugin-transform-jsx-to-htm to support dotted component names like <a.b.c />.

The new logic considers all element names that either start with a capital letter, $ or _ or are not valid identifiers as component references. It should be noted that dotted names (member expressions) such as a.b.c are not valid identifiers, and are therefore considered to be component references.

This PR also adds tests for dotted components. There are also new tests for special-cased component names such as $foo and _foo (introduced in #92).

[dy]

@jviide isn't that a potential blocker for snabbdom hyperscript use-cases?
Eg. that supports extended hyperscript notation as:

h('div#container.two.classes', ...)

which is with htm would be

html`<div#container.two.classes></>`

- can be quite handy, although not fully valid html.

(although that seems to be not relevant concern here)

[jviide]

html`<div#container.two.classes></>` is supported by HTM. This pull request is about the babel-plugin-transform-jsx-to-htm plugin, and doesn't modify HTM's behavior. babel-plugin-transform-jsx-to-htm is a Babel-plugin that transforms JSX to HTM, and <div#container.two.classes /> doesn't seem to be valid JSX as seen here.

[jviide]

Eh, sorry, I meant babel-plugin-transform-jsx-to-htm, not babel-transform-jsx. Sorry for the confusion! Updated my previous comments to reflect this.

[jviide]

@dy The snabbdom use-case you gave is very interesting though, so I double checked just to be sure. HTM does indeed support this :)

> const htm = require("./dist/htm");
> const html = htm.bind((type, props, ...children) => ({ type, props, children }));
> html`<div#container.two.classes></>`
{ type: 'div#container.two.classes', props: null, children: [] }

[dy]

@jviide (FYI) I've researched some of useful edge-cases, which would be nice to keep covered by htm:

// passing non-stringy tags
html`<${document.body}>
  <div>Our app code to render into body</div>
<//>`

// react fragments
html`<></>`

// second slash for closing tag is optional
html`<a></>`

// "fragment" tag with properties
html`<mount=${target}></mount>`
html`< mount=${target}></mount>`

// html "spread" (useful for reducers)
html`<...>`

// direct selectors
html`<#reference-id></>`

The only feature remains uncovered by htm is anonymous props as <a ${disabled}></>, had some thoughts on how that could be implemented, but seems that doesn't make a big use-case.

[jviide]

Thanks. Of the cases you mentioned, non-stringy tags are an integral part of HTM. HTM also supports fragments (or "multiple root elements") natively, for example try out html`<a /><b /><c />` .

Supporting the other cases "officially" is probably best discussed in its own issue (or issues), as they seem to be a bit outside of the scope of this specific pull request :)