From 88bf4009d080f58b2759a41f6bec29e2ff3cba69 Mon Sep 17 00:00:00 2001 From: Sneh Khatri Date: Tue, 30 Nov 2021 15:37:58 +0530 Subject: [PATCH 1/3] Fix JSX pragma anywhere in comment --- .../src/create-plugin.ts | 27 +++++++++---------- .../input.js | 2 ++ .../output.js | 4 +++ 3 files changed, 19 insertions(+), 14 deletions(-) create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/input.js create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/output.js diff --git a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts index d4afe577f25c..158a960ff099 100644 --- a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts +++ b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts @@ -31,11 +31,14 @@ const DEFAULT = { pragmaFrag: "React.Fragment", }; -const JSX_SOURCE_ANNOTATION_REGEX = /\*?\s*@jsxImportSource\s+([^\s]+)/; -const JSX_RUNTIME_ANNOTATION_REGEX = /\*?\s*@jsxRuntime\s+([^\s]+)/; +const JSX_SOURCE_ANNOTATION_REGEX = + /^\/*\*?\/*\*\s*@jsxImportSource\s+([^\s]+)\s*\/*\*\//; +const JSX_RUNTIME_ANNOTATION_REGEX = + /^\/*\*?\/*\*\s*@jsxRuntime\s+([^\s]+)\s*\/*\*\//; -const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/; -const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/; +const JSX_ANNOTATION_REGEX = /^\/*\*?\/*\*\s*@jsx\s+([^\s]+)\s*\/*\*\//; +const JSX_FRAG_ANNOTATION_REGEX = + /^\/*\*?\/*\*\s*@jsxFrag\s+([^\s]+)\s*\/*\*\//; const get = (pass: PluginPass, name: string) => pass.get(`@babel/plugin-react-jsx/${name}`); @@ -167,29 +170,25 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, if (file.ast.comments) { for (const comment of file.ast.comments) { - const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec( - comment.value, - ); + const value = `/*${comment.value}*/`; + + const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec(value); if (sourceMatches) { source = sourceMatches[1]; sourceSet = true; } - const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec( - comment.value, - ); + const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec(value); if (runtimeMatches) { runtime = runtimeMatches[1]; } - const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value); + const jsxMatches = JSX_ANNOTATION_REGEX.exec(value); if (jsxMatches) { pragma = jsxMatches[1]; pragmaSet = true; } - const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec( - comment.value, - ); + const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(value); if (jsxFragMatches) { pragmaFrag = jsxFragMatches[1]; pragmaFragSet = true; diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/input.js new file mode 100644 index 000000000000..3aa8b3c8fe05 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/input.js @@ -0,0 +1,2 @@ +// Make sure not to use a jsx pragma here (like "@jsx Something"), we need this to be React.createElement! + diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/output.js new file mode 100644 index 000000000000..940ac582d73d --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-not-allow-jsx-pragma-to-be-anywhere-in-comment/output.js @@ -0,0 +1,4 @@ +// Make sure not to use a jsx pragma here (like "@jsx Something"), we need this to be React.createElement! + +/*#__PURE__*/ +React.createElement("blah", null); From 518c6a4ca61e5f57d6d5ae6ab1046f1e84224e84 Mon Sep 17 00:00:00 2001 From: Sneh Khatri Date: Wed, 1 Dec 2021 14:58:21 +0530 Subject: [PATCH 2/3] jsx regex patterns support jsx docs --- .../src/create-plugin.ts | 25 +++++++++++-------- .../input.js | 5 ++++ .../output.js | 4 +++ 3 files changed, 23 insertions(+), 11 deletions(-) create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/input.js create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/output.js diff --git a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts index 158a960ff099..0fa5a3810452 100644 --- a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts +++ b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts @@ -32,13 +32,12 @@ const DEFAULT = { }; const JSX_SOURCE_ANNOTATION_REGEX = - /^\/*\*?\/*\*\s*@jsxImportSource\s+([^\s]+)\s*\/*\*\//; + /^\*?\s*?\*?\*?\s*@jsxImportSource\s+([^\s]+)\s*$/; const JSX_RUNTIME_ANNOTATION_REGEX = - /^\/*\*?\/*\*\s*@jsxRuntime\s+([^\s]+)\s*\/*\*\//; + /^\*?\s*?\*?\*?\s*@jsxRuntime\s+([^\s]+)\s*$/; -const JSX_ANNOTATION_REGEX = /^\/*\*?\/*\*\s*@jsx\s+([^\s]+)\s*\/*\*\//; -const JSX_FRAG_ANNOTATION_REGEX = - /^\/*\*?\/*\*\s*@jsxFrag\s+([^\s]+)\s*\/*\*\//; +const JSX_ANNOTATION_REGEX = /^\*?\s*?\*?\*?\s*@jsx\s+([^\s]+)\s*$/; +const JSX_FRAG_ANNOTATION_REGEX = /^\*?\s*?\*?\*?\s*@jsxFrag\s+([^\s]+)\s*$/; const get = (pass: PluginPass, name: string) => pass.get(`@babel/plugin-react-jsx/${name}`); @@ -170,25 +169,29 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, if (file.ast.comments) { for (const comment of file.ast.comments) { - const value = `/*${comment.value}*/`; - - const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec(value); + const sourceMatches = JSX_SOURCE_ANNOTATION_REGEX.exec( + comment.value, + ); if (sourceMatches) { source = sourceMatches[1]; sourceSet = true; } - const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec(value); + const runtimeMatches = JSX_RUNTIME_ANNOTATION_REGEX.exec( + comment.value, + ); if (runtimeMatches) { runtime = runtimeMatches[1]; } - const jsxMatches = JSX_ANNOTATION_REGEX.exec(value); + const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value); if (jsxMatches) { pragma = jsxMatches[1]; pragmaSet = true; } - const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(value); + const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec( + comment.value, + ); if (jsxFragMatches) { pragmaFrag = jsxFragMatches[1]; pragmaFragSet = true; diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/input.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/input.js new file mode 100644 index 000000000000..91ca8e5f2fcd --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/input.js @@ -0,0 +1,5 @@ +/** + * @jsx jsx + */ + + \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/output.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/output.js new file mode 100644 index 000000000000..2e9ea6eff28e --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/react/should-allow-jsx-docs-comment-with-pragma/output.js @@ -0,0 +1,4 @@ +/** + * @jsx jsx + */ +jsx("foo", null); From 4570addeb61f73da4ae0a47516a755fc259f3acd Mon Sep 17 00:00:00 2001 From: Sneh Khatri Date: Thu, 2 Dec 2021 12:22:31 +0530 Subject: [PATCH 3/3] removed extra spaces from regex patterns --- .../src/create-plugin.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts index 0fa5a3810452..982083f1671e 100644 --- a/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts +++ b/packages/babel-plugin-transform-react-jsx/src/create-plugin.ts @@ -32,12 +32,11 @@ const DEFAULT = { }; const JSX_SOURCE_ANNOTATION_REGEX = - /^\*?\s*?\*?\*?\s*@jsxImportSource\s+([^\s]+)\s*$/; -const JSX_RUNTIME_ANNOTATION_REGEX = - /^\*?\s*?\*?\*?\s*@jsxRuntime\s+([^\s]+)\s*$/; + /^\s*\*?\s*@jsxImportSource\s+([^\s]+)\s*$/m; +const JSX_RUNTIME_ANNOTATION_REGEX = /^\s*\*?\s*@jsxRuntime\s+([^\s]+)\s*$/m; -const JSX_ANNOTATION_REGEX = /^\*?\s*?\*?\*?\s*@jsx\s+([^\s]+)\s*$/; -const JSX_FRAG_ANNOTATION_REGEX = /^\*?\s*?\*?\*?\s*@jsxFrag\s+([^\s]+)\s*$/; +const JSX_ANNOTATION_REGEX = /^\s*\*?\s*@jsx\s+([^\s]+)\s*$/m; +const JSX_FRAG_ANNOTATION_REGEX = /^\s*\*?\s*@jsxFrag\s+([^\s]+)\s*$/m; const get = (pass: PluginPass, name: string) => pass.get(`@babel/plugin-react-jsx/${name}`);