From c631226791efea6c1cb1876bbd0001771ff18b93 Mon Sep 17 00:00:00 2001
From: xulongfei <1102662574@qq.com>
Date: Fri, 30 Oct 2020 15:09:49 +0800
Subject: [PATCH 1/2] use an object for the style prop & add className

---
 didact.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/didact.js b/didact.js
index 62436f1..c6481e5 100644
--- a/didact.js
+++ b/didact.js
@@ -71,7 +71,14 @@ function updateDom(dom, prevProps, nextProps) {
     .filter(isProperty)
     .filter(isNew(prevProps, nextProps))
     .forEach(name => {
-      dom[name] = nextProps[name]
+      if (name === 'style') { // update style
+        transformDomStyle(dom, nextProps.style)
+      } else if (name === 'className') { // update className
+        prevProps.className && dom.classList.remove(...prevProps.className.split(/\s+/))
+        dom.classList.add(...nextProps.className.split(/\s+/))
+      } else {
+        dom[name] = nextProps[name]
+      }
     })
 
   // Add event listeners
@@ -89,6 +96,21 @@ function updateDom(dom, prevProps, nextProps) {
     })
 }
 
+const reg = /[A-Z]/g
+function transformDomStyle(dom, style) {
+  dom.style = Object.keys(style)
+    .reduce((acc, styleName) => {
+      const key = styleName.replace(
+        reg, 
+        function(v) { 
+          return '-' + v.toLowerCase() 
+        }
+      )
+      acc += `${key}: ${style[styleName]};`
+      return acc
+    }, '')
+}
+
 function commitRoot() {
   deletions.forEach(commitWork)
   commitWork(wipRoot.child)

From 61e381cca091567c2a7a63b42720d7d9101b4e84 Mon Sep 17 00:00:00 2001
From: xulongfei <1102662574@qq.com>
Date: Fri, 30 Oct 2020 15:16:48 +0800
Subject: [PATCH 2/2] example

---
 didact.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/didact.js b/didact.js
index c6481e5..2e14519 100644
--- a/didact.js
+++ b/didact.js
@@ -331,7 +331,7 @@ const Didact = {
 function Counter() {
   const [state, setState] = Didact.useState(1)
   return (
-    <h1 onClick={() => setState(c => c + 1)}>
+    <h1 style={{marginTop: '100px', textAlign: 'center'}} className={'foo bar'} onClick={() => setState(c => c + 1)}>
       Count: {state}
     </h1>
   )