fix v-bind class co-existence

Author: yyx990803

demos/bind.html

@@ -8,6 +8,9 @@
   .orange {
     color: orange;
   }
+  .static {
+    font-weight: bold;
+  }
   [v-cloak] {
     opacity: 0;
   }
@@ -17,21 +20,25 @@
   import { createApp, reactive } from '../src'
 
   // for testing
-  const data = window.data = reactive({
+  const data = (window.data = reactive({
     id: 'green',
     classes: ['foo', { red: true }],
     style: { color: 'blue' },
     obj: {
       class: 'orange'
     }
-  })
+  }))
 
   createApp(data).mount()
 </script>
 
 <div v-scope v-cloak>
   <div :id="id">simple binding - this should be green</div>
-  <div :class="classes">class binding - this should be red</div>
-  <div :style="style">style binding - this should be blue</div>
+  <div class="static" :class="classes">
+    class binding - this should be red and bold
+  </div>
+  <div style="font-weight: bold" :style="style">
+    style binding - this should be blue and bold
+  </div>
   <div v-bind="obj">object binding - this should be orange</div>
 </div>

src/directives/bind.ts

@@ -10,14 +10,20 @@ import {
 
 const forceAttrRE = /^(spellcheck|draggable|form|list|type)$/
 
-export const bind: Directive<Element> = ({
+export const bind: Directive<Element & { _class?: string }> = ({
   el,
   get,
   effect,
   arg,
   modifiers
 }) => {
   let prevValue: any
+
+  // record static class
+  if (arg === 'class') {
+    el._class = el.className
+  }
+
   effect(() => {
     let value = get()
     if (arg) {
@@ -39,9 +45,17 @@ export const bind: Directive<Element> = ({
   })
 }
 
-function setProp(el: Element, key: string, value: any, prevValue?: any) {
+function setProp(
+  el: Element & { _class?: string },
+  key: string,
+  value: any,
+  prevValue?: any
+) {
   if (key === 'class') {
-    el.setAttribute('class', normalizeClass(value) || '')
+    el.setAttribute(
+      'class',
+      normalizeClass(el._class ? [el._class, value] : value) || ''
+    )
   } else if (key === 'style') {
     value = normalizeStyle(value)
     const { style } = el as HTMLElement