Issue with "root v-scope" and "v-if"

[shen-zhao]

Example: Components with Template and switch

<div v-scope>
  <input type="radio" :value="1" v-model="numType">1
  <input type="radio" :value="2" v-model="numType">2
</div>

<div v-scope="Counter({ initialCount: 1, type: 1 })" v-if="1 === numType"></div>
<div v-scope="Counter({ initialCount: 3, type: 3 })" v-else></div>

<template id="template">
  <div>
    <span>类型{{ type }}</span>
    {{ count }}
    <button @click="count++">inc</button>
  </div>
</template>

<script type="module">
  import * as PetiteVue from '../src'

  function Counter(props) {
    return {
      $template: '#template',
      count: props.initialCount,
      type: props.type
    }
  }

  PetiteVue.createApp({
    numType: 1,
    Counter
  }).mount()
</script>

v-if is a special dir. The priority of v-if is higher than other dir such as v-scope. When v-if is switched, it generates a non-root block and does not delete the dir attributes on the original element (except for v-if related), because it is clone logic(cloneNode), but v-else or v-else-if are not so lucky. In addition to being collected when processing v-if. They will also be processed as root v-scope. So the template It is used directly instead of cloning. This element can be rendered normally for the first time (if the condition is true), but because it is not a cloning logic, all dir attributes have been removed. When the v-if is switched to this element, will be regenerated non-root block, but because the dir attributes of this element itself has been deleted, no dir will be processed. for example If there is an event binding, it will not take effect.

The reason for this problem is the logical conflict between v-if and root v-scope, as long as v-if does not appear on the root v-scope, there is no problem.

<div v-scope>
  <div v-scope="Counter({ initialCount: 1, type: 1 })" v-if="1 === numType"></div>
  <div v-scope="Counter({ initialCount: 3, type: 3 })" v-else></div>
</div>

If this scenario is reasonable. Then we should resolve this conflict internally. One of my thoughts is to mark v-else or v-else-if when dealing with v-if, and then process the block generation. In fact, I feel that this method is not very appropriate, but I didn't think of a better way

// v-if
// L31
while ((elseEl = el.nextElementSibling)) {
    elseExp = null
    if (
      checkAttr(elseEl, 'v-else') === '' ||
      (elseExp = checkAttr(elseEl, 'v-else-if'))
    ) {
      elseEl.__if__ = true // here😀
      parent.removeChild(elseEl)
      branches.push({ exp: elseExp, el: elseEl })
    } else {
      break
    }
  }


// block
// L21
constructor(template: Element, parentCtx: Context, isRoot = false) {
    this.isFragment = template instanceof HTMLTemplateElement

    if (isRoot && !template.__if__) { // here😄
      this.template = template
    } else if (this.isFragment) {
      this.template = (template as HTMLTemplateElement).content.cloneNode(
        true
      ) as DocumentFragment
    } else {
      this.template = template.cloneNode(true) as Element
    }

    if (isRoot) {
      this.ctx = parentCtx
    } else {
      // create child context
      this.parentCtx = parentCtx
      parentCtx.blocks.push(this)
      this.ctx = createContext(parentCtx)
    }

    walk(this.template, this.ctx)
  }

[nooooooom]

In fact, you only need to skip the v-else and v-else-if when initializing the walk, because v-if will handle them.

You can make a mark and deal with it temporarily. bug I don’t think this handler is good, so i didn’t mention PR.

// src/directives/if.ts
while ((elseEl = el.nextElementSibling)) { //...
  const hasElse = checkAttr(elseEl, 'v-else') !== null
  if (hasElse) {
    // @ts-ignore
    elseEl._else = true
  }
    
  const hasElseif = checkAttr(elseEl, 'v-else-if') !== null
  if (hasElseif) {
   // @ts-ignore
   elseEl._elseif = true
  }
}

And skip it while walk

// src/walk.ts
// @ts-ignore
if (el._else || el._elseif) {
  return
}

[shen-zhao]

In fact, you only need to skip the v-else and v-else-if when initializing the walk, because v-if will handle them.

You can make a mark and deal with it temporarily. bug I don’t think this handler is good, so i didn’t mention PR.

// src/directives/if.ts
while ((elseEl = el.nextElementSibling)) { //...
  const hasElse = checkAttr(elseEl, 'v-else') !== null
  if (hasElse) {
    // @ts-ignore
    elseEl._else = true
  }
    
  const hasElseif = checkAttr(elseEl, 'v-else-if') !== null
  if (hasElseif) {
   // @ts-ignore
   elseEl._elseif = true
  }
}

And skip it while walk

// src/walk.ts
// @ts-ignore
if (el._else || el._elseif) {
  return
}

Yes, I think so too. Looking forward to a better plan 😄

[Fry98]

Well, you are using the variable numType that's defined in a scope outside of that scope as well as using a v-if directive in a region not controlled by petite-vue. I really wouldn't expect this code to work; if anything, I think petite-vue should throw an error in this case.