You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

151 lines
4.9 KiB

4 years ago
  1. # @vue/component-compiler-utils [![Build Status](https://circleci.com/gh/vuejs/component-compiler-utils/tree/master.svg?style=shield)](https://circleci.com/gh/vuejs/component-compiler-utils/)
  2. > Lower level utilities for compiling Vue single file components
  3. 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.
  4. The API surface is intentionally minimal - the goal is to reuse as much as possible while being as flexible as possible.
  5. ## Why isn't `vue-template-compiler` a peerDependency?
  6. 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.
  7. 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.
  8. ## API
  9. ### parse(ParseOptions): SFCDescriptor
  10. 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.
  11. ``` ts
  12. interface ParseOptions {
  13. source: string
  14. filename?: string
  15. compiler: VueTemplateCompiler
  16. // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilerparsecomponentfile-options
  17. // default: { pad: 'line' }
  18. compilerParseOptions?: VueTemplateCompilerParseOptions
  19. sourceRoot?: string
  20. needMap?: boolean
  21. }
  22. interface SFCDescriptor {
  23. template: SFCBlock | null
  24. script: SFCBlock | null
  25. styles: SFCBlock[]
  26. customBlocks: SFCCustomBlock[]
  27. }
  28. interface SFCCustomBlock {
  29. type: string
  30. content: string
  31. attrs: { [key: string]: string | true }
  32. start: number
  33. end: number
  34. map?: RawSourceMap
  35. }
  36. interface SFCBlock extends SFCCustomBlock {
  37. lang?: string
  38. src?: string
  39. scoped?: boolean
  40. module?: string | boolean
  41. }
  42. ```
  43. ### compileTemplate(TemplateCompileOptions): TemplateCompileResults
  44. 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.
  45. It can also optionally perform pre-processing for any templating engine supported by [consolidate](https://github.com/tj/consolidate.js/).
  46. ``` ts
  47. interface TemplateCompileOptions {
  48. source: string
  49. filename: string
  50. compiler: VueTemplateCompiler
  51. // https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#compilercompiletemplate-options
  52. // default: {}
  53. compilerOptions?: VueTemplateCompilerOptions
  54. // Template preprocessor
  55. preprocessLang?: string
  56. preprocessOptions?: any
  57. // Transform asset urls found in the template into `require()` calls
  58. // This is off by default. If set to true, the default value is
  59. // {
  60. // video: ['src', 'poster'],
  61. // source: 'src',
  62. // img: 'src',
  63. // image: ['xlink:href', 'href'],
  64. // use: ['xlink:href', 'href']
  65. // }
  66. transformAssetUrls?: AssetURLOptions | boolean
  67. // For vue-template-es2015-compiler, which is a fork of Buble
  68. transpileOptions?: any
  69. isProduction?: boolean // default: false
  70. isFunctional?: boolean // default: false
  71. optimizeSSR?: boolean // default: false
  72. // Whether prettify compiled render function or not (development only)
  73. // default: true
  74. prettify?: boolean
  75. }
  76. interface TemplateCompileResult {
  77. code: string
  78. source: string
  79. tips: string[]
  80. errors: string[]
  81. }
  82. interface AssetURLOptions {
  83. [name: string]: string | string[]
  84. }
  85. ```
  86. #### Handling the Output
  87. The resulting JavaScript code will look like this:
  88. ``` js
  89. var render = function (h) { /* ... */}
  90. var staticRenderFns = [function (h) { /* ... */}, function (h) { /* ... */}]
  91. ```
  92. It **does NOT** assume any module system. It is your responsibility to handle the exports, if needed.
  93. ### compileStyle(StyleCompileOptions)
  94. 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.
  95. ``` ts
  96. interface StyleCompileOptions {
  97. source: string
  98. filename: string
  99. id: string
  100. map?: any
  101. scoped?: boolean
  102. trim?: boolean
  103. preprocessLang?: string
  104. preprocessOptions?: any
  105. postcssOptions?: any
  106. postcssPlugins?: any[]
  107. }
  108. interface StyleCompileResults {
  109. code: string
  110. map: any | void
  111. rawResult: LazyResult | void // raw lazy result from PostCSS
  112. errors: string[]
  113. }
  114. ```
  115. ### compileStyleAsync(StyleCompileOptions)
  116. Same as `compileStyle(StyleCompileOptions)` but it returns a Promise resolving to `StyleCompileResults`. It can be used with async postcss plugins.