blob: be3c45e3119dea560d3ece18b9e6dca4ea1ae346 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
# @vue/component-compiler-utils [](https://circleci.com/gh/vuejs/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](https://github.com/vuejs/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
### parse(ParseOptions): SFCDescriptor
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
// defualt: { 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
}
```
### compileTemplate(TemplateCompileOptions): TemplateCompileResults
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](https://github.com/tj/consolidate.js/).
``` 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
// {
// video: ['src', 'poster'],
// source: 'src',
// img: 'src',
// image: 'xlink: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
}
interface TemplateCompileResult {
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.
### compileStyle(StyleCompileOptions)
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[]
}
```
### compileStyleAsync(StyleCompileOptions)
Same as `compileStyle(StyleCompileOptions)` but it returns a Promise resolving to `StyleCompileResults`. It can be used with async postcss plugins.
|
