feat: added customrenderer

Author: lishiwen

lib/m-vue.cjs.js

@@ -298,100 +298,92 @@ function clearCurrentInstance() {
     currentInstance = null;
 }
 
-function render(vnode, container, parentComponent) {
-    patch(vnode, container, parentComponent);
-}
-function patch(vnode, container, parentComponent) {
-    switch (vnode === null || vnode === void 0 ? void 0 : vnode.type) {
-        case Fragment:
-            processFragment(vnode, container, parentComponent);
-            break;
-        case Text:
-            processText(vnode, container);
-            break;
-        default:
-            if (vnode.shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
-                processElement(vnode, container, parentComponent);
+function createAppAPI(render) {
+    return function createApp(rootComponent) {
+        return {
+            mount(rootContainer) {
+                // 转vNode, 基于vNode工作
+                const vnode = createVNode(rootComponent);
+                render(vnode, rootContainer, undefined);
             }
-            if (vnode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */) {
-                processComponent(vnode, container, parentComponent);
-            }
-            break;
-    }
-}
-function processElement(vnode, container, parentComponent) {
-    mountElement(vnode, container, parentComponent);
-}
-function processComponent(vnode, container, parentComponent) {
-    mountComponent(vnode, container, parentComponent);
-}
-function processFragment(vnode, container, parentComponent) {
-    mountChildren(vnode === null || vnode === void 0 ? void 0 : vnode.children, container, parentComponent);
-}
-function mountComponent(initialVNode, container, parentComponent) {
-    const instance = createComponentInstance(initialVNode, parentComponent);
-    setupComponent(instance);
-    setupRenderEffect(instance, container, initialVNode);
+        };
+    };
 }
-function mountElement(vnode, container, parentComponent) {
-    // vnode type -> div/span
-    // vnode.el -> element.el
-    const el = (vnode.el = document.createElement(vnode.type));
-    // children
-    if (vnode.shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
-        el.textContent = vnode.children;
+
+function createRenderer(customRenderOptions) {
+    const { createElement, patchProp, insert } = customRenderOptions;
+    function render(vnode, container, parentComponent) {
+        patch(vnode, container, parentComponent);
     }
-    else if (vnode.shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
-        mountChildren(vnode.children, el, parentComponent);
+    function patch(vnode, container, parentComponent) {
+        switch (vnode === null || vnode === void 0 ? void 0 : vnode.type) {
+            case Fragment:
+                processFragment(vnode, container, parentComponent);
+                break;
+            case Text:
+                processText(vnode, container);
+                break;
+            default:
+                if (vnode.shapeFlag & 1 /* ShapeFlags.ELEMENT */) {
+                    processElement(vnode, container, parentComponent);
+                }
+                if (vnode.shapeFlag & 2 /* ShapeFlags.STATEFUL_COMPONENT */) {
+                    processComponent(vnode, container, parentComponent);
+                }
+                break;
+        }
     }
-    // props
-    addAttrs(vnode, el);
-    // append to container
-    container.appendChild(el);
-}
-function mountChildren(children = [], container, parentComponent) {
-    children.forEach(child => {
-        patch(child, container, parentComponent);
-    });
-}
-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];
-            if (isOnEvent(key)) {
-                container.addEventListener(isOnEvent.getEventName(key), value, false);
-            }
-            else {
-                container.setAttribute(key, value);
+    function processElement(vnode, container, parentComponent) {
+        mountElement(vnode, container, parentComponent);
+    }
+    function processComponent(vnode, container, parentComponent) {
+        mountComponent(vnode, container, parentComponent);
+    }
+    function processFragment(vnode, container, parentComponent) {
+        mountChildren(vnode === null || vnode === void 0 ? void 0 : vnode.children, container, parentComponent);
+    }
+    function mountComponent(initialVNode, container, parentComponent) {
+        const instance = createComponentInstance(initialVNode, parentComponent);
+        setupComponent(instance);
+        setupRenderEffect(instance, container, initialVNode);
+    }
+    function mountElement(vnode, container, parentComponent) {
+        const el = (vnode.el = createElement(vnode.type));
+        if (vnode.shapeFlag & 4 /* ShapeFlags.TEXT_CHILDREN */) {
+            el.textContent = vnode.children;
+        }
+        else if (vnode.shapeFlag & 8 /* ShapeFlags.ARRAY_CHILDREN */) {
+            mountChildren(vnode.children, el, parentComponent);
+        }
+        addAttrs(vnode, el);
+        insert(el, container);
+    }
+    function mountChildren(children = [], container, parentComponent) {
+        children.forEach(child => {
+            patch(child, container, parentComponent);
+        });
+    }
+    function addAttrs(vnode, container) {
+        const props = vnode.props || {};
+        for (const key in props) {
+            if (Object.prototype.hasOwnProperty.call(props, key)) {
+                const value = props[key];
+                patchProp(container, key, value);
             }
         }
     }
-}
-function setupRenderEffect(instance, container, initialVNode) {
-    var _a;
-    const subTree = (_a = instance === null || instance === void 0 ? void 0 : instance.render) === null || _a === void 0 ? void 0 : _a.call(instance.proxy);
-    patch(subTree, container, instance);
-    initialVNode.el = subTree.el;
-}
-function processText(vnode, container) {
-    const el = (vnode.el = document.createTextNode(vnode.children));
-    container.append(el);
-}
-
-function createApp(rootComponent) {
+    function setupRenderEffect(instance, container, initialVNode) {
+        var _a;
+        const subTree = (_a = instance === null || instance === void 0 ? void 0 : instance.render) === null || _a === void 0 ? void 0 : _a.call(instance.proxy);
+        patch(subTree, container, instance);
+        initialVNode.el = subTree.el;
+    }
+    function processText(vnode, container) {
+        const el = (vnode.el = document.createTextNode(vnode.children));
+        container.append(el);
+    }
     return {
-        mount(rootContainer) {
-            // 转vNode, 基于vNode工作
-            const vnode = createVNode(rootComponent);
-            render(vnode, rootContainer, undefined);
-        }
+        createApp: createAppAPI(render),
     };
 }
 
@@ -462,17 +454,45 @@ function composeInjectValues(provides = {}, keys = [], defaultValues = {}) {
     }, {});
 }
 
+function isOnEvent(propertyName) {
+    return /^on[A-Z]/.test(propertyName);
+}
+isOnEvent.getEventName = function onEventName(propertyName) {
+    return propertyName.slice(2).toLowerCase();
+};
+function createElement(type) {
+    return document.createElement(type);
+}
+function patchProp(el, key, value) {
+    if (isOnEvent(key)) {
+        el.addEventListener(isOnEvent.getEventName(key), value, false);
+    }
+    else {
+        el.setAttribute(key, value);
+    }
+}
+function insert(el, parentContainer) {
+    parentContainer.append(el);
+}
+const renderer = createRenderer({
+    createElement,
+    patchProp,
+    insert
+});
+function createApp(...args) {
+    return renderer.createApp(...args);
+}
+
 exports.clearCurrentInstance = clearCurrentInstance;
 exports.createApp = createApp;
 exports.createComponentInstance = createComponentInstance;
+exports.createRenderer = createRenderer;
 exports.createTextVNode = createTextVNode;
 exports.createVNode = createVNode;
 exports.getCurrentInstance = getCurrentInstance;
 exports.h = h;
 exports.inject = inject;
-exports.patch = patch;
 exports.provide = provide;
-exports.render = render;
 exports.renderSlots = renderSlots;
 exports.setCurrentInstance = setCurrentInstance;
 exports.setupComponent = setupComponent;