Update prettier to v3

[Shinigami92]

Prettier v3 is a fully breaking change

[Shinigami92]

@fisker I need docs for how to migrate a plugin Also there are no TS declarations, so I might need to work in the dark 😕 until @types/prettier was updated

[fisker]

1. Remove embed, if you are not going to use it.
2. Remove 2nd parameter in parse (optional, the 2nd and the 3rd are actually all options 😄 )
3. await all prettier apis.

[Shinigami92]

@fisker Did the angular parser/formatter changed a bit?

[fisker]

parsers all async. (All most, but all should be awaited)

[fisker]

I didn't see you call parse. What's wrong?

[Shinigami92]

Ah I assume it has something todo with: https://github.com/prettier/prettier/blob/1a602b590ec9ed5db01780939659c427e3d277b8/changelog_unreleased/api/13268.md But as there are no TS declarations is absolutely difficult to explore the API and I'm thinking about to wait for now

[Shinigami92]

What's wrong?

There are 3 failing tests:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/syntax-errors/syntax-errors.test.ts > Syntax-Errors > should format non-JS script without syntax error
Error: promise resolved "// Copied from JSON-LD playground
script(type="application/ld+json").
  {
    "@context": {
      "name": "http://schema.org/name",
      "description": "http://schema.org/description",
      "image": {
        "@id": "http://schema.org/image",
        "@type": "@id"
      },
      "geo": "http://schema.org/geo",
      "latitude": {
        "@id": "http://schema.org/latitude",
        "@type": "xsd:float"
      },
      "longitude": {
        "@id": "http://schema.org/longitude",
        "@type": "xsd:float"
      },
      "xsd": "http://www.w3.org/2001/XMLSchema#"
    },
    "name": "The Empire State Building",
    "description": "The Empire State Building is a 102-story landmark in New York City.",
    "image": "http://www.civil.usherbrooke.ca/cours/gci215a/empire-state-building.jpg",
    "geo": {
      "latitude": "40.75",
      "longitude": "73.98"
    }
  }

// Copied from https://YAML.org
script(type="application/x-not-a-real+yaml").
  %YAML 1.2
  ---
  YAML: YAML Ain't Markup Language

  What It Is: YAML is a human friendly data serialization
    standard for all programming languages.

  YAML Resources:
    YAML 1.2 (3rd Edition): http://yaml.org/spec/1.2/spec.html
    YAML 1.1 (2nd Edition): http://yaml.org/spec/1.1/
    YAML 1.0 (1st Edition): http://yaml.org/spec/1.0/
    YAML Issues Page: https://github.com/yaml/yaml/issues
    YAML Mailing List: [email protected]
    YAML IRC Channel: "#yaml on irc.libera.chat"
    YAML Reference Parser: http://ben-kiki.org/ypaste/
    YAML Spec: https://github.com/yaml/yaml-spec
    YAML Test Suite: https://github.com/yaml/yaml-test-suite
    YAML Test Matrix: https://matrix.yaml.io/
    YAML Docker Runtimes: https://github.com/yaml/yaml-runtimes
    YAML Cookbook (Ruby): YAML_for_ruby.html

  Projects:
    C/C++:
      - libfyaml # "C" YAML 1.2 processor                                            | YTS
      - libyaml # "C" Fast YAML 1.1                                                 | YTS
      - libcyaml # YAML de/serialization of C data structures (using libyaml)
      - yaml-cpp # C++ YAML 1.2 implementation
    Crystal:
      - YAML # YAML 1.1 from the standard library
    C#/.NET:
      - YamlDotNet # YAML 1.1/(1.2) library with serialization support                 | YTS
      - yaml-net # YAML 1.1 library
    D:
      - D-YAML # YAML 1.1 de/serialization library with official community support | YTS
    Dart:
      - yaml # YAML package for Dart
    Delphi:
      - Neslib.Yaml # YAML 1.1 Delphi binding to libyaml                                | YTS
    Golang:
      - Go-yaml # YAML support for the Go language.
      - Go-gypsy # Simplified YAML parser written in Go.
      - goccy/go-yaml # YAML 1.2 implementation in pure Go.
    Haskell:
      - HsYAML # YAML 1.2 implementation in pure Haskell                           | YTS
      - YamlReference # Haskell 1.2 reference parser
      - yaml # YAML 1.1 parser/renderer for Haskell ( ❯ async /Users/shinigami/OpenSource/Shinigami92/plugin-pug/tests/syntax-errors/syntax-errors.test.ts:35:5
