@babel/types#JSXExpressionContainer TypeScript Examples

The following examples show how to use @babel/types#JSXExpressionContainer. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: jsx.ts    From react-optimized-image with MIT License 6 votes vote down vote up
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');
  }
}
Example #2
Source File: jsx.ts    From react-optimized-image with MIT License 6 votes vote down vote up
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;
}
Example #3
Source File: index.ts    From plasmic with MIT License 6 votes vote down vote up
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;
  }
}
Example #4
Source File: index.ts    From plasmic with MIT License 6 votes vote down vote up
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);
  }
}
Example #5
Source File: index.ts    From plasmic with MIT License 6 votes vote down vote up
serializePlasmicASTNode = (
  newNode: PlasmicASTNode,
  codeVersions: CodeVersions
):
  | Expression
  | JSXEmptyExpression
  | JSXExpressionContainer
  | JSXSpreadChild
  | JSXFragment
  | JSXText
  | undefined => {
  if (newNode.type === "opaque") {
    return newNode.rawNode;
  }
  return serializeNonOpaquePlasmicASTNode(newNode, codeVersions);
}
Example #6
Source File: index.ts    From plasmic with MIT License 6 votes vote down vote up
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,
  });
}
Example #7
Source File: plasmic-parser.ts    From plasmic with MIT License 6 votes vote down vote up
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;
}
Example #8
Source File: jsxConverter.ts    From react-native-decompiler with GNU Affero General Public License v3.0 5 votes vote down vote up
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);
  }
Example #9
Source File: index.ts    From plasmic with MIT License 5 votes vote down vote up
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);
}
Example #10
Source File: jsxConverter.ts    From react-native-decompiler with GNU Affero General Public License v3.0 5 votes vote down vote up
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);
  }
Example #11
Source File: jsxConverter.ts    From react-native-decompiler with GNU Affero General Public License v3.0 5 votes vote down vote up
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);
  }
Example #12
Source File: jsxConverter.ts    From react-native-decompiler with GNU Affero General Public License v3.0 5 votes vote down vote up
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);
  }
Example #13
Source File: index.ts    From plasmic with MIT License 4 votes vote down vote up
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)
  );
}