To resolve security advisories. Should be merged after #6085
<!-- CURSOR_SUMMARY -->
---
> [!NOTE]
> Upgrades Playwright to 1.57.0 across examples and packages, updating
corresponding yarn.lock entries.
>
> - **Dependencies**:
> - Bump `playwright` to `1.57.0` in `examples/react/package.json`,
`examples/sveltekit/package.json`, `examples/vue/package.json`,
`packages/@uppy/dashboard/package.json`, and
`packages/@uppy/url/package.json`.
> - Update `yarn.lock` to `playwright@1.57.0` and
`playwright-core@1.57.0`.
>
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
fa35f7b7ea. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->
1. don't run browser tests in `headless` mode by default when running
tests individually. because when writing/running tests, i usually want
to see/debug using the browser. if one still wants headless, it's as
easy as: `yarn workspace @uppy/xyz test --browser.headless`. instead
append the `headless` mode when running all tests together - it doesn't
make sense to run all projects' tests without headless mode.
2. don't always run browser tests with `watch`: watch doesn't make sense
when running multiple projects in turbo (one project just blocks the
rest watching for changes). if one still wants to run a single test with
watch mode, it's as easy as: `yarn workspace @uppy/xyz test --watch`
3. don't cache test runs: if I run the `test` command. most of the time
I want to actually run tests (not skip them if they already ran last
time)
4. output logs when running tests. it's nice to see that the tests have
actually run (also on CI)
5. when running all tests, use concurrency=1, because the tests also
includes e2e tests, running multiple browsers in parallel really just
makes the test fail on my computer (and uses a lot of memory)
current output is not very informative:
<img width="840" height="410" alt="Screenshot 2025-10-17 at 17 09 55"
src="https://github.com/user-attachments/assets/9ca8278c-f160-478c-87e2-2ef861ba4bb1"
/>
with this PR:
<img width="672" height="495" alt="Screenshot 2025-10-17 at 17 20 49"
src="https://github.com/user-attachments/assets/1339c96b-d0c1-42e1-8fa1-d5a4a36ea42a"
/>
fixes#5946
Root Cause :
`createDropzone` used a single global `id` for the file input
(`'uppy-dropzone-file-input'`) Clicking any `<Dropzone />` did
`document.getElementById(<global-id>).click()`, which always targeted
the first input in the DOM, so files were added to the first Uppy
instance.
9bac4c8398/packages/%40uppy/components/src/hooks/dropzone.ts (L73-L77)
**Solutions :**
Simplest solution would have been to just make the input id unique per
Uppy instance using `ctx.uppy.getID()`, and click that specific input.
```typescript
const fileInputId = 'uppy-dropzone-file-input-' + ctx.uppy.getID()
```
**Caveats**:
If users don’t pass a custom id to `new Uppy()`, all instances default
to uppy, so ids still collide across instances.
Multiple Dropzones under one instance still share the same id.
Switched to a ref-based approach so clicks trigger the input directly,
without relying on `document.getElementById` lookups. It still falls
back to a DOM click for backward compatibility.
**StackBlitz Link :**
https://stackblitz.com/github/qxprakash/uppy/tree/debug_dropzone/examples/react?file=package.json&embed=1&view=editor&showSidebar=1&hideTerminal=1
**Update: Went for the ID based solution upon discussion with the team
as it's simpler.**
StackBlitz examples took **146+ seconds** to start due to heavy dev
dependencies
### Optimizations
- Eliminate heavy dev deps like `playwright (~200MB)` `@vitest/browser`
`vitest`
- Aggressive install flags: `--prefer-offline --reporter=silent
--ignore-scripts --no-optional`
- use pnpm
- Results **React example: 146s → ~25s (83% faster)**
- Add .stackblitzrc configuration file for StackBlitz environment setup
for
- Add prepare-stackblitz.js script to replace `workspace:*` dependencies
with "latest"
- Configure StackBlitz to run preparation script before installing
dependencies
- Change CSS import paths in examples from `@uppy/react/css/style.css`
to `@uppy/react/dist/styles.css` temporarily (will need to revert after
we release 5.0)
- added export maps to all the @uppy packages .
- imports remain unaffected except for peerDep packages in `@uppy/react`
`@uppy/svelte` and `@uppy/vue3`.
- export maps added for index files , css , and package.json.
- Added side effects for all the packages.
---------
Co-authored-by: Mikael Finstad <finstaden@gmail.com>
Co-authored-by: Merlijn Vos <merlijn@soverin.net>
- Deduplicate Vite versions, always use 7.x (except for sveltekit, which
does not allow 7 yet)
- Add missing dev deps
- Fix react-native requested deps versions
- Fix companion @types/node
- Fix "engines" in root package.json
No more yarn warnings 🎉
- Remove `e2e` folder entirely
- Remove all hacky resolutions and yarn patches
- Remove `@types/jasmine`, `js2ts` (convert a JS file to TS), and
`vue-template-compiler` from `private/`
- Remove e2e CI job
- Add browsers tests for vue, svelte, and react headless components and
hooks.
- Add new (browser) tests for transloadit, aws-s3, and dashboard.
- Remove final useless scripts from `package.json`, use direct
references in CI.
- Fix Dropzone component accessibility discovered during testing
- Clean up github workflows (move linters.yml into ci.yml, update
e2e.yml)
**Why Vitest Browser Mode?**
We could have used playwright but vitest browser mode uses it under the
hood and we get the use the vitest we know a love. No two entirely
different setups, no different assertions to relearn, write e2e tests as
if you're writing unit tests. Easy, fast, beautiful.
https://vitest.dev/guide/browser/
**Has every single e2e test been rewritten?**
No there were quite a few tests that have a lot overlap with existing or
newly added tests. There were also some tests that were so heavily
mocked inside and out you start to wonder what the value still is. Open
to discuss which tests still need to be added.
