Skip to content
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.

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

fix: inject color-mode script with nitro plugin (handles mixed spa/ssr) #164

Merged
merged 3 commits into from Sep 22, 2022

Conversation

danielroe
Copy link
Collaborator

@danielroe danielroe commented Sep 22, 2022

This PR, instead of injecting the script with a client-side plugin, adds it via a nitro plugin. This should improve stability and reduce the client-side JS payload.

More importantly, it also handles the case of rendering a SPA fallback in an otherwise SSR deployment, which was otherwise broken.

@danielroe danielroe added the enhancement New feature or request label Sep 22, 2022
@danielroe danielroe self-assigned this Sep 22, 2022
@danielroe danielroe marked this pull request as draft September 22, 2022 12:47
@danielroe danielroe changed the title fix: inject color-mode script with ssr: false fix: inject color-mode script with nitro plugin (handles mixed spa/ssr) Sep 22, 2022
@danielroe danielroe marked this pull request as ready for review September 22, 2022 12:55
@danielroe danielroe marked this pull request as draft September 22, 2022 12:59
@danielroe danielroe marked this pull request as ready for review September 22, 2022 13:05
@Atinux Atinux merged commit 620ca17 into master Sep 22, 2022
@Atinux Atinux deleted the fix/spa branch September 22, 2022 13:08
config.virtual = config.virtual || {}
config.virtual['#color-mode-options'] = `export const script = ${JSON.stringify(options.script, null, 2)}`
config.plugins = config.plugins || []
config.plugins.push(resolve(runtimeDir, 'nitro-plugin'))
Copy link
Contributor

Choose a reason for hiding this comment

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

Refactor tip: We can use defu to assign with defaults being applied.


export default <NitroAppPlugin> function (nitro) {
nitro.hooks.hook('render:html', (htmlContext) => {
htmlContext.head.push(`<script>${script}</script>`)
Copy link
Contributor

Choose a reason for hiding this comment

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

Small perf: string does needs to be generated once (could be inside function body too but out of hook

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants