@babel/types#jsxExpressionContainer TypeScript Examples

getTypeAttribute = (path: NodePath<JSXElement>, types: string[]): string | undefined => {
  const attribute = getAttribute(path, 'type');

  if (attribute && attribute.node.value && attribute.node.value.type === 'StringLiteral') {
    const type = attribute.node.value.value;

    if (types.indexOf(type) < 0) {
      throw (attribute.get('value') as NodePath<JSXExpressionContainer>).buildCodeFrameError(
        `Type ${type} not found in images.config.js`,
      );
    }

    return type;
  }

  if (attribute && attribute.node) {
    throw (attribute.get('value') as NodePath).buildCodeFrameError('Only static string values are allowed');
  }
}

getNumberedArrayAttribute = (path: NodePath<JSXElement>, attributeName: string): number[] | undefined => {
  const attribute = getAttribute(path, attributeName);

  if (attribute) {
    if (
      attribute.node.value &&
      attribute.node.value.type === 'JSXExpressionContainer' &&
      attribute.node.value.expression.type === 'ArrayExpression'
    ) {
      const values: number[] = [];

      attribute.node.value.expression.elements.forEach((element, i) => {
        if (element && element.type === 'NumericLiteral') {
          values.push(element.value);
        } else if (element) {
          // todo: better error message with link to docs when ready & create test for this error
          throw (((attribute.get('value') as NodePath<JSXExpressionContainer>).get('expression') as NodePath<
            ArrayExpression
          >).get(`elements.${i}`) as NodePath).buildCodeFrameError('Only static number values are allowed');
        }
      });

      return values;
    }

    // todo: better error message with link to docs when ready & create test for this error
    throw attribute.get('value').buildCodeFrameError('Only static array with number values is allowed');
  }

  return undefined;
}

wrapAsJsxAttrValue = (
  rawValue:
    | Expression
    | JSXEmptyExpression
    | JSXExpressionContainer
    | JSXSpreadChild
    | JSXFragment
    | JSXText
    | undefined
) => {
  if (!rawValue) {
    return undefined;
  }
  if (rawValue.type === "JSXText" || rawValue.type === "JSXSpreadChild") {
    // Either newVersion or editedVersion was wrapped in a fragment.
    // We wrap too.
    mkJsxFragment([rawValue]);
  } else if (
    babel.types.isExpression(rawValue) ||
    babel.types.isJSXEmptyExpression(rawValue)
  ) {
    return babel.types.jsxExpressionContainer(rawValue);
  } else {
    return rawValue;
  }
}

serializeNonOpaquePlasmicASTNode = (
  newNode: PlasmicASTNode,
  codeVersions: CodeVersions
): Expression | JSXExpressionContainer | JSXText | JSXFragment | undefined => {
  assert(newNode.type !== "opaque");
  if (newNode.type === "child-str-call") {
    // Just output the new version
    return newNode.rawNode;
  } else if (newNode.type === "string-lit") {
    // Just output the new version
    return newNode.rawNode;
  } else if (newNode.type === "text") {
    // Just output the new version
    return newNode.rawNode;
  } else if (newNode.type === "jsx-fragment") {
    return babel.types.jsxFragment(
      babel.types.jsxOpeningFragment(),
      babel.types.jsxClosingFragment(),
      withoutNils(
        newNode.children.map((child) => {
          const newRawNode = serializePlasmicASTNode(child, codeVersions);
          if (!newRawNode) {
            return undefined;
          }
          if (
            babel.types.isExpression(newRawNode) ||
            babel.types.isJSXEmptyExpression(newRawNode)
          ) {
            return babel.types.jsxExpressionContainer(newRawNode);
          }
          return newRawNode;
        })
      )
    );
  } else {
    assert(newNode.type === "tag-or-component");
    return serializeTagOrComponent(newNode, codeVersions);
  }
}

serializePlasmicASTNode = (
  newNode: PlasmicASTNode,
  codeVersions: CodeVersions
):
  | Expression
  | JSXEmptyExpression
  | JSXExpressionContainer
  | JSXSpreadChild
  | JSXFragment
  | JSXText
  | undefined => {
  if (newNode.type === "opaque") {
    return newNode.rawNode;
  }
  return serializeNonOpaquePlasmicASTNode(newNode, codeVersions);
}

