fix: do not use ideal image plugin in dev env #5540
Conversation
|
✔️ [V2] 🔨 Explore the source changes: 63fad93 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/614b8a1a2eb5db000783f426 😎 Browse the preview: https://deploy-preview-5540--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-5540--docusaurus-2.netlify.app/ |
|
Size Change: -4 B (0%) Total Size: 825 kB ℹ️ View Unchanged
|
|
I'm in favour of this approach. It's a good compromise thats much better than blurry images in dev. |
|
Note: if the |
There was a problem hiding this comment.
Disabling the ideal image in dev could do the trick. Not 100% sure it's a good idea that will not have any weird side effects, but we can give it a try.
I suggest we implement some utils to compile themes to lib + lib-next first (as suggested by @Josh-Cena here #5564) so that this PR is easier to implement properly with goof swizzling support
| const {alt, className, img} = props; | ||
|
|
||
| // In dev env just use regular img with original file | ||
| if (img.default) { |
There was a problem hiding this comment.
I'm not sure it's a very reliable test.
In the future (Webpack 5 asset pipeline, new URL() etc...) it may be possible that both won't have a default (but we can probably improve this test later anyway)
There was a problem hiding this comment.
Speaking of which, what is the progress in #4708?
There was a problem hiding this comment.
Standby for now, not a top priority atm but I'd like to make this work someday 😅
| return { | ||
| name: 'docusaurus-plugin-ideal-image', | ||
|
|
||
| getThemePath() { | ||
| return path.resolve(__dirname, './theme'); | ||
| return path.resolve(__dirname, '../lib/theme'); |
There was a problem hiding this comment.
as @Josh-Cena said we should have a lib-next output folder otherwise users swizzling this comp will get a bad output, + we should add a getTypeScriptThemePath() to swizzle this comp with --typescript option
There was a problem hiding this comment.
I actually did not assume that this component would be available for swizzling. That's why I rolled back the changes related with the migration to TS. Better to do it in separate PR, right now we don't have proper infrastructure set up for it.
lex111
force-pushed
the
lex111/iss4588
branch
from
9f2bd33
to
63fad93
Compare
|
Thanks, LGTM 👍 hope it won't be annoying for anyone, let's see |
Motivation
Should fix #4588
Currently, images that are rendered through
IdealImagecomponent will become blurry (or more precisely, placeholders is displayed instead them).The reason for this is the component expects to get resized images via
responsive-loader, but in dev env we can't have build artifacts, so there are no generated images, and their placeholders are always displayed instead.Therefore during development I propose just use regular
imgelement which will render original image (received as module).Have you read the Contributing Guidelines on pull requests?
Preview
Test Plan
Start dev server locally and open the Showcase page.
Related PRs
(If this PR adds or changes functionality, please take some time to update the docs at https://github.com/facebook/docusaurus, and link to your PR here.)