automatic lowercasing?

[vans163]

Is automatic lowercasing of tags going on?

A functional component like this

function PageAccountSettings() {
    const [s, setState] = useStore();

    return jsx(`
      <antd.Tabs onChange={e=>alert(e)} type="card">
        <antd.Tabs.TabPane tab="Account" key="account">Content of Tab Pane 1</antd.Tabs.TabPane>
        <antd.Tabs.TabPane tab="Security" key="security">Content of Tab Pane 2</antd.Tabs.TabPane>
        <antd.Tabs.TabPane tab="Access Log" key="access_log">Content of Tab Pane 3</antd.Tabs.TabPane>
      </antd.Tabs>
    `);
}

Is giving an error like so

Warning: The tag <antd.tabs.tabpane> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

Why is it looking for "tabs" It should be "Tabs".

[anywhichway]

@vans163 It was. Fixed in v0.0.10. Will close this issue once you verify.

[vans163]

Now its upcasing everything

Warning: <ANTD.TABS.TABPANE /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

[anywhichway]

@van163 ... ah ... I know why, because jsxdirect is pulling .tagName from DOM nodes during intermediate processing, which the spec automatically upcases. Will try switching to the use of localName; although that will break if people use qualified tag names. Alternative is to serve the document as xhtml rather than html, in which case, the browser is supposed to leave the case alone. Will probably have done tomorrow.

[anywhichway]

@vans163 Unfortunately, it looks like it is impossible to meet your request for support. This issue will be left open and marked will not fix for visibility by others. Your effort to try and use jsxdirect is appreciated and the change you drove regarding the passing of a context is a valuable addition. I am presuming you are heavy into React, so other libraries are not options. If this is not the case, you may wish to look at hyperApp, hyperHTML, or tlx if you are willing/able to take on the risk of less used libraries. The below text has also been added to the README for v0.0.12.

jsxdirect does not support case sensitive tags. Unfortunately, this dramatically reduces its utility with React when there are case sensitive tags. By specification HTML tags are not case sensitive and during its processing jsxdirect must use either innerHTML or new DOMParser().parseFromString(string,"text/html"). In both cases, tags get uppercased into the tagName property of elements and lowercased into the localName. This means that React components must use all CAPS for their names. This is also one of the reasons that the industry spec for Custom Elements uses hyphenated tags and a separate process of registering tags names to be associated with custom elements.

[vans163]

var TabPane = antd.Tab.TabPane; What about using the ctx option to bring the TabPane for example into context?

Also yea hyphenated customElements would work.

I am pleasantly surprised with hyperapp, non-component-local state containers and functional components. What react should of been years ago, only recently has react started getting on track. Maybe I would use it sometime.

[anywhichway]

@vans163 regarding "var TabPane = antd.Tab.TabPane; What about using the ctx option to bring the TabPane for example into context?"

You could certainly pass it in. I am just not sure what you or jsxdirect would do with it.