How to use the vue-template-compiler.parseComponent function in vue-template-compiler

module.exports = function (source, map) {
    this.cacheable && this.cacheable()

    // default options
    const options = Object.assign(
        defaultOptions,
        loaderUtils.getOptions(this)
    )

    // script has logger note ?
    let isScriptHasLoggerLine = false

    // get scripts
    const { script } = compiler.parseComponent(source, { pad: 'line' })
    if (script === null) {
        return source
    }

    const scripts = script.content

    let scriptArray = scripts.split(/\r?\n/)
    // parse logger
    scriptArray = scriptArray.map(scriptLine => {
        if (loggerParser.isLoggerLine(scriptLine, options)) {
            // is logger line
            isScriptHasLoggerLine = true
            return loggerParser.parseLogger(scriptLine, options)
        } else {
            return scriptLine
        }

module.exports = function (content, filename, needMap) {
  var cacheKey = hash(filename + content)
  // source-map cache busting for hot-reloadded modules
  var filenameWithHash = filename + '?' + cacheKey
  var output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: true })
  if (needMap) {
    if (output.script && !output.script.src) {
      output.script.map = generateSourceMap(
        filenameWithHash,
        content,
        output.script.content
      )
    }
    if (output.styles) {
      output.styles.forEach(style => {
        if (!style.src) {
          style.map = generateSourceMap(
            filenameWithHash,
            content,
            style.content
          )

});
        } else if (extension === 'vue') {
          let block;
          // First lint the whole vue component with eslint
          formatted = eslint(source);

          let vueComponent = compiler.parseComponent(formatted);

          // Format template block
          if (vueComponent.template && vueComponent.template.content) {
            formatted = insertContent(
              formatted,
              vueComponent.template,
              vueComponent.template.content
            );
            vueComponent = compiler.parseComponent(formatted);
          }

          // Now run htmlhint on the whole vue component
          let htmlMessages = HTMLHint.verify(formatted, htmlHintConfig);
          if (htmlMessages.length) {
            messages.push(...HTMLHint.format(htmlMessages, { colors: true }));
          }

          // Format script block
          if (vueComponent.script) {
            block = vueComponent.script;

            const js = block.content;
            let formattedJs = prettierFormat(js, 'babel', true);
            formatted = insertContent(formatted, block, formattedJs);
            if (formattedJs.trim() !== js.trim()) {

inputFiles.forEach(file => {
      if (file.name.endsWith('.vue')) {
        const script = compiler.parseComponent(file.textContent).script;
        if (script) {
          // Vue file must have  tag to be mutated
          const { mutator, extension } = this.getVueScriptMutatorAndExtension(script);
          const vueFile = new File(file.name + extension, file.textContent.substring(script.start, script.end));
          const vueMutants = mutator.mutate([vueFile]);
          vueMutants.forEach(mutant => {
            mutant.fileName = file.name;
            mutant.range[0] += script.start;
            mutant.range[1] += script.start;
          });
          mutants.push(...vueMutants);
        }
      } else {
        const mutator = this.getMutator(file);
        mutants.push(...mutator.mutate([file]));
      }

return new Promise((resolve, reject) => {
        const templateArray = templatePath.split('/');
        if (templateArray.length === 0) {
            let error = `I had an error processing component templates. in this file \n${templatePath}`;
            console.error(new Error(error));
            reject(error);
        } else if (content) {
            let templateName = templateArray[templateArray.length - 1].replace('.vue', '');

            //Setup official component parser..
            const parsedContent = compiler.parseComponent(content);
            if (!parsedContent.template && !parsedContent.script && !parsedContent.styles) {
                reject(new Error(`Could not parse the file at ${templatePath}`));
            } else {

                const promiseArray = [
                    htmlParser(parsedContent.template, true),
                    scriptParser(parsedContent.script, defaults, type, Cache),
                    styleParser(parsedContent.styles)
                ];

                Promise.all(promiseArray).then(resultsArray => {
                    const template = resultsArray[0];
                    const script = resultsArray[1];
                    const style = resultsArray[2];

                    script.template = template;

const parseTSFromVueFile = (file) => {
    const content = fs.readFileSync(file, 'utf-8');
    const { script } = vueCompiler.parseComponent(content, { pad: 'line' });
    if (script && /^tsx?$/.test(script.lang)) {
      vueFileCache.set(file, {
        before: content.slice(0, script.start),
        after: content.slice(script.end)
      });
      return script;
    }
  };

module.exports = (content, filename, sourceRoot, needMap) => {
  const cacheKey = hash(filename + content)
  let output = cache.get(cacheKey)
  if (output) return output
  output = compiler.parseComponent(content, { pad: 'line' })
  if (needMap) {
    if (output.script && !output.script.src) {
      output.script.map = generateSourceMap(
        filename,
        content,
        output.script.content,
        sourceRoot
      )
    }
    if (output.styles) {
      output.styles.forEach(style => {
        if (!style.src) {
          style.map = generateSourceMap(
            filename,
            content,
            style.content,

function parse(file, options) {
    let {root, config} = options;
    let parseOpts = Object.assign({}, {pad: 'line'}, config && config.parse);
    let result = compiler.parseComponent(
        file.content.toString(), parseOpts
    );

    let {customBlocks} = result;

    let {fullPath: filePath} = file;
    let tplFile = createPartFile(file, result.template, {
        isTemplate: true,
        root,
        filePath
    });

    let scriptFile = createPartFile(file, result.script, {
        isScript: true,
        root,
        filePath

parseVueFile(raw) {
        let parse = VueTemplateCompiler.parseComponent(raw);
        if (!parse.script) {
            return '';
        }
        if (parse.script.lang !== 'ts') {
            return '';
        }
        let charIndex = parse.script.start;
        let newlines = raw.substr(0, charIndex).match(/\r\n|\n|\r/g);
        let code = parse.script.content;
        if (newlines) {
            for (let newline of newlines) {
                code = '//' + newline + code;
            }
        }
        return code;
    }

export default function vueTransform (code, id, scripts) {
  const nodes = compiler.parseComponent(code)
  const s = new MagicString(code)
  let exportOffset = 0
  if (nodes.script) {
    if (nodes.script.src) {
      let script = readSrc(id, nodes.script.src)
      exportOffset = indexOfExport(script, 0)
      if (exportOffset) {
        s.overwrite(0, exportOffset, script.slice(0, exportOffset))
        s.overwrite(exportOffset, code.length, script.slice(exportOffset))
      }
    } else {
      s.remove(nodes.script.end, s.original.length)
      s.remove(0, nodes.script.start)
      exportOffset = indexOfExport(s.toString(), nodes.script.start)
    }
  }