Extract does not work on vue template since vue 3.4.0

[koldka]

Extract does not work on vue template since vue 3.4.0

[dashdashzako]

It seems that the output of the parse function from vue/sfc-compiler changed.

Consider the following example:

import { parse } from 'vue/compiler-sfc'

const { descriptor } = parse(`<script setup lang="ts">
import { useIntl } from 'vue-intl';

const intl = useIntl()

const messageHello = intl.formatMessage({ defaultMessage: 'Hello' })
</script>

<template>
  <main>
    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}
    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}
  </main>
</template>
`, { filename: 'my-component.vue' })

const { template } = descriptor

console.log(template)

The output using [email protected] is:

{
  type: 'template',
  content: '\n' +
    '  <main>\n' +
    "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
    "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
    '  </main>\n',
  loc: {
    source: '\n' +
      '  <main>\n' +
      "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
      "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
      '  </main>\n',
    start: { column: 11, line: 9, offset: 176 },
    end: { column: 1, line: 14, offset: 361 }
  },
  attrs: {},
  ast: {
    type: 1,
    ns: 0,
    tag: 'template',
    tagType: 0,
    props: [],
    isSelfClosing: false,
    children: [ [Object], [Object], [Object] ],
    loc: {
      start: [Object],
      end: [Object],
      source: '<template>\n' +
        '  <main>\n' +
        "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
        "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
        '  </main>\n' +
        '</template>'
    },
    codegenNode: undefined
  },
  map: {
    version: 3,
    sources: [ 'my-component.vue' ],
    names: [],
    mappings: ';EASE,CAAC,CAAC,CAAC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;IACjE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;EAC1F,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC',
    file: 'my-component.vue',
    sourceRoot: '',
    sourcesContent: [
      '<script setup lang="ts">\n' +
        "import { useIntl } from 'vue-intl';\n" +
        '\n' +
        'const intl = useIntl()\n' +
        '\n' +
        "const messageHello = intl.formatMessage({ defaultMessage: 'Hello' })\n" +
        '</script>\n' +
        '\n' +
        '<template>\n' +
        '  <main>\n' +
        "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
        "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
        '  </main>\n' +
        '</template>\n'
    ]
  }
}

While the output using [email protected] is:

{
  type: 'template',
  content: '\n' +
    '  <main>\n' +
    "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
    "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
    '  </main>\n',
  loc: {
    start: { column: 11, line: 9, offset: 176 },
    end: { column: 1, line: 14, offset: 361 },
    source: '\n' +
      '  <main>\n' +
      "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
      "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
      '  </main>\n'
  },
  attrs: {},
  ast: {
    type: 0,
    source: '<script setup lang="ts">\n' +
      "import { useIntl } from 'vue-intl';\n" +
      '\n' +
      'const intl = useIntl()\n' +
      '\n' +
      "const messageHello = intl.formatMessage({ defaultMessage: 'Hello' })\n" +
      '</script>\n' +
      '\n' +
      '<template>\n' +
      '  <main>\n' +
      "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
      "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
      '  </main>\n' +
      '</template>\n',
    children: [ [Object] ],
    helpers: Set(0) {},
    components: [],
    directives: [],
    hoists: [],
    imports: [],
    cached: 0,
    temps: 0,
    codegenNode: undefined,
    loc: { start: [Object], end: [Object], source: '' }
  },
  map: {
    version: 3,
    sources: [ 'my-component.vue' ],
    names: [],
    mappings: ';EASE,CAAC,CAAC,CAAC,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;IACjE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC;EAC1F,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC',
    file: 'my-component.vue',
    sourceRoot: '',
    sourcesContent: [
      '<script setup lang="ts">\n' +
        "import { useIntl } from 'vue-intl';\n" +
        '\n' +
        'const intl = useIntl()\n' +
        '\n' +
        "const messageHello = intl.formatMessage({ defaultMessage: 'Hello' })\n" +
        '</script>\n' +
        '\n' +
        '<template>\n' +
        '  <main>\n' +
        "    {{ $formatMessage({ id: 'format this', defaultMessage: 'meh' }) }}\n" +
        "    {{ messageHello }}, {{ intl.formatMessage({ defaultMessage: 'I just called to say…' }) }}\n" +
        '  </main>\n' +
        '</template>\n'
    ]
  }
}

---

The value of the template.ast key changed, and the current implementation of packages/cli-lib/src/vue_extractor.ts isn't able to parse it properly.