How to use the @vue/component-compiler.createDefaultCompiler function in @vue/component-compiler

const vueMiddleware = root => {
  const compiler = vueCompiler.createDefaultCompiler()

  async function read(req) {
    const { pathname } = parseUrl(req)
    const filepath = path.resolve(root, pathname.replace(/^\//, ''))
    return {
      filepath,
      source: await readFile(filepath, 'utf-8')
    }
  }

  return async (req, res, next) => {
    // TODO caching
    if (req.path.endsWith('.vue')) {
      const { filepath, source } = await read(req)
      const descriptorResult = compiler.compileToDescriptor(filepath, source)
      const assembledResult = vueCompiler.assemble(compiler, filepath, descriptorResult)

const vueMiddleware = (options = defaultOptions) => {
  let cache
  let time = {}
  if (options.cache) {
    const LRU = require('lru-cache')

    cache = new LRU({
      max: 500,
      length: function (n, key) { return n * 2 + key.length }
    })
  }

  const compiler = vueCompiler.createDefaultCompiler()

  function send(res, source, mime) {
    res.setHeader('Content-Type', mime)
    res.end(source)
  }

  function injectSourceMapToBlock (block, lang) {
    const map = Base64.toBase64(
      JSON.stringify(block.map)
    )
    let mapInject

    switch (lang) {
      case 'js': mapInject = `//# sourceMappingURL=data:application/json;base64,${map}\n`; break;
      case 'css': mapInject = `/*# sourceMappingURL=data:application/json;base64,${map}*/\n`; break;
      default: break;

opts.template = {
    transformAssetUrls: {
      video: ['src', 'poster'],
      source: 'src',
      img: 'src',
      image: 'xlink:href'
    },
    ...opts.template
  } as any

  if (opts.template && typeof opts.template.isProduction === 'undefined') {
    opts.template.isProduction = isProduction
  }

  const compiler = createDefaultCompiler(opts)
  const descriptors = new Map()

  if (opts.css === false) d('Running in CSS extract mode')

  function prependStyle(
    id: string,
    lang: string,
    code: string,
    map: any
  ): { code: string } {
    if (!(lang in data)) return { code }
    const ms = new MagicString(code, {
      filename: id,
      indentExclusionRanges: []
    })