import esutils from "esutils"; /** * Converts JSX Spread arguments into Object Spread, avoiding Babel's helper or Object.assign injection. * Input: * <div a="1" {...b} /> * Output: * <div {...{ a: "1", ...b }} /> * ...which Babel converts to: * h("div", { a: "1", ...b }) */ export default ({ types: t }) => { // converts a set of JSXAttributes to an Object.assign() call function convertAttributesAssign(attributes) { const args = []; for (let i = 0, current; i < attributes.length; i++) { const node = attributes[i]; if (t.isJSXSpreadAttribute(node)) { // the first attribute is a spread, avoid copying all other attributes onto it if (i === 0) { args.push(t.objectExpression([])); } current = null; args.push(node.argument); } else { const name = getAttributeName(node); const value = getAttributeValue(node); if (!current) { current = t.objectExpression([]); args.push(current); } current.properties.push(t.objectProperty(name, value)); } } return t.callExpression( t.memberExpression(t.identifier("Object"), t.identifier("assign")), args ); } // Converts a JSXAttribute to the equivalent ObjectExpression property function convertAttributeSpread(node) { if (t.isJSXSpreadAttribute(node)) { return t.spreadElement(node.argument); } const name = getAttributeName(node); const value = getAttributeValue(node); return t.inherits(t.objectProperty(name, value), node); } // Convert a JSX attribute name to an Object expression property name function getAttributeName(node) { if (t.isJSXNamespacedName(node.name)) { return t.stringLiteral( node.name.namespace.name + ":" + node.name.name.name ); } if (esutils.keyword.isIdentifierNameES6(node.name.name)) { return t.identifier(node.name.name); } return t.stringLiteral(node.name.name); } // Convert a JSX attribute value to a JavaScript expression value function getAttributeValue(node) { let value = node.value || t.booleanLiteral(true); if (t.isJSXExpressionContainer(value)) { value = value.expression; } else if (t.isStringLiteral(value)) { value.value = value.value.replace(/\n\s+/g, " "); // "raw" JSXText should not be used from a StringLiteral because it needs to be escaped. if (value.extra && value.extra.raw) { delete value.extra.raw; } } return value; } return { name: "transform-jsx-spread", visitor: { JSXOpeningElement(path, state) { const useSpread = state.opts.useSpread === true; const hasSpread = path.node.attributes.some(attr => t.isJSXSpreadAttribute(attr) ); // ignore JSX Elements without spread or with lone spread: if (!hasSpread || path.node.attributes.length === 1) return; if (useSpread) { path.node.attributes = [ t.jsxSpreadAttribute( t.objectExpression( path.node.attributes.map(convertAttributeSpread) ) ), ]; } else { path.node.attributes = [ t.jsxSpreadAttribute(convertAttributesAssign(path.node.attributes)), ]; } }, }, }; };