Skip to content

feat: added image dir support for nuxt layer #1880

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

Jump to bottom
Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

feat: added image dir support for nuxt layer #1880

wants to merge 3 commits into from

Conversation

wuiyang
Copy link

@wuiyang wuiyang commented Jun 25, 2025 •
edited
Loading

🔗 Linked issue

resolves #1879

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

For Nuxt project that uses IPX provider, it would not search nuxt layer's custom dir.

This changes allows Nuxt project with local layers to look for image in layer's dir.

Note: with this changes, similar to root nuxt config with custom dir, would not work for runtime IPX, and only works for ipxStatic provider.

Note 2: As nuxt.options compiles all layer's config, if root is using default config (not providing any), it will have layer's dir value. The image dir config will retrieve from layer's config instead to prevent this issue.

-    const path = isRootLayer ? moduleOptions.dir : layer.config.dir?.public || 'public'
+    const path = layer?.config.image?.dir || layer.config.dir?.public || 'public'

@wuiyang wuiyang requested a review from danielroe as a code owner June 25, 2025 16:55
@vercel Vercel
Copy link

vercel bot commented Jun 25, 2025

@wuiyang is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

@pkg-pr-new pkg.pr.new
Copy link

pkg-pr-new bot commented Jun 25, 2025 •
edited
Loading

Open in StackBlitz

npm i https://pkg.pr.new/@nuxt/image@1880

commit: 43e250b

danielroe
danielroe reviewed Jul 1, 2025
View reviewed changes
Copy link
Member

@danielroe danielroe left a comment

Choose a reason for hiding this comment

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

this is great - thank you! ❤️

would you add unit tests in ssr.test.ts and no-ssr.test.ts, e.g.:

image/test/e2e/ssr.test.ts

Lines 58 to 72 in aaeb7d5

it('should emit load and error events', async () => {
const page = await createPage()
const logs: string[] = []
page.on('console', (msg) => {
logs.push(msg.text())
})
await page.goto(url('/events'), { waitUntil: 'networkidle' })
expect(logs.filter(log => log === 'Image was loaded').length).toBe(4)
expect(logs.filter(log => log === 'Error loading image').length).toBe(2)
await page.close()
})

@wuiyang
Copy link
Author

wuiyang commented Jul 5, 2025

this is great - thank you! ❤️

would you add unit tests in ssr.test.ts and no-ssr.test.ts, e.g.:

image/test/e2e/ssr.test.ts

Lines 58 to 72 in aaeb7d5

it('should emit load and error events', async () => {
const page = await createPage()
const logs: string[] = []
page.on('console', (msg) => {
logs.push(msg.text())
})
await page.goto(url('/events'), { waitUntil: 'networkidle' })
expect(logs.filter(log => log === 'Image was loaded').length).toBe(4)
expect(logs.filter(log => log === 'Error loading image').length).toBe(2)
await page.close()
})

Thank you for the feedback, I couldn't get e2e test to run on my end, not sure if I setup something wrong, I'm using github codespaces to work on the PR

@danielroe
Copy link
Member

fixed the test suite! you should be able to run e2e tests now....

@codecov-commenter
Copy link

codecov-commenter commented Jul 10, 2025 •
edited
Loading

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 7.08%. Comparing base (d65a0c0) to head (43e250b).

Files with missing lines Patch % Lines
src/ipx.ts 0.00% 1 Missing ⚠️
Additional details and impacted files 
@@          Coverage Diff          @@
##            main   #1880   +/-   ##
=====================================
  Coverage   7.08%   7.08%           
=====================================
  Files         76      76           
  Lines       3527    3527           
  Branches     137     137           
=====================================
  Hits         250     250           
  Misses      3230    3230           
  Partials      47      47

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@wuiyang
Copy link
Author

wuiyang commented Aug 4, 2025

apologize for slow update on PR, was busy with work for the last month and now got the time to add test into it

@vercel Vercel
Copy link

vercel bot commented Aug 4, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment
Name Status Preview Updated (UTC)
image-docus ⬜️ Ignored (Inspect) Aug 4, 2025 10:46am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielroe danielroe danielroe left review comments

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support custom nuxt layer image dir with IPX
3 participants
@wuiyang @danielroe @codecov-commenter