1 | (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
|
2 | 'use strict';
|
3 |
|
4 | var snabbdom = require('../../snabbdom.js');
|
5 | var patch = snabbdom.init([require('../../modules/attributes')]);
|
6 | var h = require('../../h.js');
|
7 |
|
8 | var vnode;
|
9 |
|
10 | window.addEventListener('DOMContentLoaded', function () {
|
11 | var container = document.getElementById('container');
|
12 | var vnode = h('div', [h('svg', { attrs: { width: 100, height: 100 } }, [h('circle', { attrs: { cx: 50, cy: 50, r: 40, stroke: 'green', 'stroke-width': 4, fill: 'yellow' } })])]);
|
13 | vnode = patch(container, vnode);
|
14 | });
|
15 |
|
16 | },{"../../h.js":2,"../../modules/attributes":4,"../../snabbdom.js":5}],2:[function(require,module,exports){
|
17 | 'use strict';
|
18 |
|
19 | var VNode = require('./vnode');
|
20 | var is = require('./is');
|
21 |
|
22 | function addNS(data, children) {
|
23 | data.ns = 'http://www.w3.org/2000/svg';
|
24 | if (children !== undefined) {
|
25 | for (var i = 0; i < children.length; ++i) {
|
26 | addNS(children[i].data, children[i].children);
|
27 | }
|
28 | }
|
29 | }
|
30 |
|
31 | module.exports = function h(sel, b, c) {
|
32 | var data = {},
|
33 | children,
|
34 | text,
|
35 | i;
|
36 | if (arguments.length === 3) {
|
37 | data = b;
|
38 | if (is.array(c)) {
|
39 | children = c;
|
40 | } else if (is.primitive(c)) {
|
41 | text = c;
|
42 | }
|
43 | } else if (arguments.length === 2) {
|
44 | if (is.array(b)) {
|
45 | children = b;
|
46 | } else if (is.primitive(b)) {
|
47 | text = b;
|
48 | } else {
|
49 | data = b;
|
50 | }
|
51 | }
|
52 | if (is.array(children)) {
|
53 | for (i = 0; i < children.length; ++i) {
|
54 | if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
|
55 | }
|
56 | }
|
57 | if (sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g') {
|
58 | addNS(data, children);
|
59 | }
|
60 | return VNode(sel, data, children, text, undefined);
|
61 | };
|
62 |
|
63 | },{"./is":3,"./vnode":6}],3:[function(require,module,exports){
|
64 | 'use strict';
|
65 |
|
66 | module.exports = {
|
67 | array: Array.isArray,
|
68 | primitive: function primitive(s) {
|
69 | return typeof s === 'string' || typeof s === 'number';
|
70 | } };
|
71 |
|
72 | },{}],4:[function(require,module,exports){
|
73 | "use strict";
|
74 |
|
75 | var booleanAttrs = ["allowfullscreen", "async", "autofocus", "autoplay", "checked", "compact", "controls", "declare", "default", "defaultchecked", "defaultmuted", "defaultselected", "defer", "disabled", "draggable", "enabled", "formnovalidate", "hidden", "indeterminate", "inert", "ismap", "itemscope", "loop", "multiple", "muted", "nohref", "noresize", "noshade", "novalidate", "nowrap", "open", "pauseonexit", "readonly", "required", "reversed", "scoped", "seamless", "selected", "sortable", "spellcheck", "translate", "truespeed", "typemustmatch", "visible"];
|
76 |
|
77 | var booleanAttrsDict = {};
|
78 | for (var i = 0, len = booleanAttrs.length; i < len; i++) {
|
79 | booleanAttrsDict[booleanAttrs[i]] = true;
|
80 | }
|
81 |
|
82 | function updateAttrs(oldVnode, vnode) {
|
83 | var key,
|
84 | cur,
|
85 | old,
|
86 | elm = vnode.elm,
|
87 | oldAttrs = oldVnode.data.attrs || {},
|
88 | attrs = vnode.data.attrs || {};
|
89 |
|
90 |
|
91 | for (key in attrs) {
|
92 | cur = attrs[key];
|
93 | old = oldAttrs[key];
|
94 | if (old !== cur) {
|
95 |
|
96 | if (!cur && booleanAttrsDict[key]) elm.removeAttribute(key);else elm.setAttribute(key, cur);
|
97 | }
|
98 | }
|
99 |
|
100 |
|
101 |
|
102 | for (key in oldAttrs) {
|
103 | if (!(key in attrs)) {
|
104 | elm.removeAttribute(key);
|
105 | }
|
106 | }
|
107 | }
|
108 |
|
109 | module.exports = { create: updateAttrs, update: updateAttrs };
|
110 |
|
111 | },{}],5:[function(require,module,exports){
|
112 |
|
113 |
|
114 | 'use strict';
|
115 |
|
116 | var VNode = require('./vnode');
|
117 | var is = require('./is');
|
118 |
|
119 | function isUndef(s) {
|
120 | return s === undefined;
|
121 | }
|
122 | function isDef(s) {
|
123 | return s !== undefined;
|
124 | }
|
125 |
|
126 | function emptyNodeAt(elm) {
|
127 | return VNode(elm.tagName, {}, [], undefined, elm);
|
128 | }
|
129 |
|
130 | var emptyNode = VNode('', {}, [], undefined, undefined);
|
131 |
|
132 | function sameVnode(vnode1, vnode2) {
|
133 | return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel;
|
134 | }
|
135 |
|
136 | function createKeyToOldIdx(children, beginIdx, endIdx) {
|
137 | var i,
|
138 | map = {},
|
139 | key;
|
140 | for (i = beginIdx; i <= endIdx; ++i) {
|
141 | key = children[i].key;
|
142 | if (isDef(key)) map[key] = i;
|
143 | }
|
144 | return map;
|
145 | }
|
146 |
|
147 | function createRmCb(childElm, listeners) {
|
148 | return function () {
|
149 | if (--listeners === 0) childElm.parentElement.removeChild(childElm);
|
150 | };
|
151 | }
|
152 |
|
153 | var hooks = ['create', 'update', 'remove', 'destroy', 'pre', 'post'];
|
154 |
|
155 | function init(modules) {
|
156 | var i,
|
157 | j,
|
158 | cbs = {};
|
159 | for (i = 0; i < hooks.length; ++i) {
|
160 | cbs[hooks[i]] = [];
|
161 | for (j = 0; j < modules.length; ++j) {
|
162 | if (modules[j][hooks[i]] !== undefined) cbs[hooks[i]].push(modules[j][hooks[i]]);
|
163 | }
|
164 | }
|
165 |
|
166 | function createElm(vnode, insertedVnodeQueue) {
|
167 | var i,
|
168 | data = vnode.data;
|
169 | if (isDef(data)) {
|
170 | if (isDef(i = data.hook) && isDef(i = i.init)) i(vnode);
|
171 | if (isDef(i = data.vnode)) vnode = i;
|
172 | }
|
173 | var elm,
|
174 | children = vnode.children,
|
175 | sel = vnode.sel;
|
176 | if (isDef(sel)) {
|
177 |
|
178 | var hashIdx = sel.indexOf('#');
|
179 | var dotIdx = sel.indexOf('.', hashIdx);
|
180 | var hash = hashIdx > 0 ? hashIdx : sel.length;
|
181 | var dot = dotIdx > 0 ? dotIdx : sel.length;
|
182 | var tag = hashIdx !== -1 || dotIdx !== -1 ? sel.slice(0, Math.min(hash, dot)) : sel;
|
183 | elm = vnode.elm = isDef(data) && isDef(i = data.ns) ? document.createElementNS(i, tag) : document.createElement(tag);
|
184 | if (hash < dot) elm.id = sel.slice(hash + 1, dot);
|
185 | if (dotIdx > 0) elm.className = sel.slice(dot + 1).replace(/\./g, ' ');
|
186 | if (is.array(children)) {
|
187 | for (i = 0; i < children.length; ++i) {
|
188 | elm.appendChild(createElm(children[i], insertedVnodeQueue));
|
189 | }
|
190 | } else if (is.primitive(vnode.text)) {
|
191 | elm.appendChild(document.createTextNode(vnode.text));
|
192 | }
|
193 | for (i = 0; i < cbs.create.length; ++i) cbs.create[i](emptyNode, vnode);
|
194 | i = vnode.data.hook;
|
195 | if (isDef(i)) {
|
196 | if (i.create) i.create(emptyNode, vnode);
|
197 | if (i.insert) insertedVnodeQueue.push(vnode);
|
198 | }
|
199 | } else {
|
200 | elm = vnode.elm = document.createTextNode(vnode.text);
|
201 | }
|
202 | return vnode.elm;
|
203 | }
|
204 |
|
205 | function addVnodes(parentElm, before, vnodes, startIdx, endIdx, insertedVnodeQueue) {
|
206 | for (; startIdx <= endIdx; ++startIdx) {
|
207 | parentElm.insertBefore(createElm(vnodes[startIdx], insertedVnodeQueue), before);
|
208 | }
|
209 | }
|
210 |
|
211 | function invokeDestroyHook(vnode) {
|
212 | var i = vnode.data,
|
213 | j;
|
214 | if (isDef(i)) {
|
215 | if (isDef(i = i.hook) && isDef(i = i.destroy)) i(vnode);
|
216 | for (i = 0; i < cbs.destroy.length; ++i) cbs.destroy[i](vnode);
|
217 | if (isDef(i = vnode.children)) {
|
218 | for (j = 0; j < vnode.children.length; ++j) {
|
219 | invokeDestroyHook(vnode.children[j]);
|
220 | }
|
221 | }
|
222 | }
|
223 | }
|
224 |
|
225 | function removeVnodes(parentElm, vnodes, startIdx, endIdx) {
|
226 | for (; startIdx <= endIdx; ++startIdx) {
|
227 | var i,
|
228 | listeners,
|
229 | rm,
|
230 | ch = vnodes[startIdx];
|
231 | if (isDef(ch)) {
|
232 | if (isDef(ch.sel)) {
|
233 | invokeDestroyHook(ch);
|
234 | listeners = cbs.remove.length + 1;
|
235 | rm = createRmCb(ch.elm, listeners);
|
236 | for (i = 0; i < cbs.remove.length; ++i) cbs.remove[i](ch, rm);
|
237 | if (isDef(i = ch.data) && isDef(i = i.hook) && isDef(i = i.remove)) {
|
238 | i(ch, rm);
|
239 | } else {
|
240 | rm();
|
241 | }
|
242 | } else {
|
243 |
|
244 | parentElm.removeChild(ch.elm);
|
245 | }
|
246 | }
|
247 | }
|
248 | }
|
249 |
|
250 | function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
|
251 | var oldStartIdx = 0,
|
252 | newStartIdx = 0;
|
253 | var oldEndIdx = oldCh.length - 1;
|
254 | var oldStartVnode = oldCh[0];
|
255 | var oldEndVnode = oldCh[oldEndIdx];
|
256 | var newEndIdx = newCh.length - 1;
|
257 | var newStartVnode = newCh[0];
|
258 | var newEndVnode = newCh[newEndIdx];
|
259 | var oldKeyToIdx, idxInOld, elmToMove, before;
|
260 |
|
261 | while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
|
262 | if (isUndef(oldStartVnode)) {
|
263 | oldStartVnode = oldCh[++oldStartIdx];
|
264 | } else if (isUndef(oldEndVnode)) {
|
265 | oldEndVnode = oldCh[--oldEndIdx];
|
266 | } else if (sameVnode(oldStartVnode, newStartVnode)) {
|
267 | patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
|
268 | oldStartVnode = oldCh[++oldStartIdx];
|
269 | newStartVnode = newCh[++newStartIdx];
|
270 | } else if (sameVnode(oldEndVnode, newEndVnode)) {
|
271 | patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
|
272 | oldEndVnode = oldCh[--oldEndIdx];
|
273 | newEndVnode = newCh[--newEndIdx];
|
274 | } else if (sameVnode(oldStartVnode, newEndVnode)) {
|
275 |
|
276 | patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
|
277 | parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling);
|
278 | oldStartVnode = oldCh[++oldStartIdx];
|
279 | newEndVnode = newCh[--newEndIdx];
|
280 | } else if (sameVnode(oldEndVnode, newStartVnode)) {
|
281 |
|
282 | patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
|
283 | parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm);
|
284 | oldEndVnode = oldCh[--oldEndIdx];
|
285 | newStartVnode = newCh[++newStartIdx];
|
286 | } else {
|
287 | if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
|
288 | idxInOld = oldKeyToIdx[newStartVnode.key];
|
289 | if (isUndef(idxInOld)) {
|
290 |
|
291 | parentElm.insertBefore(createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
|
292 | newStartVnode = newCh[++newStartIdx];
|
293 | } else {
|
294 | elmToMove = oldCh[idxInOld];
|
295 | patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
|
296 | oldCh[idxInOld] = undefined;
|
297 | parentElm.insertBefore(elmToMove.elm, oldStartVnode.elm);
|
298 | newStartVnode = newCh[++newStartIdx];
|
299 | }
|
300 | }
|
301 | }
|
302 | if (oldStartIdx > oldEndIdx) {
|
303 | before = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm;
|
304 | addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
|
305 | } else if (newStartIdx > newEndIdx) {
|
306 | removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
|
307 | }
|
308 | }
|
309 |
|
310 | function patchVnode(oldVnode, vnode, insertedVnodeQueue) {
|
311 | var i, hook;
|
312 | if (isDef(i = vnode.data) && isDef(hook = i.hook) && isDef(i = hook.prepatch)) {
|
313 | i(oldVnode, vnode);
|
314 | }
|
315 | if (isDef(i = oldVnode.data) && isDef(i = i.vnode)) oldVnode = i;
|
316 | if (isDef(i = vnode.data) && isDef(i = i.vnode)) vnode = i;
|
317 | var elm = vnode.elm = oldVnode.elm,
|
318 | oldCh = oldVnode.children,
|
319 | ch = vnode.children;
|
320 | if (oldVnode === vnode) return;
|
321 | if (isDef(vnode.data)) {
|
322 | for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode);
|
323 | i = vnode.data.hook;
|
324 | if (isDef(i) && isDef(i = i.update)) i(oldVnode, vnode);
|
325 | }
|
326 | if (isUndef(vnode.text)) {
|
327 | if (isDef(oldCh) && isDef(ch)) {
|
328 | if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue);
|
329 | } else if (isDef(ch)) {
|
330 | addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
|
331 | } else if (isDef(oldCh)) {
|
332 | removeVnodes(elm, oldCh, 0, oldCh.length - 1);
|
333 | }
|
334 | } else if (oldVnode.text !== vnode.text) {
|
335 | elm.textContent = vnode.text;
|
336 | }
|
337 | if (isDef(hook) && isDef(i = hook.postpatch)) {
|
338 | i(oldVnode, vnode);
|
339 | }
|
340 | }
|
341 |
|
342 | return function (oldVnode, vnode) {
|
343 | var i;
|
344 | var insertedVnodeQueue = [];
|
345 | for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]();
|
346 | if (oldVnode instanceof Element) {
|
347 | if (oldVnode.parentElement !== null) {
|
348 | createElm(vnode, insertedVnodeQueue);
|
349 | oldVnode.parentElement.replaceChild(vnode.elm, oldVnode);
|
350 | } else {
|
351 | oldVnode = emptyNodeAt(oldVnode);
|
352 | patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
353 | }
|
354 | } else {
|
355 | patchVnode(oldVnode, vnode, insertedVnodeQueue);
|
356 | }
|
357 | for (i = 0; i < insertedVnodeQueue.length; ++i) {
|
358 | insertedVnodeQueue[i].data.hook.insert(insertedVnodeQueue[i]);
|
359 | }
|
360 | for (i = 0; i < cbs.post.length; ++i) cbs.post[i]();
|
361 | return vnode;
|
362 | };
|
363 | }
|
364 |
|
365 | module.exports = { init: init };
|
366 |
|
367 | },{"./is":3,"./vnode":6}],6:[function(require,module,exports){
|
368 | "use strict";
|
369 |
|
370 | module.exports = function (sel, data, children, text, elm) {
|
371 | var key = data === undefined ? undefined : data.key;
|
372 | return { sel: sel, data: data, children: children,
|
373 | text: text, elm: elm, key: key };
|
374 | };
|
375 |
|
376 | },{}]},{},[1]);
|