Extension point + string payload formatting

[alex35mil]

There is something sketchy is going on with formatting extension points.

This snippet is perfectly formatted:

module X = %graphql("
  query 123456789 {
    x {
      a
      b
      c
      d
    }
  }
")

However, when I add one more field:

module X = %graphql(
  "
  query 123456789 {
    x {
      a
      b
      c
      d
      e
    }
  }
"
)

[IwanKaramazow]

Thanks for bringing this up. This points out an interesting bug. Looking into this.

Dev note: The content of the string exceeds the line length, which is used by the printer to determine if the layout should break or not. Line breaks in strings itself are just counted as characters now. What does this mean for multiline strings?
Should long texts break the parent?

[alex35mil]

It's prolly related:

// 2 lines: ok
let cn3 = css`
  display: block;
  color: ${Color.text};
`

// 3 lines: tag jumps on the next line
let cn3 =
  css`
  display: block;
  color: ${Color.text};
  background-color: ${Color.bg};
`

[IwanKaramazow]

Thanks, this is very helpful. Looking into this.

[alex35mil]

Also, interpolation acts weird.

Expected:

let cn = css`
  display: block;
  color: ${Color.text};
  background-color: ${Color.bg};
  border: 6px solid ${Color.Border.bg};
  margin: ${1}px;
  margin: ${1 + 2}px;
  margin: ${1 * 2}px;
  margin: ${1 + 2 / 3 + 4}px;
  margin: ${1 * 2 / 3 + 4}px;
  margin: ${1 - 2 / 3 * 4}px;
  margin: ${1 / 2 + 3 * 4}px;
  padding: ${Size.md}px;
  padding: ${1 + Size.md}px;
  padding: ${1.2 / Size.md}px;
  padding: ${Size.md + 1 - 2.3 * pad / 4}px;
`

Actual:

let cn =
  css`
    display: block;
    color: ${Color.text};
    background-color: ${Color.bg};
    border: 6px solid ${Color.Border.bg};
    margin: ${1}px;
    margin: ${1 + 2}px;
    margin: ${1 * 2}px;
    margin: ${1 +
  2 / 3 + 4}px;
    margin: ${1 * 2 / 3 + 4}px;
    margin: ${1 -
  2 / 3 * 4}px;
    margin: ${1 / 2 +
    3 * 4}px;
    padding: ${Size.md}px;
    padding: ${1 + Size.md}px;
    padding: ${1.2 /
  Size.md}px;
    padding: ${Size.md + 1 - 2.3 * pad / 4}px;
`

ADDED: Functions.

Expected:

let box = css`
  margin: ${ten()}px;
  padding: ${pad}px;
  border: 6px solid ${Color.Border.bg->Polished.lighten(0.3)};
  background-color: ${Color.bg};
  border-radius: ${Size.md / 2}px;
`

Actual:

let box =
  css`
  margin: ${ten()}px;
  padding: ${pad}px;
  border: 6px solid ${Color.Border.bg->Polished.lighten(
    0.3,
  )};
  background-color: ${Color.bg};
  border-radius: ${Size.md / 2}px;
`

[IwanKaramazow]

Some extra cases and suggestions from @jfrolich:

Currently formatted like this:

%graphql(
  `
  fragment ActivityBefore_ActivityCategory on ActivityCategory
  @argumentDefinitions(pixelRatio: {type: "Float!"}) {
    id
    title
    description
    icon(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
    iconDarkMode(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
  }
`
)

Improvement:

%graphql(`
  fragment ActivityBefore_ActivityCategory on ActivityCategory
  @argumentDefinitions(pixelRatio: {type: "Float!"}) {
    id
    title
    description
    icon(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
    iconDarkMode(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
  }
`)

Maybe this is feasible:

%graphql`
  fragment ActivityBefore_ActivityCategory on ActivityCategory
  @argumentDefinitions(pixelRatio: {type: "Float!"}) {
    id
    title
    description
    icon(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
    iconDarkMode(scaleFactor: $pixelRatio, width: 105, height: 100) {
      url
    }
  }
`

[IwanKaramazow]

Thanks for all the reports everyone. Pushed a fix to master. Really happy with our new printer algorithm =D These changes are trivial, would be very hard with the old one.

[jfrolich]

Amazing! Are there any plans to have multiline strings with support for indentation? (See #35). This is something that is quite ugly about code in our app currently. Most programming languages have solutions for this (Ruby, Python, Swift, etc.) and they all solve it in pretty much the same way. I think that adding an extra token """" for these multiline strings because this seems to collide the least with markdown and other things that might be frequently occurring in a string.

[IwanKaramazow]

Yes, eventually we'll look into that. But will likely be Q3 of 2021…

[jfrolich]

Yes, eventually we'll look into that. But will likely be Q3 of 2021…

Would you accept a PR for this. Not saying I would do it, but I might :)

[IwanKaramazow]

Yes, we're open to PRs =D