Refactor to sort default components

Closes GH-2318.

Reviewed-by: Titus Wormer <[email protected]>

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

@@ -36,7 +36,7 @@
  * @property {Array<string>} components
  * @property {Array<string>} tags
  * @property {Record<string, {node: JSXElement, component: boolean}>} references
- * @property {Map<string|number, string>} idToInvalidComponentName
+ * @property {Map<string, string>} idToInvalidComponentName
  * @property {EstreeFunction} node
  */
 
@@ -246,7 +246,7 @@ export function recmaJsxRewrite(options) {
           /** @type {string} */
           let name
 
-          for (name of scope.tags) {
+          for (name of scope.tags.sort()) {
             defaults.push({
               type: 'Property',
               kind: 'init',
@@ -270,6 +270,8 @@ export function recmaJsxRewrite(options) {
             }
           }
 
+          actual.sort()
+
           /** @type {Array<Statement>} */
           const statements = []
 
@@ -363,18 +365,20 @@ export function recmaJsxRewrite(options) {
             }
 
             if (isNamedFunction(scope.node, '_createMdxContent')) {
-              for (const [
-                id,
-                componentName
-              ] of scope.idToInvalidComponentName) {
+              for (const [id, componentName] of [
+                ...scope.idToInvalidComponentName
+              ].sort(([a], [b]) => a.localeCompare(b))) {
                 // For JSX IDs that can’t be represented as JavaScript IDs (as in,
                 // those with dashes, such as `custom-element`), generate a
                 // separate variable that is a valid JS ID (such as `_component0`),
                 // and takes it from components:
                 // `const _component0 = _components['custom-element']`
                 declarations.push({
                   type: 'VariableDeclarator',
-                  id: {type: 'Identifier', name: componentName},
+                  id: {
+                    type: 'Identifier',
+                    name: componentName
+                  },
                   init: {
                     type: 'MemberExpression',
                     object: {type: 'Identifier', name: '_components'},

packages/mdx/test/compile.js

@@ -792,8 +792,8 @@ test('jsx', async () => {
       '/*@jsxRuntime automatic @jsxImportSource react*/',
       'function _createMdxContent(props) {',
       '  const _components = Object.assign({',
-      '    p: "p",',
-      '    em: "em"',
+      '    em: "em",',
+      '    p: "p"',
       '  }, props.components);',
       '  return <_components.p><_components.em>{"a"}</_components.em></_components.p>;',
       '}',