error-detector.ts 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import { ASTElement, ASTNode } from 'types/compiler'
  2. import { dirRE, onRE } from './parser/index'
  3. type Range = { start?: number; end?: number }
  4. // these keywords should not appear inside expressions, but operators like
  5. // typeof, instanceof and in are allowed
  6. const prohibitedKeywordRE = new RegExp(
  7. '\\b' +
  8. (
  9. 'do,if,for,let,new,try,var,case,else,with,await,break,catch,class,const,' +
  10. 'super,throw,while,yield,delete,export,import,return,switch,default,' +
  11. 'extends,finally,continue,debugger,function,arguments'
  12. )
  13. .split(',')
  14. .join('\\b|\\b') +
  15. '\\b'
  16. )
  17. // these unary operators should not be used as property/method names
  18. const unaryOperatorsRE = new RegExp(
  19. '\\b' +
  20. 'delete,typeof,void'.split(',').join('\\s*\\([^\\)]*\\)|\\b') +
  21. '\\s*\\([^\\)]*\\)'
  22. )
  23. // strip strings in expressions
  24. const stripStringRE =
  25. /'(?:[^'\\]|\\.)*'|"(?:[^"\\]|\\.)*"|`(?:[^`\\]|\\.)*\$\{|\}(?:[^`\\]|\\.)*`|`(?:[^`\\]|\\.)*`/g
  26. // detect problematic expressions in a template
  27. export function detectErrors(ast: ASTNode | undefined, warn: Function) {
  28. if (ast) {
  29. checkNode(ast, warn)
  30. }
  31. }
  32. function checkNode(node: ASTNode, warn: Function) {
  33. if (node.type === 1) {
  34. for (const name in node.attrsMap) {
  35. if (dirRE.test(name)) {
  36. const value = node.attrsMap[name]
  37. if (value) {
  38. const range = node.rawAttrsMap[name]
  39. if (name === 'v-for') {
  40. checkFor(node, `v-for="${value}"`, warn, range)
  41. } else if (name === 'v-slot' || name[0] === '#') {
  42. checkFunctionParameterExpression(
  43. value,
  44. `${name}="${value}"`,
  45. warn,
  46. range
  47. )
  48. } else if (onRE.test(name)) {
  49. checkEvent(value, `${name}="${value}"`, warn, range)
  50. } else {
  51. checkExpression(value, `${name}="${value}"`, warn, range)
  52. }
  53. }
  54. }
  55. }
  56. if (node.children) {
  57. for (let i = 0; i < node.children.length; i++) {
  58. checkNode(node.children[i], warn)
  59. }
  60. }
  61. } else if (node.type === 2) {
  62. checkExpression(node.expression, node.text, warn, node)
  63. }
  64. }
  65. function checkEvent(exp: string, text: string, warn: Function, range?: Range) {
  66. const stripped = exp.replace(stripStringRE, '')
  67. const keywordMatch: any = stripped.match(unaryOperatorsRE)
  68. if (keywordMatch && stripped.charAt(keywordMatch.index - 1) !== '$') {
  69. warn(
  70. `avoid using JavaScript unary operator as property name: ` +
  71. `"${keywordMatch[0]}" in expression ${text.trim()}`,
  72. range
  73. )
  74. }
  75. checkExpression(exp, text, warn, range)
  76. }
  77. function checkFor(
  78. node: ASTElement,
  79. text: string,
  80. warn: Function,
  81. range?: Range
  82. ) {
  83. checkExpression(node.for || '', text, warn, range)
  84. checkIdentifier(node.alias, 'v-for alias', text, warn, range)
  85. checkIdentifier(node.iterator1, 'v-for iterator', text, warn, range)
  86. checkIdentifier(node.iterator2, 'v-for iterator', text, warn, range)
  87. }
  88. function checkIdentifier(
  89. ident: string | null | undefined,
  90. type: string,
  91. text: string,
  92. warn: Function,
  93. range?: Range
  94. ) {
  95. if (typeof ident === 'string') {
  96. try {
  97. new Function(`var ${ident}=_`)
  98. } catch (e: any) {
  99. warn(`invalid ${type} "${ident}" in expression: ${text.trim()}`, range)
  100. }
  101. }
  102. }
  103. function checkExpression(
  104. exp: string,
  105. text: string,
  106. warn: Function,
  107. range?: Range
  108. ) {
  109. try {
  110. new Function(`return ${exp}`)
  111. } catch (e: any) {
  112. const keywordMatch = exp
  113. .replace(stripStringRE, '')
  114. .match(prohibitedKeywordRE)
  115. if (keywordMatch) {
  116. warn(
  117. `avoid using JavaScript keyword as property name: ` +
  118. `"${keywordMatch[0]}"\n Raw expression: ${text.trim()}`,
  119. range
  120. )
  121. } else {
  122. warn(
  123. `invalid expression: ${e.message} in\n\n` +
  124. ` ${exp}\n\n` +
  125. ` Raw expression: ${text.trim()}\n`,
  126. range
  127. )
  128. }
  129. }
  130. }
  131. function checkFunctionParameterExpression(
  132. exp: string,
  133. text: string,
  134. warn: Function,
  135. range?: Range
  136. ) {
  137. try {
  138. new Function(exp, '')
  139. } catch (e: any) {
  140. warn(
  141. `invalid function parameter expression: ${e.message} in\n\n` +
  142. ` ${exp}\n\n` +
  143. ` Raw expression: ${text.trim()}\n`,
  144. range
  145. )
  146. }
  147. }