Evan You 02cbbb718c perf: support only attaching slot scope ids when necessary
This is done by adding the `slotted: false` option to:

- compiler-dom
- compiler-ssr
- compiler-sfc (forwarded to template compiler)

At runtime, only slotted component will render slot fragments with
slot scope Ids. For SSR, only slotted component will add slot scope Ids
to rendered slot content. This should improve both runtime performance
and reduce SSR rendered markup size.

Note: requires SFC tooling (e.g. `vue-loader` and `vite`) to pass on
the `slotted` option from the SFC descriptoer to the `compileTemplate`
call.
2021-03-05 18:28:12 -05:00

257 lines
7.5 KiB
TypeScript

import { ElementNode, Namespace, TemplateChildNode, ParentNode } from './ast'
import { TextModes } from './parse'
import { CompilerError } from './errors'
import {
NodeTransform,
DirectiveTransform,
TransformContext
} from './transform'
import { ParserPlugin } from '@babel/parser'
export interface ParserOptions {
/**
* e.g. platform native elements, e.g. `<div>` for browsers
*/
isNativeTag?: (tag: string) => boolean
/**
* e.g. native elements that can self-close, e.g. `<img>`, `<br>`, `<hr>`
*/
isVoidTag?: (tag: string) => boolean
/**
* e.g. elements that should preserve whitespace inside, e.g. `<pre>`
*/
isPreTag?: (tag: string) => boolean
/**
* Platform-specific built-in components e.g. `<Transition>`
*/
isBuiltInComponent?: (tag: string) => symbol | void
/**
* Separate option for end users to extend the native elements list
*/
isCustomElement?: (tag: string) => boolean | void
/**
* Get tag namespace
*/
getNamespace?: (tag: string, parent: ElementNode | undefined) => Namespace
/**
* Get text parsing mode for this element
*/
getTextMode?: (
node: ElementNode,
parent: ElementNode | undefined
) => TextModes
/**
* @default ['{{', '}}']
*/
delimiters?: [string, string]
/**
* Only needed for DOM compilers
*/
decodeEntities?: (rawText: string, asAttr: boolean) => string
onError?: (error: CompilerError) => void
/**
* Keep comments in the templates AST, even in production
*/
comments?: boolean
}
export type HoistTransform = (
children: TemplateChildNode[],
context: TransformContext,
parent: ParentNode
) => void
export const enum BindingTypes {
/**
* returned from data()
*/
DATA = 'data',
/**
* decalred as a prop
*/
PROPS = 'props',
/**
* a let binding (may or may not be a ref)
*/
SETUP_LET = 'setup-let',
/**
* a const binding that can never be a ref.
* these bindings don't need `unref()` calls when processed in inlined
* template expressions.
*/
SETUP_CONST = 'setup-const',
/**
* a const binding that may be a ref.
*/
SETUP_MAYBE_REF = 'setup-maybe-ref',
/**
* bindings that are guaranteed to be refs
*/
SETUP_REF = 'setup-ref',
/**
* declared by other options, e.g. computed, inject
*/
OPTIONS = 'options'
}
export interface BindingMetadata {
[key: string]: BindingTypes | undefined
}
interface SharedTransformCodegenOptions {
/**
* Transform expressions like {{ foo }} to `_ctx.foo`.
* If this option is false, the generated code will be wrapped in a
* `with (this) { ... }` block.
* - This is force-enabled in module mode, since modules are by default strict
* and cannot use `with`
* @default mode === 'module'
*/
prefixIdentifiers?: boolean
/**
* Generate SSR-optimized render functions instead.
* The resulting function must be attached to the component via the
* `ssrRender` option instead of `render`.
*/
ssr?: boolean
/**
* Optional binding metadata analyzed from script - used to optimize
* binding access when `prefixIdentifiers` is enabled.
*/
bindingMetadata?: BindingMetadata
/**
* Compile the function for inlining inside setup().
* This allows the function to directly access setup() local bindings.
*/
inline?: boolean
/**
* Indicates that transforms and codegen should try to output valid TS code
*/
isTS?: boolean
/**
* Filename for source map generation.
* Also used for self-recursive reference in templates
* @default 'template.vue.html'
*/
filename?: string
}
export interface TransformOptions extends SharedTransformCodegenOptions {
/**
* An array of node transforms to be applied to every AST node.
*/
nodeTransforms?: NodeTransform[]
/**
* An object of { name: transform } to be applied to every directive attribute
* node found on element nodes.
*/
directiveTransforms?: Record<string, DirectiveTransform | undefined>
/**
* An optional hook to transform a node being hoisted.
* used by compiler-dom to turn hoisted nodes into stringified HTML vnodes.
* @default null
*/
transformHoist?: HoistTransform | null
/**
* If the pairing runtime provides additional built-in elements, use this to
* mark them as built-in so the compiler will generate component vnodes
* for them.
*/
isBuiltInComponent?: (tag: string) => symbol | void
/**
* Used by some transforms that expects only native elements
*/
isCustomElement?: (tag: string) => boolean | void
/**
* Transform expressions like {{ foo }} to `_ctx.foo`.
* If this option is false, the generated code will be wrapped in a
* `with (this) { ... }` block.
* - This is force-enabled in module mode, since modules are by default strict
* and cannot use `with`
* @default mode === 'module'
*/
prefixIdentifiers?: boolean
/**
* Hoist static VNodes and props objects to `_hoisted_x` constants
* @default false
*/
hoistStatic?: boolean
/**
* Cache v-on handlers to avoid creating new inline functions on each render,
* also avoids the need for dynamically patching the handlers by wrapping it.
* e.g `@click="foo"` by default is compiled to `{ onClick: foo }`. With this
* option it's compiled to:
* ```js
* { onClick: _cache[0] || (_cache[0] = e => _ctx.foo(e)) }
* ```
* - Requires "prefixIdentifiers" to be enabled because it relies on scope
* analysis to determine if a handler is safe to cache.
* @default false
*/
cacheHandlers?: boolean
/**
* A list of parser plugins to enable for `@babel/parser`, which is used to
* parse expressions in bindings and interpolations.
* https://babeljs.io/docs/en/next/babel-parser#plugins
*/
expressionPlugins?: ParserPlugin[]
/**
* SFC scoped styles ID
*/
scopeId?: string | null
/**
* Indicates this SFC template has used :slotted in its styles
* Defaults to `true` for backwards compatibility - SFC tooling should set it
* to `false` if no `:slotted` usage is detected in `<style>`
*/
slotted?: boolean
/**
* SFC `<style vars>` injection string
* Should already be an object expression, e.g. `{ 'xxxx-color': color }`
* needed to render inline CSS variables on component root
*/
ssrCssVars?: string
onError?: (error: CompilerError) => void
}
export interface CodegenOptions extends SharedTransformCodegenOptions {
/**
* - `module` mode will generate ES module import statements for helpers
* and export the render function as the default export.
* - `function` mode will generate a single `const { helpers... } = Vue`
* statement and return the render function. It expects `Vue` to be globally
* available (or passed by wrapping the code with an IIFE). It is meant to be
* used with `new Function(code)()` to generate a render function at runtime.
* @default 'function'
*/
mode?: 'module' | 'function'
/**
* Generate source map?
* @default false
*/
sourceMap?: boolean
/**
* SFC scoped styles ID
*/
scopeId?: string | null
/**
* Option to optimize helper import bindings via variable assignment
* (only used for webpack code-split)
* @default false
*/
optimizeImports?: boolean
/**
* Customize where to import runtime helpers from.
* @default 'vue'
*/
runtimeModuleName?: string
/**
* Customize the global variable name of `Vue` to get helpers from
* in function mode
* @default 'Vue'
*/
runtimeGlobalName?: string
}
export type CompilerOptions = ParserOptions & TransformOptions & CodegenOptions