Fix support for computed member expressions

Author: wooorm

index.js

@@ -318,21 +318,32 @@ function toProperty(node) {
 }
 
 function toIdentifier(node) {
-  return create(
-    node,
-    node.type === 'JSXMemberExpression'
-      ? {
-          type: 'MemberExpression',
-          object: toIdentifier(node.object),
-          property: toIdentifier(node.property)
-        }
-      : node.type === 'JSXNamespacedName'
-      ? {type: 'Literal', value: node.namespace.name + ':' + node.name.name}
-      : // Must be `JSXIdentifier`.
-      isIdentifierName(node.name)
+  var replace
+
+  if (node.type === 'JSXMemberExpression') {
+    replace = {
+      type: 'MemberExpression',
+      object: toIdentifier(node.object),
+      // `property` is always a `JSXIdentifier`, but it could be something that
+      // isn’t an ES identifier name.
+      property: toIdentifier(node.property)
+    }
+
+    if (replace.property.type === 'Literal') replace.computed = true
+  } else if (node.type === 'JSXNamespacedName') {
+    replace = {
+      type: 'Literal',
+      value: node.namespace.name + ':' + node.name.name
+    }
+  }
+  // Must be `JSXIdentifier`.
+  else {
+    replace = isIdentifierName(node.name)
       ? {type: 'Identifier', name: node.name}
       : {type: 'Literal', value: node.name}
-  )
+  }
+
+  return create(node, replace)
 }
 
 function toMemberExpression(id) {
@@ -342,10 +353,15 @@ function toMemberExpression(id) {
   var prop
 
   while (++index < identifiers.length) {
-    prop = {type: 'Identifier', name: identifiers[index]}
+    prop = isIdentifierName(identifiers[index])
+      ? {type: 'Identifier', name: identifiers[index]}
+      : {type: 'Literal', value: identifiers[index]}
     result = index
       ? {type: 'MemberExpression', object: result, property: prop}
       : prop
+    if (index && prop.type === 'Literal') {
+      result.computed = true
+    }
   }
 
   return result

test.js

@@ -61,6 +61,27 @@ test('estree-util-build-jsx', function (t) {
     'should support `pragma`, `pragmaFrag`'
   )
 
+  t.deepEqual(
+    build(parse('<x />'), {pragma: 'a.b-c'}).body[0].expression,
+    {
+      type: 'CallExpression',
+      callee: {
+        type: 'MemberExpression',
+        object: {type: 'Identifier', name: 'a'},
+        property: {type: 'Literal', value: 'b-c'},
+        computed: true
+      },
+      arguments: [{type: 'Literal', value: 'x'}]
+    },
+    'should support `pragma` w/ non-identifiers (1)'
+  )
+
+  t.equal(
+    astring.generate(build(parse('<x />'), {pragma: 'a.b-c'})),
+    'a["b-c"]("x");\n',
+    'should support `pragma` w/ non-identifiers (2)'
+  )
+
   t.deepEqual(
     build(parse('/* @jsx a @jsxFrag b */\n<><x /></>')).body[0].expression,
     {
@@ -181,6 +202,51 @@ test('estree-util-build-jsx', function (t) {
     'should support dots in a tag name for member expressions'
   )
 
+  t.deepEqual(
+    build(parse('<a.b-c />'), {pragma: 'h'}).body[0].expression,
+    {
+      type: 'CallExpression',
+      callee: {type: 'Identifier', name: 'h'},
+      arguments: [
+        {
+          type: 'MemberExpression',
+          object: {type: 'Identifier', name: 'a'},
+          property: {type: 'Literal', value: 'b-c'},
+          computed: true
+        }
+      ]
+    },
+    'should support dots *and* dashes in tag names (1)'
+  )
+
+  t.equal(
+    astring.generate(build(parse('<a.b-c />'), {pragma: 'h'})),
+    'h(a["b-c"]);\n',
+    'should support dots *and* dashes in tag names (2)'
+  )
+
+  t.deepEqual(
+    build(parse('<a-b.c />'), {pragma: 'h'}).body[0].expression,
+    {
+      type: 'CallExpression',
+      callee: {type: 'Identifier', name: 'h'},
+      arguments: [
+        {
+          type: 'MemberExpression',
+          object: {type: 'Literal', value: 'a-b'},
+          property: {type: 'Identifier', name: 'c'}
+        }
+      ]
+    },
+    'should support dots *and* dashes in tag names (3)'
+  )
+
+  t.equal(
+    astring.generate(build(parse('<a-b.c />'), {pragma: 'h'})),
+    'h(("a-b").c);\n',
+    'should support dots *and* dashes in tag names (4)'
+  )
+
   t.deepEqual(
     build(parse('<a.b.c.d />'), {pragma: 'h'}).body[0].expression,
     {