feat(builderio): add Builder.io Image API provider#2050
Conversation
commit: |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2050 +/- ##
========================================
- Coverage 6.94% 6.84% -0.11%
========================================
Files 79 80 +1
Lines 3671 3726 +55
Branches 141 142 +1
========================================
Hits 255 255
- Misses 3367 3421 +54
- Partials 49 50 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
danielroe
changed the title
danielroe
changed the title
📝 WalkthroughWalkthroughThis pull request introduces support for the Builder.io image provider to the Nuxt Image module. The changes include a new provider implementation that maps image modifiers (width, height, format, quality, fit, position) to Builder.io's URL query parameters, comprehensive documentation describing the provider and its capabilities, configuration setup in the playground, provider registration in the built-in providers list, test coverage with snapshots, and test data for validation. The implementation follows existing provider patterns and integrates without modifying existing functionality. Estimated code review effort🎯 2 (Simple) | ⏱️ ~15 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: 3
🤖 Fix all issues with AI agents
In `@docs/content/3.providers/builderio.md`:
- Around line 37-39: The examples use a string literal for the NuxtImg
`modifiers` prop (e.g., NuxtImg components shown with `modifiers="{ format:
'webp' }"`); change these to use Vue binding so the prop receives an object by
replacing `modifiers="..."` with `:modifiers="{ format: 'webp' }"` (shorthand
for v-bind). Update each NuxtImg example in the file that uses `modifiers`
(including the other occurrences flagged in the review) so they use `:modifiers`
and keep the same object literal content.
- Around line 65-83: Update the docs to reflect the actual keys used by the
provider: change the listed position values from space-separated forms to the
camelCase keys used in builderio.ts (e.g., rightTop, rightBottom, leftTop,
leftBottom, etc.) and update the example modifier to use the matching key
(replace 'bottom left' with 'leftBottom'); reference the provider's valueMap and
the position modifier in the NuxtImg example so users pass camelCase values that
align with valueMap.
In `@src/provider.ts`:
- Around line 18-19: The provider list in src/provider.ts is out of alphabetical
order: the string 'builderio' should come before 'bunny'; update the providers
array (the entries containing 'bunny' and 'builderio') so that 'builderio'
appears before 'bunny' to restore alphabetical ordering as requested.
🧹 Nitpick comments (1)
src/runtime/providers/builderio.ts (1)
8-47: IdentitykeyMapentries are redundant.All keys in
keyMapmap to themselves (e.g.,quality: 'quality'). Based on howcreateOperationsGeneratortypically works, omittingkeyMap(or only listing keys that differ) would reduce boilerplate. That said, this is consistent with some other providers in the repo and serves as self-documentation, so feel free to keep it if that's the preferred convention.
| ```vue | ||
| <NuxtImg src="..." width="300" height="300" modifiers="{ format: 'webp' }" /> | ||
| ``` |
There was a problem hiding this comment.
Vue examples use string binding instead of v-bind for modifiers.
modifiers="{ format: 'webp' }" passes a string literal, not a JavaScript object. It should use :modifiers (shorthand for v-bind:modifiers). This same issue appears on lines 38, 46, 62, and 82.
Proposed fix (example for line 38)
-<NuxtImg src="..." width="300" height="300" modifiers="{ format: 'webp' }" />
+<NuxtImg src="..." width="300" height="300" :modifiers="{ format: 'webp' }" />Apply similarly to the other modifiers examples on lines 46, 62, and 82.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ```vue | |
| <NuxtImg src="..." width="300" height="300" modifiers="{ format: 'webp' }" /> | |
| ``` |
🤖 Prompt for AI Agents
In `@docs/content/3.providers/builderio.md` around lines 37 - 39, The examples use
a string literal for the NuxtImg `modifiers` prop (e.g., NuxtImg components
shown with `modifiers="{ format: 'webp' }"`); change these to use Vue binding so
the prop receives an object by replacing `modifiers="..."` with `:modifiers="{
format: 'webp' }"` (shorthand for v-bind). Update each NuxtImg example in the
file that uses `modifiers` (including the other occurrences flagged in the
review) so they use `:modifiers` and keep the same object literal content.
| ### Position | ||
|
|
||
| The `position` modifier determines the anchor point for cropping when `fit` is used. Valid values are: | ||
|
|
||
| - `top` | ||
| - `right top` | ||
| - `right` | ||
| - `right bottom` | ||
| - `bottom` | ||
| - `left bottom` | ||
| - `left` | ||
| - `left top` | ||
| - `center` (default) | ||
|
|
||
| **Note:** The `position` parameter only has an effect if `format` is set to `webp`. | ||
|
|
||
| ```vue | ||
| <NuxtImg src="..." width="300" height="300" modifiers="{ position: 'bottom left', format: 'webp' }" /> | ||
| ``` |
There was a problem hiding this comment.
Position values in docs don't match the provider's valueMap keys.
The documentation lists space-separated values like right top, left bottom, etc., but the provider's valueMap (in builderio.ts) uses camelCase keys: rightTop, leftBottom, etc. Users need to pass the camelCase form as the modifier value. Additionally, line 82 uses 'bottom left' which doesn't correspond to any key—it should be 'leftBottom'.
Proposed fix for the position list and example
- `top`
-- `right top`
+- `rightTop`
- `right`
-- `right bottom`
+- `rightBottom`
- `bottom`
-- `left bottom`
+- `leftBottom`
- `left`
-- `left top`
+- `leftTop`
- `center` (default)-<NuxtImg src="..." width="300" height="300" modifiers="{ position: 'bottom left', format: 'webp' }" />
+<NuxtImg src="..." width="300" height="300" :modifiers="{ position: 'leftBottom', format: 'webp' }" />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| ### Position | |
| The `position` modifier determines the anchor point for cropping when `fit` is used. Valid values are: | |
| - `top` | |
| - `right top` | |
| - `right` | |
| - `right bottom` | |
| - `bottom` | |
| - `left bottom` | |
| - `left` | |
| - `left top` | |
| - `center` (default) | |
| **Note:** The `position` parameter only has an effect if `format` is set to `webp`. | |
| ```vue | |
| <NuxtImg src="..." width="300" height="300" modifiers="{ position: 'bottom left', format: 'webp' }" /> | |
| ``` | |
| ### Position | |
| The `position` modifier determines the anchor point for cropping when `fit` is used. Valid values are: | |
| - `top` | |
| - `rightTop` | |
| - `right` | |
| - `rightBottom` | |
| - `bottom` | |
| - `leftBottom` | |
| - `left` | |
| - `leftTop` | |
| - `center` (default) | |
| **Note:** The `position` parameter only has an effect if `format` is set to `webp`. | |
🤖 Prompt for AI Agents
In `@docs/content/3.providers/builderio.md` around lines 65 - 83, Update the docs
to reflect the actual keys used by the provider: change the listed position
values from space-separated forms to the camelCase keys used in builderio.ts
(e.g., rightTop, rightBottom, leftTop, leftBottom, etc.) and update the example
modifier to use the matching key (replace 'bottom left' with 'leftBottom');
reference the provider's valueMap and the position modifier in the NuxtImg
example so users pass camelCase values that align with valueMap.
| 'bunny', | ||
| 'builderio', |
There was a problem hiding this comment.
builderio should be placed before bunny to maintain alphabetical order.
The comment on line 14 requests alphabetical ordering. Since "builderio" (b-u-i) sorts before "bunny" (b-u-n), it should be on line 18.
Proposed fix
'awsAmplify',
- 'bunny',
'builderio',
+ 'bunny',
'caisy',📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'bunny', | |
| 'builderio', | |
| 'awsAmplify', | |
| 'builderio', | |
| 'bunny', | |
| 'caisy', |
🤖 Prompt for AI Agents
In `@src/provider.ts` around lines 18 - 19, The provider list in src/provider.ts
is out of alphabetical order: the string 'builderio' should come before 'bunny';
update the providers array (the entries containing 'bunny' and 'builderio') so
that 'builderio' appears before 'bunny' to restore alphabetical ordering as
requested.
3 participants
🔗 Linked issue
❓ Type of change
📚 Description
This pull request adds the Builder.io image provider.
Docs: https://www.builder.io/c/docs/image-api
❤️