fix string style

frejs · Mar 26, 2021 · f727da6 · f727da6
1 parent c795e56
commit f727da6
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 20 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -10,7 +10,7 @@
 
 <body>
   <div id="root"></div>
-  <script src="./src/benchmark.tsx"></script>
+  <script src="./src/use-state.tsx"></script>
 </body>
 
 </html>
diff --git a/demo/src/use-state.tsx b/demo/src/use-state.tsx
@@ -1,16 +1,21 @@
-import { h, render, useEffect, useState } from '../../src/index'
+import { h, render, useEffect, useState } from "../../src/index"
 
 function App() {
   const [count, setCount] = useState(0)
   const [two, setTwo] = useState(0)
-  console.log(count,two)
+  console.log(count, two)
   return (
     <div>
-      <button onClick={() => setCount((c)=>{
-        console.log(c)
-        return c+1
-      })}>{count}</button>
-      <button onClick={() => setTwo(two + 1)}>{two}</button>
+      <button
+        onClick={() =>
+          setCount((c) => {
+            return c + 1
+          })
+        }
+      >
+        {count}
+      </button>
+      <button onClick={() => setTwo(two + 1)} style="color:#2ef">{two}</button>
     </div>
   )
 }

diff --git a/src/dom.ts b/src/dom.ts
@@ -1,5 +1,5 @@
-import { Attributes, DOM, IFiber } from './type'
-import {LANE} from './reconciler'
+import { Attributes, DOM, IFiber } from "./type"
+import { isStr, LANE } from "./reconciler"
 
 export const updateElement = <P extends Attributes>(
   dom: DOM,
@@ -10,19 +10,23 @@ export const updateElement = <P extends Attributes>(
     let oldValue = oldProps[name]
     let newValue = newProps[name]
 
-    if (oldValue === newValue || name === 'children') {
-    } else if (name === 'style') {
-      for (const k in { ...oldValue, ...newValue }) {
-        if (!(oldValue && newValue && oldValue[k] === newValue[k])) {
-          ;(dom as any)[name][k] = newValue?.[k] || ''
+    if (oldValue === newValue || name === "children") {
+    } else if (name === "style") {
+      if (isStr(newValue)) {
+        dom.setAttribute(name, newValue)
+      } else {
+        for (const k in { ...oldValue, ...newValue }) {
+          if (!(oldValue && newValue && oldValue[k] === newValue[k])) {
+            ;(dom as any)[name][k] = newValue?.[k] || ""
+          }
         }
       }
-    } else if (name[0] === 'o' && name[1] === 'n') {
+    } else if (name[0] === "o" && name[1] === "n") {
       name = name.slice(2).toLowerCase() as Extract<keyof P, string>
       if (oldValue) dom.removeEventListener(name, oldValue)
       dom.addEventListener(name, newValue)
     } else if (name in dom && !(dom instanceof SVGElement)) {
-      ;(dom as any)[name] = newValue || ''
+      ;(dom as any)[name] = newValue || ""
     } else if (newValue == null || newValue === false) {
       dom.removeAttribute(name)
     } else {
@@ -33,11 +37,11 @@ export const updateElement = <P extends Attributes>(
 
 export const createElement = <P = Attributes>(fiber: IFiber) => {
   const dom =
-    fiber.type === 'text'
-      ? document.createTextNode('')
+    fiber.type === "text"
+      ? document.createTextNode("")
       : fiber.lane & LANE.SVG
       ? document.createElementNS(
-          'http://www.w3.org/2000/svg',
+          "http://www.w3.org/2000/svg",
           fiber.type as string
         )
       : document.createElement(fiber.type as string)