Thanks to visit codestin.com
Credit goes to github.com

Skip to content

feat(nuxt): add dedicated #teleports element for ssr teleports #25043

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
Merged
merged 22 commits into from
Mar 11, 2024
Merged

feat(nuxt): add dedicated #teleports element for ssr teleports #25043

merged 22 commits into from
Mar 11, 2024

Conversation

TheAlexLichter
Copy link
Member

@TheAlexLichter TheAlexLichter commented Jan 4, 2024 •
edited
Loading

🔗 Linked issue

Resolves #24207
Resolves #25041

❓ Type of change

  • 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ 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

Right now we prepend SSR teleports to the body. This doesn't align with Vue's client-side appending behavior.

This PR introduces a dedicated app-level teleport element as possible target for SSR (and also client-side) teleports to give an alternative and also align with Evan's recommendation

Tasks

  • Add the extra element
  • Render matching teleports there
  • Let the element's id (and tag) be configurable
  • Decide if it should be enabled or disabled by default (currently enabled)
  • Update docs

📝 Checklist

  • I have linked an issue or discussion.
  • I have added tests (if possible).
  • I have updated the documentation accordingly.

@bolt-new-by-stackblitz Bolt.new (by StackBlitz)
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions github-actions bot added the 3.x label Jan 4, 2024
@TheAlexLichter TheAlexLichter changed the title feat: app teleports element feat: app teleport element Jan 4, 2024
danielroe
danielroe reviewed Jan 5, 2024
View reviewed changes
danielroe
danielroe reviewed Jan 5, 2024
View reviewed changes
danielroe
danielroe reviewed Jan 5, 2024
View reviewed changes
@TheAlexLichter TheAlexLichter self-assigned this Jan 29, 2024
@danielroe
Copy link
Member

Marking as draft just for triage. Just let me know when it's good to go 🙏

@danielroe danielroe marked this pull request as draft February 4, 2024 20:34
@nuxt-studio Nuxt Studio
Copy link
Contributor

nuxt-studio bot commented Feb 18, 2024

✅ Live Preview ready!

Name Edit Preview Latest Commit
Nuxt Docs Edit on Studio ↗︎ View Live Preview ed93620

@TheAlexLichter TheAlexLichter marked this pull request as ready for review February 18, 2024 14:55
@jeferson-sb jeferson-sb mentioned this pull request Feb 18, 2024
Closed
3 tasks
@TheAlexLichter
Copy link
Member Author

Good to go 👍
LMK if I should start writing the docs 😋

danielroe
danielroe reviewed Feb 25, 2024
View reviewed changes
danielroe
danielroe reviewed Feb 25, 2024
View reviewed changes
danielroe
danielroe reviewed Feb 25, 2024
View reviewed changes
packages/nuxt/src/core/runtime/nitro/renderer.ts Outdated
@@ -225,8 +226,16 @@ async function getIslandContext (event: H3Event): Promise<NuxtIslandContext> {
return ctx
}

const HAS_APP_TELEPORTS = appTeleportTag && appTeleportId
Copy link
Member

@danielroe danielroe Feb 25, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

It would be worth checking whether this (and anything dependent on it) correctly tree-shakes when appTeleportId is unset, if you haven't already.

danielroe
danielroe reviewed Feb 25, 2024
View reviewed changes
danielroe
danielroe reviewed Feb 25, 2024
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.

Looking good to me! I've left a few tiny comments for your consideration.

I think we can go ahead with docs ❤️

danielroe
danielroe reviewed Mar 8, 2024
View reviewed changes
danielroe
danielroe approved these changes Mar 11, 2024
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.

Thank you ❤️

Made a few changes to reduce API change. Let me know if you think it was better before 🙏

@danielroe danielroe changed the title feat: app teleport element feat(nuxt): add dedicated #teleports element for ssr teleports Mar 11, 2024
@TheAlexLichter
Copy link
Member Author

@danielroe Great improvements 👍

@danielroe danielroe merged commit 5369987 into main Mar 11, 2024
@danielroe danielroe deleted the fix/teleports branch March 11, 2024 14:33
@github-actions github-actions bot mentioned this pull request Mar 11, 2024
Merged
@BalaKadiyala BalaKadiyala mentioned this pull request Jun 22, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@danielroe danielroe danielroe approved these changes

Assignees

@TheAlexLichter TheAlexLichter

Labels
3.x enhancement
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Add support for SSR teleports to a separate #nuxt-teleports element Teleport behaves differently for SSR and client-side
2 participants
@TheAlexLichter @danielroe