renameAndSerializePlasmicASTNode = (
  newNode: PlasmicASTNode,
  codeVersions: CodeVersions
):
  | Expression
  | JSXEmptyExpression
  | JSXExpressionContainer
  | JSXSpreadChild
  | JSXFragment
  | JSXText
  | undefined => {
  if (newNode.type === "opaque") {
    return newNode.rawNode;
  }
  return serializeNonOpaquePlasmicASTNode(newNode, {
    baseVersion: codeVersions.baseVersion.renameJsxTree(
      codeVersions.newVersion
    ),
    editedVersion: codeVersions.editedVersion.renameJsxTree(
      codeVersions.newVersion
    ),
    newVersion: codeVersions.newVersion,
  });
}

parseNode = (
  n:
    | Expression
    | JSXEmptyExpression
    | JSXExpressionContainer
    | JSXSpreadChild
    | JSXFragment,
  parent: Node | undefined,
  forceFragmentAsOneNode: boolean
): PlasmicASTNode => {
  let node: PlasmicASTNode | null = null;
  if (n.type === "JSXExpressionContainer") {
    // Always unwrap the expression container
    node = parseNode(n.expression, n, forceFragmentAsOneNode);
  } else if (n.type === "JSXSpreadChild") {
    node = parseAsOneNode(n.expression, n);
  } else if (n.type === "JSXFragment") {
    node = forceFragmentAsOneNode
      ? parseAsOneNode(n, parent)
      : {
          type: "jsx-fragment",
          children: parseChildren(n),
          rawNode: n,
        };
  } else {
    node = parseAsOneNode(n, parent);
  }
  node.rawNode = n;
  return node;
}

private parseJsx(node: Expression): JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment {
    if (isStringLiteral(node)) {
      return jsxText(node.value);
    }
    if (isCallExpression(node)) {
      const args = node.arguments;

      let name: JSXIdentifier | JSXMemberExpression | undefined;
      if (isIdentifier(args[0]) || isStringLiteral(args[0])) {
        name = jsxIdentifier(isIdentifier(args[0]) ? args[0].name : args[0].value);
      } else if (isMemberExpression(args[0]) && isIdentifier(args[0].object) && isIdentifier(args[0].property)) {
        name = jsxMemberExpression(jsxIdentifier(args[0].object.name), jsxIdentifier(args[0].property.name));
      } else {
        this.debugLog(`fail to parse component ${args[0].type} inside callExpression`);
        return jsxExpressionContainer(node);
      }

      let props: JSXAttribute[] = [];
      if (isObjectExpression(args[1])) {
        props = args[1].properties.map((prop) => {
          if (!isObjectProperty(prop) || !isIdentifier(prop.key)) return null;
          if (isStringLiteral(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), prop.value);
          }
          if (isBooleanLiteral(prop.value) && prop.value.value) {
            return jsxAttribute(jsxIdentifier(prop.key.name), null);
          }
          if (isExpression(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), jsxExpressionContainer(prop.value));
          }
          return null;
        }).filter((e): e is JSXAttribute => e != null);
      }

      const children = args.slice(2).map((e) => (isExpression(e) ? this.parseJsx(e) : null)).filter((e): e is JSXElement => e != null);

      if (children.length) {
        return jsxElement(jsxOpeningElement(name, props), jsxClosingElement(name), children);
      }

      return jsxElement(jsxOpeningElement(name, props, true), null, []);
    }

    this.debugLog(`fail to parse component ${node.type}`);
    return jsxExpressionContainer(node);
  }

