bluwy / whyframe

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?

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.

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>

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.

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

Vue 3.4 issue