Add experimental version of the `babel-plugin-transform-react-… (#11154)
* add next option for babel-plugin-transform-react-jsx * address review comments * chore: update test fixtures * Update fixture * Add "columnNumber" to the new React transform * Update windows fixtures * Delete unused output.js * Update windows tests * Fix windows again * fix comments Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com> Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com> Co-authored-by: Moti Zilberman <motiz88@gmail.com>
This commit is contained in:
Luna Ruan
GitHub
@@ -1,100 +1,18 @@
|
||||
/* eslint-disable-next-line @babel/development/plugin-name */
|
||||
import transformClassic from "./transform-classic";
|
||||
/* eslint-disable-next-line @babel/development/plugin-name */
|
||||
import transformAutomatic from "./transform-automatic";
|
||||
import { declare } from "@babel/helper-plugin-utils";
|
||||
import jsx from "@babel/plugin-syntax-jsx";
|
||||
import helper from "@babel/helper-builder-react-jsx";
|
||||
import { types as t } from "@babel/core";
|
||||
|
||||
export default declare((api, options) => {
|
||||
api.assertVersion(7);
|
||||
const { runtime = "classic" } = options;
|
||||
|
||||
const THROW_IF_NAMESPACE =
|
||||
options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
|
||||
|
||||
const PRAGMA_DEFAULT = options.pragma || "React.createElement";
|
||||
const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
|
||||
|
||||
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
|
||||
const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
|
||||
|
||||
// returns a closure that returns an identifier or memberExpression node
|
||||
// based on the given id
|
||||
const createIdentifierParser = (id: string) => () => {
|
||||
return id
|
||||
.split(".")
|
||||
.map(name => t.identifier(name))
|
||||
.reduce((object, property) => t.memberExpression(object, property));
|
||||
};
|
||||
|
||||
const visitor = helper({
|
||||
pre(state) {
|
||||
const tagName = state.tagName;
|
||||
const args = state.args;
|
||||
if (t.react.isCompatTag(tagName)) {
|
||||
args.push(t.stringLiteral(tagName));
|
||||
} else {
|
||||
args.push(state.tagExpr);
|
||||
}
|
||||
},
|
||||
|
||||
post(state, pass) {
|
||||
state.callee = pass.get("jsxIdentifier")();
|
||||
},
|
||||
|
||||
throwIfNamespace: THROW_IF_NAMESPACE,
|
||||
});
|
||||
|
||||
visitor.Program = {
|
||||
enter(path, state) {
|
||||
const { file } = state;
|
||||
|
||||
let pragma = PRAGMA_DEFAULT;
|
||||
let pragmaFrag = PRAGMA_FRAG_DEFAULT;
|
||||
let pragmaSet = !!options.pragma;
|
||||
let pragmaFragSet = !!options.pragmaFrag;
|
||||
|
||||
if (file.ast.comments) {
|
||||
for (const comment of (file.ast.comments: Array<Object>)) {
|
||||
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
|
||||
if (jsxMatches) {
|
||||
pragma = jsxMatches[1];
|
||||
pragmaSet = true;
|
||||
}
|
||||
const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
|
||||
if (jsxFragMatches) {
|
||||
pragmaFrag = jsxFragMatches[1];
|
||||
pragmaFragSet = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state.set("jsxIdentifier", createIdentifierParser(pragma));
|
||||
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
|
||||
state.set("usedFragment", false);
|
||||
state.set("pragmaSet", pragmaSet);
|
||||
state.set("pragmaFragSet", pragmaFragSet);
|
||||
},
|
||||
exit(path, state) {
|
||||
if (
|
||||
state.get("pragmaSet") &&
|
||||
state.get("usedFragment") &&
|
||||
!state.get("pragmaFragSet")
|
||||
) {
|
||||
throw new Error(
|
||||
"transform-react-jsx: pragma has been set but " +
|
||||
"pragmaFrag has not been set",
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
visitor.JSXAttribute = function(path) {
|
||||
if (t.isJSXElement(path.node.value)) {
|
||||
path.node.value = t.jsxExpressionContainer(path.node.value);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
name: "transform-react-jsx",
|
||||
inherits: jsx,
|
||||
visitor,
|
||||
};
|
||||
// we throw a warning in helper-builder-react-jsx-experimental if runtime
|
||||
// is neither automatic or classic because we will remove this file
|
||||
// in v8.0.0
|
||||
if (runtime === "classic") {
|
||||
return transformClassic(api, options);
|
||||
} else {
|
||||
return transformAutomatic(api, options);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -0,0 +1,43 @@
|
||||
import jsx from "@babel/plugin-syntax-jsx";
|
||||
import { helper } from "@babel/helper-builder-react-jsx-experimental";
|
||||
import { declare } from "@babel/helper-plugin-utils";
|
||||
import { types as t } from "@babel/core";
|
||||
|
||||
export default declare((api, options) => {
|
||||
const visitor = helper(api, {
|
||||
pre(state) {
|
||||
const tagName = state.tagName;
|
||||
const args = state.args;
|
||||
if (t.react.isCompatTag(tagName)) {
|
||||
args.push(t.stringLiteral(tagName));
|
||||
} else {
|
||||
args.push(state.tagExpr);
|
||||
}
|
||||
},
|
||||
|
||||
post(state, pass) {
|
||||
if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") {
|
||||
state.createElementCallee = pass.get(
|
||||
"@babel/plugin-react-jsx/createElementIdentifier",
|
||||
)();
|
||||
} else {
|
||||
state.jsxCallee = pass.get("@babel/plugin-react-jsx/jsxIdentifier")();
|
||||
state.jsxStaticCallee = pass.get(
|
||||
"@babel/plugin-react-jsx/jsxStaticIdentifier",
|
||||
)();
|
||||
state.createElementCallee = pass.get(
|
||||
"@babel/plugin-react-jsx/createElementIdentifier",
|
||||
)();
|
||||
}
|
||||
},
|
||||
|
||||
...options,
|
||||
development: false,
|
||||
});
|
||||
|
||||
return {
|
||||
name: "transform-react-jsx",
|
||||
inherits: jsx,
|
||||
visitor,
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
import { declare } from "@babel/helper-plugin-utils";
|
||||
import jsx from "@babel/plugin-syntax-jsx";
|
||||
import helper from "@babel/helper-builder-react-jsx";
|
||||
import { types as t } from "@babel/core";
|
||||
|
||||
export default declare((api, options) => {
|
||||
const THROW_IF_NAMESPACE =
|
||||
options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
|
||||
|
||||
const PRAGMA_DEFAULT = options.pragma || "React.createElement";
|
||||
const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
|
||||
|
||||
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
|
||||
const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
|
||||
|
||||
// returns a closure that returns an identifier or memberExpression node
|
||||
// based on the given id
|
||||
const createIdentifierParser = (id: string) => () => {
|
||||
return id
|
||||
.split(".")
|
||||
.map(name => t.identifier(name))
|
||||
.reduce((object, property) => t.memberExpression(object, property));
|
||||
};
|
||||
|
||||
const visitor = helper({
|
||||
pre(state) {
|
||||
const tagName = state.tagName;
|
||||
const args = state.args;
|
||||
if (t.react.isCompatTag(tagName)) {
|
||||
args.push(t.stringLiteral(tagName));
|
||||
} else {
|
||||
args.push(state.tagExpr);
|
||||
}
|
||||
},
|
||||
|
||||
post(state, pass) {
|
||||
state.callee = pass.get("jsxIdentifier")();
|
||||
},
|
||||
|
||||
throwIfNamespace: THROW_IF_NAMESPACE,
|
||||
});
|
||||
|
||||
visitor.Program = {
|
||||
enter(path, state) {
|
||||
const { file } = state;
|
||||
|
||||
let pragma = PRAGMA_DEFAULT;
|
||||
let pragmaFrag = PRAGMA_FRAG_DEFAULT;
|
||||
let pragmaSet = !!options.pragma;
|
||||
let pragmaFragSet = !!options.pragmaFrag;
|
||||
|
||||
if (file.ast.comments) {
|
||||
for (const comment of (file.ast.comments: Array<Object>)) {
|
||||
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
|
||||
if (jsxMatches) {
|
||||
pragma = jsxMatches[1];
|
||||
pragmaSet = true;
|
||||
}
|
||||
const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
|
||||
if (jsxFragMatches) {
|
||||
pragmaFrag = jsxFragMatches[1];
|
||||
pragmaFragSet = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
state.set("jsxIdentifier", createIdentifierParser(pragma));
|
||||
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
|
||||
state.set("usedFragment", false);
|
||||
state.set("pragmaSet", pragmaSet);
|
||||
state.set("pragmaFragSet", pragmaFragSet);
|
||||
},
|
||||
exit(path, state) {
|
||||
if (
|
||||
state.get("pragmaSet") &&
|
||||
state.get("usedFragment") &&
|
||||
!state.get("pragmaFragSet")
|
||||
) {
|
||||
throw new Error(
|
||||
"transform-react-jsx: pragma has been set but " +
|
||||
"pragmaFrag has not been set",
|
||||
);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
visitor.JSXAttribute = function(path) {
|
||||
if (t.isJSXElement(path.node.value)) {
|
||||
path.node.value = t.jsxExpressionContainer(path.node.value);
|
||||
}
|
||||
};
|
||||
|
||||
return {
|
||||
name: "transform-react-jsx",
|
||||
inherits: jsx,
|
||||
visitor,
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user