mergeAttributeValue = (
  attrName: string,
  newNode: PlasmicTagOrComponent,
  editedNode: PlasmicTagOrComponent,
  baseNode: PlasmicTagOrComponent,
  codeVersions: CodeVersions
) => {
  const parsedNewAttrValue = findParsedNamedAttrs(newNode, attrName);
  const parsedEditedAttrValue = findParsedNamedAttrs(editedNode, attrName);
  const parsedBaseAttrValue = findParsedNamedAttrs(baseNode, attrName);
  // These two must not be undefined (i.e. not found)
  assert(parsedNewAttrValue !== undefined);
  assert(parsedEditedAttrValue !== undefined);
  let mergedAttrValue:
    | Expression
    | JSXEmptyExpression
    | JSXExpressionContainer
    | JSXSpreadChild
    | JSXFragment
    | JSXText
    | undefined = undefined;
  if (!parsedNewAttrValue) {
    if (parsedEditedAttrValue) {
      mergedAttrValue = serializePlasmicASTNode(
        parsedEditedAttrValue,
        codeVersions
      );
    } else {
      mergedAttrValue = undefined;
    }
  } else {
    if (!parsedEditedAttrValue) {
      mergedAttrValue = serializePlasmicASTNode(
        parsedNewAttrValue,
        codeVersions
      );
    } else {
      // do merge, really!
      const asArray = (node: PlasmicASTNode | null | undefined) =>
        !node ? [] : node.type === "jsx-fragment" ? node.children : [node];
      const mergedNodes = mergeNodes(
        asArray(parsedNewAttrValue),
        asArray(parsedEditedAttrValue),
        asArray(parsedBaseAttrValue),
        codeVersions
      );
      // If edited forced wrapping single node with JSXFragment, so do we
      // if the result is a single element.
      const editedForcedFragment =
        parsedEditedAttrValue.type === "jsx-fragment" &&
        parsedEditedAttrValue.children.length === 1;
      mergedAttrValue =
        mergedNodes.length > 1
          ? mkJsxFragment(mergedNodes)
          : mergedNodes.length === 1
          ? editedForcedFragment
            ? mkJsxFragment(mergedNodes)
            : mergedNodes[0]
          : babel.types.jsxEmptyExpression();
    }
  }
  return wrapAsJsxAttrValue(mergedAttrValue);
}

private parseJsx(node: Expression): JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment {
    if (isStringLiteral(node)) {
      return jsxText(node.value);
    }
    if (isCallExpression(node)) {
      const args = node.arguments;

      let name: JSXIdentifier | JSXMemberExpression | undefined;
      if (isIdentifier(args[0]) || isStringLiteral(args[0])) {
        name = jsxIdentifier(isIdentifier(args[0]) ? args[0].name : args[0].value);
      } else if (isMemberExpression(args[0]) && isIdentifier(args[0].object) && isIdentifier(args[0].property)) {
        name = jsxMemberExpression(jsxIdentifier(args[0].object.name), jsxIdentifier(args[0].property.name));
      } else {
        this.debugLog(`fail to parse component ${args[0].type} inside callExpression`);
        return jsxExpressionContainer(node);
      }

      let props: JSXAttribute[] = [];
      if (isObjectExpression(args[1])) {
        props = args[1].properties.map((prop) => {
          if (!isObjectProperty(prop) || !isIdentifier(prop.key)) return null;
          if (isStringLiteral(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), prop.value);
          }
          if (isBooleanLiteral(prop.value) && prop.value.value) {
            return jsxAttribute(jsxIdentifier(prop.key.name), null);
          }
          if (isExpression(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), jsxExpressionContainer(prop.value));
          }
          return null;
        }).filter((e): e is JSXAttribute => e != null);
      }

      const children = args.slice(2).map((e) => (isExpression(e) ? this.parseJsx(e) : null)).filter((e): e is JSXElement => e != null);

      if (children.length) {
        return jsxElement(jsxOpeningElement(name, props), jsxClosingElement(name), children);
      }

      return jsxElement(jsxOpeningElement(name, props, true), null, []);
    }

    this.debugLog(`fail to parse component ${node.type}`);
    return jsxExpressionContainer(node);
  }

