options.ts 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349
  1. import type {
  2. ElementNode,
  3. Namespace,
  4. Namespaces,
  5. ParentNode,
  6. TemplateChildNode,
  7. } from './ast'
  8. import type { CompilerError } from './errors'
  9. import type {
  10. DirectiveTransform,
  11. NodeTransform,
  12. TransformContext,
  13. } from './transform'
  14. import type { CompilerCompatOptions } from './compat/compatConfig'
  15. import type { ParserPlugin } from '@babel/parser'
  16. export interface ErrorHandlingOptions {
  17. onWarn?: (warning: CompilerError) => void
  18. onError?: (error: CompilerError) => void
  19. }
  20. export interface ParserOptions
  21. extends ErrorHandlingOptions,
  22. CompilerCompatOptions {
  23. /**
  24. * Base mode is platform agnostic and only parses HTML-like template syntax,
  25. * treating all tags the same way. Specific tag parsing behavior can be
  26. * configured by higher-level compilers.
  27. *
  28. * HTML mode adds additional logic for handling special parsing behavior in
  29. * `<script>`, `<style>`,`<title>` and `<textarea>`.
  30. * The logic is handled inside compiler-core for efficiency.
  31. *
  32. * SFC mode treats content of all root-level tags except `<template>` as plain
  33. * text.
  34. */
  35. parseMode?: 'base' | 'html' | 'sfc'
  36. /**
  37. * Specify the root namespace to use when parsing a template.
  38. * Defaults to `Namespaces.HTML` (0).
  39. */
  40. ns?: Namespaces
  41. /**
  42. * e.g. platform native elements, e.g. `<div>` for browsers
  43. */
  44. isNativeTag?: (tag: string) => boolean
  45. /**
  46. * e.g. native elements that can self-close, e.g. `<img>`, `<br>`, `<hr>`
  47. */
  48. isVoidTag?: (tag: string) => boolean
  49. /**
  50. * e.g. elements that should preserve whitespace inside, e.g. `<pre>`
  51. */
  52. isPreTag?: (tag: string) => boolean
  53. /**
  54. * Elements that should ignore the first newline token per parinsg spec
  55. * e.g. `<textarea>` and `<pre>`
  56. */
  57. isIgnoreNewlineTag?: (tag: string) => boolean
  58. /**
  59. * Platform-specific built-in components e.g. `<Transition>`
  60. */
  61. isBuiltInComponent?: (tag: string) => symbol | void
  62. /**
  63. * Separate option for end users to extend the native elements list
  64. */
  65. isCustomElement?: (tag: string) => boolean | void
  66. /**
  67. * Get tag namespace
  68. */
  69. getNamespace?: (
  70. tag: string,
  71. parent: ElementNode | undefined,
  72. rootNamespace: Namespace,
  73. ) => Namespace
  74. /**
  75. * @default ['{{', '}}']
  76. */
  77. delimiters?: [string, string]
  78. /**
  79. * Whitespace handling strategy
  80. * @default 'condense'
  81. */
  82. whitespace?: 'preserve' | 'condense'
  83. /**
  84. * Only used for DOM compilers that runs in the browser.
  85. * In non-browser builds, this option is ignored.
  86. */
  87. decodeEntities?: (rawText: string, asAttr: boolean) => string
  88. /**
  89. * Whether to keep comments in the templates AST.
  90. * This defaults to `true` in development and `false` in production builds.
  91. */
  92. comments?: boolean
  93. /**
  94. * Parse JavaScript expressions with Babel.
  95. * @default false
  96. */
  97. prefixIdentifiers?: boolean
  98. /**
  99. * A list of parser plugins to enable for `@babel/parser`, which is used to
  100. * parse expressions in bindings and interpolations.
  101. * https://babeljs.io/docs/en/next/babel-parser#plugins
  102. */
  103. expressionPlugins?: ParserPlugin[]
  104. }
  105. export type HoistTransform = (
  106. children: TemplateChildNode[],
  107. context: TransformContext,
  108. parent: ParentNode,
  109. ) => void
  110. export enum BindingTypes {
  111. /**
  112. * returned from data()
  113. */
  114. DATA = 'data',
  115. /**
  116. * declared as a prop
  117. */
  118. PROPS = 'props',
  119. /**
  120. * a local alias of a `<script setup>` destructured prop.
  121. * the original is stored in __propsAliases of the bindingMetadata object.
  122. */
  123. PROPS_ALIASED = 'props-aliased',
  124. /**
  125. * a let binding (may or may not be a ref)
  126. */
  127. SETUP_LET = 'setup-let',
  128. /**
  129. * a const binding that can never be a ref.
  130. * these bindings don't need `unref()` calls when processed in inlined
  131. * template expressions.
  132. */
  133. SETUP_CONST = 'setup-const',
  134. /**
  135. * a const binding that does not need `unref()`, but may be mutated.
  136. */
  137. SETUP_REACTIVE_CONST = 'setup-reactive-const',
  138. /**
  139. * a const binding that may be a ref.
  140. */
  141. SETUP_MAYBE_REF = 'setup-maybe-ref',
  142. /**
  143. * bindings that are guaranteed to be refs
  144. */
  145. SETUP_REF = 'setup-ref',
  146. /**
  147. * declared by other options, e.g. computed, inject
  148. */
  149. OPTIONS = 'options',
  150. /**
  151. * a literal constant, e.g. 'foo', 1, true
  152. */
  153. LITERAL_CONST = 'literal-const',
  154. }
  155. export type BindingMetadata = {
  156. [key: string]: BindingTypes | undefined
  157. } & {
  158. __isScriptSetup?: boolean
  159. __propsAliases?: Record<string, string>
  160. }
  161. interface SharedTransformCodegenOptions {
  162. /**
  163. * Transform expressions like {{ foo }} to `_ctx.foo`.
  164. * If this option is false, the generated code will be wrapped in a
  165. * `with (this) { ... }` block.
  166. * - This is force-enabled in module mode, since modules are by default strict
  167. * and cannot use `with`
  168. * @default mode === 'module'
  169. */
  170. prefixIdentifiers?: boolean
  171. /**
  172. * Control whether generate SSR-optimized render functions instead.
  173. * The resulting function must be attached to the component via the
  174. * `ssrRender` option instead of `render`.
  175. *
  176. * When compiler generates code for SSR's fallback branch, we need to set it to false:
  177. * - context.ssr = false
  178. *
  179. * see `subTransform` in `ssrTransformComponent.ts`
  180. */
  181. ssr?: boolean
  182. /**
  183. * Indicates whether the compiler generates code for SSR,
  184. * it is always true when generating code for SSR,
  185. * regardless of whether we are generating code for SSR's fallback branch,
  186. * this means that when the compiler generates code for SSR's fallback branch:
  187. * - context.ssr = false
  188. * - context.inSSR = true
  189. */
  190. inSSR?: boolean
  191. /**
  192. * Optional binding metadata analyzed from script - used to optimize
  193. * binding access when `prefixIdentifiers` is enabled.
  194. */
  195. bindingMetadata?: BindingMetadata
  196. /**
  197. * Compile the function for inlining inside setup().
  198. * This allows the function to directly access setup() local bindings.
  199. */
  200. inline?: boolean
  201. /**
  202. * Indicates that transforms and codegen should try to output valid TS code
  203. */
  204. isTS?: boolean
  205. /**
  206. * Filename for source map generation.
  207. * Also used for self-recursive reference in templates
  208. * @default 'template.vue.html'
  209. */
  210. filename?: string
  211. }
  212. export interface TransformOptions
  213. extends SharedTransformCodegenOptions,
  214. ErrorHandlingOptions,
  215. CompilerCompatOptions {
  216. /**
  217. * An array of node transforms to be applied to every AST node.
  218. */
  219. nodeTransforms?: NodeTransform[]
  220. /**
  221. * An object of { name: transform } to be applied to every directive attribute
  222. * node found on element nodes.
  223. */
  224. directiveTransforms?: Record<string, DirectiveTransform | undefined>
  225. /**
  226. * An optional hook to transform a node being hoisted.
  227. * used by compiler-dom to turn hoisted nodes into stringified HTML vnodes.
  228. * @default null
  229. */
  230. transformHoist?: HoistTransform | null
  231. /**
  232. * If the pairing runtime provides additional built-in elements, use this to
  233. * mark them as built-in so the compiler will generate component vnodes
  234. * for them.
  235. */
  236. isBuiltInComponent?: (tag: string) => symbol | void
  237. /**
  238. * Used by some transforms that expects only native elements
  239. */
  240. isCustomElement?: (tag: string) => boolean | void
  241. /**
  242. * Transform expressions like {{ foo }} to `_ctx.foo`.
  243. * If this option is false, the generated code will be wrapped in a
  244. * `with (this) { ... }` block.
  245. * - This is force-enabled in module mode, since modules are by default strict
  246. * and cannot use `with`
  247. * @default mode === 'module'
  248. */
  249. prefixIdentifiers?: boolean
  250. /**
  251. * Cache static VNodes and props objects to `_hoisted_x` constants
  252. * @default false
  253. */
  254. hoistStatic?: boolean
  255. /**
  256. * Cache v-on handlers to avoid creating new inline functions on each render,
  257. * also avoids the need for dynamically patching the handlers by wrapping it.
  258. * e.g `@click="foo"` by default is compiled to `{ onClick: foo }`. With this
  259. * option it's compiled to:
  260. * ```js
  261. * { onClick: _cache[0] || (_cache[0] = e => _ctx.foo(e)) }
  262. * ```
  263. * - Requires "prefixIdentifiers" to be enabled because it relies on scope
  264. * analysis to determine if a handler is safe to cache.
  265. * @default false
  266. */
  267. cacheHandlers?: boolean
  268. /**
  269. * A list of parser plugins to enable for `@babel/parser`, which is used to
  270. * parse expressions in bindings and interpolations.
  271. * https://babeljs.io/docs/en/next/babel-parser#plugins
  272. */
  273. expressionPlugins?: ParserPlugin[]
  274. /**
  275. * SFC scoped styles ID
  276. */
  277. scopeId?: string | null
  278. /**
  279. * Indicates this SFC template has used :slotted in its styles
  280. * Defaults to `true` for backwards compatibility - SFC tooling should set it
  281. * to `false` if no `:slotted` usage is detected in `<style>`
  282. */
  283. slotted?: boolean
  284. /**
  285. * SFC `<style vars>` injection string
  286. * Should already be an object expression, e.g. `{ 'xxxx-color': color }`
  287. * needed to render inline CSS variables on component root
  288. */
  289. ssrCssVars?: string
  290. /**
  291. * Whether to compile the template assuming it needs to handle HMR.
  292. * Some edge cases may need to generate different code for HMR to work
  293. * correctly, e.g. #6938, #7138
  294. */
  295. hmr?: boolean
  296. }
  297. export interface CodegenOptions extends SharedTransformCodegenOptions {
  298. /**
  299. * - `module` mode will generate ES module import statements for helpers
  300. * and export the render function as the default export.
  301. * - `function` mode will generate a single `const { helpers... } = Vue`
  302. * statement and return the render function. It expects `Vue` to be globally
  303. * available (or passed by wrapping the code with an IIFE). It is meant to be
  304. * used with `new Function(code)()` to generate a render function at runtime.
  305. * @default 'function'
  306. */
  307. mode?: 'module' | 'function'
  308. /**
  309. * Generate source map?
  310. * @default false
  311. */
  312. sourceMap?: boolean
  313. /**
  314. * SFC scoped styles ID
  315. */
  316. scopeId?: string | null
  317. /**
  318. * Option to optimize helper import bindings via variable assignment
  319. * (only used for webpack code-split)
  320. * @default false
  321. */
  322. optimizeImports?: boolean
  323. /**
  324. * Customize where to import runtime helpers from.
  325. * @default 'vue'
  326. */
  327. runtimeModuleName?: string
  328. /**
  329. * Customize where to import ssr runtime helpers from/**
  330. * @default 'vue/server-renderer'
  331. */
  332. ssrRuntimeModuleName?: string
  333. /**
  334. * Customize the global variable name of `Vue` to get helpers from
  335. * in function mode
  336. * @default 'Vue'
  337. */
  338. runtimeGlobalName?: string
  339. }
  340. export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions