Vue 3.4 issue

[kevinwarne]

Hi, I am using whyframe with my vitepress based documentation site. (Documenting a vue component library).

I am upgrading to vue 3.4 but this seems to break my examples. Anyone else running into issues with this minor vue update?

[roitto]

In the vitepress example, the "popup4" component seems to be broken, which uses Story component with slots.

Is this the same problem?

E: Seems to be broken in the vue example too.

[roitto]

whyframe/packages/vue/src/shared.js

Line 51 in c3fd0ca

c['content']?.trimLeft().startsWith('<slot')

Seems that checking loc.source for the slot fixes the problem:

            node.children?.some((c) =>
              c['content']?.trimLeft().startsWith('<slot')
              || c['loc']?.source?.trim().startsWith('<slot')
            )

E: Also adding <slot inside the vue components iframe fixes this 😁 Because content property is only found from text nodes.

      <iframe
        data-why
      >
        &lt;slot
        <slot />
      </iframe>

[bluwy]

Thanks for sharing your solution @roitto. I noticed that it's caused by a breaking change in @vue/compiler-dom where between v3.2.47 and v3.4.21, the node children type signature changed from:

[
  {
    type: 2,
    content: '\n        <slot />\n      ',
    loc: {
      start: [Object],
      end: [Object],
      source: '\n        <slot />\n      '
    }
  }
]

to:

[
  {
    type: 1,
    tag: 'slot',
    ns: 0,
    tagType: 2,
    props: [],
    children: [],
    loc: { start: [Object], end: [Object], source: '<slot />' },
    codegenNode: undefined,
    isSelfClosing: true
  }
]

This shouldn't be happening in a minor/patch, but alas I'll make a fix for this to prevent the error.

[bluwy]

Fixed in @whyframe/vue v0.1.7 (release)