fix(runtime-core): support object syntax for class (#215)

diff --git a/packages/runtime-core/src/vnode.ts b/packages/runtime-core/src/vnode.ts
index c3d50f63472f0d4fb7128f8e7c04af335c72d189..5c5455ff82fc47995a7d1df8cf1d181d9781efb9 100644 (file)
--- a/packages/runtime-core/src/vnode.ts
+++ b/packages/runtime-core/src/vnode.ts
@@ -4,8 +4,7 @@ import {
   isString,
   isObject,
   EMPTY_ARR,
-  extend,
-  PatchFlags
+  extend
 } from '@vue/shared'
 import {
   ComponentInternalInstance,
@@ -146,9 +145,7 @@ export function createVNode(
     if (isReactive(props) || SetupProxySymbol in props) {
       props = extend({}, props)
     }
-    // class normalization only needed if the vnode isn't generated by
-    // compiler-optimized code
-    if (props.class != null && !(patchFlag & PatchFlags.CLASS)) {
+    if (props.class != null) {
       props.class = normalizeClass(props.class)
     }
     let { style } = props

diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index eea111ed049ed7f73a80c162350e966ac5d1aa05..754b717a69b652644d699fd6595fc0c8dfec919c 100644 (file)
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -13,3 +13,19 @@ it('should support on-the-fly template compilation', () => {
   createApp().mount(App, container)
   expect(container.innerHTML).toBe(`0`)
 })
+
+it('should correctly normalize class with on-the-fly template compilation', () => {
+  const container = document.createElement('div')
+  const App = {
+    template: `<div :class="{ test: demoValue, test2: !demoValue }"></div>`,
+    data() {
+      return {
+        demoValue: true
+      }
+    }
+  }
+  createApp().mount(App, container)
+  const classes = container.firstElementChild!.classList
+  expect(classes.contains('test')).toBe(true)
+  expect(classes.contains('test2')).toBe(false)
+})