Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix jsxDEV for generated elements #12017

Merged
merged 6 commits into from Aug 31, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
20 changes: 13 additions & 7 deletions packages/babel-helper-builder-react-jsx-experimental/src/index.js
Expand Up @@ -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);
},
};

Expand Down Expand Up @@ -436,8 +441,9 @@ 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;
throw path.buildCodeFrameError(
"invariant: `makeSource` cannot return source information for generated paths. This is likely a bug with `@babel/helper-builder-react-jsx-experimental`.",
);
Timer marked this conversation as resolved.
Show resolved Hide resolved
}

if (!state.fileNameIdentifier) {
Expand Down
@@ -0,0 +1 @@
// empty
Timer marked this conversation as resolved.
Show resolved Hide resolved
@@ -0,0 +1,6 @@
{
"plugins": [
"./plugin.js",
["transform-react-jsx-development", { "runtime": "automatic" }]
]
}
@@ -0,0 +1,6 @@
// empty

var _reactJsxDevRuntime = require("react/jsx-dev-runtime");

/*#__PURE__*/
_reactJsxDevRuntime.jsxDEV("div", {}, void 0, false, void 0, this)
@@ -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")),
[],
),
);
},
},
},
};
};