init.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374
  1. import { vnode } from "./vnode";
  2. import * as is from "./is";
  3. import { htmlDomApi } from "./htmldomapi";
  4. function isUndef(s) {
  5. return s === undefined;
  6. }
  7. function isDef(s) {
  8. return s !== undefined;
  9. }
  10. const emptyNode = vnode("", {}, [], undefined, undefined);
  11. function sameVnode(vnode1, vnode2) {
  12. var _a, _b;
  13. const isSameKey = vnode1.key === vnode2.key;
  14. const isSameIs = ((_a = vnode1.data) === null || _a === void 0 ? void 0 : _a.is) === ((_b = vnode2.data) === null || _b === void 0 ? void 0 : _b.is);
  15. const isSameSel = vnode1.sel === vnode2.sel;
  16. const isSameTextOrFragment = !vnode1.sel && vnode1.sel === vnode2.sel
  17. ? typeof vnode1.text === typeof vnode2.text
  18. : true;
  19. return isSameSel && isSameKey && isSameIs && isSameTextOrFragment;
  20. }
  21. /**
  22. * @todo Remove this function when the document fragment is considered stable.
  23. */
  24. function documentFragmentIsNotSupported() {
  25. throw new Error("The document fragment is not supported on this platform.");
  26. }
  27. function isElement(api, vnode) {
  28. return api.isElement(vnode);
  29. }
  30. function isDocumentFragment(api, vnode) {
  31. return api.isDocumentFragment(vnode);
  32. }
  33. function createKeyToOldIdx(children, beginIdx, endIdx) {
  34. var _a;
  35. const map = {};
  36. for (let i = beginIdx; i <= endIdx; ++i) {
  37. const key = (_a = children[i]) === null || _a === void 0 ? void 0 : _a.key;
  38. if (key !== undefined) {
  39. map[key] = i;
  40. }
  41. }
  42. return map;
  43. }
  44. const hooks = [
  45. "create",
  46. "update",
  47. "remove",
  48. "destroy",
  49. "pre",
  50. "post",
  51. ];
  52. export function init(modules, domApi, options) {
  53. const cbs = {
  54. create: [],
  55. update: [],
  56. remove: [],
  57. destroy: [],
  58. pre: [],
  59. post: [],
  60. };
  61. const api = domApi !== undefined ? domApi : htmlDomApi;
  62. for (const hook of hooks) {
  63. for (const module of modules) {
  64. const currentHook = module[hook];
  65. if (currentHook !== undefined) {
  66. cbs[hook].push(currentHook);
  67. }
  68. }
  69. }
  70. function emptyNodeAt(elm) {
  71. const id = elm.id ? "#" + elm.id : "";
  72. // elm.className doesn't return a string when elm is an SVG element inside a shadowRoot.
  73. // https://stackoverflow.com/questions/29454340/detecting-classname-of-svganimatedstring
  74. const classes = elm.getAttribute("class");
  75. const c = classes ? "." + classes.split(" ").join(".") : "";
  76. return vnode(api.tagName(elm).toLowerCase() + id + c, {}, [], undefined, elm);
  77. }
  78. function emptyDocumentFragmentAt(frag) {
  79. return vnode(undefined, {}, [], undefined, frag);
  80. }
  81. function createRmCb(childElm, listeners) {
  82. return function rmCb() {
  83. if (--listeners === 0) {
  84. const parent = api.parentNode(childElm);
  85. api.removeChild(parent, childElm);
  86. }
  87. };
  88. }
  89. function createElm(vnode, insertedVnodeQueue) {
  90. var _a, _b, _c, _d;
  91. let i;
  92. let data = vnode.data;
  93. if (data !== undefined) {
  94. const init = (_a = data.hook) === null || _a === void 0 ? void 0 : _a.init;
  95. if (isDef(init)) {
  96. init(vnode);
  97. data = vnode.data;
  98. }
  99. }
  100. const children = vnode.children;
  101. const sel = vnode.sel;
  102. if (sel === "!") {
  103. if (isUndef(vnode.text)) {
  104. vnode.text = "";
  105. }
  106. vnode.elm = api.createComment(vnode.text);
  107. }
  108. else if (sel !== undefined) {
  109. // Parse selector
  110. const hashIdx = sel.indexOf("#");
  111. const dotIdx = sel.indexOf(".", hashIdx);
  112. const hash = hashIdx > 0 ? hashIdx : sel.length;
  113. const dot = dotIdx > 0 ? dotIdx : sel.length;
  114. const tag = hashIdx !== -1 || dotIdx !== -1
  115. ? sel.slice(0, Math.min(hash, dot))
  116. : sel;
  117. const elm = (vnode.elm =
  118. isDef(data) && isDef((i = data.ns))
  119. ? api.createElementNS(i, tag, data)
  120. : api.createElement(tag, data));
  121. if (hash < dot)
  122. elm.setAttribute("id", sel.slice(hash + 1, dot));
  123. if (dotIdx > 0)
  124. elm.setAttribute("class", sel.slice(dot + 1).replace(/\./g, " "));
  125. for (i = 0; i < cbs.create.length; ++i)
  126. cbs.create[i](emptyNode, vnode);
  127. if (is.array(children)) {
  128. for (i = 0; i < children.length; ++i) {
  129. const ch = children[i];
  130. if (ch != null) {
  131. api.appendChild(elm, createElm(ch, insertedVnodeQueue));
  132. }
  133. }
  134. }
  135. else if (is.primitive(vnode.text)) {
  136. api.appendChild(elm, api.createTextNode(vnode.text));
  137. }
  138. const hook = vnode.data.hook;
  139. if (isDef(hook)) {
  140. (_b = hook.create) === null || _b === void 0 ? void 0 : _b.call(hook, emptyNode, vnode);
  141. if (hook.insert) {
  142. insertedVnodeQueue.push(vnode);
  143. }
  144. }
  145. }
  146. else if (((_c = options === null || options === void 0 ? void 0 : options.experimental) === null || _c === void 0 ? void 0 : _c.fragments) && vnode.children) {
  147. vnode.elm = ((_d = api.createDocumentFragment) !== null && _d !== void 0 ? _d : documentFragmentIsNotSupported)();
  148. for (i = 0; i < cbs.create.length; ++i)
  149. cbs.create[i](emptyNode, vnode);
  150. for (i = 0; i < vnode.children.length; ++i) {
  151. const ch = vnode.children[i];
  152. if (ch != null) {
  153. api.appendChild(vnode.elm, createElm(ch, insertedVnodeQueue));
  154. }
  155. }
  156. }
  157. else {
  158. vnode.elm = api.createTextNode(vnode.text);
  159. }
  160. return vnode.elm;
  161. }
  162. function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
  163. for (; startIdx <= endIdx; ++startIdx) {
  164. const ch = vnodes[startIdx];
  165. if (ch != null) {
  166. api.insertBefore(parentElm, createElm(ch, insertedVnodeQueue), before);
  167. }
  168. }
  169. }
  170. function invokeDestroyHook(vnode) {
  171. var _a, _b;
  172. const data = vnode.data;
  173. if (data !== undefined) {
  174. (_b = (_a = data === null || data === void 0 ? void 0 : data.hook) === null || _a === void 0 ? void 0 : _a.destroy) === null || _b === void 0 ? void 0 : _b.call(_a, vnode);
  175. for (let i = 0; i < cbs.destroy.length; ++i)
  176. cbs.destroy[i](vnode);
  177. if (vnode.children !== undefined) {
  178. for (let j = 0; j < vnode.children.length; ++j) {
  179. const child = vnode.children[j];
  180. if (child != null && typeof child !== "string") {
  181. invokeDestroyHook(child);
  182. }
  183. }
  184. }
  185. }
  186. }
  187. function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
  188. var _a, _b;
  189. for (; startIdx <= endIdx; ++startIdx) {
  190. let listeners;
  191. let rm;
  192. const ch = vnodes[startIdx];
  193. if (ch != null) {
  194. if (isDef(ch.sel)) {
  195. invokeDestroyHook(ch);
  196. listeners = cbs.remove.length + 1;
  197. rm = createRmCb(ch.elm, listeners);
  198. for (let i = 0; i < cbs.remove.length; ++i)
  199. cbs.remove[i](ch, rm);
  200. const removeHook = (_b = (_a = ch === null || ch === void 0 ? void 0 : ch.data) === null || _a === void 0 ? void 0 : _a.hook) === null || _b === void 0 ? void 0 : _b.remove;
  201. if (isDef(removeHook)) {
  202. removeHook(ch, rm);
  203. }
  204. else {
  205. rm();
  206. }
  207. }
  208. else if (ch.children) {
  209. // Fragment node
  210. invokeDestroyHook(ch);
  211. removeVnodes(parentElm, ch.children, 0, ch.children.length - 1);
  212. }
  213. else {
  214. // Text node
  215. api.removeChild(parentElm, ch.elm);
  216. }
  217. }
  218. }
  219. }
  220. function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
  221. let oldStartIdx = 0;
  222. let newStartIdx = 0;
  223. let oldEndIdx = oldCh.length - 1;
  224. let oldStartVnode = oldCh[0];
  225. let oldEndVnode = oldCh[oldEndIdx];
  226. let newEndIdx = newCh.length - 1;
  227. let newStartVnode = newCh[0];
  228. let newEndVnode = newCh[newEndIdx];
  229. let oldKeyToIdx;
  230. let idxInOld;
  231. let elmToMove;
  232. let before;
  233. while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  234. if (oldStartVnode == null) {
  235. oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
  236. }
  237. else if (oldEndVnode == null) {
  238. oldEndVnode = oldCh[--oldEndIdx];
  239. }
  240. else if (newStartVnode == null) {
  241. newStartVnode = newCh[++newStartIdx];
  242. }
  243. else if (newEndVnode == null) {
  244. newEndVnode = newCh[--newEndIdx];
  245. }
  246. else if (sameVnode(oldStartVnode, newStartVnode)) {
  247. patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
  248. oldStartVnode = oldCh[++oldStartIdx];
  249. newStartVnode = newCh[++newStartIdx];
  250. }
  251. else if (sameVnode(oldEndVnode, newEndVnode)) {
  252. patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
  253. oldEndVnode = oldCh[--oldEndIdx];
  254. newEndVnode = newCh[--newEndIdx];
  255. }
  256. else if (sameVnode(oldStartVnode, newEndVnode)) {
  257. // Vnode moved right
  258. patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
  259. api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
  260. oldStartVnode = oldCh[++oldStartIdx];
  261. newEndVnode = newCh[--newEndIdx];
  262. }
  263. else if (sameVnode(oldEndVnode, newStartVnode)) {
  264. // Vnode moved left
  265. patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
  266. api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
  267. oldEndVnode = oldCh[--oldEndIdx];
  268. newStartVnode = newCh[++newStartIdx];
  269. }
  270. else {
  271. if (oldKeyToIdx === undefined) {
  272. oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
  273. }
  274. idxInOld = oldKeyToIdx[newStartVnode.key];
  275. if (isUndef(idxInOld)) {
  276. // New element
  277. api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
  278. }
  279. else {
  280. elmToMove = oldCh[idxInOld];
  281. if (elmToMove.sel !== newStartVnode.sel) {
  282. api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
  283. }
  284. else {
  285. patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
  286. oldCh[idxInOld] = undefined;
  287. api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
  288. }
  289. }
  290. newStartVnode = newCh[++newStartIdx];
  291. }
  292. }
  293. if (newStartIdx <= newEndIdx) {
  294. before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
  295. addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
  296. }
  297. if (oldStartIdx <= oldEndIdx) {
  298. removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
  299. }
  300. }
  301. function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
  302. var _a, _b, _c, _d, _e, _f, _g, _h;
  303. const hook = (_a = vnode.data) === null || _a === void 0 ? void 0 : _a.hook;
  304. (_b = hook === null || hook === void 0 ? void 0 : hook.prepatch) === null || _b === void 0 ? void 0 : _b.call(hook, oldVnode, vnode);
  305. const elm = (vnode.elm = oldVnode.elm);
  306. if (oldVnode === vnode)
  307. return;
  308. if (vnode.data !== undefined ||
  309. (isDef(vnode.text) && vnode.text !== oldVnode.text)) {
  310. (_c = vnode.data) !== null && _c !== void 0 ? _c : (vnode.data = {});
  311. (_d = oldVnode.data) !== null && _d !== void 0 ? _d : (oldVnode.data = {});
  312. for (let i = 0; i < cbs.update.length; ++i)
  313. cbs.update[i](oldVnode, vnode);
  314. (_g = (_f = (_e = vnode.data) === null || _e === void 0 ? void 0 : _e.hook) === null || _f === void 0 ? void 0 : _f.update) === null || _g === void 0 ? void 0 : _g.call(_f, oldVnode, vnode);
  315. }
  316. const oldCh = oldVnode.children;
  317. const ch = vnode.children;
  318. if (isUndef(vnode.text)) {
  319. if (isDef(oldCh) && isDef(ch)) {
  320. if (oldCh !== ch)
  321. updateChildren(elm, oldCh, ch, insertedVnodeQueue);
  322. }
  323. else if (isDef(ch)) {
  324. if (isDef(oldVnode.text))
  325. api.setTextContent(elm, "");
  326. addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
  327. }
  328. else if (isDef(oldCh)) {
  329. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  330. }
  331. else if (isDef(oldVnode.text)) {
  332. api.setTextContent(elm, "");
  333. }
  334. }
  335. else if (oldVnode.text !== vnode.text) {
  336. if (isDef(oldCh)) {
  337. removeVnodes(elm, oldCh, 0, oldCh.length - 1);
  338. }
  339. api.setTextContent(elm, vnode.text);
  340. }
  341. (_h = hook === null || hook === void 0 ? void 0 : hook.postpatch) === null || _h === void 0 ? void 0 : _h.call(hook, oldVnode, vnode);
  342. }
  343. return function patch(oldVnode, vnode) {
  344. let i, elm, parent;
  345. const insertedVnodeQueue = [];
  346. for (i = 0; i < cbs.pre.length; ++i)
  347. cbs.pre[i]();
  348. if (isElement(api, oldVnode)) {
  349. oldVnode = emptyNodeAt(oldVnode);
  350. }
  351. else if (isDocumentFragment(api, oldVnode)) {
  352. oldVnode = emptyDocumentFragmentAt(oldVnode);
  353. }
  354. if (sameVnode(oldVnode, vnode)) {
  355. patchVnode(oldVnode, vnode, insertedVnodeQueue);
  356. }
  357. else {
  358. elm = oldVnode.elm;
  359. parent = api.parentNode(elm);
  360. createElm(vnode, insertedVnodeQueue);
  361. if (parent !== null) {
  362. api.insertBefore(parent, vnode.elm, api.nextSibling(elm));
  363. removeVnodes(parent, [oldVnode], 0, 0);
  364. }
  365. }
  366. for (i = 0; i < insertedVnodeQueue.length; ++i) {
  367. insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
  368. }
  369. for (i = 0; i < cbs.post.length; ++i)
  370. cbs.post[i]();
  371. return vnode;
  372. };
  373. }
  374. //# sourceMappingURL=init.js.map