@vue/component-compiler-utils 

> Lower level utilities for compiling Vue single file components

This package contains lower level utilities that you can use if you are writing a plugin / transform for a bundler or module system that compiles Vue single file components into JavaScript. It is used in vue-loader version 15 and above.

The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.

Why isn't vue-template-compiler a peerDependency?

Since this package is more often used as a low-level utility, it is usually a transitive dependency in an actual Vue project. It is therefore the responsibility of the higher-level package (e.g. vue-loader) to inject vue-template-compiler via options when calling the parse and compileTemplate methods.

Not listing it as a peer depedency also allows tooling authors to use a non-default template compiler instead of vue-template-compiler without having to include it just to fullfil the peer dep requirement.

API

$3

Parse raw single file component source into a descriptor with source maps. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

`` ts
interface ParseOptions {
source: string
filename?: string
compiler: VueTemplateCompiler
// https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
// default: { pad: 'line' }
compilerParseOptions?: VueTemplateCompilerParseOptions
sourceRoot?: string
needMap?: boolean
}

interface SFCDescriptor {
template: SFCBlock | null
script: SFCBlock | null
styles: SFCBlock[]
customBlocks: SFCCustomBlock[]
}

interface SFCCustomBlock {
type: string
content: string
attrs: { [key: string]: string | true }
start: number
end: number
map?: RawSourceMap
}

interface SFCBlock extends SFCCustomBlock {
lang?: string
src?: string
scoped?: boolean
module?: string | boolean
}
`

$3

Takes raw template source and compile it into JavaScript code. The actual compiler (vue-template-compiler) must be passed in via the compiler option so that the specific version used can be determined by the end user.

It can also optionally perform pre-processing for any templating engine supported by consolidate.

` ts
interface TemplateCompileOptions {
source: string
filename: string

compiler: VueTemplateCompiler
// https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
// default: {}
compilerOptions?: VueTemplateCompilerOptions

// Template preprocessor
preprocessLang?: string
preprocessOptions?: any

// Transform asset urls found in the template into require() calls
// This is off by default. If set to true, the default value is
// {
// audio: 'src',
// video: ['src', 'poster'],
// source: 'src',
// img: 'src',
// image: ['xlink:href', 'href'],
// use: ['xlink:href', 'href']
// }
transformAssetUrls?: AssetURLOptions | boolean

// For vue-template-es2015-compiler, which is a fork of Buble
transpileOptions?: any

isProduction?: boolean // default: false
isFunctional?: boolean // default: false
optimizeSSR?: boolean // default: false

// Whether prettify compiled render function or not (development only)
// default: true
prettify?: boolean
}

interface TemplateCompileResult {
ast: Object | undefined
code: string
source: string
tips: string[]
errors: string[]
}

interface AssetURLOptions {
[name: string]: string | string[]
}
`

#### Handling the Output

The resulting JavaScript code will look like this:

` js
var render = function (h) { / ... /}
var staticRenderFns = [function (h) { / ... /}, function (h) { / ... /}]
`

It does NOT assume any module system. It is your responsibility to handle the exports, if needed.

$3

Take input raw CSS and applies scoped CSS transform. It does NOT handle pre-processors. If the component doesn't use scoped CSS then this step can be skipped.

` ts
interface StyleCompileOptions {
source: string
filename: string
id: string
map?: any
scoped?: boolean
trim?: boolean
preprocessLang?: string
preprocessOptions?: any
postcssOptions?: any
postcssPlugins?: any[]
}

interface StyleCompileResults {
code: string
map: any | void
rawResult: LazyResult | void // raw lazy result from PostCSS
errors: string[]
}
`

$3

Same as compileStyle(StyleCompileOptions) but it returns a Promise resolving to StyleCompileResults`. It can be used with async postcss plugins.