wip(compiler-ssr): v-if

packages/compiler-ssr/__tests__/ssrElement.spec.ts

@@ -1,6 +1,6 @@
 import { getCompiledString } from './utils'
 
-describe('element', () => {
+describe('ssr: element', () => {
   test('basic elements', () => {
     expect(getCompiledString(`<div></div>`)).toMatchInlineSnapshot(
       `"\`<div></div>\`"`

packages/compiler-ssr/__tests__/ssrText.spec.ts

@@ -1,6 +1,6 @@
 import { getCompiledString } from './utils'
 
-describe('text', () => {
+describe('ssr: text', () => {
   test('static text', () => {
     expect(getCompiledString(`foo`)).toMatchInlineSnapshot(`"\`foo\`"`)
   })

packages/compiler-ssr/__tests__/ssrVIf.spec.ts

@@ -0,0 +1,141 @@
+import { compile } from '../src'
+
+describe('ssr: v-if', () => {
+  test('basic', () => {
+    expect(compile(`<div v-if="foo"></div>`).code).toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div></div>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('with nested content', () => {
+    expect(compile(`<div v-if="foo">hello<span>ok</span></div>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div>hello<span>ok</span></div>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('v-if + v-else', () => {
+    expect(compile(`<div v-if="foo"/><span v-else/>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div></div>\`)
+        } else {
+          _push(\`<span></span>\`)
+        }
+      }"
+    `)
+  })
+
+  test('v-if + v-else-if', () => {
+    expect(compile(`<div v-if="foo"/><span v-else-if="bar"/>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div></div>\`)
+        } else if (_ctx.bar) {
+          _push(\`<span></span>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('v-if + v-else-if + v-else', () => {
+    expect(compile(`<div v-if="foo"/><span v-else-if="bar"/><p v-else/>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div></div>\`)
+        } else if (_ctx.bar) {
+          _push(\`<span></span>\`)
+        } else {
+          _push(\`<p></p>\`)
+        }
+      }"
+    `)
+  })
+
+  test('<template v-if> (text)', () => {
+    expect(compile(`<template v-if="foo">hello</template>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<!---->hello<!---->\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('<template v-if> (single element)', () => {
+    // single element should not wrap with fragment
+    expect(compile(`<template v-if="foo"><div>hi</div></template>`).code)
+      .toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<div>hi</div>\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('<template v-if> (multiple element)', () => {
+    expect(
+      compile(`<template v-if="foo"><div>hi</div><div>ho</div></template>`).code
+    ).toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+        } else {
+          _push(\`<!---->\`)
+        }
+      }"
+    `)
+  })
+
+  test('<template v-if> (with v-for inside)', () => {
+    // TODO should not contain nested fragments
+  })
+
+  test('<template v-if> + normal v-else', () => {
+    expect(
+      compile(
+        `<template v-if="foo"><div>hi</div><div>ho</div></template><div v-else/>`
+      ).code
+    ).toMatchInlineSnapshot(`
+      "
+      return function ssrRender(_ctx, _push, _parent) {
+        if (_ctx.foo) {
+          _push(\`<!----><div>hi</div><div>ho</div><!---->\`)
+        } else {
+          _push(\`<div></div>\`)
+        }
+      }"
+    `)
+  })
+})