patch.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253
  1. import { isArray, isObject } from '../core/util.js';
  2. import { createElement, createVNode, XMLNS, XML_NAMESPACE, XLINKNS } from './core.js';
  3. import * as api from './domapi.js';
  4. var colonChar = 58;
  5. var xChar = 120;
  6. var emptyNode = createVNode('', '');
  7. function isUndef(s) {
  8. return s === undefined;
  9. }
  10. function isDef(s) {
  11. return s !== undefined;
  12. }
  13. function createKeyToOldIdx(children, beginIdx, endIdx) {
  14. var map = {};
  15. for (var i = beginIdx; i <= endIdx; ++i) {
  16. var key = children[i].key;
  17. if (key !== undefined) {
  18. if (process.env.NODE_ENV !== 'production') {
  19. if (map[key] != null) {
  20. console.error("Duplicate key " + key);
  21. }
  22. }
  23. map[key] = i;
  24. }
  25. }
  26. return map;
  27. }
  28. function sameVnode(vnode1, vnode2) {
  29. var isSameKey = vnode1.key === vnode2.key;
  30. var isSameTag = vnode1.tag === vnode2.tag;
  31. return isSameTag && isSameKey;
  32. }
  33. function createElm(vnode) {
  34. var i;
  35. var children = vnode.children;
  36. var tag = vnode.tag;
  37. if (isDef(tag)) {
  38. var elm = (vnode.elm = createElement(tag));
  39. updateAttrs(emptyNode, vnode);
  40. if (isArray(children)) {
  41. for (i = 0; i < children.length; ++i) {
  42. var ch = children[i];
  43. if (ch != null) {
  44. api.appendChild(elm, createElm(ch));
  45. }
  46. }
  47. }
  48. else if (isDef(vnode.text) && !isObject(vnode.text)) {
  49. api.appendChild(elm, api.createTextNode(vnode.text));
  50. }
  51. }
  52. else {
  53. vnode.elm = api.createTextNode(vnode.text);
  54. }
  55. return vnode.elm;
  56. }
  57. function addVnodes(parentElm, before, vnodes, startIdx, endIdx) {
  58. for (; startIdx <= endIdx; ++startIdx) {
  59. var ch = vnodes[startIdx];
  60. if (ch != null) {
  61. api.insertBefore(parentElm, createElm(ch), before);
  62. }
  63. }
  64. }
  65. function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
  66. for (; startIdx <= endIdx; ++startIdx) {
  67. var ch = vnodes[startIdx];
  68. if (ch != null) {
  69. if (isDef(ch.tag)) {
  70. var parent_1 = api.parentNode(ch.elm);
  71. api.removeChild(parent_1, ch.elm);
  72. }
  73. else {
  74. api.removeChild(parentElm, ch.elm);
  75. }
  76. }
  77. }
  78. }
  79. export function updateAttrs(oldVnode, vnode) {
  80. var key;
  81. var elm = vnode.elm;
  82. var oldAttrs = oldVnode && oldVnode.attrs || {};
  83. var attrs = vnode.attrs || {};
  84. if (oldAttrs === attrs) {
  85. return;
  86. }
  87. for (key in attrs) {
  88. var cur = attrs[key];
  89. var old = oldAttrs[key];
  90. if (old !== cur) {
  91. if (cur === true) {
  92. elm.setAttribute(key, '');
  93. }
  94. else if (cur === false) {
  95. elm.removeAttribute(key);
  96. }
  97. else {
  98. if (key === 'style') {
  99. elm.style.cssText = cur;
  100. }
  101. else if (key.charCodeAt(0) !== xChar) {
  102. elm.setAttribute(key, cur);
  103. }
  104. else if (key === 'xmlns:xlink' || key === 'xmlns') {
  105. elm.setAttributeNS(XMLNS, key, cur);
  106. }
  107. else if (key.charCodeAt(3) === colonChar) {
  108. elm.setAttributeNS(XML_NAMESPACE, key, cur);
  109. }
  110. else if (key.charCodeAt(5) === colonChar) {
  111. elm.setAttributeNS(XLINKNS, key, cur);
  112. }
  113. else {
  114. elm.setAttribute(key, cur);
  115. }
  116. }
  117. }
  118. }
  119. for (key in oldAttrs) {
  120. if (!(key in attrs)) {
  121. elm.removeAttribute(key);
  122. }
  123. }
  124. }
  125. function updateChildren(parentElm, oldCh, newCh) {
  126. var oldStartIdx = 0;
  127. var newStartIdx = 0;
  128. var oldEndIdx = oldCh.length - 1;
  129. var oldStartVnode = oldCh[0];
  130. var oldEndVnode = oldCh[oldEndIdx];
  131. var newEndIdx = newCh.length - 1;
  132. var newStartVnode = newCh[0];
  133. var newEndVnode = newCh[newEndIdx];
  134. var oldKeyToIdx;
  135. var idxInOld;
  136. var elmToMove;
  137. var before;
  138. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  139. if (oldStartVnode == null) {
  140. oldStartVnode = oldCh[++oldStartIdx];
  141. }
  142. else if (oldEndVnode == null) {
  143. oldEndVnode = oldCh[--oldEndIdx];
  144. }
  145. else if (newStartVnode == null) {
  146. newStartVnode = newCh[++newStartIdx];
  147. }
  148. else if (newEndVnode == null) {
  149. newEndVnode = newCh[--newEndIdx];
  150. }
  151. else if (sameVnode(oldStartVnode, newStartVnode)) {
  152. patchVnode(oldStartVnode, newStartVnode);
  153. oldStartVnode = oldCh[++oldStartIdx];
  154. newStartVnode = newCh[++newStartIdx];
  155. }
  156. else if (sameVnode(oldEndVnode, newEndVnode)) {
  157. patchVnode(oldEndVnode, newEndVnode);
  158. oldEndVnode = oldCh[--oldEndIdx];
  159. newEndVnode = newCh[--newEndIdx];
  160. }
  161. else if (sameVnode(oldStartVnode, newEndVnode)) {
  162. patchVnode(oldStartVnode, newEndVnode);
  163. api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
  164. oldStartVnode = oldCh[++oldStartIdx];
  165. newEndVnode = newCh[--newEndIdx];
  166. }
  167. else if (sameVnode(oldEndVnode, newStartVnode)) {
  168. patchVnode(oldEndVnode, newStartVnode);
  169. api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
  170. oldEndVnode = oldCh[--oldEndIdx];
  171. newStartVnode = newCh[++newStartIdx];
  172. }
  173. else {
  174. if (isUndef(oldKeyToIdx)) {
  175. oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
  176. }
  177. idxInOld = oldKeyToIdx[newStartVnode.key];
  178. if (isUndef(idxInOld)) {
  179. api.insertBefore(parentElm, createElm(newStartVnode), oldStartVnode.elm);
  180. }
  181. else {
  182. elmToMove = oldCh[idxInOld];
  183. if (elmToMove.tag !== newStartVnode.tag) {
  184. api.insertBefore(parentElm, createElm(newStartVnode), oldStartVnode.elm);
  185. }
  186. else {
  187. patchVnode(elmToMove, newStartVnode);
  188. oldCh[idxInOld] = undefined;
  189. api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
  190. }
  191. }
  192. newStartVnode = newCh[++newStartIdx];
  193. }
  194. }
  195. if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
  196. if (oldStartIdx > oldEndIdx) {
  197. before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
  198. addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx);
  199. }
  200. else {
  201. removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
  202. }
  203. }
  204. }
  205. function patchVnode(oldVnode, vnode) {
  206. var elm = (vnode.elm = oldVnode.elm);
  207. var oldCh = oldVnode.children;
  208. var ch = vnode.children;
  209. if (oldVnode === vnode) {
  210. return;
  211. }
  212. updateAttrs(oldVnode, vnode);
  213. if (isUndef(vnode.text)) {
  214. if (isDef(oldCh) && isDef(ch)) {
  215. if (oldCh !== ch) {
  216. updateChildren(elm, oldCh, ch);
  217. }
  218. }
  219. else if (isDef(ch)) {
  220. if (isDef(oldVnode.text)) {
  221. api.setTextContent(elm, '');
  222. }
  223. addVnodes(elm, null, ch, 0, ch.length - 1);
  224. }
  225. else if (isDef(oldCh)) {
  226. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  227. }
  228. else if (isDef(oldVnode.text)) {
  229. api.setTextContent(elm, '');
  230. }
  231. }
  232. else if (oldVnode.text !== vnode.text) {
  233. if (isDef(oldCh)) {
  234. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  235. }
  236. api.setTextContent(elm, vnode.text);
  237. }
  238. }
  239. export default function patch(oldVnode, vnode) {
  240. if (sameVnode(oldVnode, vnode)) {
  241. patchVnode(oldVnode, vnode);
  242. }
  243. else {
  244. var elm = oldVnode.elm;
  245. var parent_2 = api.parentNode(elm);
  246. createElm(vnode);
  247. if (parent_2 !== null) {
  248. api.insertBefore(parent_2, vnode.elm, api.nextSibling(elm));
  249. removeVnodes(parent_2, [oldVnode], 0, 0);
  250. }
  251. }
  252. return vnode;
  253. }