Skip to content

Invalid token type for mustache expression inside <textarea> #261

Open
@ws807

Description

@ws807

Before You File a Bug Report Please Confirm You Have Done The Following...

  • I'm using eslint-plugin-vue.
  • I'm sure the problem is a parser problem. (If you are not sure, search for the issue in eslint-plugin-vue repo and open the issue in eslint-plugin-vue repo if there is no solution.
  • I have tried restarting my IDE and the issue persists.
  • I have updated to the latest version of the packages.

What version of ESLint are you using?

9.22.0

What version of eslint-plugin-vue and vue-eslint-parser are you using?

What did you do?

Configuration
import { defineConfig, globalIgnores } from 'eslint/config'
import globals from 'globals'
import js from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'

export default defineConfig([
  {
    name: 'app/files-to-lint',
    files: ['**/*.{js,mjs,jsx,vue}'],
  },

  globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),

  {
    languageOptions: {
      globals: {
        ...globals.browser,
      },
    },
  },

  js.configs.recommended,
  ...pluginVue.configs['flat/essential'],
])
<template>
  <textarea>foo{{bar;}}</textarea>
</template>

What did you expect to happen?

The token type for foo and bar; should be both HTMLRCDataText when checking with the following code:

require('vue-eslint-parser').parse('<template><textarea>foo{{bar;}}</textarea><template>').templateBody.tokens;

What actually happened?

The token for foo is HTMLRCDataText, but it is HTMLRawText for bar; as in the below result:

[
  {
    type: 'HTMLTagOpen',
    range: [ 0, 9 ],
    loc: { start: [Object], end: [Object] },
    value: 'template'
  },
  {
    type: 'HTMLTagClose',
    range: [ 9, 10 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLTagOpen',
    range: [ 10, 19 ],
    loc: { start: [Object], end: [Object] },
    value: 'textarea'
  },
  {
    type: 'HTMLTagClose',
    range: [ 19, 20 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLRCDataText',
    range: [ 20, 23 ],
    loc: { start: [Object], end: [Object] },
    value: 'foo'
  },
  {
    type: 'VExpressionStart',
    range: [ 23, 25 ],
    loc: { start: [Object], end: [Object] },
    value: '{{'
  },
  {
    type: 'HTMLRawText',
    range: [ 25, 29 ],
    loc: { start: [Object], end: [Object] },
    value: 'bar;'
  },
  {
    type: 'VExpressionEnd',
    range: [ 29, 31 ],
    loc: { start: [Object], end: [Object] },
    value: '}}'
  },
  {
    type: 'HTMLEndTagOpen',
    range: [ 31, 41 ],
    loc: { start: [Object], end: [Object] },
    value: 'textarea'
  },
  {
    type: 'HTMLTagClose',
    range: [ 41, 42 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  },
  {
    type: 'HTMLTagOpen',
    range: [ 42, 51 ],
    loc: { start: [Object], end: [Object] },
    value: 'template'
  },
  {
    type: 'HTMLTagClose',
    range: [ 51, 52 ],
    loc: { start: [Object], end: [Object] },
    value: ''
  }
]

Link to Minimal Reproducible Example

https://github.com/ws807/mustache-invalid-token-type

Additional comments

It seems this issue does not cuase any visible problems currently.

#257 solves this problem.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions