dx(compiler-core): warn for :v-

Author: skirtles-code

packages/compiler-core/__tests__/parse.spec.ts

@@ -1990,7 +1990,7 @@ foo
       })
       expect(ast.children[2].type).toBe(NodeTypes.INTERPOLATION)
     })
-    
+
     it('should NOT remove whitespaces w/o newline between elements', () => {
       const ast = parse(`<div/> <div/> <div/>`)
       expect(ast.children.length).toBe(5)
@@ -2131,7 +2131,8 @@ foo
     const patterns: {
       [key: string]: Array<{
         code: string
-        errors: Array<{ type: ErrorCodes; loc: Position }>
+        errors?: Array<{ type: ErrorCodes; loc: Position }>
+        warnings?: Array<{ type: ErrorCodes; loc: Position }>
         options?: Partial<ParserOptions>
       }>
     } = {
@@ -3022,19 +3023,33 @@ foo
             }
           ]
         }
+      ],
+      X_COLON_BEFORE_DIRECTIVE: [
+        {
+          code: `<div :v-foo="obj" />`,
+          warnings: [
+            {
+              type: ErrorCodes.X_COLON_BEFORE_DIRECTIVE,
+              loc: { offset: 5, line: 1, column: 6 }
+            }
+          ]
+        }
       ]
     }
 
     for (const key of Object.keys(patterns) as (keyof typeof patterns)[]) {
       describe(key, () => {
-        for (const { code, errors, options } of patterns[key]) {
+        for (const { code, errors = [], warnings = [], options } of patterns[
+          key
+        ]) {
           test(
             code.replace(
               /[\r\n]/g,
               c => `\\x0${c.codePointAt(0)!.toString(16)};`
             ),
             () => {
-              const spy = jest.fn()
+              const errorSpy = jest.fn()
+              const warnSpy = jest.fn()
               const ast = baseParse(code, {
                 getNamespace: (tag, parent) => {
                   const ns = parent ? parent.ns : Namespaces.HTML
@@ -3055,15 +3070,22 @@ foo
                   return TextModes.DATA
                 },
                 ...options,
-                onError: spy
+                onError: errorSpy,
+                onWarn: warnSpy
               })
 
               expect(
-                spy.mock.calls.map(([err]) => ({
+                errorSpy.mock.calls.map(([err]) => ({
                   type: err.code,
                   loc: err.loc.start
                 }))
               ).toMatchObject(errors)
+              expect(
+                warnSpy.mock.calls.map(([err]) => ({
+                  type: err.code,
+                  loc: err.loc.start
+                }))
+              ).toMatchObject(warnings)
               expect(ast).toMatchSnapshot()
             }
           )

packages/compiler-core/src/errors.ts

@@ -90,6 +90,7 @@ export const enum ErrorCodes {
   X_V_MODEL_ON_PROPS,
   X_INVALID_EXPRESSION,
   X_KEEP_ALIVE_INVALID_CHILDREN,
+  X_COLON_BEFORE_DIRECTIVE,
 
   // generic errors
   X_PREFIX_ID_NOT_SUPPORTED,
@@ -172,6 +173,7 @@ export const errorMessages: Record<ErrorCodes, string> = {
   [ErrorCodes.X_V_MODEL_ON_PROPS]: `v-model cannot be used on a prop, because local prop bindings are not writable.\nUse a v-bind binding combined with a v-on listener that emits update:x event instead.`,
   [ErrorCodes.X_INVALID_EXPRESSION]: `Error parsing JavaScript expression: `,
   [ErrorCodes.X_KEEP_ALIVE_INVALID_CHILDREN]: `<KeepAlive> expects exactly one child component.`,
+  [ErrorCodes.X_COLON_BEFORE_DIRECTIVE]: `Colon before directive: `,
 
   // generic errors
   [ErrorCodes.X_PREFIX_ID_NOT_SUPPORTED]: `"prefixIdentifiers" option is not supported in this build of compiler.`,

packages/compiler-core/src/parse.ts

@@ -273,10 +273,10 @@ function parseChildren(
               (shouldCondense &&
                 ((prev.type === NodeTypes.COMMENT &&
                   next.type === NodeTypes.COMMENT) ||
-                  (prev.type === NodeTypes.COMMENT && 
-                  next.type === NodeTypes.ELEMENT) ||
+                  (prev.type === NodeTypes.COMMENT &&
+                    next.type === NodeTypes.ELEMENT) ||
                   (prev.type === NodeTypes.ELEMENT &&
-                  next.type === NodeTypes.COMMENT) ||
+                    next.type === NodeTypes.COMMENT) ||
                   (prev.type === NodeTypes.ELEMENT &&
                     next.type === NodeTypes.ELEMENT &&
                     /[\r\n]/.test(node.content))))
@@ -813,6 +813,22 @@ function parseAttribute(
         : startsWith(name, '@')
         ? 'on'
         : 'slot')
+
+    if (__DEV__) {
+      if (name.startsWith(':v-')) {
+        context.options.onWarn(
+          createCompilerError(
+            ErrorCodes.X_COLON_BEFORE_DIRECTIVE,
+            loc,
+            undefined,
+            `the attribute name ${name} is probably a mistake. Did you mean ${name.slice(
+              1
+            )} instead?`
+          )
+        )
+      }
+    }
+
     let arg: ExpressionNode | undefined
 
     if (match[2]) {