test(runtime-dom): 打包测试区分style 和 class属性

coderwei99 · coderwei99 · commit ea956bcf7b65 · 2023-05-06T12:56:45.000+08:00
diff --git a/packages/vue/example/HelloVue/App.js b/packages/vue/example/HelloVue/App.js
@@ -2,21 +2,35 @@ import { h, reactive, ref, effect, stop } from '../../lib/vue3.esm.js'
 
 export default {
   render() {
-    return h('div', {
-      id: 'root',
-      class: ['flex', 'container-r'],
-      onClick: this.aclick
-    }, [
-      h('p', { class: 'red' }, 'hello'),
-      h('p', { class: 'blue' }, ` ${this.wei.age}`),
-    ])
+    return h(
+      'div',
+      {
+        id: 'root',
+        class: ['flex', 'container-r'],
+        onClick: this.aclick
+      },
+      [
+        h('p', { class: 'red' }, 'hello'),
+        h(
+          'p',
+          {
+            class: 'blue',
+            style: {
+              color: 'red',
+              background: 'aqua'
+            }
+          },
+          ` ${this.wei.age}`
+        )
+      ]
+    )
   },
   setup() {
     // 返回对象或者h()渲染函数
     let wei = reactive({
       age: 18
     })
-    let age;
+    let age
     const runner = effect(() => {
       age = wei.age
     })
@@ -28,7 +42,6 @@ export default {
       // console.log(wei.age);
       // console.log(age);
       stop(runner)
-
     }
 
     return {
@@ -38,4 +51,3 @@ export default {
     }
   }
 }
-
diff --git a/packages/vue/example/HelloVue/index.html b/packages/vue/example/HelloVue/index.html
@@ -1,33 +1,37 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
-  </head>
-  <style>
-    .red {
-      width: 100px;
-      color: red;
-      background-color: aqua;
-    }
-    .blue {
-      width: 100px;
-      color: blue;
-      background-color: aqua;
-    }
-    .flex {
-      display: flex;
-    }
-    .container-r {
-      flex-flow: row nowrap;
-      justify-content: space-between;
-      align-items: center;
-    }
-  </style>
-  <body>
-    <div id="app"></div>
-    <script src="./main.js" type="module"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Document</title>
+</head>
+<style>
+  .red {
+    width: 100px;
+    color: red;
+    background-color: aqua;
+  }
+
+  .blue {
+    width: 100px;
+  }
+
+  .flex {
+    display: flex;
+  }
+
+  .container-r {
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
+
+<body>
+  <div id="app"></div>
+  <script src="./main.js" type="module"></script>
+</body>
+
+</html>