private parseJsx(node: Expression): JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment {
    if (isStringLiteral(node)) {
      return jsxText(node.value);
    }
    if (isCallExpression(node)) {
      const args = node.arguments;

      let name: JSXIdentifier | JSXMemberExpression | undefined;
      if (isIdentifier(args[0]) || isStringLiteral(args[0])) {
        name = jsxIdentifier(isIdentifier(args[0]) ? args[0].name : args[0].value);
      } else if (isMemberExpression(args[0]) && isIdentifier(args[0].object) && isIdentifier(args[0].property)) {
        name = jsxMemberExpression(jsxIdentifier(args[0].object.name), jsxIdentifier(args[0].property.name));
      } else {
        this.debugLog(`fail to parse component ${args[0].type} inside callExpression`);
        return jsxExpressionContainer(node);
      }

      let props: JSXAttribute[] = [];
      if (isObjectExpression(args[1])) {
        props = args[1].properties.map((prop) => {
          if (!isObjectProperty(prop) || !isIdentifier(prop.key)) return null;
          if (isStringLiteral(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), prop.value);
          }
          if (isBooleanLiteral(prop.value) && prop.value.value) {
            return jsxAttribute(jsxIdentifier(prop.key.name), null);
          }
          if (isExpression(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), jsxExpressionContainer(prop.value));
          }
          return null;
        }).filter((e): e is JSXAttribute => e != null);
      }

      const children = args.slice(2).map((e) => (isExpression(e) ? this.parseJsx(e) : null)).filter((e): e is JSXElement => e != null);

      if (children.length) {
        return jsxElement(jsxOpeningElement(name, props), jsxClosingElement(name), children);
      }

      return jsxElement(jsxOpeningElement(name, props, true), null, []);
    }

    this.debugLog(`fail to parse component ${node.type}`);
    return jsxExpressionContainer(node);
  }

private parseJsx(node: Expression): JSXText | JSXExpressionContainer | JSXSpreadChild | JSXElement | JSXFragment {
    if (isStringLiteral(node)) {
      return jsxText(node.value);
    }
    if (isCallExpression(node)) {
      const args = node.arguments;

      let name: JSXIdentifier | JSXMemberExpression | undefined;
      if (isIdentifier(args[0]) || isStringLiteral(args[0])) {
        name = jsxIdentifier(isIdentifier(args[0]) ? args[0].name : args[0].value);
      } else if (isMemberExpression(args[0]) && isIdentifier(args[0].object) && isIdentifier(args[0].property)) {
        name = jsxMemberExpression(jsxIdentifier(args[0].object.name), jsxIdentifier(args[0].property.name));
      } else {
        this.debugLog(`fail to parse component ${args[0].type} inside callExpression`);
        return jsxExpressionContainer(node);
      }

      let props: JSXAttribute[] = [];
      if (isObjectExpression(args[1])) {
        props = args[1].properties.map((prop) => {
          if (!isObjectProperty(prop) || !isIdentifier(prop.key)) return null;
          if (isStringLiteral(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), prop.value);
          }
          if (isBooleanLiteral(prop.value) && prop.value.value) {
            return jsxAttribute(jsxIdentifier(prop.key.name), null);
          }
          if (isExpression(prop.value)) {
            return jsxAttribute(jsxIdentifier(prop.key.name), jsxExpressionContainer(prop.value));
          }
          return null;
        }).filter((e): e is JSXAttribute => e != null);
      }

      const children = args.slice(2).map((e) => (isExpression(e) ? this.parseJsx(e) : null)).filter((e): e is JSXElement => e != null);

      if (children.length) {
        return jsxElement(jsxOpeningElement(name, props), jsxClosingElement(name), children);
      }

      return jsxElement(jsxOpeningElement(name, props, true), null, []);
    }

    this.debugLog(`fail to parse component ${node.type}`);
    return jsxExpressionContainer(node);
  }

