Fix rewriting of components for custom elements

packages/mdx/lib/plugin/recma-jsx-rewrite.js

@@ -46,6 +46,7 @@ import {
   toJsxIdOrMemberExpression
 } from '../util/estree-util-to-id-or-member-expression.js'
 import {toBinaryAddition} from '../util/estree-util-to-binary-addition.js'
+import {toValidIdentifierName} from '../util/to-valid-identifier-name.js'
 
 const own = {}.hasOwnProperty
 
@@ -188,20 +189,21 @@ export function recmaJsxRewrite(options = {}) {
             // but not for `<h1>heading</h1>`.
           } else {
             const id = name.name
+            const validId = toValidIdentifierName(id)
 
             if (!fnScope.tags.includes(id)) {
               fnScope.tags.push(id)
             }
 
             node.openingElement.name = toJsxIdOrMemberExpression([
               '_components',
-              id
+              validId
             ])
 
             if (node.closingElement) {
               node.closingElement.name = toJsxIdOrMemberExpression([
                 '_components',
-                id
+                validId
               ])
             }
           }
@@ -236,9 +238,7 @@ export function recmaJsxRewrite(options = {}) {
             defaults.push({
               type: 'Property',
               kind: 'init',
-              key: isIdentifierName(name)
-                ? {type: 'Identifier', name}
-                : {type: 'Literal', value: name},
+              key: {type: 'Identifier', name: toValidIdentifierName(name)},
               value: {type: 'Literal', value: name},
               method: false,
               shorthand: false,

packages/mdx/lib/util/to-valid-identifier-name.js

@@ -0,0 +1,16 @@
+import {start, cont} from 'estree-util-is-identifier-name'
+
+/**
+ * Replace all invalid identifier characters with underscores "_"
+ * @param {string} string_
+ */
+export function toValidIdentifierName(string_) {
+  if (string_.length === 0) return '_'
+  let validString = ''
+  validString += start(string_[0].charCodeAt(0)) ? string_[0] : '_'
+  for (const char of string_.slice(1)) {
+    validString += cont(char.charCodeAt(0)) ? char : '_'
+  }
+
+  return validString
+}

packages/mdx/package.json

@@ -84,7 +84,7 @@
   "scripts": {
     "prepack": "npm run build",
     "build": "rimraf \"lib/**/*.d.ts\" \"test/**/*.d.ts\" \"*.d.ts\" && tsc && type-coverage",
-    "test-api": "uvu test \"^(compile|evaluate)\\.js$\"",
+    "test-api": "uvu test \"^(compile|evaluate|to-valid-identifier-name)\\.js$\"",
     "test-coverage": "c8 --check-coverage --100 --reporter lcov npm run test-api",
     "test": "npm run build && npm run test-coverage"
   },

packages/mdx/test/compile.js

@@ -859,9 +859,9 @@ test('jsx', async () => {
       '/*@jsxRuntime automatic @jsxImportSource react*/',
       'function _createMdxContent(props) {',
       '  const _components = Object.assign({',
-      '    "a-b": "a-b"',
+      '    a_b: "a-b"',
       '  }, props.components);',
-      '  return <>{<_components.a-b></_components.a-b>}</>;',
+      '  return <>{<_components.a_b></_components.a_b>}</>;',
       '}',
       'function MDXContent(props = {}) {',
       '  const {wrapper: MDXLayout} = props.components || ({});',

packages/mdx/test/to-valid-identifier-name.js

@@ -0,0 +1,45 @@
+import {test} from 'uvu'
+import * as assert from 'uvu/assert'
+import {toValidIdentifierName} from '../lib/util/to-valid-identifier-name.js'
+
+/** @param {string} invalidChar */
+function toTestFailureMessage(invalidChar) {
+  return `Invalid characters like "${invalidChar}" should be converted to underscores "_"`
+}
+
+test('toValidIdentifierName', () => {
+  // Valid strings left untouched
+  assert.equal(toValidIdentifierName('test'), 'test')
+  assert.equal(toValidIdentifierName('camelCase'), 'camelCase')
+  // Invalid cont character -> underscore
+  assert.equal(
+    toValidIdentifierName('custom-element'),
+    'custom_element',
+    toTestFailureMessage('-')
+  )
+  assert.equal(
+    toValidIdentifierName('custom element'),
+    'custom_element',
+    toTestFailureMessage(' ')
+  )
+  // Invalid starting character -> underscore
+  assert.equal(
+    toValidIdentifierName('-badStarting'),
+    '_badStarting',
+    toTestFailureMessage('-')
+  )
+  assert.equal(
+    toValidIdentifierName('1badStarting'),
+    '_badStarting',
+    toTestFailureMessage('1')
+  )
+  assert.equal(
+    toValidIdentifierName(' badStarting'),
+    '_badStarting',
+    toTestFailureMessage(' ')
+  )
+  // Empty string -> underscore
+  assert.equal('_', toValidIdentifierName(''))
+})
+
+test.run()