diff --git a/packages/compiler-dom/__tests__/transforms/vCloak.spec.ts b/packages/compiler-dom/__tests__/transforms/vCloak.spec.ts new file mode 100644 index 00000000000..a9c84a4652c --- /dev/null +++ b/packages/compiler-dom/__tests__/transforms/vCloak.spec.ts @@ -0,0 +1,32 @@ +import { + parse, + transform, + CompilerOptions, + ElementNode +} from '@vue/compiler-core' +import { transformCloak } from '../../src/transforms/vCloak' +import { transformElement } from '../../../compiler-core/src/transforms/transformElement' +import { CallExpression } from '../../src' + +function transformWithCloak(template: string, options: CompilerOptions = {}) { + const ast = parse(template) + transform(ast, { + nodeTransforms: [transformElement], + directiveTransforms: { + cloak: transformCloak + }, + ...options + }) + return ast.children[0] as ElementNode +} + +describe('compiler: `v-cloak` transform', () => { + test('should add no props to DOM', () => { + const node = transformWithCloak(`
`) + const codegenArgs = (node.codegenNode as CallExpression).arguments + + // As v-cloak adds no properties the codegen should be identical to + // rendering a div with no props or reactive data (so just the tag as the arg) + expect(codegenArgs.length).toBe(1) + }) +}) diff --git a/packages/compiler-dom/src/index.ts b/packages/compiler-dom/src/index.ts index fa7855fd50c..7d61080e808 100644 --- a/packages/compiler-dom/src/index.ts +++ b/packages/compiler-dom/src/index.ts @@ -2,6 +2,7 @@ import { baseCompile, CompilerOptions, CodegenResult } from '@vue/compiler-core' import { parserOptionsMinimal } from './parserOptionsMinimal' import { parserOptionsStandard } from './parserOptionsStandard' import { transformStyle } from './transforms/transformStyle' +import { transformCloak } from './transforms/vCloak' import { transformVHtml } from './transforms/vHtml' export function compile( @@ -13,6 +14,7 @@ export function compile( ...(__BROWSER__ ? parserOptionsMinimal : parserOptionsStandard), nodeTransforms: [transformStyle, ...(options.nodeTransforms || [])], directiveTransforms: { + cloak: transformCloak, html: transformVHtml, ...(options.directiveTransforms || {}) } diff --git a/packages/compiler-dom/src/transforms/vCloak.ts b/packages/compiler-dom/src/transforms/vCloak.ts index 70b786d12ed..b5f86662785 100644 --- a/packages/compiler-dom/src/transforms/vCloak.ts +++ b/packages/compiler-dom/src/transforms/vCloak.ts @@ -1 +1,5 @@ -// TODO +import { DirectiveTransform } from 'packages/compiler-core/src/transform' + +export const transformCloak: DirectiveTransform = (node, context) => { + return { props: [], needRuntime: false } +}