Skip to content

fix(vapor): update insertion handling #13203

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

Closed
wants to merge 1 commit into from
Closed

Conversation

edison1105
Copy link
Member

@edison1105 edison1105 commented Apr 15, 2025

revert e3a33e6 partial code

  _setInsertionState(n8)
  const n2 = _createIf(() => (_ctx.toggle), () => {
    const n7 = _createComponent(_VaporKeepAlive, null, {
      "default": () => {
        const n4 = _createIf(() => (_ctx.show), () => {
          const n6 = _createComponent(_ctx.Child)
          return n6
        })
        return n4
      }
    })
    return n7
  })

If the child is a vdom component:

  • The child will be wrapped as a VaporFragment (n6 is a VaporFragment)
  • This causes n4, n7, and n2 to all call n6.insert during creation (caused by the following code):
if (!isHydrating && _insertionParent) {
  insert(xxx, _insertionParent, _insertionAnchor)
}

Whenever there is a v-if + component, it causes the component.block to be inserted twice.
It seems we should revert to the original approach by calling _insert while keeping _setInsertionState:

  _setInsertionState(n8)
  const n2 = _createIf(() => (_ctx.toggle), () => {
    const n7 = _createComponent(_VaporKeepAlive, null, {
      "default": () => {
        const n4 = _createIf(() => (_ctx.show), () => {
          const n6 = _createComponent(_ctx.Child)
          return n6
        })
        return n4
      }
    })
    return n7
  })
+ _insert(n2, n8)

And remove the following code:

-if (!isHydrating && _insertionParent) {
-  insert(xxx, _insertionParent, _insertionAnchor)
-}

Copy link

netlify bot commented Apr 15, 2025

Deploy Preview for vapor-repl ready!

Name Link
🔨 Latest commit fde08e1
🔍 Latest deploy log https://app.netlify.com/sites/vapor-repl/deploys/67fe0a0e61992d0007e47af3
😎 Deploy Preview https://deploy-preview-13203--vapor-repl.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

pkg-pr-new bot commented Apr 15, 2025

Open in StackBlitz

@vue/compiler-core

npm i https://pkg.pr.new/@vue/compiler-core@13203

@vue/compiler-dom

npm i https://pkg.pr.new/@vue/compiler-dom@13203

@vue/compiler-ssr

npm i https://pkg.pr.new/@vue/compiler-ssr@13203

@vue/compiler-sfc

npm i https://pkg.pr.new/@vue/compiler-sfc@13203

@vue/compiler-vapor

npm i https://pkg.pr.new/@vue/compiler-vapor@13203

@vue/reactivity

npm i https://pkg.pr.new/@vue/reactivity@13203

@vue/runtime-core

npm i https://pkg.pr.new/@vue/runtime-core@13203

@vue/runtime-dom

npm i https://pkg.pr.new/@vue/runtime-dom@13203

@vue/runtime-vapor

npm i https://pkg.pr.new/@vue/runtime-vapor@13203

@vue/server-renderer

npm i https://pkg.pr.new/@vue/server-renderer@13203

@vue/shared

npm i https://pkg.pr.new/@vue/shared@13203

vue

npm i https://pkg.pr.new/vue@13203

@vue/compat

npm i https://pkg.pr.new/@vue/compat@13203

commit: fde08e1

@edison1105 edison1105 added the scope: vapor related to vapor mode label Apr 15, 2025
@edison1105 edison1105 closed this Apr 15, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
scope: vapor related to vapor mode
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant