How to use @vue/component-compiler - 6 common examples

'css',
                  'styles',
                  index
                )}'`

              if (style.module || descriptor.styles[index].scoped) {
                return { ...style, code: '', map: undefined }
              }
            })
            .filter(Boolean)
        }

        // Why?
        input.script.code = input.script.code.replace(/^\s+/gm, '')

        const result = assemble(compiler, filename, beforeAssemble(input), opts)

        descriptor.customBlocks.forEach((block, index) => {
          if (!isAllowed(block.type)) return
          const lang =
            typeof block.attrs.lang === 'string'
              ? block.attrs.lang
              : defaultLang[block.type] || block.type
          const id = createVuePartRequest(filename, lang, block.type, index)
          result.code +=
            '\n' +
            `export * from '${id}'\n` +
            `import __custom_block_${index}__ from '${id}'\n` +
            `__custom_block_${index}__(__vue_component__)`
        })

        dT(

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)
      res.setHeader('Content-Type', 'application/javascript')
      res.end(assembledResult.code)
    } else if (req.path.endsWith('.js')) {
      const { filepath, source } = await read(req)
      // transform import statements
      const transformed = transformModuleImports(source)
      res.setHeader('Content-Type', 'application/javascript')
      res.end(transformed)
    } else if (req.path.startsWith('/__modules/')) {
      const pkg = req.path.replace(/^\/__modules\//, '')
      const source = await loadPkg(pkg)
      res.setHeader('Content-Type', 'application/javascript')
      res.end(source)
    } else {
      next()
    }

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)

async function bundleSFC (req) {
    const { filepath, source, updateTime } = await readSource(req)
    const descriptorResult = compiler.compileToDescriptor(filepath, source)
    const assembledResult = vueCompiler.assemble(compiler, filepath, {
      ...descriptorResult,
      script: injectSourceMapToScript(descriptorResult.script),
      styles: injectSourceMapsToStyles(descriptorResult.styles)
    })
    return { ...assembledResult, updateTime }
  }

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: []
    })