vuejs / core-vapor

Vue Vapor is a variant of Vue that offers rendering without the Virtual DOM.
https://vapor-repl.netlify.app
MIT License
1.8k stars 86 forks source link

[Bug] defineComponent seems unable to `dynamically` return Block #218

Closed GaoNeng-wWw closed 3 months ago

GaoNeng-wWw commented 3 months ago

There seem to be some points where the behavior differs from the original.

// not vapor
import {defineComponent, ref, h} from 'vue';
const comp = defineComponent({
  setup(){
    const visible = ref(false);
    setTimeout(()=>{
      visible.value = true
    }, 2000)
    return ()=>{
      // 1. false
     //  2. true
      console.log(visible.value)
      if (visible.value){
        return h('span', null, 'visible!')
      } else {
        return h('span', 'not visible')
      }
    };
  }
})

but in vapor mode

// vapor mode
defineComponent({
  setup(){
    const visible = ref(false);
    setTimeout(()=>{
      visible.value = true
    }, 2000)
   // 1. false
   if (visible.value){
     return createText(['visible']);
   } else {
     return createText(['not visible'])
   }
  }
})
sxzz commented 3 months ago

It should be createTextNode(() => visible.value ? 'visible' : 'not visible'])

GaoNeng-wWw commented 3 months ago

It should be createTextNode(() => visible.value ? 'visible' : 'not visible'])

Thank you for your answer, but I'm sorry I didn't explain it clearly. Please allow me to explain again. In Vue, defineComponent can dynamically return other components. But it is not supported by steam. Is there a problem with my usage method?

vvv Demo

const comp = defineComponent({
      setup(){
        const visible = ref(false);
        setTimeout(() => {
          visible.value = true;
        }, 500);
        const comp1 = defineComponent({
          setup(){
            return createTextNode(['visible'])
          }
        });
        const comp2 = defineComponent({
          setup(){
            return createTextNode(['not visible'])
          }
        });
        return createComponent(visible.value ? comp1 : comp2) //always return comp2
      }
    })
sxzz commented 3 months ago

Try using the template explorer instead of manually writing compiled code.

https://vapor-template-explorer.netlify.app/#eyJzcmMiOiI8Q29tcDEgdi1pZj1cInZpc2libGUudmFsdWVcIiAvPlxuPENvbXAyIHYtZWxzZSAvPiIsIm9wdGlvbnMiOnt9fQ==