From 11dab64b1d7ce55972deb1fe4dd791932b6a7af8 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Aug 2020 01:01:00 -0400 Subject: [PATCH 1/6] Fix `jsxDEV` for generated elements --- .../src/index.js | 21 +++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js index 00fee165933f..e9bad88fd326 100644 --- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js +++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js @@ -43,16 +43,21 @@ export function helper(babel, options) { } } - const source = t.jsxAttribute( - t.jsxIdentifier("__source"), - t.jsxExpressionContainer(makeSource(path, state)), - ); + const hasSource = Boolean(path.node.loc); + + const source = hasSource + ? t.jsxAttribute( + t.jsxIdentifier("__source"), + t.jsxExpressionContainer(makeSource(path, state)), + ) + : // the element was generated and doesn't have location information + null; const self = t.jsxAttribute( t.jsxIdentifier("__self"), t.jsxExpressionContainer(t.thisExpression()), ); - path.pushContainer("attributes", [source, self]); + path.pushContainer("attributes", hasSource ? [source, self] : self); }, }; @@ -434,12 +439,6 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, } function makeSource(path, state) { - const location = path.node.loc; - if (!location) { - // the element was generated and doesn't have location information - return; - } - if (!state.fileNameIdentifier) { const { filename = "" } = state; From 312a6de49d9cde852ca8a5c11c8d427ab0585c5b Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Aug 2020 01:26:15 -0400 Subject: [PATCH 2/6] Throw invariant error --- .../src/index.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js index e9bad88fd326..1781c13e4630 100644 --- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js +++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js @@ -439,6 +439,13 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, } function makeSource(path, state) { + const location = path.node.loc; + if (!location) { + throw path.buildCodeFrameError( + "invariant: `makeSource` cannot return source information for generated paths. This is likely a bug with `@babel/helper-builder-react-jsx-experimental`.", + ); + } + if (!state.fileNameIdentifier) { const { filename = "" } = state; From e2599942d6c4b7bd157b8f9b3b9c57758c72b97f Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Fri, 28 Aug 2020 02:14:21 -0400 Subject: [PATCH 3/6] Add test --- .../test/fixtures/linux/generated-jsx/exec.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js new file mode 100644 index 000000000000..e8cb9e5c8d70 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js @@ -0,0 +1,33 @@ +var code = ``; + +const res = transform(code, { + plugins: [ + function (b) { + var t = b.types; + return { + visitor: { + Program: { + enter(path) { + path.pushContainer( + "body", + t.JSXElement( + t.JSXOpeningElement(t.JSXIdentifier("div"), [], false), + t.JSXClosingElement(t.JSXIdentifier("div")), + [] + ) + ); + } + }, + }, + }; + }, + ["../../../..", { runtime: "automatic" }], + ], +}); + +expect(res.code).toMatchInlineSnapshot(` +"import { jsxDEV as _jsxDEV } from \\"react/jsx-dev-runtime\\"; + +/*#__PURE__*/ +_jsxDEV(\\"div\\", {}, void 0, false, void 0, this)" +`) From e166df3460f21030b63a0bc04517e5aa7e7fa05c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= Date: Mon, 31 Aug 2020 10:23:46 -0400 Subject: [PATCH 4/6] test: revise test layout --- .../cross-platform/generated-jsx/input.js | 1 + .../cross-platform/generated-jsx/options.json | 6 ++++ .../cross-platform/generated-jsx/output.js | 6 ++++ .../cross-platform/generated-jsx/plugin.js | 18 ++++++++++ .../test/fixtures/linux/generated-jsx/exec.js | 33 ------------------- 5 files changed, 31 insertions(+), 33 deletions(-) create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/input.js create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/options.json create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/output.js create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js delete mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/input.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/input.js new file mode 100644 index 000000000000..8b1a393741c9 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/input.js @@ -0,0 +1 @@ +// empty diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/options.json new file mode 100644 index 000000000000..35d2bd9ccce5 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/options.json @@ -0,0 +1,6 @@ +{ + "plugins": [ + "./plugin.js", + ["transform-react-jsx-development", { "runtime": "automatic" }] + ] +} diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/output.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/output.js new file mode 100644 index 000000000000..e65a50350360 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/output.js @@ -0,0 +1,6 @@ +// empty + +var _reactJsxDevRuntime = require("react/jsx-dev-runtime"); + +/*#__PURE__*/ +_reactJsxDevRuntime.jsxDEV("div", {}, void 0, false, void 0, this) diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js new file mode 100644 index 000000000000..ed48f36db5b2 --- /dev/null +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js @@ -0,0 +1,18 @@ +module.exports = function ({ types: t }) { + return { + visitor: { + Program: { + enter(path) { + path.pushContainer( + "body", + t.JSXElement( + t.JSXOpeningElement(t.JSXIdentifier("div"), [], false), + t.JSXClosingElement(t.JSXIdentifier("div")), + [], + ), + ); + }, + }, + }, + }; +}; diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js deleted file mode 100644 index e8cb9e5c8d70..000000000000 --- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/generated-jsx/exec.js +++ /dev/null @@ -1,33 +0,0 @@ -var code = ``; - -const res = transform(code, { - plugins: [ - function (b) { - var t = b.types; - return { - visitor: { - Program: { - enter(path) { - path.pushContainer( - "body", - t.JSXElement( - t.JSXOpeningElement(t.JSXIdentifier("div"), [], false), - t.JSXClosingElement(t.JSXIdentifier("div")), - [] - ) - ); - } - }, - }, - }; - }, - ["../../../..", { runtime: "automatic" }], - ], -}); - -expect(res.code).toMatchInlineSnapshot(` -"import { jsxDEV as _jsxDEV } from \\"react/jsx-dev-runtime\\"; - -/*#__PURE__*/ -_jsxDEV(\\"div\\", {}, void 0, false, void 0, this)" -`) From 655ea2dd8179e08db42ff5a042eb0f86576792c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= Date: Mon, 31 Aug 2020 13:48:57 -0400 Subject: [PATCH 5/6] fix: node 6 does not support trailing comma --- .../fixtures/cross-platform/generated-jsx/plugin.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js index ed48f36db5b2..684f89040731 100644 --- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js +++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/cross-platform/generated-jsx/plugin.js @@ -8,11 +8,11 @@ module.exports = function ({ types: t }) { t.JSXElement( t.JSXOpeningElement(t.JSXIdentifier("div"), [], false), t.JSXClosingElement(t.JSXIdentifier("div")), - [], - ), + [] + ) ); - }, - }, - }, + } + } + } }; }; From 94720de5fe47e97870dca08139f60874d34a17c6 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 31 Aug 2020 14:31:40 -0400 Subject: [PATCH 6/6] Use undefined node --- .../src/index.js | 20 +++++++------------ 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js index 1781c13e4630..a2f47e1f4609 100644 --- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js +++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js @@ -43,21 +43,16 @@ export function helper(babel, options) { } } - const hasSource = Boolean(path.node.loc); - - const source = hasSource - ? t.jsxAttribute( - t.jsxIdentifier("__source"), - t.jsxExpressionContainer(makeSource(path, state)), - ) - : // the element was generated and doesn't have location information - null; + const source = t.jsxAttribute( + t.jsxIdentifier("__source"), + t.jsxExpressionContainer(makeSource(path, state)), + ); const self = t.jsxAttribute( t.jsxIdentifier("__self"), t.jsxExpressionContainer(t.thisExpression()), ); - path.pushContainer("attributes", hasSource ? [source, self] : self); + path.pushContainer("attributes", [source, self]); }, }; @@ -441,9 +436,8 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`, function makeSource(path, state) { const location = path.node.loc; if (!location) { - throw path.buildCodeFrameError( - "invariant: `makeSource` cannot return source information for generated paths. This is likely a bug with `@babel/helper-builder-react-jsx-experimental`.", - ); + // the element was generated and doesn't have location information + return path.scope.buildUndefinedNode(); } if (!state.fileNameIdentifier) {