based on libyaml)
    Java:
      - SnakeYAML # Java 5 / YAML 1.1
      - YamlBeans # To/from JavaBeans. YAML 1.0/1.1
      - eo-yaml # YAML 1.2 for Java 8. Also packaged as a Module (Java 9+).
    JavaScript:
      - js-yaml # Native PyYAML port to JavaScript. Demo
      - yaml # JavaScript parser and stringifier (YAML 1.2, 1.1)                 | YTS
    Nim:
      - NimYAML # YAML 1.2 implementation in pure Nim                               | YTS
    OCaml:
      - ocaml-syck # YAML 1.0 via syck bindings
    Perl Modules:
      - YAML # Pure Perl YAML 1.0 Module
      - YAML::XS # Binding to libyaml
      - YAML::Syck # Binding to libsyck
      - YAML::Tiny # A small YAML subset module
      - YAML::PP # A YAML 1.2/1.1 processor                                          | YTS
    PHP:
      - The Yaml Component # Symfony Yaml Component - Loads and dumps YAML files (YAML 1.2)
      - php-yaml # libyaml bindings (YAML 1.1)
      - syck # syck bindings (YAML 1.0)
      - spyc # yaml loader/dumper (YAML 1.?)
    Python:
      - PyYAML # YAML 1.1, pure python and libyaml binding
      - ruamel.yaml # YAML 1.2, update of PyYAML with round-tripping of comments
      - PySyck # YAML 1.0, syck binding
      - strictyaml # Restricted YAML subset
    R:
      - R YAML # libyaml wrapper
    Ruby:
      - psych # libyaml wrapper (in Ruby core for 1.9.2)
      - RbYaml # YAML 1.1 (PyYAML Port)
      - yaml4r # YAML 1.0, standard library syck binding
    Rust:
      - yaml-rust # YAML 1.2 implementation in pure Rust
      - serde-yaml # YAML de/serialization of structs
    Others:
      - yamlvim (src) # YAML dumper/emitter in pure vimscript

script(type="text/typescript").
  const myVariable: string = "Hello World" as any as string;

  function myFunc<myGeneric>({ myProp = 42 }: { myProp: number }): myGeneric {
    console.log(myVariable);
    re
turn true;
  }

  myFunc({ myProp: 100 });

script(type="text/markdown").
  # h1

  ## h2

  ### h3

  #### h4

  ##### h5

  ###### h6

  Hello World.

  - Bullet point 1
  - Bullet point 2

  1. List item
  2. Another list item
" instead of rejecting

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 FAIL  tests/issues/issue-70/issue-70.test.ts > Issues > should handle angular framework interpolation
AssertionError: expected 'div\n  | {{ "foo" | baz : bar }}\n\n.…' to be 'div\n  | {{ "foo" | baz: bar }}\n\n.h…' // Object.is equality
 ❯ tests/issues/issue-70/issue-70.test.ts:9:19
      7|       formatOptions: { pugFramework: 'angular' },
      8|     });
      9|     expect(actual).toBe(expected);
       |                   ^
     10|   });
     11| });

  - Expected  - 1
  + Received  + 1
  
    div
  -   | {{ "foo" | baz: bar }}
  +   | {{ "foo" | baz : bar }}
    
    .headline {{ $t("langkey", { id: `${model.id}` }) }}
    

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯

 FAIL  tests/issues/issue-67/issue-67.test.ts > Issues > should handle Angular expressions
 ❯ tests/issues/issue-67/issue-67.test.ts:7:19
AssertionError: expected '.foo([myAttribute]="{ param: \'hello …' to be '.foo([myAttribute]="{ param: \'hello …' // Object.is equality
      5|   it('should handle Angular expressions', async () => {
      6|     const { expected, actual } = await compareFiles(__dirname);
      7|     expect(actual).toBe(expected);
       |                   ^
      8|   });
      9| });

  - Expected  - 1
  + Received  + 1
  
  - .foo([myAttribute]="{ param: 'hello {name}' | translate: { name: arg } }")
  + ".foo([myAttribute]="{ param: 'hello {name}' | translate : { name: arg } }")
    .foo(*ngIf="myObjectAsync | async as myObject; else fallbackTemplate")
    

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯

Test Files  3 failed | 125 passed (128)
     Tests  3 failed | 297 passed (300)
  Start at  11:12:06
  Duration  10.68s (setup 5ms, collect 11.25s, tests 8.85s)


 FAIL  Tests failed. Watching for file changes...
       press h to show help, press q to quit

[fisker]

Try add

trailingComma: 'es5'

https://github.com/prettier/plugin-pug/blob/2bc5392fd35ae69f39d5311110aa168d2c1374a2/src/printer.ts#L464

[fisker]

And here https://github.com/prettier/plugin-pug/blob/2bc5392fd35ae69f39d5311110aa168d2c1374a2/src/printer.ts#L650

[fisker]

Sorry, wrong comment.

[fisker]

Ah, I forgot it's expected https://github.com/prettier/prettier/pull/13100

[fisker]

Anyway, do you aware this https://github.com/prettier/prettier/blob/f2244bdc8621c0a001e3717f595bc8fd8653cce7/src/language-html/embed.js#L157? Not sure how we handle here.

[Shinigami92]

Tests are running green locally 🥳 So now I just need to wait for @types/prettier to get updated

[fisker]

Great!

[carmanchris31]

Tests are running green locally 🥳 So now I just need to wait for @types/prettier to get updated

prettier now ships its own types! https://github.com/prettier/prettier/issues/14033

[carmanchris31]

What would be required to ship a prerelease on npm (next channel)?

[Shinigami92]

What would be required to ship a prerelease on npm (next channel)?

a manual interaction by me

[Shinigami92]

@carmanchris31 I will first update the project to TS 5 in next few days Then we might need to rebase this PR and I can publish a next release

[fisker]

@fisker this is a LOT of await calls Why is this needed that much for a relative linear top to bottom IO file write?

I didn't get which part are you talking about.

[Shinigami92]

@fisker this is a LOT of await calls Why is this needed that much for a relative linear top to bottom IO file write?

I didn't get which part are you talking about.

In every test we now need to call await compareFiles(...) This PR touches around 145 files right now. But theoretically in https://github.com/prettier/plugin-pug/pull/411#discussion_r1142448845 you can see that print is also callable when you do not call it recursively. So when we enhance the TS types for that, we can remove the async-stuff and get a backwards compatible and clean PR.

[fisker]

I still can't understand the problem here. Are you saying compareFiles can be sync? Doesn't it calls prettier.format? And prettier.format returns a Promise. Anyway, I pushed those changes just to verify new version, do whatever you want to do.

[lehni]

@Shinigami92 what's blocking this now? Can I be of help?

[Shinigami92]

Before I upgrade plugin-pug, I want to have a released working stable eslint-config-prettier, eslint-plugin-prettier and prettier-plugin-organize-imports

Then I need to find also the time and will, but right now company work is exhausting

[TyIsI]

eslint-config-prettier, eslint-plugin-prettier and prettier-plugin-organize-imports have prettier 3.0 compatible releases btw.

[lehni]

