JSX: issue parsing tag with a dot

[juli1]

Hello,

I am using the JSX grammar. When parsing the following code, the HTML tag of Layout.Header, the HTML tag found is Header. A tag with a dot is not recognized. For example, in the code below, the HTML tag should be Layout.Header and not Layout.

Any idea how to address this?

Thanks,

// Layout.jsx

export { Header, Content, Footer }

// App.jsx
import * as Layout from "./Layout";

return (
    <div>
    {/*
              These components don't return any .[naming] info
              and they are missing the props
              */}
    <Layout.Header user='Daniel' />
    <Layout.Content color='purple' />
    <Layout.Footer />
    </div>
)

// look at the 5th and 6th console results

[kaby76]

I think you want to change htmlTagName. See the diff below. I don't know if it's correct because I'm not familiar with jsx. Nor does there seem to be a formal spec for it.

diff --git a/javascript/jsx/JavaScriptParser.g4 b/javascript/jsx/JavaScriptParser.g4
index 9746a164..5ad2de30 100644
--- a/javascript/jsx/JavaScriptParser.g4
+++ b/javascript/jsx/JavaScriptParser.g4
@@ -385,9 +385,7 @@ htmlTagClosingName
     ;

 htmlTagName
-    : TagName
-    | keyword
-    | Identifier
+    : (TagName | keyword | Identifier) ('.' (TagName | keyword | Identifier))*
     ;

 htmlAttribute

[juli1]

It seems to work perfectly! Thank you so much!