vue 2.6.13 → 2.7.0-alpha.2

package/src/compiler/codegen/{index.js → index.ts}

@@ -1,34 +1,48 @@
-/* @flow */
-
 import { genHandlers } from './events'
 import baseDirectives from '../directives/index'
 import { camelize, no, extend } from 'shared/util'
 import { baseWarn, pluckModuleFunction } from '../helpers'
 import { emptySlotScopeToken } from '../parser/index'
-
-type TransformFunction = (el: ASTElement, code: string) => string;
-type DataGenFunction = (el: ASTElement) => string;
-type DirectiveFunction = (el: ASTElement, dir: ASTDirective, warn: Function) => boolean;
+import {
+  ASTAttr,
+  ASTDirective,
+  ASTElement,
+  ASTExpression,
+  ASTIfConditions,
+  ASTNode,
+  ASTText,
+  CompilerOptions
+} from 'types/compiler'
+
+type TransformFunction = (el: ASTElement, code: string) => string
+type DataGenFunction = (el: ASTElement) => string
+type DirectiveFunction = (
+  el: ASTElement,
+  dir: ASTDirective,
+  warn: Function
+) => boolean
 
 export class CodegenState {
-  options: CompilerOptions;
-  warn: Function;
-  transforms: Array<TransformFunction>;
-  dataGenFns: Array<DataGenFunction>;
-  directives: { [key: string]: DirectiveFunction };
-  maybeComponent: (el: ASTElement) => boolean;
-  onceId: number;
-  staticRenderFns: Array<string>;
-  pre: boolean;
-
-  constructor (options: CompilerOptions) {
+  options: CompilerOptions
+  warn: Function
+  transforms: Array<TransformFunction>
+  dataGenFns: Array<DataGenFunction>
+  directives: { [key: string]: DirectiveFunction }
+  maybeComponent: (el: ASTElement) => boolean
+  onceId: number
+  staticRenderFns: Array<string>
+  pre: boolean
+
+  constructor(options: CompilerOptions) {
     this.options = options
     this.warn = options.warn || baseWarn
+    //@ts-expect-error `this.transforms ` is a different type than `options.modules.transformCode`
     this.transforms = pluckModuleFunction(options.modules, 'transformCode')
     this.dataGenFns = pluckModuleFunction(options.modules, 'genData')
     this.directives = extend(extend({}, baseDirectives), options.directives)
     const isReservedTag = options.isReservedTag || no
-    this.maybeComponent = (el: ASTElement) => !!el.component || !isReservedTag(el.tag)
+    this.maybeComponent = (el: ASTElement) =>
+      !!el.component || !isReservedTag(el.tag)
     this.onceId = 0
     this.staticRenderFns = []
     this.pre = false
@@ -36,24 +50,28 @@ export class CodegenState {
 }
 
 export type CodegenResult = {
-  render: string,
+  render: string
   staticRenderFns: Array<string>
-};
+}
 
-export function generate (
+export function generate(
   ast: ASTElement | void,
   options: CompilerOptions
 ): CodegenResult {
   const state = new CodegenState(options)
   // fix #11483, Root level <script> tags should not be rendered.
-  const code = ast ? (ast.tag === 'script' ? 'null' : genElement(ast, state)) : '_c("div")'
+  const code = ast
+    ? ast.tag === 'script'
+      ? 'null'
+      : genElement(ast, state)
+    : '_c("div")'
   return {
     render: `with(this){return ${code}}`,
     staticRenderFns: state.staticRenderFns
   }
 }
 
-export function genElement (el: ASTElement, state: CodegenState): string {
+export function genElement(el: ASTElement, state: CodegenState): string {
   if (el.parent) {
     el.pre = el.pre || el.parent.pre
   }
@@ -97,7 +115,7 @@ export function genElement (el: ASTElement, state: CodegenState): string {
 }
 
 // hoist static sub-trees out
-function genStatic (el: ASTElement, state: CodegenState): string {
+function genStatic(el: ASTElement, state: CodegenState): string {
   el.staticProcessed = true
   // Some elements (templates) need to behave differently inside of a v-pre
   // node.  All pre nodes are static roots, so we can use this as a location to
@@ -108,15 +126,13 @@ function genStatic (el: ASTElement, state: CodegenState): string {
   }
   state.staticRenderFns.push(`with(this){return ${genElement(el, state)}}`)
   state.pre = originalPreState
-  return `_m(${
-    state.staticRenderFns.length - 1
-  }${
+  return `_m(${state.staticRenderFns.length - 1}${
     el.staticInFor ? ',true' : ''
   })`
 }
 
 // v-once
-function genOnce (el: ASTElement, state: CodegenState): string {
+function genOnce(el: ASTElement, state: CodegenState): string {
   el.onceProcessed = true
   if (el.if && !el.ifProcessed) {
     return genIf(el, state)
@@ -125,16 +141,17 @@ function genOnce (el: ASTElement, state: CodegenState): string {
     let parent = el.parent
     while (parent) {
       if (parent.for) {
-        key = parent.key
+        key = parent.key!
         break
       }
       parent = parent.parent
     }
     if (!key) {
-      process.env.NODE_ENV !== 'production' && state.warn(
-        `v-once can only be used inside v-for that is keyed. `,
-        el.rawAttrsMap['v-once']
-      )
+      __DEV__ &&
+        state.warn(
+          `v-once can only be used inside v-for that is keyed. `,
+          el.rawAttrsMap['v-once']
+        )
       return genElement(el, state)
     }
     return `_o(${genElement(el, state)},${state.onceId++},${key})`
@@ -143,7 +160,7 @@ function genOnce (el: ASTElement, state: CodegenState): string {
   }
 }
 
-export function genIf (
+export function genIf(
   el: any,
   state: CodegenState,
   altGen?: Function,
@@ -153,7 +170,7 @@ export function genIf (
   return genIfConditions(el.ifConditions.slice(), state, altGen, altEmpty)
 }
 
-function genIfConditions (
+function genIfConditions(
   conditions: ASTIfConditions,
   state: CodegenState,
   altGen?: Function,
@@ -163,28 +180,26 @@ function genIfConditions (
     return altEmpty || '_e()'
   }
 
-  const condition = conditions.shift()
+  const condition = conditions.shift()!
   if (condition.exp) {
-    return `(${condition.exp})?${
-      genTernaryExp(condition.block)
-    }:${
-      genIfConditions(conditions, state, altGen, altEmpty)
-    }`
+    return `(${condition.exp})?${genTernaryExp(
+      condition.block
+    )}:${genIfConditions(conditions, state, altGen, altEmpty)}`
   } else {
     return `${genTernaryExp(condition.block)}`
   }
 
   // v-if with v-once should generate code like (a)?_m(0):_m(1)
-  function genTernaryExp (el) {
+  function genTernaryExp(el) {
     return altGen
       ? altGen(el, state)
       : el.once
-        ? genOnce(el, state)
-        : genElement(el, state)
+      ? genOnce(el, state)
+      : genElement(el, state)
   }
 }
 
-export function genFor (
+export function genFor(
   el: any,
   state: CodegenState,
   altGen?: Function,
@@ -195,7 +210,8 @@ export function genFor (
   const iterator1 = el.iterator1 ? `,${el.iterator1}` : ''
   const iterator2 = el.iterator2 ? `,${el.iterator2}` : ''
 
-  if (process.env.NODE_ENV !== 'production' &&
+  if (
+    __DEV__ &&
     state.maybeComponent(el) &&
     el.tag !== 'slot' &&
     el.tag !== 'template' &&
@@ -203,21 +219,23 @@ export function genFor (
   ) {
     state.warn(
       `<${el.tag} v-for="${alias} in ${exp}">: component lists rendered with ` +
-      `v-for should have explicit keys. ` +
-      `See https://vuejs.org/guide/list.html#key for more info.`,
+        `v-for should have explicit keys. ` +
+        `See https://vuejs.org/guide/list.html#key for more info.`,
       el.rawAttrsMap['v-for'],
       true /* tip */
     )
   }
 
   el.forProcessed = true // avoid recursion
-  return `${altHelper || '_l'}((${exp}),` +
+  return (
+    `${altHelper || '_l'}((${exp}),` +
     `function(${alias}${iterator1}${iterator2}){` +
-      `return ${(altGen || genElement)(el, state)}` +
+    `return ${(altGen || genElement)(el, state)}` +
     '})'
+  )
 }
 
-export function genData (el: ASTElement, state: CodegenState): string {
+export function genData(el: ASTElement, state: CodegenState): string {
   let data = '{'
 
   // directives first.
@@ -274,13 +292,7 @@ export function genData (el: ASTElement, state: CodegenState): string {
   }
   // component v-model
   if (el.model) {
-    data += `model:{value:${
-      el.model.value
-    },callback:${
-      el.model.callback
-    },expression:${
-      el.model.expression
-    }},`
+    data += `model:{value:${el.model.value},callback:${el.model.callback},expression:${el.model.expression}},`
   }
   // inline-template
   if (el.inlineTemplate) {
@@ -307,7 +319,7 @@ export function genData (el: ASTElement, state: CodegenState): string {
   return data
 }
 
-function genDirectives (el: ASTElement, state: CodegenState): string | void {
+function genDirectives(el: ASTElement, state: CodegenState): string | void {
   const dirs = el.directives
   if (!dirs) return
   let res = 'directives:['
@@ -325,10 +337,10 @@ function genDirectives (el: ASTElement, state: CodegenState): string | void {
     if (needRuntime) {
       hasRuntime = true
       res += `{name:"${dir.name}",rawName:"${dir.rawName}"${
-        dir.value ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}` : ''
-      }${
-        dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''
-      }${
+        dir.value
+          ? `,value:(${dir.value}),expression:${JSON.stringify(dir.value)}`
+          : ''
+      }${dir.arg ? `,arg:${dir.isDynamicArg ? dir.arg : `"${dir.arg}"`}` : ''}${
         dir.modifiers ? `,modifiers:${JSON.stringify(dir.modifiers)}` : ''
       }},`
     }
@@ -338,11 +350,12 @@ function genDirectives (el: ASTElement, state: CodegenState): string | void {
   }
 }
 
-function genInlineTemplate (el: ASTElement, state: CodegenState): ?string {
+function genInlineTemplate(
+  el: ASTElement,
+  state: CodegenState
+): string | undefined {
   const ast = el.children[0]
-  if (process.env.NODE_ENV !== 'production' && (
-    el.children.length !== 1 || ast.type !== 1
-  )) {
+  if (__DEV__ && (el.children.length !== 1 || ast.type !== 1)) {
     state.warn(
       'Inline-template components must have exactly one child element.',
       { start: el.start }
@@ -352,13 +365,13 @@ function genInlineTemplate (el: ASTElement, state: CodegenState): ?string {
     const inlineRenderFns = generate(ast, state.options)
     return `inlineTemplate:{render:function(){${
       inlineRenderFns.render
-    }},staticRenderFns:[${
-      inlineRenderFns.staticRenderFns.map(code => `function(){${code}}`).join(',')
-    }]}`
+    }},staticRenderFns:[${inlineRenderFns.staticRenderFns
+      .map(code => `function(){${code}}`)
+      .join(',')}]}`
   }
 }
 
-function genScopedSlots (
+function genScopedSlots(
   el: ASTElement,
   slots: { [key: string]: ASTElement },
   state: CodegenState
@@ -367,15 +380,14 @@ function genScopedSlots (
   // components with only scoped slots to skip forced updates from parent.
   // but in some cases we have to bail-out of this optimization
   // for example if the slot contains dynamic names, has v-if or v-for on them...
-  let needsForceUpdate = el.for || Object.keys(slots).some(key => {
-    const slot = slots[key]
-    return (
-      slot.slotTargetDynamic ||
-      slot.if ||
-      slot.for ||
-      containsSlotChild(slot) // is passing down slot from parent which may be dynamic
-    )
-  })
+  let needsForceUpdate =
+    el.for ||
+    Object.keys(slots).some(key => {
+      const slot = slots[key]
+      return (
+        slot.slotTargetDynamic || slot.if || slot.for || containsSlotChild(slot) // is passing down slot from parent which may be dynamic
+      )
+    })
 
   // #9534: if a component with scoped slots is inside a conditional branch,
   // it's possible for the same component to be reused but with different
@@ -419,13 +431,13 @@ function genScopedSlots (
 function hash(str) {
   let hash = 5381
   let i = str.length
-  while(i) {
+  while (i) {
     hash = (hash * 33) ^ str.charCodeAt(--i)
   }
   return hash >>> 0
 }
 
-function containsSlotChild (el: ASTNode): boolean {
+function containsSlotChild(el: ASTNode): boolean {
   if (el.type === 1) {
     if (el.tag === 'slot') {
       return true
@@ -435,10 +447,7 @@ function containsSlotChild (el: ASTNode): boolean {
   return false
 }
 
-function genScopedSlot (
-  el: ASTElement,
-  state: CodegenState
-): string {
+function genScopedSlot(el: ASTElement, state: CodegenState): string {
   const isLegacySyntax = el.attrsMap['slot-scope']
   if (el.if && !el.ifProcessed && !isLegacySyntax) {
     return genIf(el, state, genScopedSlot, `null`)
@@ -446,22 +455,23 @@ function genScopedSlot (
   if (el.for && !el.forProcessed) {
     return genFor(el, state, genScopedSlot)
   }
-  const slotScope = el.slotScope === emptySlotScopeToken
-    ? ``
-    : String(el.slotScope)
-  const fn = `function(${slotScope}){` +
-    `return ${el.tag === 'template'
-      ? el.if && isLegacySyntax
-        ? `(${el.if})?${genChildren(el, state) || 'undefined'}:undefined`
-        : genChildren(el, state) || 'undefined'
-      : genElement(el, state)
+  const slotScope =
+    el.slotScope === emptySlotScopeToken ? `` : String(el.slotScope)
+  const fn =
+    `function(${slotScope}){` +
+    `return ${
+      el.tag === 'template'
+        ? el.if && isLegacySyntax
+          ? `(${el.if})?${genChildren(el, state) || 'undefined'}:undefined`
+          : genChildren(el, state) || 'undefined'
+        : genElement(el, state)
     }}`
   // reverse proxy v-slot without scope on this.$slots
   const reverseProxy = slotScope ? `` : `,proxy:true`
   return `{key:${el.slotTarget || `"default"`},fn:${fn}${reverseProxy}}`
 }
 
-export function genChildren (
+export function genChildren(
   el: ASTElement,
   state: CodegenState,
   checkSkip?: boolean,
@@ -472,13 +482,16 @@ export function genChildren (
   if (children.length) {
     const el: any = children[0]
     // optimize single v-for
-    if (children.length === 1 &&
+    if (
+      children.length === 1 &&
       el.for &&
       el.tag !== 'template' &&
       el.tag !== 'slot'
     ) {
       const normalizationType = checkSkip
-        ? state.maybeComponent(el) ? `,1` : `,0`
+        ? state.maybeComponent(el)
+          ? `,1`
+          : `,0`
         : ``
       return `${(altGenElement || genElement)(el, state)}${normalizationType}`
     }
@@ -496,7 +509,7 @@ export function genChildren (
 // 0: no normalization needed
 // 1: simple normalization needed (possible 1-level deep nested array)
 // 2: full normalization needed
-function getNormalizationType (
+function getNormalizationType(
   children: Array<ASTNode>,
   maybeComponent: (el: ASTElement) => boolean
 ): number {
@@ -506,24 +519,29 @@ function getNormalizationType (
     if (el.type !== 1) {
       continue
     }
-    if (needsNormalization(el) ||
-        (el.ifConditions && el.ifConditions.some(c => needsNormalization(c.block)))) {
+    if (
+      needsNormalization(el) ||
+      (el.ifConditions &&
+        el.ifConditions.some(c => needsNormalization(c.block)))
+    ) {
       res = 2
       break
     }
-    if (maybeComponent(el) ||
-        (el.ifConditions && el.ifConditions.some(c => maybeComponent(c.block)))) {
+    if (
+      maybeComponent(el) ||
+      (el.ifConditions && el.ifConditions.some(c => maybeComponent(c.block)))
+    ) {
       res = 1
     }
   }
   return res
 }
 
-function needsNormalization (el: ASTElement): boolean {
+function needsNormalization(el: ASTElement): boolean {
   return el.for !== undefined || el.tag === 'template' || el.tag === 'slot'
 }
 
-function genNode (node: ASTNode, state: CodegenState): string {
+function genNode(node: ASTNode, state: CodegenState): string {
   if (node.type === 1) {
     return genElement(node, state)
   } else if (node.type === 3 && node.isComment) {
@@ -533,29 +551,33 @@ function genNode (node: ASTNode, state: CodegenState): string {
   }
 }
 
-export function genText (text: ASTText | ASTExpression): string {
-  return `_v(${text.type === 2
-    ? text.expression // no need for () because already wrapped in _s()
-    : transformSpecialNewlines(JSON.stringify(text.text))
+export function genText(text: ASTText | ASTExpression): string {
+  return `_v(${
+    text.type === 2
+      ? text.expression // no need for () because already wrapped in _s()
+      : transformSpecialNewlines(JSON.stringify(text.text))
   })`
 }
 
-export function genComment (comment: ASTText): string {
+export function genComment(comment: ASTText): string {
   return `_e(${JSON.stringify(comment.text)})`
 }
 
-function genSlot (el: ASTElement, state: CodegenState): string {
+function genSlot(el: ASTElement, state: CodegenState): string {
   const slotName = el.slotName || '"default"'
   const children = genChildren(el, state)
   let res = `_t(${slotName}${children ? `,function(){return ${children}}` : ''}`
-  const attrs = el.attrs || el.dynamicAttrs
-    ? genProps((el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
-        // slot props are camelized
-        name: camelize(attr.name),
-        value: attr.value,
-        dynamic: attr.dynamic
-      })))
-    : null
+  const attrs =
+    el.attrs || el.dynamicAttrs
+      ? genProps(
+          (el.attrs || []).concat(el.dynamicAttrs || []).map(attr => ({
+            // slot props are camelized
+            name: camelize(attr.name),
+            value: attr.value,
+            dynamic: attr.dynamic
+          }))
+        )
+      : null
   const bind = el.attrsMap['v-bind']
   if ((attrs || bind) && !children) {
     res += `,null`
@@ -570,7 +592,7 @@ function genSlot (el: ASTElement, state: CodegenState): string {
 }
 
 // componentName is el.component, take it as argument to shun flow's pessimistic refinement
-function genComponent (
+function genComponent(
   componentName: string,
   el: ASTElement,
   state: CodegenState
@@ -581,14 +603,12 @@ function genComponent (
   })`
 }
 
-function genProps (props: Array<ASTAttr>): string {
+function genProps(props: Array<ASTAttr>): string {
   let staticProps = ``
   let dynamicProps = ``
   for (let i = 0; i < props.length; i++) {
     const prop = props[i]
-    const value = __WEEX__
-      ? generateValue(prop.value)
-      : transformSpecialNewlines(prop.value)
+    const value = transformSpecialNewlines(prop.value)
     if (prop.dynamic) {
       dynamicProps += `${prop.name},${value},`
     } else {
@@ -603,17 +623,7 @@ function genProps (props: Array<ASTAttr>): string {
   }
 }
 
-/* istanbul ignore next */
-function generateValue (value) {
-  if (typeof value === 'string') {
-    return transformSpecialNewlines(value)
-  }
-  return JSON.stringify(value)
-}
-
 // #3895, #4268
-function transformSpecialNewlines (text: string): string {
-  return text
-    .replace(/\u2028/g, '\\u2028')
-    .replace(/\u2029/g, '\\u2029')
+function transformSpecialNewlines(text: string): string {
+  return text.replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')
 }

package/src/compiler/{create-compiler.js → create-compiler.ts}

@@ -1,30 +1,37 @@
-/* @flow */
-
 import { extend } from 'shared/util'
+import { CompilerOptions, CompiledResult, WarningMessage } from 'types/compiler'
 import { detectErrors } from './error-detector'
 import { createCompileToFunctionFn } from './to-function'
 
-export function createCompilerCreator (baseCompile: Function): Function {
-  return function createCompiler (baseOptions: CompilerOptions) {
-    function compile (
+export function createCompilerCreator(baseCompile: Function): Function {
+  return function createCompiler(baseOptions: CompilerOptions) {
+    function compile(
       template: string,
       options?: CompilerOptions
     ): CompiledResult {
       const finalOptions = Object.create(baseOptions)
-      const errors = []
-      const tips = []
+      const errors: WarningMessage[] = []
+      const tips: WarningMessage[] = []
 
-      let warn = (msg, range, tip) => {
-        (tip ? tips : errors).push(msg)
+      let warn = (
+        msg: WarningMessage,
+        range: { start: number; end: number },
+        tip: string
+      ) => {
+        ;(tip ? tips : errors).push(msg)
       }
 
       if (options) {
-        if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
+        if (__DEV__ && options.outputSourceRange) {
           // $flow-disable-line
-          const leadingSpaceLength = template.match(/^\s*/)[0].length
+          const leadingSpaceLength = template.match(/^\s*/)![0].length
 
-          warn = (msg, range, tip) => {
-            const data: WarningMessage = { msg }
+          warn = (
+            msg: WarningMessage | string,
+            range: { start: number; end: number },
+            tip: string
+          ) => {
+            const data: WarningMessage = typeof msg === 'string' ? { msg } : msg
             if (range) {
               if (range.start != null) {
                 data.start = range.start + leadingSpaceLength
@@ -33,13 +40,14 @@ export function createCompilerCreator (baseCompile: Function): Function {
                 data.end = range.end + leadingSpaceLength
               }
             }
-            (tip ? tips : errors).push(data)
+            ;(tip ? tips : errors).push(data)
           }
         }
         // merge custom modules
         if (options.modules) {
-          finalOptions.modules =
-            (baseOptions.modules || []).concat(options.modules)
+          finalOptions.modules = (baseOptions.modules || []).concat(
+            options.modules
+          )
         }
         // merge custom directives
         if (options.directives) {
@@ -51,7 +59,7 @@ export function createCompilerCreator (baseCompile: Function): Function {
         // copy other options
         for (const key in options) {
           if (key !== 'modules' && key !== 'directives') {
-            finalOptions[key] = options[key]
+            finalOptions[key] = options[key as keyof CompilerOptions]
           }
         }
       }
@@ -59,7 +67,7 @@ export function createCompilerCreator (baseCompile: Function): Function {
       finalOptions.warn = warn
 
       const compiled = baseCompile(template.trim(), finalOptions)
-      if (process.env.NODE_ENV !== 'production') {
+      if (__DEV__) {
         detectErrors(compiled.ast, warn)
       }
       compiled.errors = errors

package/src/compiler/directives/bind.ts

@@ -0,0 +1,9 @@
+import { ASTDirective, ASTElement } from 'types/compiler'
+
+export default function bind(el: ASTElement, dir: ASTDirective) {
+  el.wrapData = (code: string) => {
+    return `_b(${code},'${el.tag}',${dir.value},${
+      dir.modifiers && dir.modifiers.prop ? 'true' : 'false'
+    }${dir.modifiers && dir.modifiers.sync ? ',true' : ''})`
+  }
+}

package/src/compiler/directives/{index.js → index.ts}

@@ -1,5 +1,3 @@
-/* @flow */
-
 import on from './on'
 import bind from './bind'
 import { noop } from 'shared/util'