How to use vue-eslint-parser - 10 common examples

it('should add scope attribute for all elements', () => {
    const code = `
    <template>
      <div id="foo">
        <p class="bar">Test</p>
        <p data-v-abcde="">{{ test }}</p>
      </div>
    </template>
    `
    const program = parse(code, {})
    const ast = transformTemplate(program.templateBody!, code)

    const scope = '1a2s3d'
    const scopeName = 'data-scope-' + scope
    const scopeAttr: TEAttribute = {
      type: 'Attribute',
      attrIndex: -1,
      name: scopeName,
      range: [-1, -1]
    }

    const result = addScope(ast, scope)

    const expected: any = ast
    expected.children[1].startTag.attrs[scopeName] = scopeAttr // #foo
    expected.children[1].children[1].startTag.attrs[scopeName] = scopeAttr // .bar

it('should extract v-for directive', () => {
    const code =
      '<template><ul><li></li></ul></template>'
    const program = parse(code, {})
    const ast = program.templateBody!

    // prettier-ignore
    const expected = createTemplate([
      h('ul', [], [
        h('li', [vFor(['item', 'key', 'i'], 'obj')], []),
      ])
    ])

    assertWithoutRange(transformTemplate(ast, code), expected)
  })
})

it('should evaluate literal value of directives', () => {
    const code = '<template><p>test</p></template>'
    const program = parse(code, {})
    const ast = program.templateBody!

    // prettier-ignore
    const expected = createTemplate([
      h(
        'p',
        [d('if', 'true')],
        ['test']
      )
    ])

    assertWithoutRange(transformTemplate(ast, code), expected)
  })

it('should transform element', () => {
    const code = '<template><div>Test {{ foo }}<p>bar</p></div></template>'
    const program = parse(code, {})
    const ast = program.templateBody!

    // prettier-ignore
    const expected = createTemplate([
      h('div', [], [
        'Test ',
        exp('foo'),
        h('p', [], [
          'bar'
        ])
      ])
    ])

    assertWithoutRange(transformTemplate(ast, code), expected)
  })

it('should transform v-bind.prop directive', () => {
    const code = '<template><div></div></template>'
    const program = parse(code, {})
    const ast = program.templateBody!

    // prettier-ignore
    const expected = createTemplate([
      h(
        'div',
        [
          d('bind', { argument: 'lang', modifiers: ['prop'] }, 'en')
        ],
        []
      )
    ])

    assertWithoutRange(transformTemplate(ast, code), expected)
  })

function recreateVueTempalteSourceFile(
    vueTemplateFileName: string,
    sourceFile: ts.SourceFile,
    scriptSnapshot: ts.IScriptSnapshot
  ) {
    // TODO: share the logic of transforming the code into AST
    // with the template mode
    const vueText = scriptSnapshot.getText(0, scriptSnapshot.getLength());
    const templateCode = parseVueTemplate(vueText);
    const scriptSrc = parseVueScriptSrc(vueText);
    const program = parse(templateCode, { sourceType: 'module' });

    let expressions: ts.Expression[] = [];
    try {
      expressions = getTemplateTransformFunctions(tsModule).transformTemplate(program, templateCode);
      injectVueTemplate(tsModule, sourceFile, expressions, scriptSrc);
    } catch (err) {
      console.log(`Failed to transform template of ${vueTemplateFileName}`);
      console.log(err);
    }

    const newText = printer.printFile(sourceFile);

    const newSourceFile = tsModule.createSourceFile(
      vueTemplateFileName,
      newText,
      sourceFile.languageVersion,

function parseTemplateBlock(template: string): TETemplate | undefined {
  // TODO: Use parsed SFCBlock after it is fixed that the issue vue-template-compiler
  // breaks original source position by deindent
  const code = template.replace(/[\s\S]*<\/script>/, matched => {
    return matched.replace(/./g, ' ')
  })

  const { templateBody } = parseTemplate(code, {})

  return templateBody && transformTemplate(templateBody, code)
}

const VERSIONS = `export default ${JSON.stringify({
    "vue-eslint-demo": {
        repo: "mysticatea/vue-eslint-demo",
        version: require("./package.json").version,
    },
    eslint: {
        repo: "eslint/eslint",
        version: require("eslint/package.json").version,
    },
    "eslint-plugin-vue": {
        repo: "vuejs/eslint-plugin-vue",
        version: require("eslint-plugin-vue/package.json").version,
    },
    "vue-eslint-parser": {
        repo: "mysticatea/vue-eslint-parser",
        version: require("vue-eslint-parser/package.json").version,
    },
    "babel-eslint": {
        repo: "babel/babel-eslint",
        version: require("babel-eslint/package.json").version,
    },
    "typescript-eslint-parser": {
        repo: "eslint/typescript-eslint-parser",
        version: require("typescript-eslint-parser/package.json").version,
    },
    typescript: {
        repo: "Microsoft/typescript",
        version: require("typescript/package.json").version,
    },
})}`

// Shim for vue-eslint-parser.

export function parseVueSourceFile(fileContent: string): SourceCode | ParsingError {
  let exceptionToReport: ParseException | null = null;
  for (const config of [PARSER_CONFIG_MODULE, PARSER_CONFIG_SCRIPT]) {
    try {
      const result = VueJS.parseForESLint(fileContent, config);
      return new SourceCode(fileContent, result.ast as any);
    } catch (exception) {
      exceptionToReport = exception;
    }
  }
  // if we reach this point, we are sure that "exceptionToReport" is defined
  return {
    line: exceptionToReport!.lineNumber,
    message: exceptionToReport!.message,
    code: ParseExceptionCode.Parsing,
  };
}

it('should work in complex case', () => {
    const code = `<template><div id="foo"><h1>Hello</h1><p>World</p></div></template>`
    const template = parseTemplate(code, {}).templateBody!
    const ast: any = transformTemplate(template, code)

    const actual = modify(code, [
      remove(ast.children[0].startTag.attrs.id),
      replace(ast.children[0].children[0].children[0], 'Hi'),
      insertBefore(ast.children[0].children[1], 'Test')
    ])
    const expected =
      '<template><div><h1>Hi</h1>Test<p>World</p></div></template>'

    expect(actual).toBe(expected)
  })