Core: Implement file formatter

[valentinpalkovic]

Closes #26804

What I did

I have implemented a file formatter which is based on the user's prettier version (supported version 2 and 3). If prettier is not installed by the user, we will use a fallback prettier version to format files if we can find a .editorconfig. Otherwise, the file is returned as is.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit a2ce71b. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected -t check -c production --parallel=7
• nx run-many -t build -c production --parallel=3

---

Sent with 💌 from NxCloud.

[QuintonC]

@valentinpalkovic There might have been a regression in this for folks using Yarn.

After running yarn install, node_modules does not include a prettier directory. Instead, it only includes prettier-fallback.

As a result, any other tooling which utilizes prettier will fail to locate prettier as it does not exist (such as eslint).

Result after clearing node_modules and running yarn install

[valentinpalkovic]

@QuintonC This is the expected behaviour. Prettier is only defined as an optional peer dependency. If you haven’t installed it, we will fallback to the prettier-fallback, which is essentially the latest version of prettier. With that said, prettier-fallback is always installed. That’s the reason why you can find it in your node_modules. It doesn’t mean, though, that it is used for file formatting. It will only be used if we couldn’t load prettier. If your other tooling (like eslint) requires to have prettier installed, then you have to install it. In this case, our file formatter will pick it up instead and will not fallback to the prettier-fallback.

[QuintonC]

@QuintonC This is the expected behaviour. Prettier is only defined as an optional peer dependency. If you haven’t installed it, we will fallback to the prettier-fallback, which is essentially the latest version of prettier.

That's just the problem. We do have prettier installed + listed in our devDependencies. However, when we run a clean install (yarn install) with no lockfile, we do not end up with prettier installed. Instead, we have prettier-fallback installed and listed in our lockfile.

This only happened when upgrading from 8.0.x to 8.1.x where this change was included.

[valentinpalkovic]

I see! For me it sounds like a yarn bug then instead of a bug in Storybook. A package's dependencies shouldn’t influence whether your own declared dependencies gets installed or not. Could you open a GitHub issue in yarns repo? Also, which version of yarn are you using?

[QuintonC]

Here's a quick screengrab from our lockfile after running yarn install and doing an upgrade to Storybook 8.1.x

I don't believe that this is a yarn bug. I think this is more of an issue with "automagically" defaulting to a package when one isn't installed. While it seems to be good-intentioned, I don't believe this is the correct implementation / use case of a peer dependency. It should just be marked as a peerDependency as you've done.

[QuintonC]

Current fix for us is to add a resolution for prettier-fallback in our package.json.

  "resolutions": {
    "prettier-fallback": "npm:empty-npm-package"
  },

[sheuertz]

This also causes yarn outdated to fail: error Error: https://registry.yarnpkg.com/prettier-fallback: Not found