How to use vue-template-compiler - 10 common examples

if (originalComponents[stub]) {
        // Remove cached constructor
        delete originalComponents[stub]._Ctor;
        if (typeof stubs[stub] === 'string') {
          components[stub] = createStubFromString(stubs[stub], originalComponents[stub]);
        } else {
          components[stub] = Object.assign({}, stubs[stub],
            {name: originalComponents[stub].name});
        }
      } else {
        if (typeof stubs[stub] === 'string') {
          if (!vueTemplateCompiler.compileToFunctions) {
            throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined');
          }
          components[stub] = Object.assign({}, vueTemplateCompiler.compileToFunctions(stubs[stub]));
        } else {
          components[stub] = Object.assign({}, stubs[stub]);
        }
      }
      // ignoreElements does not exist in Vue 2.0.x
      if (Vue.config.ignoredElements) {
        Vue.config.ignoredElements.push(stub);
      }
    });
  }

function genVueLoaderCacheConfig() {
    return api.genCacheConfig('vue-loader', {
      'vue-loader': require('vue-loader/package.json').version,
      /* eslint-disable-next-line node/no-extraneous-require */
      '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json')
        .version,
      'vue-template-compiler': require('vue-template-compiler/package.json')
        .version,
      testAttrsOptions: JSON.stringify(options),
    })
  }
}

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
        }

.modules
        .add('node_modules')
        .add(api.resolve('node_modules'))
        .add(resolveLocal('node_modules'))

    webpackConfig.module
      .noParse(/^(vue|vue-router|vuex|vuex-router-sync)$/)

    // js is handled by cli-plugin-babel ---------------------------------------

    // vue-loader --------------------------------------------------------------
    const vueLoaderCacheConfig = api.genCacheConfig('vue-loader', {
      'vue-loader': require('vue-loader/package.json').version,
      /* eslint-disable-next-line node/no-extraneous-require */
      '@vue/component-compiler-utils': require('@vue/component-compiler-utils/package.json').version,
      'vue-template-compiler': require('vue-template-compiler/package.json').version
    })

    webpackConfig.module
      .rule('vue')
        .test(/\.vue$/)
        .use('cache-loader')
          .loader(require.resolve('cache-loader'))
          .options(vueLoaderCacheConfig)
          .end()
        .use('vue-loader')
          .loader(require.resolve('vue-loader'))
          .options(Object.assign({
            compilerOptions: {
              whitespace: 'condense'
            }
          }, vueLoaderCacheConfig))

if (sfc.template) {
    if (!sfc.template.content && sfc.template.src) {
      // Src Imports
      if (basedir) {
        try {
          sfc.template.content = fs.readFileSync(
            path.resolve(basedir, sfc.template.src),
            'utf-8'
          )
        } catch (e) {
          console.error(e)
          sfc.template.content = ''
        }
      }
    }
    res.templateAst = compile(sfc.template.content, {
      comments: true
    }).ast
  }
  return res
}

export function sfcToAST(
  source: string,
  babelParserPlugins?: BabelParserPlugins,
  basedir?: string
): AstResult {
  const plugins = getBabelParserPlugins(babelParserPlugins)
  const sfc = parseComponent(source)
  const res: AstResult = {}
  if (sfc.script) {
    if (!sfc.script.content && sfc.script.src) {
      // Src Imports
      if (basedir) {
        try {
          sfc.script.content = fs.readFileSync(
            path.resolve(basedir, sfc.script.src),
            'utf-8'
          )
        } catch (e) {
          console.error(e)
          sfc.script.content = ''
        }
      }
    }

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]));
      }

const defaultModules = [
    transformRequire(options.transformRequire, loaderContext),
    transformSrcset(),
  ];
  const userModules = vueOptions.compilerModules || options.compilerModules;

  const compilerOptions = {
    preserveWhitespace: options.preserveWhitespace,
    modules: defaultModules.concat(userModules || []),
    directives:
      vueOptions.compilerDirectives || options.compilerDirectives || {},
    scopeId: options.hasScoped ? options.id : null,
    comments: options.hasComment,
  };

  const compiled = compiler.compile(html, compilerOptions);

  // tips
  if (compiled.tips && compiled.tips.length) {
    compiled.tips.forEach(tip => {
      loaderContext.emitWarning({
        name: 'vue-warning',
        message: tip,
        fileName: loaderContext._module.module.parent
          ? loaderContext._module.module.parent.path
          : loaderContext.path,
        lineNumber: 1,
        columnNumber: 1,
        source: 'vue-template-compiler',
      });
    });
  }