serializeTagOrComponent = (
  newNode: PlasmicTagOrComponent,
  codeVersions: CodeVersions
): Expression | JSXExpressionContainer | undefined => {
  const { newVersion, editedVersion, baseVersion } = codeVersions;

  // find node with same id in edited version.
  const editedNode = editedVersion.findTagOrComponent(
    newNode.jsxElement.nameInId
  );
  const baseNode = baseVersion.findTagOrComponent(newNode.jsxElement.nameInId);
  if (editedNode) {
    // the node must exist in base version.
    assert(!!baseNode);
    const editedNodeJsxElementClone = babel.types.cloneDeep(
      editedNode.jsxElement.rawNode
    );

    editedNodeJsxElementClone.openingElement.name = mergedTag(
      newNode,
      editedNode,
      baseNode
    );
    if (editedNodeJsxElementClone.closingElement) {
      editedNodeJsxElementClone.closingElement.name =
        editedNodeJsxElementClone.openingElement.name;
    }

    editedNodeJsxElementClone.openingElement.attributes = mergeAttributes(
      newNode,
      editedNode,
      baseNode,
      codeVersions
    );

    editedNodeJsxElementClone.children = mergedChildren(
      newNode,
      editedNode,
      baseNode,
      codeVersions
    );
    if (
      !editedNodeJsxElementClone.closingElement &&
      editedNodeJsxElementClone.children.length > 0
    ) {
      editedNodeJsxElementClone.closingElement = babel.types.jsxClosingElement(
        editedNodeJsxElementClone.openingElement.name
      );
      editedNodeJsxElementClone.openingElement.selfClosing = false;
    }

    const secondaryNodes = new Map<Node, Node | undefined>(
      editedNode.secondaryNodes.map((n) => {
        const newSecondaryNode = newVersion.findTagOrComponent(
          n.jsxElement.nameInId
        );
        if (!newSecondaryNode) {
          return [n.rawNode, undefined];
        }
        const rawReplacement = serializePlasmicASTNode(
          newSecondaryNode,
          codeVersions
        );
        return [n.rawNode, rawReplacement];
      })
    );

    const newNodeCallShowFunc = newVersion.hasShowFuncCall(newNode);
    const editedNodeCallShowFunc = editedVersion.hasShowFuncCall(editedNode);

    const editedNodeClone = cloneDeepWithHook(editedNode.rawNode, (n: Node) => {
      if (n === editedNode.jsxElement.rawNode) {
        if (newNodeCallShowFunc && !editedNodeCallShowFunc) {
          // add the show call
          const expr = makeJsxElementWithShowCall(
            editedNodeJsxElementClone,
            editedNode.jsxElement.nameInId
          );
          // add an expression container if the parent is JSXElement or Fragment
          return editedNode.jsxElement.rawParent &&
            isJsxElementOrFragment(editedNode.jsxElement.rawParent)
            ? wrapInJsxExprContainer(expr)
            : expr;
        }
        return editedNodeJsxElementClone;
      }

      if (secondaryNodes.has(n)) {
        const replacement = secondaryNodes.get(n);
        // If deleted, an empty fragment instead
        return replacement || mkJsxFragment([]);
      }
      return undefined;
    });

    if (editedNodeCallShowFunc && !newNodeCallShowFunc) {
      traverse(editedNodeClone, {
        noScope: true,
        CallExpression: function (path) {
          if (
            isCallIgnoreArguments(
              path.node,
              helperObject,
              `show${editedNode.jsxElement.nameInId}`
            )
          ) {
            path.replaceWithSourceString("true");
          }
        },
      });
    }
    return editedNodeClone;
  }
  // check if the node has been deleted.
  if (baseNode) {
    // If so, don't output anything
    return undefined;
  }
  // This is new node. Just output self.
  const childrenReplacement = new Map<Node, Node>();
  newNode.jsxElement.children.forEach((child) => {
    // Plasmic never emit opaque node.
    assert(child.type !== "opaque");
    const childReplacement = serializeNonOpaquePlasmicASTNode(
      child,
      codeVersions
    );
    if (childReplacement) {
      if (babel.types.isExpression(childReplacement)) {
        // need to wrap in expression container
        const maybeWrapped =
          childReplacement.type !== "JSXElement" &&
          childReplacement.type !== "JSXFragment"
            ? babel.types.jsxExpressionContainer(childReplacement)
            : childReplacement;
        childrenReplacement.set(child.rawNode, maybeWrapped);
      } else {
        childrenReplacement.set(child.rawNode, childReplacement);
      }
    }
  });
  // Attribute replacement
  const attrsReplacement = new Map<Node, Node>();
  newNode.jsxElement.attrs.forEach((attr) => {
    if (L.isArray(attr)) {
      const [key, value] = attr;
      // className is an opaque attribute!
      if (value && value.type !== "opaque") {
        const attrReplacement = serializeNonOpaquePlasmicASTNode(
          value,
          codeVersions
        );
        if (attrReplacement) {
          if (attrReplacement.type !== "JSXExpressionContainer") {
            assert(attrReplacement.type !== "JSXText");
            attrsReplacement.set(
              value.rawNode,
              babel.types.jsxExpressionContainer(attrReplacement)
            );
          } else {
            attrsReplacement.set(value.rawNode, attrReplacement);
          }
        }
      }
    }
  });
  return cloneDeepWithHook(
    newNode.rawNode,
    (n: Node) => childrenReplacement.get(n) || attrsReplacement.get(n)
  );
}