Move Vite rendering to styles twig directive
#1447
Conversation
WalkthroughThese changes relocate Vite asset loading from the ScriptsNode to the StylesNode. The assetsFunction('vite') call is removed from script asset output and added to style asset output, shifting where Vite assets are emitted during template compilation. Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~5 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 |
|
@damsfx could you also make the changes to how vite is rendered in the backend? |
|
@LukeTowers I can't find any use of Vite in the backend module. |
2 participants
If the recommendations are followed, the page architecture should be:
This avoids FOUC (Flash of Unstyled Content), the browser renders the content progressively, and the experience is better, scripts doesn't block content rendering and all nodes are availables for manipulation.
If a component uses $this->addVite(...) to include the required resources, those resources are rendered in the site's Twig tag {% scripts %}.
In this case, this can cause FOUC issues because the styles are rendered after the entire DOM.
Proposed fix:
The idea is to render Vite's
<style />and<script />elements from the{% styles %}twig directive:type=“module”attribute is added automatically and acts like thedeferattribute.Summary by CodeRabbit
Release Notes
Refactor