8000 feat(nuxt): native async-context in vue's `withAsyncContext` by pi0 · Pull Request #23526 · nuxt/nuxt · GitHub
[go: up one dir, main page]
Skip to content

feat(nuxt): native async-context in vue's withAsyncContext #23526

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 8 commits into from
Oct 5, 2023
Merged

feat(nuxt): native async-context in vue's withAsyncContext #23526

merged 8 commits into from
Oct 5, 2023

Conversation

pi0
Copy link
Member
@pi0 pi0 commented Oct 4, 2023 •
edited
Loading

🔗 Linked issue

Followup on #20918

reproduction by @atinux confirming issue (should run locally)

❓ 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

This PR, tries an alternative method of integrating Native Async Context with Vue by directly patching withAsyncContext import that is injected by Vue for it's non native async context support.

This method has the benefit of being much simpler as we don't need AST based transforms also probably more future compliance because reflects the ideal change we expect from Vue upstream support to improve internal withAsyncContext.

Note: I could confirm this solution externally on reproduction but seems local fixture is not working, investigating more. -- Update: It strangely also works fine in playground but not fixture still! (working both externally and in fixture 🚀 )

Local module to try:

import { defineNuxtModule, addBuildPlugin } from 'nuxt/kit'
import { createUnplugin } from 'unplugin'

export default defineNuxtModule({
  setup(_, nuxt) {
    addBuildPlugin(createUnplugin(() => {
      const virtualFileId = '\0vue-async-context'
      return {
        name: 'nuxt:vue-async-context',
        transformInclude (id) {
          return id.endsWith('.vue')
        },
        resolveId (id) {
          if (id === virtualFileId) {
            return id
          }
        },
        load(id) {
          if (id !== virtualFileId) {
            return
          }
          return `
          import { withAsyncContext as withVueAsyncContext, getCurrentInstance } from 'vue'
          export function withAsyncContext(fn) {
            return withVueAsyncContext(() => {
              const nuxtApp = getCurrentInstance()?.appContext.app.$nuxt
              return nuxtApp ? nuxtApp.runWithContext(fn) : fn()
            })
          }
          `.trim()
        },
        transform (code) {
          if (!code.includes('_withAsyncContext')) {
            return
          }
          code = `import { withAsyncContext as _withAsyncContext } from "${virtualFileId}"
                  ${code.replace('withAsyncContext as _withAsyncContext', '')}`
          return {
            code,
            map: null
          }
        }
      }
    }))
  }
})

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@bolt-new-by-stackblitz
Copy link

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

@pi0 pi0 requested review from atinux and danielroe October 4, 2023 11:49
@pi0
Copy link
Member Author
pi0 commented Oct 4, 2023 •
edited
Loading

/cc @antfu Seems Webpack VFS with unplugin is not working well. I couldn't reproduce it externally (https://stackblitz.com/edit/stackblitz-starters-c3p5u7) so pinging you if you can spot any obvious error in usage.
(To reproduce on branch TEST_BUILDER=webpack TEST_CONTEXT=async pnpm nuxt dev test/fixtures/basic)

Update: Fixed by avoiding virtual filesystem. But still like to investigate why unplugin vfs could be broken for webpack only in Nuxt (last commit to reproduce: 9f8d87b)

@pi0 pi0 marked this pull request as ready for review October 4, 2023 15:12
@atinux
Copy link
Member
atinux commented Oct 5, 2023

I can confirm it works locally for the custom module 💯

@pi0
Copy link
Member Author
pi0 commented Oct 5, 2023

/trigger release

@github-actions
Copy link
Contributor
github-actions bot commented Oct 5, 2023

🚀 Release triggered! You can now install nuxt@npm:nuxt3@pr-23526

atinux
atinux approved these changes Oct 5, 2023
View reviewed changes
Copy link
Member
@atinux atinux 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 awesome.

@atinux
Copy link
Member
atinux commented Oct 5, 2023

Shall we add a section on https://nuxt.com/docs/guide/concepts/auto-imports#using-vue-and-nuxt-composables to explain our experimental feature, otherwise I don't know how they can test this 😅

@danielroe
Copy link
Member
danielroe commented Oct 5, 2023 •
edited
Loading

We currently document it here: https://nuxt.com/docs/api/composables/use-nuxt-app#native-async-context.

Updating/centralising docs across there, runWithContext and auto-imports docs would be definitely an improvement

@danielroe danielroe changed the title fix(nuxt): integrate async-context with vue.withAsyncContext feat(nuxt): native async-context in vue's withAsyncContext Oct 5, 2023
@danielroe danielroe merged commit 93ace55 into main Oct 5, 2023
@danielroe danielroe deleted the fix/async-ctx-vue branch October 5, 2023 14:46
@github-actions github-actions bot mentioned this pull request Oct 5, 2023
Merged
@joffreyBerrier
Copy link

Hi @pi0 do you have an idea of that #23777 ?

TheAlexLichter pushed a commit that referenced this pull request Dec 11, 2023
@pi0 @TheAlexLichter
feat(nuxt): native async-context in vue's withAsyncContext (#23526)
0c2f16f
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@atinux atinux atinux approved these changes

@danielroe danielroe danielroe approved these changes

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

Successfully merging this pull request may close these issues.
4 participants
@pi0 @atinux @danielroe @joffreyBerrier
0