feat: vue3 onEvent

Author: lishiwen

example/simple/App.js

@@ -1,38 +1,46 @@
 import { h } from "../../lib/m-vue.esm.js";
 
-// debugger instance
-window.vueInstance = null;
-
 export const App = {
-  // vue template -> render
+  // TODO: vue template -> render
   render() {
-    window.vueInstance = this;
-    // return h("div", {}, "shi-wen" + this.msg);
     return h(
       "div",
       {
-        id: "mini-vue-page",
-        class: "first-layer",
+        class: "red",
+        onClick() {
+          console.log("click");
+        },
+        onMousemove() {
+          console.log("mousemove");
+        },
       },
-      [
-        h(
-          "div",
-          {
-            class: "red",
-          },
-          `${this.msg}`
-        ),
-        h(
-          "div",
-          {
-            class: "blue",
-          },
-          `Hello Branlice ${this.subMessage}`
-        ),
-      ]
+      this.msg
     );
-  },
 
+    // return h(
+    //   "div",
+    //   {
+    //     id: "mini-vue-page",
+    //     class: "first-layer",
+    //   },
+    //   [
+    //     h(
+    //       "div",
+    //       {
+    //         class: "red",
+    //       },
+    //       `${this.msg}`
+    //     ),
+    //     h(
+    //       "div",
+    //       {
+    //         class: "blue",
+    //       },
+    //       `Hello Branlice ${this.subMessage}`
+    //     ),
+    //   ]
+    // );
+  },
   setup() {
     return {
       msg: "hello world 2022",

lib/m-vue.cjs.js

@@ -131,12 +131,23 @@ function mountElement(vnode, container) {
 function mountChildren(children = [], container) {
     children.forEach(child => { patch(child, container); });
 }
+function isOnEvent(propertyName) {
+    return /^on[A-Z]/.test(propertyName);
+}
+isOnEvent.getEventName = function onEventName(propertyName) {
+    return propertyName.slice(2).toLowerCase();
+};
 function addAttrs(vnode, container) {
     const props = vnode.props || {};
     for (const key in props) {
         if (Object.prototype.hasOwnProperty.call(props, key)) {
             const value = props[key];
-            container.setAttribute(key, value);
+            if (isOnEvent(key)) {
+                container.addEventListener(isOnEvent.getEventName(key), value, false);
+            }
+            else {
+                container.setAttribute(key, value);
+            }
         }
     }
 }

lib/m-vue.esm.js

@@ -127,12 +127,23 @@ function mountElement(vnode, container) {
 function mountChildren(children = [], container) {
     children.forEach(child => { patch(child, container); });
 }
+function isOnEvent(propertyName) {
+    return /^on[A-Z]/.test(propertyName);
+}
+isOnEvent.getEventName = function onEventName(propertyName) {
+    return propertyName.slice(2).toLowerCase();
+};
 function addAttrs(vnode, container) {
     const props = vnode.props || {};
     for (const key in props) {
         if (Object.prototype.hasOwnProperty.call(props, key)) {
             const value = props[key];
-            container.setAttribute(key, value);
+            if (isOnEvent(key)) {
+                container.addEventListener(isOnEvent.getEventName(key), value, false);
+            }
+            else {
+                container.setAttribute(key, value);
+            }
         }
     }
 }

src/runtime-core/render.ts

@@ -50,12 +50,23 @@ function mountChildren(children = [], container) {
     children.forEach(child => { patch(child, container) })
 }
 
+function isOnEvent(propertyName) {
+    return /^on[A-Z]/.test(propertyName)
+}
+isOnEvent.getEventName = function onEventName(propertyName) {
+    return propertyName.slice(2).toLowerCase()
+}
+
 function addAttrs(vnode, container) {
     const props = vnode.props || {};
     for (const key in props) {
         if (Object.prototype.hasOwnProperty.call(props, key)) {
             const value = props[key];
-            container.setAttribute(key, value);
+            if (isOnEvent(key)) {
+                container.addEventListener(isOnEvent.getEventName(key), value, false);
+            } else {
+                container.setAttribute(key, value);
+            }
         }
     }
 }