Skip to content

@uppy: upgrade biome and more improvements #6244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mifi merged 13 commits into from
May 21, 2026
Merged

@uppy: upgrade biome and more improvements #6244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dde27af
upgrade biome and add new rules
qxprakash Mar 26, 2026
6bc038a
add back #reject in TransloaditAssemblyWatcher
qxprakash Mar 26, 2026
9e2cada
update biome version and config
qxprakash May 13, 2026
4a94e0e
Merge branch 'main' of https://github.com/transloadit/uppy into upgra…
qxprakash May 13, 2026
2c679ca
yarn lock
qxprakash May 13, 2026
2c997bc
add all lint suggestions by biome
qxprakash May 13, 2026
44cebfe
fix
qxprakash May 13, 2026
2e8a95d
remove ts-expect-error directive
qxprakash May 13, 2026
ba59d96
Merge branch 'main' into upgrade_biome
qxprakash May 18, 2026
78a50c1
remove angular example override block
qxprakash May 18, 2026
20732c6
Merge branch 'upgrade_biome' of https://github.com/qxprakash/uppy int…
qxprakash May 18, 2026
ebbfbc9
Merge branch 'main' into upgrade_biome
qxprakash May 20, 2026
81d3656
Merge branch 'main' into upgrade_biome
mifi May 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 46 additions & 34 deletions biome.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{
"$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
"$schema": "https://biomejs.dev/schemas/2.4.15/schema.json",
"vcs": {
"enabled": true,
"clientKind": "git",
Expand All @@ -14,31 +14,23 @@
"bin/**",
"e2e/**",
"private/**",
"!packages/**/{dist,lib}/**",
"!packages/**/{dist,lib}",
"!node_modules",
"!.svelte-kit",
"!packages/@uppy/components/src/input.css"
"!packages/@uppy/components/src/input.css",
"!examples/angular/**/*.html"
]
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"formatWithErrors": true
},
"html": {
"experimentalFullSupportEnabled": true
},
"linter": {
"enabled": true,
"includes": [
"packages/**",
"examples/**",
"scripts/**",
"private/**",
"!packages/**/{dist,lib}/**",
"!node_modules",
"!.svelte-kit",
"!packages/@uppy/components/src/input.css",
"!**/*.vue",
"!**/*.svelte"
],
Comment on lines 28 to -41
Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we can safely remove this now because biome 2.4 can fully lint .vue and .svelte files using the flag experimentalFullSupportEnabled: true , linter.includes falls back to files.includes , which already contains all the paths which should be linted.

Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

previously we needed this block so that we can disable lint for .vue and svelte files. check the last two paths

      "!**/*.vue",
      "!**/*.svelte"

"rules": {
"recommended": true,
"suspicious": {
Expand All @@ -48,37 +40,26 @@
"useExhaustiveDependencies": "error",
"useHookAtTopLevel": "error",
"noUnusedFunctionParameters": "off",
"noUnusedImports": "error",
"noUnusedPrivateClassMembers": "error",
"noUnusedVariables": {
"level": "error",
"options": {
"ignoreRestSiblings": true
}
}
},
"noNestedComponentDefinitions": "error",
"noReactPropAssignments": "error"
},
"style": {
"noNonNullAssertion": "off"
},
"a11y": {
"noSvgWithoutTitle": "off"
},
"nursery": {
"noNestedComponentDefinitions": "error",
"noReactPropAssign": "error"
"noSvgWithoutTitle": "off",
"useSemanticElements": "off"
}
}
},
"overrides": [
{
"includes": ["packages/@uppy/companion/**"],
"linter": {
"rules": {
"complexity": {
"useLiteralKeys": "off"
}
}
}
}
],
"javascript": {
"formatter": {
"quoteStyle": "single",
Expand All @@ -92,5 +73,36 @@
"organizeImports": "on"
}
}
}
},
"overrides": [
{
"includes": ["packages/@uppy/companion/**"],
"linter": {
"rules": {
"complexity": {
"useLiteralKeys": "off"
}
}
}
},
Comment on lines +79 to +87
Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is added due to a conflict : companion's tsconfig.shared.json sets noPropertyAccessFromIndexSignature: true. This is a deliberate, strict TypeScript option that says:

"If a property comes from an index signature (like process.env, req.query, req.body), you MUST use
bracket notation to access it."

{
"includes": ["**/*.vue", "**/*.svelte", "packages/@uppy/vue/**/*.ts"],
"linter": {
"rules": {
"correctness": {
"useHookAtTopLevel": "off",
"useExhaustiveDependencies": "off"
}
}
}
},
Comment on lines +89 to +98
Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AI Summary :

What policy this protects: the framework's own reactivity model

These two rules are React-specific:

  • useHookAtTopLevel - React's "Rules of Hooks" (no conditionals, no loops, top-level only)
  • useExhaustiveDependencies — React's useEffect / useMemo / useCallback dependency-array discipline

Biome triggers them on any identifier starting with use*. But:

  • Vue composables (useUppy, useDropzone, useFileInput) have no rules-of-hooks constraint — they're
    plain functions returning reactive refs. They can be called conditionally, in loops, anywhere.
  • Svelte 5 runes ($state, $derived, $effect) have automatic dependency tracking — there is no manual
    dependency array to keep exhaustive.

{
"includes": ["examples/nextjs/**/*.css"],
"css": {
"parser": {
"tailwindDirectives": true
}
}
Comment on lines +100 to +105
Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

AI summary :

The Next.js example uses Tailwind v4 directives:

 @tailwind base;
  @tailwind components;
  @tailwind utilities;
  @apply text-lg font-bold;

These are not standard CSS. Without the tailwindDirectives: true setting, Biome's CSS parser errors
on @tailwind and @apply as unknown at-rules. Then the file fails to parse → nothing can be linted or
formatted.

}
Comment on lines +77 to +106
Copy link
Copy Markdown
Collaborator Author

@qxprakash qxprakash May 18, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this override block is used for overriding lint rules for certain paths , I will check them to see what do we actually need , for example : the first rule https://biomejs.dev/linter/rules/use-literal-keys/
disables the enforcement of literal access of objects i.e. obj.someKey instead of compuated access i.e. obj["someKey"] because companion uses it a lot , so rules like these must have been added by AI to reduce the linter noise.

    {
      "includes": ["packages/@uppy/companion/**"],
      "linter": {
        "rules": {
          "complexity": {
            "useLiteralKeys": "off"
          }
        }

]
}
2 changes: 1 addition & 1 deletion examples/aws-companion/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down
7 changes: 4 additions & 3 deletions examples/aws-nodejs/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Uppy – AWS upload example</title>
Expand All @@ -24,7 +24,8 @@ <h1>AWS upload example</h1>
</footer>
<noscript>You need JavaScript to run this example.</noscript>
<script type="module">
import { Uppy, Dashboard, AwsS3 } from './uppy.min.mjs'
import { AwsS3, Dashboard, Uppy } from './uppy.min.mjs'

function onUploadComplete(result) {
console.log(
'Upload complete! We’ve uploaded these files:',
Expand All @@ -34,7 +35,7 @@ <h1>AWS upload example</h1>
function onUploadSuccess(file, data) {
console.log(
'Upload success! We’ve uploaded this file:',
file.meta['name'],
file.meta.name,
)
}
{
Expand Down
7 changes: 4 additions & 3 deletions examples/aws-nodejs/public/withCustomEndpoints.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Uppy – AWS upload example</title>
Expand All @@ -16,7 +16,8 @@ <h1>AWS upload example</h1>
</footer>
<noscript>You need JavaScript to run this example.</noscript>
<script type="module">
import { Uppy, Dashboard, AwsS3 } from './uppy.min.mjs'
import { AwsS3, Dashboard, Uppy } from './uppy.min.mjs'

/**
* This generator transforms a deep object into URL-encodable pairs
* to work with `URLSearchParams` on the client and `body-parser` on the server.
Expand Down Expand Up @@ -258,7 +259,7 @@ <h1>AWS upload example</h1>
uppy.on('upload-success', (file, data) => {
console.log(
'Upload success! We’ve uploaded this file:',
file.meta['name'],
file.meta.name,
)
})
}
Expand Down
2 changes: 1 addition & 1 deletion examples/aws-php/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down
6 changes: 3 additions & 3 deletions examples/cdn/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@
</head>
<body>
<noscript>You need JavaScript enabled for this example to work.</noscript>
<button id="uppyModalOpener">Open Modal</button>
<button type="button" id="uppyModalOpener">Open Modal</button>

<script type="module">
import {
Uppy,
Dashboard,
Webcam,
Tus,
Uppy,
Webcam,
} from 'https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs'

const uppy = new Uppy({ debug: true, autoProceed: false })
Expand Down
2 changes: 1 addition & 1 deletion examples/companion-custom-provider/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down
2 changes: 1 addition & 1 deletion examples/companion-digitalocean-spaces/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down
4 changes: 2 additions & 2 deletions examples/companion/client/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,14 @@
/>
</head>
<body>
<button id="uppyModalOpener">Open Modal</button>
<button type="button" id="uppyModalOpener">Open Modal</button>
<noscript>This web page requires JavaScript to work properly.</noscript>
<script type="module">
import {
Uppy,
Dashboard,
GoogleDrive,
Tus,
Uppy,
} from 'https://releases.transloadit.com/uppy/v4.18.0/uppy.min.mjs'

const uppy = new Uppy({ debug: true, autoProceed: false })
Expand Down
2 changes: 1 addition & 1 deletion examples/react/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** biome-ignore-all lint/nursery/useUniqueElementIds: it's fine */
/** biome-ignore-all lint/correctness/useUniqueElementIds: it's fine */
import Uppy, { type UppyFile } from '@uppy/core'
import UppyImageEditor from '@uppy/image-editor'
import {
Expand Down
8 changes: 4 additions & 4 deletions examples/sveltekit/src/components/CustomDropzone.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const { getButtonProps, getInputProps: getFileInputProps } = useFileInput()
>
<div class="flex items-center justify-center gap-4">
<input {...getFileInputProps()} class="hidden" />
<button
<button type="button"
{...getButtonProps()}
class="hover:bg-gray-100 transition-colors p-2 rounded-md flex flex-col items-center gap-2 text-sm"
>
Expand All @@ -30,7 +30,7 @@ const { getButtonProps, getInputProps: getFileInputProps } = useFileInput()
Device
</button>

<button
<button type="button"
onclick={() => openModal('webcam')}
class="hover:bg-gray-100 transition-colors p-2 rounded-md flex flex-col items-center gap-2 text-sm"
>
Expand All @@ -40,7 +40,7 @@ const { getButtonProps, getInputProps: getFileInputProps } = useFileInput()
Webcam
</button>

<button
<button type="button"
onclick={() => openModal('screen-capture')}
class="hover:bg-gray-100 transition-colors p-2 rounded-md flex flex-col items-center gap-2 text-sm"
>
Expand All @@ -50,7 +50,7 @@ const { getButtonProps, getInputProps: getFileInputProps } = useFileInput()
Screen Capture
</button>

<button
<button type="button"
onclick={() => openModal('dropbox')}
class="hover:bg-gray-100 transition-colors p-2 rounded-md flex flex-col items-center gap-2 text-sm"
>
Expand Down
23 changes: 12 additions & 11 deletions examples/sveltekit/src/components/ImageEditor.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const editor = useImageEditor({ file })
</div>

<div class="mb-4">
<!-- biome-ignore lint/a11y/useAltText: alt is provided via editor.getImageProps() spread -->
<img
class="w-full max-h-[400px] rounded-lg border-2"
{...editor.getImageProps()}
Expand All @@ -41,31 +42,31 @@ const editor = useImageEditor({ file })
</div>

<div class="flex gap-2 flex-wrap mb-4">
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getRotateButtonProps(-90)}
>
↶ -90°
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getRotateButtonProps(90)}
>
↷ +90°
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getFlipHorizontalButtonProps()}
>
⇆ Flip
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getZoomButtonProps(0.1)}
>
+ Zoom
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getZoomButtonProps(-0.1)}
>
Expand All @@ -74,25 +75,25 @@ const editor = useImageEditor({ file })
</div>

<div class="flex gap-2 flex-wrap mb-4">
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getCropSquareButtonProps()}
>
1:1
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getCropLandscapeButtonProps()}
>
16:9
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getCropPortraitButtonProps()}
>
9:16
</button>
<button
<button type="button"
class="bg-gray-200 px-3 py-1 rounded disabled:opacity-50"
{...editor.getResetButtonProps()}
>
Expand All @@ -101,13 +102,13 @@ const editor = useImageEditor({ file })
</div>

<div class="flex gap-4 justify-end">
<button
<button type="button"
class="bg-gray-500 text-white px-4 py-2 rounded-md"
{...editor.getCancelButtonProps({ onClick: close })}
>
Cancel
</button>
<button
<button type="button"
class="bg-green-500 text-white px-4 py-2 rounded-md disabled:opacity-50 disabled:bg-green-300"
{...editor.getSaveButtonProps({ onClick: close })}
>
Expand Down
Loading