feat(nuxt-img): allow setting placeholder and placeholderClass via presets#2146
Open
DamianGlowala wants to merge 3 commits intomainfrom
Open
feat(nuxt-img): allow setting placeholder and placeholderClass via presets#2146DamianGlowala wants to merge 3 commits intomainfrom
placeholder and placeholderClass via presets#2146DamianGlowala wants to merge 3 commits intomainfrom
Conversation
commit: |
📝 WalkthroughWalkthroughThe patch refactors NuxtImg to derive and use Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 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.
🧹 Nitpick comments (1)
src/runtime/components/NuxtImg.vue (1)
60-66: Consider handling explicitfalseto allow overriding preset placeholders.The
||operator means that if a user explicitly passesplaceholder={false}to override a preset that has a placeholder defined, it will still fall through to the preset's value. While this may be acceptable for most use cases, it prevents explicitly disabling placeholder behavior when using a preset.Optional: Allow explicit override with `undefined` check
const _placeholder = computed( - () => props.placeholder || (props.preset && $img.options.presets[props.preset]?.placeholder), + () => props.placeholder !== undefined + ? props.placeholder + : (props.preset && $img.options.presets[props.preset]?.placeholder), ) const _placeholderClass = computed( - () => props.placeholderClass || (props.preset && $img.options.presets[props.preset]?.placeholderClass), + () => props.placeholderClass !== undefined + ? props.placeholderClass + : (props.preset && $img.options.presets[props.preset]?.placeholderClass), )🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/NuxtImg.vue` around lines 60 - 66, The computed values _placeholder and _placeholderClass currently use the || operator which treats an explicit props.placeholder = false as falsy and falls back to preset values; update the logic in computed _placeholder and _placeholderClass to respect an explicit false by checking for undefined (or using the nullish coalescing pattern) — i.e., return props.placeholder if it is defined (including false), otherwise fall back to preset lookup via props.preset and $img.options.presets[props.preset]?.placeholder (and ?.placeholderClass) so users can disable placeholders by passing false.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@src/runtime/components/NuxtImg.vue`:
- Around line 60-66: The computed values _placeholder and _placeholderClass
currently use the || operator which treats an explicit props.placeholder = false
as falsy and falls back to preset values; update the logic in computed
_placeholder and _placeholderClass to respect an explicit false by checking for
undefined (or using the nullish coalescing pattern) — i.e., return
props.placeholder if it is defined (including false), otherwise fall back to
preset lookup via props.preset and
$img.options.presets[props.preset]?.placeholder (and ?.placeholderClass) so
users can disable placeholders by passing false.
Deploying nuxt-image with
|
| Latest commit: |
c804271
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://1495c642.nuxt-image.pages.dev |
| Branch Preview URL: | https://feat-placeholder-preset.nuxt-image.pages.dev |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2146 +/- ##
==========================================
+ Coverage 32.52% 34.04% +1.51%
==========================================
Files 7 7
Lines 372 376 +4
Branches 131 132 +1
==========================================
+ Hits 121 128 +7
+ Misses 194 191 -3
Partials 57 57 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
There was a problem hiding this comment.
🧹 Nitpick comments (1)
test/nuxt/image.test.ts (1)
509-535: Extend this test to verify post-load behavior for preset-inherited placeholder state.This currently validates only initial inheritance. Please also assert that
srcswitches to the final image andplaceholderClassis removed after load in the preset path.Proposed test update
- it('preset placeholder and placeholderClass are inherited', () => { + it('preset placeholder and placeholderClass are inherited', async () => { setImageContext({ presets: { withPlaceholder: { placeholder: true, placeholderClass: 'placeholder-class', }, }, }) - const wrapper = mount(NuxtImg, { - propsData: { - src, - width: 200, - height: 200, - preset: 'withPlaceholder', - }, - }) - - const imgElement = wrapper.find('img').element - const domSrc = imgElement.getAttribute('src') + let wrapper: VueWrapper<any> + const { resolve: resolveImage } = getImageLoad(() => { + wrapper = mount(NuxtImg, { + propsData: { + src, + width: 200, + height: 200, + preset: 'withPlaceholder', + }, + }) + }) + + let imgElement = wrapper.find('img').element + let domSrc = imgElement.getAttribute('src') expect(domSrc).toMatchInlineSnapshot( '"/_ipx/q_50&blur_3&s_10x10/image.png"', ) expect(imgElement.classList).toContain('placeholder-class') + + resolveImage() + await nextTick() + + imgElement = wrapper.find('img').element + domSrc = imgElement.getAttribute('src') + expect(domSrc).toMatchInlineSnapshot('"/_ipx/s_200x200/image.png"') + expect(imgElement.classList).not.toContain('placeholder-class') })🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/nuxt/image.test.ts` around lines 509 - 535, Extend the "preset placeholder and placeholderClass are inherited" test to simulate the image load and assert post-load state: after mounting (using wrapper and the existing src/preset setup), trigger a load event on the image (e.g., wrapper.find('img').trigger('load') or dispatch a new Event('load')), await the component update (wrapper.vm.$nextTick() or nextTick), then re-read imgElement.getAttribute('src') and assert it equals the original src variable (final image) and assert imgElement.classList does not contain 'placeholder-class'; reference the existing wrapper, NuxtImg mount, src variable, and the 'withPlaceholder' preset in your changes.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@test/nuxt/image.test.ts`:
- Around line 509-535: Extend the "preset placeholder and placeholderClass are
inherited" test to simulate the image load and assert post-load state: after
mounting (using wrapper and the existing src/preset setup), trigger a load event
on the image (e.g., wrapper.find('img').trigger('load') or dispatch a new
Event('load')), await the component update (wrapper.vm.$nextTick() or nextTick),
then re-read imgElement.getAttribute('src') and assert it equals the original
src variable (final image) and assert imgElement.classList does not contain
'placeholder-class'; reference the existing wrapper, NuxtImg mount, src
variable, and the 'withPlaceholder' preset in your changes.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
resolves #1256
📚 Description
This allows setting
placeholderandplaceholderClassprops via presets.