feat(compiler): transform vShow

packages/compiler/__tests__/transforms/vShow.spec.ts

@@ -0,0 +1,43 @@
+// todo: uncomment when vue-next#907 is released
+test.todo('uncomment when vue-next#907 is released')
+// import {
+//   baseParse as parse,
+//   transform,
+//   generate,
+//   CompilerOptions,
+//   transformElement
+// } from '@vue/compiler-core'
+// import { transformShow } from '../../src/transforms/vShow'
+// import { DOMErrorCodes } from '../../src/errors'
+//
+// function transformWithShow(template: string, options: CompilerOptions = {}) {
+//   const ast = parse(template)
+//   transform(ast, {
+//     nodeTransforms: [transformElement],
+//     directiveTransforms: {
+//       show: transformShow
+//     },
+//     ...options
+//   })
+//   return ast
+// }
+//
+// describe('compiler: v-show transform', () => {
+//   test('simple expression', () => {
+//     const ast = transformWithShow(`<Label v-show="a"/>`)
+//
+//     expect(generate(ast).code).toMatchSnapshot()
+//   })
+//
+//   test('should raise error if has no expression', () => {
+//     const onError = jest.fn()
+//     transformWithShow(`<Label v-show/>`, { onError })
+//
+//     expect(onError).toHaveBeenCalledTimes(1)
+//     expect(onError).toHaveBeenCalledWith(
+//       expect.objectContaining({
+//         code: DOMErrorCodes.X_V_SHOW_NO_EXPRESSION
+//       })
+//     )
+//   })
+// })

packages/compiler/src/index.ts

@@ -15,7 +15,7 @@ import { transformStyle } from './transforms/transformStyle'
 import { transformVText } from './transforms/vText'
 import { transformModel } from './transforms/vModel'
 import { transformOn } from './transforms/vOn'
-// import { transformShow } from './transforms/vShow'
+import { transformShow } from './transforms/vShow'
 // import { warnTransitionChildren } from './transforms/warnTransitionChildren'
 // import { stringifyStatic } from './transforms/stringifyStatic'
 
@@ -30,8 +30,8 @@ export const DOMDirectiveTransforms: Record<string, DirectiveTransform> = {
   cloak: noopDirectiveTransform,
   text: transformVText,
   model: transformModel, // override compiler-core todo: remove if not needed
-  on: transformOn // override compiler-core todo: remove if not needed
-  // show: transformShow
+  on: transformOn, // override compiler-core todo: remove if not needed
+  show: transformShow
 }
 
 export function compile(

packages/compiler/src/transforms/vShow.ts

@@ -0,0 +1,17 @@
+import { DirectiveTransform } from '@vue/compiler-core'
+import { createDOMCompilerError, DOMErrorCodes } from '../errors'
+import { V_SHOW } from '../runtimeHelpers'
+
+export const transformShow: DirectiveTransform = (dir, node, context) => {
+  const { exp, loc } = dir
+  if (!exp) {
+    context.onError(
+      createDOMCompilerError(DOMErrorCodes.X_V_SHOW_NO_EXPRESSION, loc)
+    )
+  }
+
+  return {
+    props: [],
+    needRuntime: context.helper(V_SHOW)
+  }
+}