feat: allow to modify provider options within props#2101
feat: allow to modify provider options within props#2101huang-julien wants to merge 3 commits intomainfrom
Conversation
commit: |
📝 WalkthroughWalkthroughAn optional Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@src/runtime/utils/props.ts`:
- Around line 41-45: The computed providerOptions merges props in the wrong
order so props.options can override explicit props.provider and props.preset;
change the merge order in the providerOptions computed so props.options is
spread first and then provider: props.provider and preset: props.preset are
added (i.e., ensure explicit keys in providerOptions take precedence over keys
from props.options), updating the computed that builds providerOptions
accordingly and add a comment if the override behavior is intentional.
- Around line 23-24: The type for options is too broad and the spread order is
reversed: change the type of props.options from
ConfiguredImageProviders[Provider] to the narrower ImageOptions (or create a
dedicated RuntimeImageOptions type containing only provider, preset, densities,
modifiers, sizes) so it matches what ImageOptions expects, and update the object
construction so you spread props.options first and then explicitly set provider
and preset (or keep explicit values last) to ensure explicit props cannot be
overridden by props.options; reference the symbols options,
ConfiguredImageProviders, ImageOptions, props.options, provider, preset,
densities, modifiers, sizes in your change.
| options?: ConfiguredImageProviders[Provider] | ||
|
|
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's read the file to understand the full context
cat -n src/runtime/utils/props.tsRepository: nuxt/image
Length of output: 2435
🏁 Script executed:
# Search for ConfiguredImageProviders definition and augmentation patterns
rg -n 'ConfiguredImageProviders' --type=ts -B 2 -A 5 | head -100Repository: nuxt/image
Length of output: 5532
🏁 Script executed:
# Search for how providers augment ConfiguredImageProviders
rg -n 'declare module.*ConfiguredImageProviders' --type=ts -A 5 | head -50Repository: nuxt/image
Length of output: 36
🏁 Script executed:
# Look for provider implementations to understand ConfiguredImageProviders structure
find src -name "*.ts" -type f | xargs grep -l "ImageProviders\|ConfiguredImageProviders" | head -10Repository: nuxt/image
Length of output: 185
🏁 Script executed:
# Check index.d.ts
cat -n src/index.d.ts
echo "---"
# Look for provider directories with examples
ls -la src/providers/ 2>/dev/null | head -20Repository: nuxt/image
Length of output: 735
🏁 Script executed:
# Check the ipx provider to understand the options structure
cat -n src/runtime/providers/ipx.ts | head -80Repository: nuxt/image
Length of output: 3066
🏁 Script executed:
# Search for useImageProps usage
rg -n 'useImageProps' --type=ts -B 2 -A 5 | head -80Repository: nuxt/image
Length of output: 540
🏁 Script executed:
# Search for imports and usages of useImageProps
rg -n 'import.*useImageProps' --type=ts -B 2 -A 5Repository: nuxt/image
Length of output: 36
🏁 Script executed:
# Check what's exported from props.ts
rg -n 'export' src/runtime/utils/props.ts
echo "---"
# Look for test files that might show usage
find . -name "*.test.*" -o -name "*.spec.*" | grep -i props | head -10Repository: nuxt/image
Length of output: 262
🏁 Script executed:
# Look for any component or test files that use BaseImageProps
find . -type f \( -name "*.vue" -o -name "*.test.ts" -o -name "*.spec.ts" \) -exec grep -l "BaseImageProps\|useImageProps" {} \;Repository: nuxt/image
Length of output: 131
🏁 Script executed:
# Check how NuxtImg.vue uses BaseImageProps and options
cat -n src/runtime/components/NuxtImg.vue | head -150Repository: nuxt/image
Length of output: 5317
🏁 Script executed:
# Look at the getSizes method signature
rg -n 'getSizes' src/runtime/image.ts -A 10 | head -60Repository: nuxt/image
Length of output: 2400
🏁 Script executed:
# Check the $img function signature - what does it expect as the third parameter?
rg -n 'function.*\$img|export.*\$img' src/runtime/image.ts -A 5 | head -40Repository: nuxt/image
Length of output: 36
🏁 Script executed:
# Look at the createImage function and its return value
cat -n src/runtime/image.ts | sed -n '8,110p'Repository: nuxt/image
Length of output: 4065
🏁 Script executed:
# Look at resolveImage to see which options are actually used
cat -n src/runtime/image.ts | sed -n '52,107p'Repository: nuxt/image
Length of output: 2225
🏁 Script executed:
# Let's check the ImageOptions interface more carefully to see what properties it expects
cat -n src/types/image.ts | sed -n '20,35p'Repository: nuxt/image
Length of output: 1029
Verify the type and fix the spread order for options.
The type ConfiguredImageProviders[Provider] represents the entire provider configuration, but ImageOptions expects only specific properties (provider, preset, densities, modifiers, sizes). Using the full provider config as the type is too broad.
Additionally, at line 44, spreading props.options after explicitly setting provider and preset is backwards—if props.options contains these keys, they override the explicit props. The spread should come first, or better, the options type should be narrowed to only the expected runtime options.
🤖 Prompt for AI Agents
In `@src/runtime/utils/props.ts` around lines 23 - 24, The type for options is too
broad and the spread order is reversed: change the type of props.options from
ConfiguredImageProviders[Provider] to the narrower ImageOptions (or create a
dedicated RuntimeImageOptions type containing only provider, preset, densities,
modifiers, sizes) so it matches what ImageOptions expects, and update the object
construction so you spread props.options first and then explicitly set provider
and preset (or keep explicit values last) to ensure explicit props cannot be
overridden by props.options; reference the symbols options,
ConfiguredImageProviders, ImageOptions, props.options, provider, preset,
densities, modifiers, sizes in your change.
Deploying nuxt-image with
|
| Latest commit: |
54df2c4
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://82a64895.nuxt-image.pages.dev |
| Branch Preview URL: | https://feat-option-attribute.nuxt-image.pages.dev |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2101 +/- ##
=====================================
Coverage 6.99% 6.99%
=====================================
Files 78 78
Lines 3632 3631 -1
Branches 140 140
=====================================
Hits 254 254
+ Misses 3329 3328 -1
Partials 49 49 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
🔗 Linked issue
❓ Type of change
related to #2100
📚 Description
When working on #2100 . I noticed that
accountHashshouldn't be in modifiers, and should be something easily modifiable at runtime (users can have multiple providers)this PR allows to send new options thorugh
nuxtImgandnuxtPictureprops withoptionsattribute. It also allows to have{ baseUrl }configurable when a component renders.Small example of what could be possible