Chore/upgrade prettier v3

[carmanchris31]

WIP of upgrading to prettier v3

There are currently 153 failing tests, most of which are because of thrown errors. Any help with troubleshooting these errors is welcome and appreciated.

Current output of npm test:
test-results.txt

[dummdidumm]

@carmanchris31 now that Prettier version 3 is out officially, do you want to continue working on this PR or should I pick it up?

[benmccann]

this can be updated to ^3.0.0 now

[benmccann]

we no longer support default language. you must now specify it explicitly in the script block. the comment on isTypeScript can be updated as well

[carmanchris31]

@carmanchris31 now that Prettier version 3 is out officially, do you want to continue working on this PR or should I pick it up?

Please do, thanks! 🙏

[sebastinez]

Hmm so I think I found one reason for the Cannot read properties of undefined (reading \'length\') error (which seems one that shows up a lot), but not sure on the solution yet.

The preprocess snips the content in the style and the script tag as called for
This is the preprocessed string for the unsupported-language printer test

'<script lang="coffee" ✂prettier:content✂="CgoKYWxlcnQgIlRoaXMgaXMgbm90IHZhbGlkIEpTIGFuZCBzaG91bGQgbm90IGJlIGZvcm1hdHRlZC4iCgoK">{}</script><style lang="stylus" ✂prettier:content✂="CiAgaDEKICAgIGNvbG9yOiByZWQK"></style>'

But then when the svelte compiler parses the string, we don't get the attributes property on the instance property as we do on the css property.

{
  html: {
    start: 141,
    end: 139,
    type: 'Fragment',
    children: [
      { start: 139, end: 141, type: 'Text', raw: '\n\n', data: '\n\n' }
    ]
  },
  css: {
    type: 'Style',
    start: 141,
    end: 220,
    attributes: [
      {
        start: 148,
        end: 161,
        type: 'Attribute',
        name: 'lang',
        value: [
          {
            start: 154,
            end: 160,
            type: 'Text',
            raw: 'stylus',
            data: 'stylus'
          }
        ]
      },
      {
        start: 162,
        end: 211,
        type: 'Attribute',
        name: '✂prettier:content✂',
        value: [
          {
            start: 182,
            end: 210,
            type: 'Text',
            raw: 'CiAgaDEKICAgIGNvbG9yOiByZWQK',
            data: 'CiAgaDEKICAgIGNvbG9yOiByZWQK'
          }
        ]
      }
    ],
    children: [],
    content: { start: 212, end: 212, styles: '' }
  },
  instance: {
    type: 'Script',
    start: 0,
    end: 139,
    context: 'default',
    content: Node {
      type: 'Program',
      start: 128,
      end: 130,
      loc: SourceLocation {
        start: Position { line: 1, column: 0 },
        end: Position { line: 1, column: 130 }
      },
      body: [
        Node {
          type: 'BlockStatement',
          start: 128,
          end: 130,
          loc: SourceLocation {
            start: Position { line: 1, column: 128 },
            end: Position { line: 1, column: 130 }
          },
          body: []
        }
      ],
      sourceType: 'module'
    }
  },
  module: undefined,
  __isRoot: true
}

Later when trying to extract the prettier-content attribute here

prettier-plugin-svelte/src/embed.ts

Line 129 in 9dcc594

function getSnippedContent(node: Node) {

We get an empty string, and this breaks the AstPath iteration, as the error stackTrace says.

  › AstPath.each (file://node_modules/prettier/index.mjs:17308:33)
  › AstPath.map (file://node_modules/prettier/index.mjs:17322:10)
  › src/embed.ts:223:25
  › Generator.next (<anonymous>)
  › src/embed.ts:8:71
  › __awaiter (src/embed.ts:4:12)
  › embedTag (src/embed.ts:141:12)
  › embedType (src/embed.ts:70:13)
  › embedScript (src/embed.ts:81:13)

I hope this can help, will keep looking

[sebastinez]

Follow up: Ok just checked on the previous behavior and it seems that the top level nodes aren't recognized as such here, due to the _isRoot property missing.

prettier-plugin-svelte/src/print/index.ts

Line 97 in 8530863

return printTopLevelParts(n, options, path, print);

So we don't get to extract the prettier:content attributes, and fail later

[carmanchris31]

Follow up: Ok just checked on the previous behavior and it seems that the top level nodes aren't recognized as such here, due to the _isRoot property missing.

prettier-plugin-svelte/src/print/index.ts

Line 97 in 8530863

return printTopLevelParts(n, options, path, print);

So we don't get to extract the prettier:content attributes, and fail later

Interesting. It sounds like that could be responsible for a vast number of the failures!

[dummdidumm]

Found the reason for all the breakage - embed call behavior has changed: prettier/prettier#15093 . This is gonna take some refactoring..

[developomp]

finally! 🥳