transform-vue-jsx.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163
  1. "use strict";
  2. var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
  3. if (k2 === undefined) k2 = k;
  4. Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
  5. }) : (function(o, m, k, k2) {
  6. if (k2 === undefined) k2 = k;
  7. o[k2] = m[k];
  8. }));
  9. var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
  10. Object.defineProperty(o, "default", { enumerable: true, value: v });
  11. }) : function(o, v) {
  12. o["default"] = v;
  13. });
  14. var __importStar = (this && this.__importStar) || function (mod) {
  15. if (mod && mod.__esModule) return mod;
  16. var result = {};
  17. if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
  18. __setModuleDefault(result, mod);
  19. return result;
  20. };
  21. var __importDefault = (this && this.__importDefault) || function (mod) {
  22. return (mod && mod.__esModule) ? mod : { "default": mod };
  23. };
  24. Object.defineProperty(exports, "__esModule", { value: true });
  25. exports.transformJSXElement = void 0;
  26. const t = __importStar(require("@babel/types"));
  27. const utils_1 = require("./utils");
  28. const buildProps_1 = __importDefault(require("./buildProps"));
  29. /**
  30. * Get children from Array of JSX children
  31. * @param paths Array<JSXText | JSXExpressionContainer | JSXElement | JSXFragment>
  32. * @returns Array<Expression | SpreadElement>
  33. */
  34. const getChildren = (paths, state) => paths
  35. .map((path) => {
  36. if (path.isJSXText()) {
  37. const transformedText = utils_1.transformJSXText(path);
  38. if (transformedText) {
  39. return t.callExpression(utils_1.createIdentifier(state, 'createTextVNode'), [transformedText]);
  40. }
  41. return transformedText;
  42. }
  43. if (path.isJSXExpressionContainer()) {
  44. const expression = utils_1.transformJSXExpressionContainer(path);
  45. if (t.isIdentifier(expression)) {
  46. const { name } = expression;
  47. const { referencePaths = [] } = path.scope.getBinding(name) || {};
  48. referencePaths.forEach((referencePath) => {
  49. utils_1.walksScope(referencePath, name, 2 /* DYNAMIC */);
  50. });
  51. }
  52. return expression;
  53. }
  54. if (t.isJSXSpreadChild(path)) {
  55. return utils_1.transformJSXSpreadChild(path);
  56. }
  57. if (path.isCallExpression()) {
  58. return path.node;
  59. }
  60. if (path.isJSXElement()) {
  61. return transformJSXElement(path, state);
  62. }
  63. throw new Error(`getChildren: ${path.type} is not supported`);
  64. }).filter(((value) => (value !== undefined
  65. && value !== null
  66. && !t.isJSXEmptyExpression(value))));
  67. const transformJSXElement = (path, state) => {
  68. const children = getChildren(path.get('children'), state);
  69. const { tag, props, isComponent, directives, patchFlag, dynamicPropNames, slots, } = buildProps_1.default(path, state);
  70. const { optimize = false } = state.opts;
  71. const slotFlag = path.getData('slotFlag') || 1 /* STABLE */;
  72. let VNodeChild;
  73. if (children.length > 1 || slots) {
  74. /*
  75. <A v-slots={slots}>{a}{b}</A>
  76. ---> {{ default: () => [a, b], ...slots }}
  77. ---> {[a, b]}
  78. */
  79. VNodeChild = isComponent ? t.objectExpression([
  80. !!children.length && t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, children)))),
  81. ...(slots ? (t.isObjectExpression(slots)
  82. ? slots.properties
  83. : [t.spreadElement(slots)]) : []),
  84. optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
  85. ].filter(Boolean)) : t.arrayExpression(children);
  86. }
  87. else if (children.length === 1) {
  88. /*
  89. <A>{a}</A> or <A>{() => a}</A>
  90. */
  91. const { enableObjectSlots = true } = state.opts;
  92. const child = children[0];
  93. const objectExpression = t.objectExpression([
  94. t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, [child])))),
  95. optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
  96. ].filter(Boolean));
  97. if (t.isIdentifier(child) && isComponent) {
  98. VNodeChild = enableObjectSlots ? t.conditionalExpression(t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [child]), child, objectExpression) : objectExpression;
  99. }
  100. else if (t.isCallExpression(child) && child.loc && isComponent) { // the element was generated and doesn't have location information
  101. if (enableObjectSlots) {
  102. const { scope } = path;
  103. const slotId = scope.generateUidIdentifier('slot');
  104. if (scope) {
  105. scope.push({
  106. id: slotId,
  107. kind: 'let',
  108. });
  109. }
  110. const alternate = t.objectExpression([
  111. t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression(utils_1.buildIIFE(path, [slotId])))),
  112. optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
  113. ].filter(Boolean));
  114. const assignment = t.assignmentExpression('=', slotId, child);
  115. const condition = t.callExpression(state.get('@vue/babel-plugin-jsx/runtimeIsSlot')(), [assignment]);
  116. VNodeChild = t.conditionalExpression(condition, slotId, alternate);
  117. }
  118. else {
  119. VNodeChild = objectExpression;
  120. }
  121. }
  122. else if (t.isFunctionExpression(child) || t.isArrowFunctionExpression(child)) {
  123. VNodeChild = t.objectExpression([
  124. t.objectProperty(t.identifier('default'), child),
  125. ]);
  126. }
  127. else if (t.isObjectExpression(child)) {
  128. VNodeChild = t.objectExpression([
  129. ...child.properties,
  130. optimize && t.objectProperty(t.identifier('_'), t.numericLiteral(slotFlag)),
  131. ].filter(Boolean));
  132. }
  133. else {
  134. VNodeChild = isComponent ? t.objectExpression([
  135. t.objectProperty(t.identifier('default'), t.arrowFunctionExpression([], t.arrayExpression([child]))),
  136. ]) : t.arrayExpression([child]);
  137. }
  138. }
  139. const createVNode = t.callExpression(utils_1.createIdentifier(state, 'createVNode'), [
  140. tag,
  141. props,
  142. VNodeChild || t.nullLiteral(),
  143. !!patchFlag && optimize && t.numericLiteral(patchFlag),
  144. !!dynamicPropNames.size && optimize
  145. && t.arrayExpression([...dynamicPropNames.keys()].map((name) => t.stringLiteral(name))),
  146. ].filter(Boolean));
  147. if (!directives.length) {
  148. return createVNode;
  149. }
  150. return t.callExpression(utils_1.createIdentifier(state, 'withDirectives'), [
  151. createVNode,
  152. t.arrayExpression(directives),
  153. ]);
  154. };
  155. exports.transformJSXElement = transformJSXElement;
  156. exports.default = ({
  157. JSXElement: {
  158. exit(path, state) {
  159. path.replaceWith(transformJSXElement(path, state));
  160. },
  161. },
  162. });