@Shinigami92 I'm happy to put some time into wrapping up this PR. Perhaps you could outline what remains to be done?

[Shinigami92]

@Shinigami92 I'm happy to put some time into wrapping up this PR. Perhaps you could outline what remains to be done?

I'm on mobile right now, it is more like I don't have the time to look what is missing And I think I need to make first sometimes dep upgrades bevor rebasing this one

I can't promise anything but maybe I can invest some time tomorrow

[lehni]

@Shinigami92 I've rebased the branch on main and adjusted the prettier versions here: https://github.com/lehni/plugin-pug/tree/prettier-3

I get only three failing tests, all related to the same topic of angular expressions. I am not sure what adds the extra space there….

@fisker perhaps you'd have some insight?

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Tests 3 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  tests/issues/issue-67/issue-67.test.ts > Issues > should handle Angular expressions
AssertionError: expected '.foo([myAttribute]="{ param: \'hello …' to be '.foo([myAttribute]="{ param: \'hello …' // Object.is equality

  - Expected  - 0
  + Received  + 1

  - `.foo([myAttribute]="{ param: 'hello {name}' | translate : { name: arg } }")␊
  + `.foo([myAttribute]="{ param: 'hello {name}' | translate: { name: arg } }")␊
    .foo(*ngIf="myObjectAsync | async as myObject; else fallbackTemplate")␊
    `

 ❯ tests/issues/issue-67/issue-67.test.ts:7:20
      5|   it('should handle Angular expressions', async () => {
      6|     const { expected, actual } = await compareFiles(__dirname);
      7|     expect(actual).toBe(expected);
       |                    ^
      8|   });
      9| });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/3]⎯

 FAIL  tests/issues/issue-329/issue-329.test.ts > Issues > should handle nested angular translations
AssertionError: expected 'some-component(title="{{ \'{type}-tex…' to be 'some-component(title="{{ \'{type}-tex…' // Object.is equality

  - Expected  - 0
  + Received  + 1

  - `some-component(title="{{ '{type}-text' | translate : { type: someType | translate } }}")␊
  + `some-component(title="{{ '{type}-text' | translate: { type: someType | translate } }}")␊
    `

 ❯ tests/issues/issue-329/issue-329.test.ts:12:20
     10|       },
     11|     });
     12|     expect(actual).toBe(expected);
       |                    ^
     13|   });
     14| });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[2/3]⎯

 FAIL  tests/issues/issue-70/issue-70.test.ts > Issues > should handle angular framework interpolation
AssertionError: expected 'div\n  | {{ "foo" | baz: bar }}\n\n.h…' to be 'div\n  | {{ "foo" | baz : bar }}\n\n.…' // Object.is equality

  - Expected  - 0
  + Received  + 1

    `div␊
  -   | {{ "foo" | baz : bar }}␊
  +   | {{ "foo" | baz: bar }}␊
    ␊
    .headline {{ $t("langkey", { id: \`${model.id}\` }) }}␊
    `

 ❯ tests/issues/issue-70/issue-70.test.ts:9:20
      7|       formatOptions: { pugFramework: 'angular' },
      8|     });
      9|     expect(actual).toBe(expected);
       |                    ^
     10|   });
     11| });

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[3/3]⎯

 Test Files  3 failed | 131 passed (134)
      Tests  3 failed | 307 passed (310)
   Start at  14:22:22
   Duration  12.01s

[lehni]

So these somehow relate to 6fd56df976efb370829e34062e3bf02ba3ab88d6 but I'm not sure what's the correct behavior

[lehni]

With https://github.com/lehni/plugin-pug/commit/33089abc46b7a5ec0fabd2ca183199fe890c0bb5, all the tests past in my rebased branch.

[lehni]

I needed another fix to be able to build the TS files, and with this, the plugin works perfectly in my code-base (tested with yarn link)

https://github.com/lehni/plugin-pug/commit/0c6806179167b282113289c11b64547d7f737358