create-vnode/dist/bundle.js

一个简易的虚拟dom生成器和渲染器，包含diff算法

function e(e){return Object.prototype.toString.call(e).replace(/\[object\s|\]/g,"")}function t(t){return"Object"===e(t)}function n(t){return"String"===e(t)}function r(e){return t(e)&&"{}"!=JSON.stringify(e)}function o(e,t){r(e)&&Object.keys(e).forEach(t)}function i(e,t){e.length&&e.forEach(t)}class s{constructor(o,c,l){this.tagName=o,this.props=t(c)?c:{},this.children=l||!r(this.props)&&(n(c)&&[c]||"Array"===e(c)&&c)||[],this.key=c?c.key:void 0;let u=0;i(this.children,((e,t)=>{e instanceof s?u+=e.count:this.children[t]=""+e,u++})),this.count=u}render(){const e=document.createElement(this.tagName);return o(this.props,(t=>{e.setAttribute(t,this.props[t])})),i(this.children,(t=>{const n=t instanceof s?t.render():document.createTextNode(t);e.appendChild(n)})),e}}function c(e,t,n){return new s(e,t,n)}function l(e,t){for(var n={},r=[],o=0,i=e.length;o<i;o++){var s=e[o],c=u(s,t);c?n[c]=o:r.push(s)}return{keyIndex:n,free:r}}function u(e,t){if(e&&t)return"string"==typeof t?e[t]:t(e)}function p(e,t){const n={};return a(e,t,0,n),n}function a(e,t,s,c){const p=[];if(null!==t){if(n(e)&&n(t))e!==t&&p.push({type:"text",content:t});else if(e.tagName===t.tagName&&e.key===t.key){if(r(e.props)||r(t.props)){const n=function(e,t){let n=!1;const r=e.props,i=t.props,s={};return o(r,(e=>{i[e]===r[e]&&r.hasOwnProperty(e)||(!n&&(n=!0),s[e]=i[e])})),n?s:null}(e,t);n&&p.push({type:"props",props:n})}!r(t.props)&&t.props.hasOwnProperty("ignore")||(e.children.length||t.children.length)&&function(e,t,n,r,o){const s=function(e,t,n){for(var r,o,i=l(e,n),s=l(t,n),c=s.free,p=i.keyIndex,a=s.keyIndex,d=[],h=[],f=0,y=0;f<e.length;){if(o=u(r=e[f],n))if(a.hasOwnProperty(o)){var m=a[o];h.push(t[m])}else h.push(null);else{var v=c[y++];h.push(v||null)}f++}var g=h.slice(0);for(f=0;f<g.length;)null===g[f]?(b(f),O(f)):f++;for(var k=f=0;f<t.length;){o=u(r=t[f],n);var x=g[k],N=u(x,n);x?o===N?k++:p.hasOwnProperty(o)&&u(g[k+1],n)===o?(b(f),O(k),k++):w(f,r):w(f,r),f++}function b(e){var t={index:e,type:0};d.push(t)}function w(e,t){var n={index:e,item:t,type:1};d.push(n)}function O(e){g.splice(e,1)}return{moves:d,children:h}}(e,t,"key");t=s.children,s.moves.length&&o.push({type:REORDER,moves:s.moves});let c=null,p=n;i(e,((e,n)=>{const o=t[n];p=c&&c.count?p+c.count+1:p+1,e!==o&&a(e,o,p,r),c=e}))}(e.children,t.children,s,c,p)}else p.push({type:"replace",node:t});p.length&&(c[s]=p)}}function d(e,t){h(e,{index:0},t)}function h(e,r,s){const c=s[r.index];e.childNodes&&i(e.childNodes,(e=>{r.index++,h(e,r,s)})),c&&function(e,r){i(r,(r=>{switch(r.type){case"replace":const s=n(r.node)?document.createTextNode(r.node):r.node.render();e.parentNode.replaceChild(s,e);break;case"reorder":!function(e,n){const r=function(e){if(!e)return[];const t=[];return i(e,(e=>{t.push(e)})),t}(e.childNodes),o={};i(r,(e=>{if(1===e.nodeType){const t=e.getAttribute("key");t&&(o[t]=e)}})),i(n,(n=>{const i=n.index;if(0===n.type)r[i]===e.childNodes[i]&&e.removeChild(e.childNodes[i]),r.splice(i,1);else if(1===n.type){let s;o[n.item.key]?(s=e.removeChild(o[n.item.key]),r.splice(Array.prototype.indexOf.call(e.childNodes,o[n.item.key]),1)):s=t(n.item)?n.item.render():document.createTextNode(n.item),r.splice(i,0,s),e.insertBefore(s,e.childNodes[i]||null)}}))}(e,r.moves);break;case"props":!function(e,t){o(t,(n=>{void 0===t[n]?e.removeAttribute(n):function(e,t,n){switch(t){case"style":e.style.cssText=n;break;case"value":var r=e.tagName||"";"input"===(r=r.toLowerCase())||"textarea"===r?e.value=n:e.setAttribute(t,n);break;default:e.setAttribute(t,n)}}(e,n,t[n])}))}(e,r.props);break;case"text":e.textContent?e.textContent=r.content:e.nodeValue=r.content;break;default:throw new Error("Unknown patch type "+r.type)}}))}(e,c)}export{c as createElement,p as diff,d as patch};