wip(compiler-ssr): v-bind with static keys

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

@@ -10,12 +10,6 @@ describe('ssr: element', () => {
     )
   })
 
-  test('static attrs', () => {
-    expect(
-      getCompiledString(`<div id="foo" class="bar"></div>`)
-    ).toMatchInlineSnapshot(`"\`<div id=\\"foo\\" class=\\"bar\\"></div>\`"`)
-  })
-
   test('nested elements', () => {
     expect(
       getCompiledString(`<div><span></span><span></span></div>`)
@@ -26,27 +20,71 @@ describe('ssr: element', () => {
     expect(getCompiledString(`<input>`)).toMatchInlineSnapshot(`"\`<input>\`"`)
   })
 
-  test('v-html', () => {
-    expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(
-      `"\`<div>\${_ctx.foo}</div>\`"`
-    )
+  describe('children override', () => {
+    test('v-html', () => {
+      expect(getCompiledString(`<div v-html="foo"/>`)).toMatchInlineSnapshot(
+        `"\`<div>\${_ctx.foo}</div>\`"`
+      )
+    })
+
+    test('v-text', () => {
+      expect(getCompiledString(`<div v-text="foo"/>`)).toMatchInlineSnapshot(
+        `"\`<div>\${_interpolate(_ctx.foo)}</div>\`"`
+      )
+    })
+
+    test('<textarea> with dynamic value', () => {
+      expect(
+        getCompiledString(`<textarea :value="foo"/>`)
+      ).toMatchInlineSnapshot(
+        `"\`<textarea>\${_interpolate(_ctx.foo)}</textarea>\`"`
+      )
+    })
+
+    test('<textarea> with static value', () => {
+      expect(
+        getCompiledString(`<textarea value="fo&gt;o"/>`)
+      ).toMatchInlineSnapshot(`"\`<textarea>fo&gt;o</textarea>\`"`)
+    })
   })
 
-  test('v-text', () => {
-    expect(getCompiledString(`<div v-text="foo"/>`)).toMatchInlineSnapshot(
-      `"\`<div>\${_interpolate(_ctx.foo)}</div>\`"`
-    )
-  })
+  describe('attrs', () => {
+    test('static attrs', () => {
+      expect(
+        getCompiledString(`<div id="foo" class="bar"></div>`)
+      ).toMatchInlineSnapshot(`"\`<div id=\\"foo\\" class=\\"bar\\"></div>\`"`)
+    })
 
-  test('<textarea> with dynamic value', () => {
-    expect(getCompiledString(`<textarea :value="foo"/>`)).toMatchInlineSnapshot(
-      `"\`<textarea>\${_interpolate(_ctx.foo)}</textarea>\`"`
-    )
-  })
+    test('v-bind:class', () => {
+      expect(
+        getCompiledString(`<div id="foo" :class="bar"></div>`)
+      ).toMatchInlineSnapshot(
+        `"\`<div id=\\"foo\\"\${_renderClass(_ctx.bar)}></div>\`"`
+      )
+    })
 
-  test('<textarea> with static value', () => {
-    expect(
-      getCompiledString(`<textarea value="fo&gt;o"/>`)
-    ).toMatchInlineSnapshot(`"\`<textarea>fo&gt;o</textarea>\`"`)
+    test('v-bind:style', () => {
+      expect(
+        getCompiledString(`<div id="foo" :style="bar"></div>`)
+      ).toMatchInlineSnapshot(
+        `"\`<div id=\\"foo\\"\${_renderStyle(_ctx.bar)}></div>\`"`
+      )
+    })
+
+    test('v-bind:key (boolean)', () => {
+      expect(
+        getCompiledString(`<input type="checkbox" :checked="checked">`)
+      ).toMatchInlineSnapshot(
+        `"\`<input type=\\"checkbox\\"\${(_ctx.checked)? \\" checked\\": \\"\\"}>\`"`
+      )
+    })
+
+    test('v-bind:key (non-boolean)', () => {
+      expect(
+        getCompiledString(`<div :id="id" class="bar"></div>`)
+      ).toMatchInlineSnapshot(
+        `"\`<div\${_renderAttr(\\"id\\", _ctx.id)} class=\\"bar\\"></div>\`"`
+      )
+    })
   })
 })

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

@@ -38,7 +38,11 @@ describe('ssr: text', () => {
       "const { _interpolate } = require(\\"@vue/server-renderer\\")
 
       return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<div><span>\${_interpolate(_ctx.foo)} bar</span><span>baz \${_interpolate(_ctx.qux)}</span></div>\`)
+        _push(\`<div><span>\${
+          _interpolate(_ctx.foo)
+        } bar</span><span>baz \${
+          _interpolate(_ctx.qux)
+        }</span></div>\`)
       }"
     `)
   })

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

@@ -1,13 +0,0 @@
-import { compile } from '../src'
-
-describe('ssr: v-bind', () => {
-  test('basic', () => {
-    expect(compile(`<div :id="id"/>`).code).toMatchInlineSnapshot(`
-      "const { _renderAttr } = require(\\"vue\\")
-
-      return function ssrRender(_ctx, _push, _parent) {
-        _push(\`<div\${_renderAttr(\\"id\\", _ctx.id)}></div>\`)
-      }"
-    `)
-  })
-})

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

@@ -45,7 +45,11 @@ describe('ssr: v-for', () => {
         _renderList(_ctx.list, (row, i) => {
           _push(\`<div><!---->\`)
           _renderList(row, (j) => {
-            _push(\`<div>\${_interpolate(i)},\${_interpolate(j)}</div>\`)
+            _push(\`<div>\${
+              _interpolate(i)
+            },\${
+              _interpolate(j)
+            }</div>\`)
           })
           _push(\`<!----></div>\`)
         })
@@ -97,7 +101,11 @@ describe('ssr: v-for', () => {
       return function ssrRender(_ctx, _push, _parent) {
         _push(\`<!---->\`)
         _renderList(_ctx.list, (i) => {
-          _push(\`<!----><span>\${_interpolate(i)}</span><span>\${_interpolate(i + 1)}</span><!---->\`)
+          _push(\`<!----><span>\${
+            _interpolate(i)
+          }</span><span>\${
+            _interpolate(i + 1)
+          }</span><!---->\`)
         })
         _push(\`<!---->\`)
       }"

packages/compiler-ssr/__tests__/utils.ts

@@ -1,5 +1,5 @@
 import { compile } from '../src'
 
 export function getCompiledString(src: string): string {
-  return compile(src).code.match(/_push\((.*)\)/)![1]
+  return compile(src).code.match(/_push\(([^]*)\)/)![1]
 }