From 11b96d3c802e9e50fa73bf0c46e264b7bcc3b25f Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 11 Aug 2022 19:18:24 -0400 Subject: [PATCH 01/19] feat: add toValidIdentifierName util --- .../mdx/lib/util/to-valid-identifier-name.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 packages/mdx/lib/util/to-valid-identifier-name.js diff --git a/packages/mdx/lib/util/to-valid-identifier-name.js b/packages/mdx/lib/util/to-valid-identifier-name.js new file mode 100644 index 000000000..25d70336c --- /dev/null +++ b/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} str + */ +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 +} From 1c86a45e8a7127c755956728a709e19ea50131b6 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 11 Aug 2022 19:18:45 -0400 Subject: [PATCH 02/19] feat: serialize custom element component keys --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index d50b550a7..e69610ff8 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/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,6 +189,7 @@ export function recmaJsxRewrite(options = {}) { // but not for `

heading

`. } else { const id = name.name + const validId = toValidIdentifierName(id) if (!fnScope.tags.includes(id)) { fnScope.tags.push(id) @@ -195,13 +197,13 @@ export function recmaJsxRewrite(options = {}) { 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, From f1205fef693cea9e81b45364395ed544b6eca3dd Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 11 Aug 2022 19:19:03 -0400 Subject: [PATCH 03/19] chore: update custom element test case --- packages/mdx/test/compile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index 8b6d457a3..491f9ee3b 100644 --- a/packages/mdx/test/compile.js +++ b/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>};', + ' return <>{<_components.a_b>};', '}', 'function MDXContent(props = {}) {', ' const {wrapper: MDXLayout} = props.components || ({});', From 389b5a51efd9becd6ec18b96d6d4dc4317138d16 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 11 Aug 2022 19:19:46 -0400 Subject: [PATCH 04/19] fix: update JSdoc reference --- packages/mdx/lib/util/to-valid-identifier-name.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdx/lib/util/to-valid-identifier-name.js b/packages/mdx/lib/util/to-valid-identifier-name.js index 25d70336c..8973a7999 100644 --- a/packages/mdx/lib/util/to-valid-identifier-name.js +++ b/packages/mdx/lib/util/to-valid-identifier-name.js @@ -2,7 +2,7 @@ import {start, cont} from 'estree-util-is-identifier-name' /** * Replace all invalid identifier characters with underscores "_" - * @param {string} str + * @param {string} string_ */ export function toValidIdentifierName(string_) { if (string_.length === 0) return '_' From 135aa2dedaeb2ab431c25c0027acd4db158540dc Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Thu, 11 Aug 2022 19:37:18 -0400 Subject: [PATCH 05/19] test: to-valid-identifier-name --- packages/mdx/package.json | 2 +- packages/mdx/test/to-valid-identifier-name.js | 45 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 packages/mdx/test/to-valid-identifier-name.js diff --git a/packages/mdx/package.json b/packages/mdx/package.json index 0de70ca05..fc5412fa7 100644 --- a/packages/mdx/package.json +++ b/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" }, diff --git a/packages/mdx/test/to-valid-identifier-name.js b/packages/mdx/test/to-valid-identifier-name.js new file mode 100644 index 000000000..6e1334449 --- /dev/null +++ b/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() From 0553e0c002572f21f5a667a1778b4534041641a5 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:07:21 -0400 Subject: [PATCH 06/19] Revert "test: to-valid-identifier-name" This reverts commit 135aa2dedaeb2ab431c25c0027acd4db158540dc. --- packages/mdx/package.json | 2 +- packages/mdx/test/to-valid-identifier-name.js | 45 ------------------- 2 files changed, 1 insertion(+), 46 deletions(-) delete mode 100644 packages/mdx/test/to-valid-identifier-name.js diff --git a/packages/mdx/package.json b/packages/mdx/package.json index fc5412fa7..0de70ca05 100644 --- a/packages/mdx/package.json +++ b/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|to-valid-identifier-name)\\.js$\"", + "test-api": "uvu test \"^(compile|evaluate)\\.js$\"", "test-coverage": "c8 --check-coverage --100 --reporter lcov npm run test-api", "test": "npm run build && npm run test-coverage" }, diff --git a/packages/mdx/test/to-valid-identifier-name.js b/packages/mdx/test/to-valid-identifier-name.js deleted file mode 100644 index 6e1334449..000000000 --- a/packages/mdx/test/to-valid-identifier-name.js +++ /dev/null @@ -1,45 +0,0 @@ -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() From 8f5fbe01a0f7db2a6d9c2770c6e436058c1f3f81 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:07:29 -0400 Subject: [PATCH 07/19] Revert "fix: update JSdoc reference" This reverts commit 389b5a51efd9becd6ec18b96d6d4dc4317138d16. --- packages/mdx/lib/util/to-valid-identifier-name.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdx/lib/util/to-valid-identifier-name.js b/packages/mdx/lib/util/to-valid-identifier-name.js index 8973a7999..25d70336c 100644 --- a/packages/mdx/lib/util/to-valid-identifier-name.js +++ b/packages/mdx/lib/util/to-valid-identifier-name.js @@ -2,7 +2,7 @@ import {start, cont} from 'estree-util-is-identifier-name' /** * Replace all invalid identifier characters with underscores "_" - * @param {string} string_ + * @param {string} str */ export function toValidIdentifierName(string_) { if (string_.length === 0) return '_' From a3bd1dea88261baf8cdf2e3b3fb4eb5885a4212b Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:07:38 -0400 Subject: [PATCH 08/19] Revert "chore: update custom element test case" This reverts commit f1205fef693cea9e81b45364395ed544b6eca3dd. --- packages/mdx/test/compile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index 491f9ee3b..8b6d457a3 100644 --- a/packages/mdx/test/compile.js +++ b/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>};', + ' return <>{<_components.a-b>};', '}', 'function MDXContent(props = {}) {', ' const {wrapper: MDXLayout} = props.components || ({});', From 2ec33fa5be110515ed5c2bd926871a6f66c75bb1 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:07:51 -0400 Subject: [PATCH 09/19] Revert "feat: serialize custom element component keys" This reverts commit 1c86a45e8a7127c755956728a709e19ea50131b6. --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index e69610ff8..d50b550a7 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -46,7 +46,6 @@ 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 @@ -189,7 +188,6 @@ export function recmaJsxRewrite(options = {}) { // but not for `

heading

`. } else { const id = name.name - const validId = toValidIdentifierName(id) if (!fnScope.tags.includes(id)) { fnScope.tags.push(id) @@ -197,13 +195,13 @@ export function recmaJsxRewrite(options = {}) { node.openingElement.name = toJsxIdOrMemberExpression([ '_components', - validId + id ]) if (node.closingElement) { node.closingElement.name = toJsxIdOrMemberExpression([ '_components', - validId + id ]) } } @@ -238,7 +236,9 @@ export function recmaJsxRewrite(options = {}) { defaults.push({ type: 'Property', kind: 'init', - key: {type: 'Identifier', name: toValidIdentifierName(name)}, + key: isIdentifierName(name) + ? {type: 'Identifier', name} + : {type: 'Literal', value: name}, value: {type: 'Literal', value: name}, method: false, shorthand: false, From 5878dd8990c54bb99864bf13cf72bf1f09699fa1 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:07:58 -0400 Subject: [PATCH 10/19] Revert "feat: add toValidIdentifierName util" This reverts commit 11b96d3c802e9e50fa73bf0c46e264b7bcc3b25f. --- .../mdx/lib/util/to-valid-identifier-name.js | 16 ---------------- 1 file changed, 16 deletions(-) delete mode 100644 packages/mdx/lib/util/to-valid-identifier-name.js diff --git a/packages/mdx/lib/util/to-valid-identifier-name.js b/packages/mdx/lib/util/to-valid-identifier-name.js deleted file mode 100644 index 25d70336c..000000000 --- a/packages/mdx/lib/util/to-valid-identifier-name.js +++ /dev/null @@ -1,16 +0,0 @@ -import {start, cont} from 'estree-util-is-identifier-name' - -/** - * Replace all invalid identifier characters with underscores "_" - * @param {string} str - */ -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 -} From 451a76f3e89cebd571c091f546e6118c40802bc8 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:55:28 -0400 Subject: [PATCH 11/19] feat: inline variables for invalid comp names --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 62 +++++++++++++------- 1 file changed, 42 insertions(+), 20 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index d50b550a7..4ffee14c5 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -72,6 +72,8 @@ export function recmaJsxRewrite(options = {}) { let createErrorHelper /** @type {Scope|null} */ let currentScope + /** @type {Map} */ + const invalidComponentNameToVariable = new Map() walk(tree, { enter(_node) { @@ -193,16 +195,21 @@ export function recmaJsxRewrite(options = {}) { fnScope.tags.push(id) } - node.openingElement.name = toJsxIdOrMemberExpression([ - '_components', - id - ]) + let componentName = toJsxIdOrMemberExpression(['_components', id]) + if (isIdentifierName(id) === false) { + let invalidComponentName = invalidComponentNameToVariable.get(id) + if (invalidComponentName === undefined) { + invalidComponentName = `_component${invalidComponentNameToVariable.size}` + invalidComponentNameToVariable.set(id, invalidComponentName) + } + + componentName = toJsxIdOrMemberExpression([invalidComponentName]) + } + + node.openingElement.name = componentName if (node.closingElement) { - node.closingElement.name = toJsxIdOrMemberExpression([ - '_components', - id - ]) + node.closingElement.name = componentName } } } @@ -233,17 +240,17 @@ export function recmaJsxRewrite(options = {}) { let name for (name of scope.tags) { - defaults.push({ - type: 'Property', - kind: 'init', - key: isIdentifierName(name) - ? {type: 'Identifier', name} - : {type: 'Literal', value: name}, - value: {type: 'Literal', value: name}, - method: false, - shorthand: false, - computed: false - }) + if (isIdentifierName(name)) { + defaults.push({ + type: 'Property', + kind: 'init', + key: {type: 'Identifier', name}, + value: {type: 'Literal', value: name}, + method: false, + shorthand: false, + computed: false + }) + } } actual.push(...scope.components) @@ -259,7 +266,11 @@ export function recmaJsxRewrite(options = {}) { /** @type {Array} */ const statements = [] - if (defaults.length > 0 || actual.length > 0) { + if ( + defaults.length > 0 || + actual.length > 0 || + invalidComponentNameToVariable.size > 0 + ) { if (providerImportSource) { importProvider = true parameters.push({ @@ -344,6 +355,17 @@ export function recmaJsxRewrite(options = {}) { componentsInit = {type: 'Identifier', name: '_components'} } + for (const [ + invalidComponentName, + variable + ] of invalidComponentNameToVariable) { + declarations.push({ + type: 'VariableDeclarator', + id: {type: 'Identifier', name: variable}, + init: {type: 'Literal', value: invalidComponentName} + }) + } + if (componentsPattern) { declarations.push({ type: 'VariableDeclarator', From e547aa83092317ab8a2d68d8a60c270e34da36cd Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Fri, 12 Aug 2022 16:59:39 -0400 Subject: [PATCH 12/19] test: update custom elements --- packages/mdx/test/compile.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index 8b6d457a3..2375680d5 100644 --- a/packages/mdx/test/compile.js +++ b/packages/mdx/test/compile.js @@ -858,13 +858,11 @@ test('jsx', async () => { [ '/*@jsxRuntime automatic @jsxImportSource react*/', 'function _createMdxContent(props) {', - ' const _components = Object.assign({', - ' "a-b": "a-b"', - ' }, props.components);', - ' return <>{<_components.a-b>};', + ' const _components = props.components || ({}), _component0 = "a-b";', + ' return <>{<_component0>};', '}', 'function MDXContent(props = {}) {', - ' const {wrapper: MDXLayout} = props.components || ({});', + ' const _component0 = "a-b", {wrapper: MDXLayout} = props.components || ({});', ' return MDXLayout ? <_createMdxContent {...props} /> : _createMdxContent(props);', '}', 'export default MDXContent;', From 7572cdced1783044ef72f64132600158e0cf4842 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 15 Aug 2022 12:28:13 -0400 Subject: [PATCH 13/19] fix: avoid duplicating jsx expr --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 33 +++++++++++--------- 1 file changed, 18 insertions(+), 15 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index 4ffee14c5..3d1f7fdb2 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -195,7 +195,8 @@ export function recmaJsxRewrite(options = {}) { fnScope.tags.push(id) } - let componentName = toJsxIdOrMemberExpression(['_components', id]) + /** @type {(string | number)[]} */ + let jsxIdExpression = ['_components', id] if (isIdentifierName(id) === false) { let invalidComponentName = invalidComponentNameToVariable.get(id) if (invalidComponentName === undefined) { @@ -203,13 +204,15 @@ export function recmaJsxRewrite(options = {}) { invalidComponentNameToVariable.set(id, invalidComponentName) } - componentName = toJsxIdOrMemberExpression([invalidComponentName]) + jsxIdExpression = [invalidComponentName] } - node.openingElement.name = componentName + node.openingElement.name = + toJsxIdOrMemberExpression(jsxIdExpression) if (node.closingElement) { - node.closingElement.name = componentName + node.closingElement.name = + toJsxIdOrMemberExpression(jsxIdExpression) } } } @@ -240,17 +243,17 @@ export function recmaJsxRewrite(options = {}) { let name for (name of scope.tags) { - if (isIdentifierName(name)) { - defaults.push({ - type: 'Property', - kind: 'init', - key: {type: 'Identifier', name}, - value: {type: 'Literal', value: name}, - method: false, - shorthand: false, - computed: false - }) - } + defaults.push({ + type: 'Property', + kind: 'init', + key: isIdentifierName(name) + ? {type: 'Identifier', name} + : {type: 'Literal', value: name}, + value: {type: 'Literal', value: name}, + method: false, + shorthand: false, + computed: false + }) } actual.push(...scope.components) From 604e6db6fd9d2732303b7795fce95049060e8daf Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 15 Aug 2022 13:16:34 -0400 Subject: [PATCH 14/19] feat: change to "_componentX = _components['X']" --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 32 +++++++++++++------- 1 file changed, 21 insertions(+), 11 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index 3d1f7fdb2..f1d0b8167 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -72,8 +72,8 @@ export function recmaJsxRewrite(options = {}) { let createErrorHelper /** @type {Scope|null} */ let currentScope - /** @type {Map} */ - const invalidComponentNameToVariable = new Map() + /** @type {Map} */ + const idToInvalidComponentName = new Map() walk(tree, { enter(_node) { @@ -198,10 +198,10 @@ export function recmaJsxRewrite(options = {}) { /** @type {(string | number)[]} */ let jsxIdExpression = ['_components', id] if (isIdentifierName(id) === false) { - let invalidComponentName = invalidComponentNameToVariable.get(id) + let invalidComponentName = idToInvalidComponentName.get(id) if (invalidComponentName === undefined) { - invalidComponentName = `_component${invalidComponentNameToVariable.size}` - invalidComponentNameToVariable.set(id, invalidComponentName) + invalidComponentName = `_component${idToInvalidComponentName.size}` + idToInvalidComponentName.set(id, invalidComponentName) } jsxIdExpression = [invalidComponentName] @@ -272,7 +272,7 @@ export function recmaJsxRewrite(options = {}) { if ( defaults.length > 0 || actual.length > 0 || - invalidComponentNameToVariable.size > 0 + idToInvalidComponentName.size > 0 ) { if (providerImportSource) { importProvider = true @@ -359,13 +359,23 @@ export function recmaJsxRewrite(options = {}) { } for (const [ - invalidComponentName, - variable - ] of invalidComponentNameToVariable) { + _componentsId, + _componentName + ] of idToInvalidComponentName) { + // For component IDs that render invalid JSX (ex. <_components.custom-element>), + // Generate a separate variable to index into `_components` + // i.e. `const _component0 = _components['custom-element']` + // `return <_component0>...` declarations.push({ type: 'VariableDeclarator', - id: {type: 'Identifier', name: variable}, - init: {type: 'Literal', value: invalidComponentName} + id: {type: 'Identifier', name: _componentName}, + init: { + type: 'MemberExpression', + object: {type: 'Identifier', name: '_components'}, + property: {type: 'Literal', value: _componentsId}, + computed: true, + optional: false + } }) } From 24fb34d2a84345142ed8eb5bd86a68d80076de7b Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 15 Aug 2022 13:16:42 -0400 Subject: [PATCH 15/19] test: update output --- packages/mdx/test/compile.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index 2375680d5..c1067909c 100644 --- a/packages/mdx/test/compile.js +++ b/packages/mdx/test/compile.js @@ -858,11 +858,13 @@ test('jsx', async () => { [ '/*@jsxRuntime automatic @jsxImportSource react*/', 'function _createMdxContent(props) {', - ' const _components = props.components || ({}), _component0 = "a-b";', + ' const _components = Object.assign({', + ' "a-b": "a-b"', + ' }, props.components), _component0 = _components["a-b"];', ' return <>{<_component0>};', '}', 'function MDXContent(props = {}) {', - ' const _component0 = "a-b", {wrapper: MDXLayout} = props.components || ({});', + ' const _component0 = _components["a-b"], {wrapper: MDXLayout} = props.components || ({});', ' return MDXLayout ? <_createMdxContent {...props} /> : _createMdxContent(props);', '}', 'export default MDXContent;', From d051f7cf32315a3d78a62c83df6e8013feb8a427 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Mon, 15 Aug 2022 16:39:43 -0400 Subject: [PATCH 16/19] nit: ...[] => Array<...> Co-authored-by: Titus --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index f1d0b8167..1fb25a735 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -195,7 +195,7 @@ export function recmaJsxRewrite(options = {}) { fnScope.tags.push(id) } - /** @type {(string | number)[]} */ + /** @type {Array} */ let jsxIdExpression = ['_components', id] if (isIdentifierName(id) === false) { let invalidComponentName = idToInvalidComponentName.get(id) From f7aea6600a7ff248256963a1b1c0de44a9ca42a0 Mon Sep 17 00:00:00 2001 From: Ben Holmes Date: Mon, 15 Aug 2022 16:40:17 -0400 Subject: [PATCH 17/19] nit: clarify inline docs Co-authored-by: Titus --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index 1fb25a735..eb883daa9 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -362,10 +362,11 @@ export function recmaJsxRewrite(options = {}) { _componentsId, _componentName ] of idToInvalidComponentName) { - // For component IDs that render invalid JSX (ex. <_components.custom-element>), - // Generate a separate variable to index into `_components` - // i.e. `const _component0 = _components['custom-element']` - // `return <_component0>...` + // 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}, From 55414b405ef82f81f63b821ea0b0b920eb1b687d Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 15 Aug 2022 16:43:44 -0400 Subject: [PATCH 18/19] refactor: [id, componentName] --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index eb883daa9..4a24d6c1e 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -358,10 +358,7 @@ export function recmaJsxRewrite(options = {}) { componentsInit = {type: 'Identifier', name: '_components'} } - for (const [ - _componentsId, - _componentName - ] of idToInvalidComponentName) { + for (const [id, componentName] of idToInvalidComponentName) { // 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`), @@ -369,11 +366,11 @@ export function recmaJsxRewrite(options = {}) { // `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'}, - property: {type: 'Literal', value: _componentsId}, + property: {type: 'Literal', value: id}, computed: true, optional: false } From a9d93b2924ba4dbe32d5cea7fb167b5fd7824513 Mon Sep 17 00:00:00 2001 From: bholmesdev Date: Mon, 15 Aug 2022 16:51:08 -0400 Subject: [PATCH 19/19] fix: only add _componentX to _createMdxContent --- packages/mdx/lib/plugin/recma-jsx-rewrite.js | 36 +++++++++++--------- packages/mdx/test/compile.js | 2 +- 2 files changed, 20 insertions(+), 18 deletions(-) diff --git a/packages/mdx/lib/plugin/recma-jsx-rewrite.js b/packages/mdx/lib/plugin/recma-jsx-rewrite.js index 4a24d6c1e..1e82a1e41 100644 --- a/packages/mdx/lib/plugin/recma-jsx-rewrite.js +++ b/packages/mdx/lib/plugin/recma-jsx-rewrite.js @@ -358,23 +358,25 @@ export function recmaJsxRewrite(options = {}) { componentsInit = {type: 'Identifier', name: '_components'} } - for (const [id, componentName] of idToInvalidComponentName) { - // 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}, - init: { - type: 'MemberExpression', - object: {type: 'Identifier', name: '_components'}, - property: {type: 'Literal', value: id}, - computed: true, - optional: false - } - }) + if (isNamedFunction(scope.node, '_createMdxContent')) { + for (const [id, componentName] of idToInvalidComponentName) { + // 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}, + init: { + type: 'MemberExpression', + object: {type: 'Identifier', name: '_components'}, + property: {type: 'Literal', value: id}, + computed: true, + optional: false + } + }) + } } if (componentsPattern) { diff --git a/packages/mdx/test/compile.js b/packages/mdx/test/compile.js index c1067909c..d00059758 100644 --- a/packages/mdx/test/compile.js +++ b/packages/mdx/test/compile.js @@ -864,7 +864,7 @@ test('jsx', async () => { ' return <>{<_component0>};', '}', 'function MDXContent(props = {}) {', - ' const _component0 = _components["a-b"], {wrapper: MDXLayout} = props.components || ({});', + ' const {wrapper: MDXLayout} = props.components || ({});', ' return MDXLayout ? <_createMdxContent {...props} /> : _createMdxContent(props);', '}', 'export default MDXContent;',