Use pnpm (and fix Storybook issues as a result)

[sarayourfriend]

Fixes

Fixes #483 by @krysal

Description

Replaces npm with pnpm. pnpm has some significant advantages compared to npm, including super fast installs thanks to its local dependency cache. Dependencies are sym-linked into node_modules which makes using pnpm for many projects ultimately result in smaller disk usage. It also makes dependency re-installation super fast as it just has to create the sym-links. Similarly, deleting node_modules is much faster as you're just removing sym-links.

To support Vue we need to use the shamefully-hoist option as noted in this issue: pnpm/pnpm#831 (note that the shamefully-flatten option has been renamed to shamefully-hoist)

Tagging @rbadillap specifically for review on this one as it touches the newly minted Dockerfile 🙂

Marking this as high priority as not being able to properly use Storybook is not good for redesign development which we're currently moving quickly on.

Testing Instructions

Checkout this branch and remove node_modules (for example rm -rf node_modules). Follow the instructions in the readme to install pnpm (volta install pnpm) then run pnpm install. Next run pnpm storybook and pnpm dev to ensure that they work 🎉 Also run pnpm build followed by pnpm start.

Checklist

• My pull request has a descriptive title (not a vague title like Update index.md).
• My pull request targets the default branch of the repository (main) or a parent feature branch.
• My commit messages follow best practices.
• My code follows the established code style of the repository.
• I added or updated tests for the changes I made (if applicable).
• I added or updated documentation (if applicable).
• I tried running the project locally and verified that there are no visible errors.

Developer Certificate of Origin

Developer Certificate of Origin

Developer Certificate of Origin
Version 1.1

Copyright (C) 2004, 2006 The Linux Foundation and its contributors.
1 Letterman Drive
Suite D4700
San Francisco, CA, 94129

Everyone is permitted to copy and distribute verbatim copies of this
license document, but changing it is not allowed.


Developer's Certificate of Origin 1.1

By making a contribution to this project, I certify that:

(a) The contribution was created in whole or in part by me and I
    have the right to submit it under the open source license
    indicated in the file; or

(b) The contribution is based upon previous work that, to the best
    of my knowledge, is covered under an appropriate open source
    license and I have the right under that license to submit that
    work with modifications, whether created in whole or in part
    by me, under the same open source license (unless I am
    permitted to submit under a different license), as indicated
    in the file; or

(c) The contribution was provided directly to me by some other
    person who certified (a), (b) or (c) and I have not modified
    it.

(d) I understand and agree that this project and the contribution
    are public and that a record of the contribution (including all
    personal information I submit with it, including my sign-off) is
    maintained indefinitely and may be redistributed consistent with
    this project or the open source license(s) involved.

[zackkrida]

Oops, I actually pushed a commit with some config suggestions to your PR. Please review, as they're minor anyway!

Everything is working flawlessly for me, tested with:

✅ Installation and local run

rm -rf node_modules
volta install pnpm
pnpm i
npm run dev

Docker run

docker compose up

Storybook

pnpm run storybook

Tests

pnpm run test:e2e
pnpm run test

[sarayourfriend]

@zackkrida just curious, why do we need to explicitly use run in docker?

[zackkrida]

@sarayourfriend We don't, I just think it's clearer for anyone checking, for example, documentation:
https://pnpm.io/cli/run

I generally lean towards being verbose

[sarayourfriend]

Gotcha. I was following the style the recommend in their npm equivalency table where they exclude run

[zackkrida]

I'm fine with eliminating run usage @sarayourfriend, since the pnpm docs actively encourage not writing out run it might actually be clearer without it. So glad this was such a win, and thanks for finding everywhere npm needed to be replaced 👍

[obulat]

I haven't tested the docker build but locally it is amazingly fast and Storybook mdx files all work for me. Thank you for improving devex, @sarayourfriend !

One small thing that isn't related but would reduce the number of warnings when running Storybook is to replace "license/VLicence" with "License/VLicense" (first letter is upper-case L). I added a tiny PR : #527

[obulat]

Just a note: Webstorm integration with pnpm is not working great. I used the GUI (green 'run' triangles) to run the scripts from package.json, and now it's not working. Will have to use the command line more :)

[zackkrida]

@obulat Maybe these could help, it seems that it's supposed to work!

https://stackoverflow.com/questions/63875255/how-to-set-up-pnpm-in-run-debug-in-webstorm
https://www.jetbrains.com/help/webstorm/installing-and-removing-external-software-using-node-package-manager.html