Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[parser] Babel's “replaceWithMultiple” adds unnecessary parentheses #9851

Open
jukben opened this Issue Apr 12, 2019 · 1 comment

Comments

Projects
None yet
2 participants
@jukben
Copy link
Contributor

commented Apr 12, 2019

Bug Report

Current Behavior
A clear and concise description of the behavior.

Input Code

  • REPL or Repo link if applicable

https://astexplorer.net/#/gist/7f499680fcd4aaaba9af215afe42de80/c91228b082de80ef2c57e9c1960b22f884d1e694

https://stackoverflow.com/questions/55648184/babels-replacewithmultiple-adds-unnecessary-parentheses/55649060#55649060

Babel plugin:

export default function (babel) {
  const { types: t } = babel;

  return {
    name: "ast-transform", // not required
    visitor: {
      JSXElement(path) {
        if (path.node.openingElement.name.name === "defs") {
          path.replaceWithMultiple(
            path.node.children.filter(t.isJSXElement)
          );
        }
      },
    }
  };
}

Expected behavior/code

<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="72" height="72" fill="white" />
  <path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
  <path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
  <path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
  <linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>
  <linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>
</svg>;

Actual behavior/code

<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect width="72" height="72" fill="white" />
  <path d="M68.81 0H34.23C34.23 4.14003 35.8746 8.11049 38.8021 11.0379C40.2516 12.4875 41.9724 13.6373 43.8663 14.4218C45.7602 15.2062 47.7901 15.61 49.84 15.61H56.21V21.76C56.2127 25.8966 57.8571 29.8629 60.7821 32.7879C63.7071 35.7129 67.6734 37.3574 71.81 37.36V3C71.81 2.20435 71.4939 1.44129 70.9313 0.87868C70.3687 0.31607 69.6057 0 68.81 0V0Z" fill="#2684FF" />
  <path d="M51.7 17.23H17.12C17.1226 21.3666 18.7671 25.3329 21.6921 28.2579C24.617 31.1829 28.5834 32.8273 32.72 32.83H39.09V39C39.0953 43.1366 40.7423 47.1019 43.6691 50.025C46.596 52.9481 50.5634 54.59 54.7 54.59V20.23C54.7 19.4343 54.3839 18.6713 53.8213 18.1087C53.2587 17.5461 52.4956 17.23 51.7 17.23V17.23Z" fill="url(#paint0_linear)" />
  <path d="M34.58 34.45H0C0 38.59 1.64462 42.5605 4.57206 45.4879C7.49951 48.4154 11.47 50.06 15.61 50.06H22V56.21C22.0026 60.3431 23.6443 64.3065 26.565 67.2309C29.4857 70.1553 33.4469 71.8021 37.58 71.81V37.45C37.58 36.6543 37.2639 35.8913 36.7013 35.3287C36.1387 34.7661 35.3757 34.45 34.58 34.45Z" fill="url(#paint1_linear)" />
  (
  <linearGradient id="paint0_linear" x1="53.96" y1="17.29" x2="39.25" y2="32.46" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>,
  <linearGradient id="paint1_linear" x1="1421.65" y1="1327.85" x2="786.064" y2="1949.52" gradientUnits="userSpaceOnUse">
    <stop offset="0.18" stop-color="#0052CC" />
    <stop offset="1" stop-color="#2684FF" />
  </linearGradient>)

</svg>;

Babel Configuration (.babelrc, package.json, cli command)

export default function (babel) {
  const { types: t } = babel;
  
  return {
    name: "ast-transform", // not required
    visitor: {
      JSXElement(path) {
        if (path.node.openingElement.name.name === "defs") {
          console.log(path.node.children.filter(t.isJSXElement))
          path.replaceWithMultiple(path.node.children.filter(t.isJSXElement));
        }
      },
    }
  };
}

Environment

  • Babel version(s): [e.g. v6.0.0, v7.0.0-beta.34]
  • Node/npm version: [e.g. Node 8/npm 5]
  • OS: [e.g. OSX 10.13.4, Windows 10]
  • Monorepo: [e.g. yes/no/Lerna]
  • How you are using Babel: [e.g. cli, register, loader]

Possible Solution

I found out there is replaceInline with does the job, but not sure if this is expected behavior or not.

Additional context/Screenshots
Add any other context about the problem here. If applicable, add screenshots to help explain.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Apr 12, 2019

Hey @jukben! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community
that typically always has someone willing to help. You can sign-up here
for an invite.

@jukben jukben changed the title Babel's “replaceWithMultiple” adds unnecessary parentheses [parser] Babel's “replaceWithMultiple” adds unnecessary parentheses Apr 12, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.