1 | # @vue/component-compiler [![Build Status](https://circleci.com/gh/vuejs/vue-component-compiler/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/vue-component-compiler)
|
2 |
|
3 | > High level utilities for compiling Vue single file components
|
4 |
|
5 | This package contains high 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 [rollup-plugin-vue](https://github.com/vuejs/rollup-plugin-vue) version 3 and above.
|
6 |
|
7 | The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.
|
8 |
|
9 | ## API
|
10 |
|
11 | ### createDefaultCompiler(Options): SFCCompiler
|
12 |
|
13 | Creates a compiler instance.
|
14 |
|
15 | ```typescript
|
16 | interface Options {
|
17 | script?: ScriptOptions
|
18 | style?: StyleOptions
|
19 | template?: TemplateOptions
|
20 | }
|
21 |
|
22 | interface ScriptOptions {
|
23 | preprocessorOptions?: any
|
24 | }
|
25 |
|
26 | interface StyleOptions {
|
27 | postcssOptions?: any
|
28 | postcssPlugins?: any[]
|
29 | postcssModulesOptions?: any
|
30 | preprocessOptions?: any
|
31 | postcssCleanOptions?: any
|
32 | trim?: boolean
|
33 | }
|
34 |
|
35 | interface TemplateOptions {
|
36 | compiler: VueTemplateCompiler
|
37 | compilerOptions: VueTemplateCompilerOptions
|
38 | preprocessOptions?: any
|
39 | transformAssetUrls?: AssetURLOptions | boolean
|
40 | transpileOptions?: any
|
41 | isProduction?: boolean
|
42 | optimizeSSR?: boolean
|
43 | }
|
44 | ```
|
45 |
|
46 | ### SFCCompiler.compileToDescriptor(filename: string, source: string): DescriptorCompileResult
|
47 |
|
48 | Takes raw source and compiles each block separately. Internally, it uses [compileTemplate](https://github.com/vuejs/component-compiler-utils/blob/master/README.md#compiletemplatetemplatecompileoptions-templatecompileresults) and [compileStyle](https://github.com/vuejs/component-compiler-utils/blob/master/README.md#compilestylestylecompileoptions) from [@vue/component-compiler-utils](https://github.com/vuejs/component-compiler-utils).
|
49 |
|
50 | ```typescript
|
51 | interface DescriptorCompileResult {
|
52 | customBlocks: SFCBlock[]
|
53 | scopeId: string
|
54 | script?: CompileResult
|
55 | styles: StyleCompileResult[]
|
56 | template?: TemplateCompileResult & { functional: boolean }
|
57 | }
|
58 |
|
59 | interface CompileResult {
|
60 | code: string
|
61 | map?: any
|
62 | }
|
63 |
|
64 | interface StyleCompileResult {
|
65 | code: string
|
66 | map?: any
|
67 | scoped?: boolean
|
68 | media?: string
|
69 | moduleName?: string
|
70 | module?: any
|
71 | }
|
72 |
|
73 | interface TemplateCompileResult {
|
74 | code: string;
|
75 | source: string;
|
76 | tips: string[];
|
77 | errors: string[];
|
78 | functional: boolean;
|
79 | }
|
80 | ```
|
81 |
|
82 | #### Handling the Output
|
83 |
|
84 | The blocks from the resulting descriptor should be assembled into JavaScript code:
|
85 |
|
86 | ##### assemble(compiler: SFCCompiler, filename: string, result: DescriptorCompileResult, options: AssembleOptions): AssembleResults
|
87 |
|
88 | ```typescript
|
89 | interface AssembleResults {
|
90 | code: string
|
91 | map?: any
|
92 | }
|
93 | ```
|
94 |
|
95 | ```typescript
|
96 | interface AssembleOptions {
|
97 | normalizer?: string
|
98 | styleInjector?: string
|
99 | styleInjectorSSR?: string
|
100 | }
|
101 | ```
|
102 |
|
103 |
|
104 | The `assemble` method is an example implementation for how to combine various parts from the descriptor. You can provide custom implementations for `normalizer`, `styleInjector` and `styleInjectorSSR`:
|
105 |
|
106 | * Directly in-lined (default)
|
107 | * Using a global function (normalizer: 'myComponentNormalizer')
|
108 | * Using an import ({ normalizer: '~my-component-normalizer' })
|
109 |
|
110 | The `assemble` method also accepts global variable name in `source`, `map` and `module` of styles.
|