mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-24 02:38:58 +00:00
fa23832f6a
## Summary
- Fix Vue components to work with kebab-case props (`:edit-file` instead
of `:editFile`)
- Update `migrate.mjs` to parse prop names from TypeScript source files
and generate explicit `props` arrays
## Problem
The generated Vue components didn't work correctly with Vue's standard
kebab-case prop convention:
```vue
<!-- This didn't work -->
<FilesList :edit-file="handleEdit" />
<!-- Only this worked (non-standard) -->
<FilesList :editFile="handleEdit" />
```
## Root Cause
The original Vue template used `attrs` to pass props to Preact:
```ts
setup(props, { attrs }) {
preactRender(preactH(PreactComponent, {
...(attrs as Props), // attrs preserves kebab-case!
ctx,
}), container)
}
```
When using `:edit-file` in a Vue template, Vue passes
`attrs['edit-file']` (kebab-case preserved), but Preact expects
`editFile` (camelCase).
## Solution
Generate Vue components with explicit `props` declarations:
```ts
defineComponent({
props: ['editFile', 'columns', 'imageThumbnail'],
setup(props) {
preactRender(preactH(PreactComponent, {
...props, // Vue already converted kebab → camelCase
ctx,
}), container)
}
})
```
When Vue components declare their props, Vue automatically converts
kebab-case template usage to camelCase in the `props` object. This is
standard Vue behavior.
## Why Simpler Alternatives Don't Work
### "Just use `props` instead of `attrs`"
Without a `props` declaration, Vue doesn't know which attributes are
props. The `props` object will be empty and everything goes to `attrs`:
```ts
// Without props declaration
defineComponent({
setup(props, { attrs }) {
// props = {} (empty!)
// attrs = { 'edit-file': fn } (kebab-case preserved)
}
})
```
### "Accept all props dynamically"
Vue doesn't have a "accept all props and convert casing" option. You
must explicitly declare which props you expect for Vue to handle the
conversion.
### "Just document to use camelCase"
This works but violates Vue conventions. Every Vue developer expects
`:edit-file` to work.
---------
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Prakash <qxprakash@gmail.com>
|
||
|---|---|---|
| .. | ||
| angular | ||
| audio | ||
| aws-s3 | ||
| box | ||
| companion | ||
| companion-client | ||
| components | ||
| compressor | ||
| core | ||
| dashboard | ||
| drag-drop | ||
| drop-target | ||
| dropbox | ||
| form | ||
| golden-retriever | ||
| google-drive | ||
| google-drive-picker | ||
| google-photos-picker | ||
| image-editor | ||
| image-generator | ||
| locales | ||
| onedrive | ||
| provider-views | ||
| react | ||
| remote-sources | ||
| screen-capture | ||
| status-bar | ||
| store-default | ||
| svelte | ||
| thumbnail-generator | ||
| transloadit | ||
| tus | ||
| unsplash | ||
| url | ||
| utils | ||
| vue | ||
| webcam | ||
| webdav | ||
| xhr-upload | ||
| zoom | ||