fpereiro/gotob

One .min.js to rule 'em all.

gotob's Issues

Checkboxes in todoMVC example are not visible

I can click to the left of items to cross them out. But I can't see the checkboxes, on either Firefox or Chrome on Mac OS. Is this intentional?

Document Unicode Errors

So, unicode in attribute names is a bit of a minefield if one forgets to save the min.js file as UTF-8 on Windows, from what I can tell.

Saving it as UTF-8 with BOM in Sublime Text cleared up this error, but it might be worth adding it to the documentation, so that when other people hit it, it doesn't require them to dg into the code.

The minified file is bigger than source file

gotoB.js is 30K in turns of file

Currently, the file size of gotoB.js is 30K, and the file size of gotoB.min.js is 44K, which is bigger than the source file.

If you use the minify cli, you can reduce the file size of gotoB.min.js to 16K.

Setup Steps:

npm i -D minify
npx minify gotoB.js > gotoB.min.js

Complex interactive animations

One of the quality measures of a UI library is how well it handles layout in time.

The best example is interactive animations with mutually influencing behavior. E.g. vlang/ui#7 (comment) or in other words "use gotoB as export format for Wick".

Do you think it's possible? And what are the shortcommings (performance? any missing functionality? verbosity? ...)?

Logged Error in GotoB

So, I was working on a gotob application, and I had tried to fire off a pair of change events for re-ordering events in a list, and found this in my console:

BOOM! YOU FOUND A BUG IN gotoB!

: {"action":"sequence","position":11,"diffitem":"rem <div {\"id\":\"в2\",\"path-в\":\"State:commit:comments:0\"}","id":"в1","where":[3,0,0],"k":2,"innerHTML":"<h1>List Proto</h1><style>#topline .wide-cell{min-width:300px;}</style><h3>Items:</h3><div id=\"в2\" path-в=\"State:commit:comments:0\"></div><div id=\"в3\" path-в=\"State:commit:comments:1\"></div><div id=\"в4\" path-в=\"State:commit:comments:2\"></div><div id=\"в5\" path-в=\"State:commit:comments:3\"></div><div id=\"в6\" path-в=\"State:commit:comments:4\"></div><div id=\"в7\" path-в=\"State:commit:comments:5\"></div><div id=\"в8\" path-в=\"State:commit:comments:6\"></div><div id=\"в9\" path-в=\"State:commit:comments:7\"></div><div id=\"в10\" path-в=\"State:commit:comments:8\"></div><div id=\"в11\" path-в=\"State:commit:comments:9\"></div><table><tbody><tr><td>456</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 0);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 0);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 0);\">del</button></td></tr><tr><td>123</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 1);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 1);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 1);\">del</button></td></tr><tr><td>3</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 2);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 2);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 2);\">del</button></td></tr><tr><td>5</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 3);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 3);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 3);\">del</button></td></tr><tr><td>4</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 4);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 4);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 4);\">del</button></td></tr><tr><td>9</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 5);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 5);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 5);\">del</button></td></tr><tr><td>6</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 6);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 6);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 6);\">del</button></td></tr><tr><td>2</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 7);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 7);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 7);\">del</button></td></tr><tr><td>7</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 8);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 8);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 8);\">del</button></td></tr><tr><td>8</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 9);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 9);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 9);\">del</button></td></tr></tbody></table><br><label>Add Item<br><input type=\"text\" size=\"50\" onchange=\"B.do ({from: {ev: &quot;onchange&quot;, attrs: {&quot;type&quot;: &quot;text&quot;, &quot;value&quot;: &quot;&quot;, &quot;size&quot;: 50}}}, &quot;set&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;newComment&quot;], this.value);\" onkeydown=\"B.do ({from: {ev: &quot;onkeydown&quot;, attrs: {&quot;type&quot;: &quot;text&quot;, &quot;value&quot;: &quot;&quot;, &quot;size&quot;: 50}}}, &quot;creating.keydown&quot;, [&quot;*&quot;], event.keyCode, value, [&quot;State&quot;,&quot;commit&quot;,&quot;newComment&quot;]);\"></label><br><button onclick=\"B.do ({from: {ev: &quot;onclick&quot;, attrs: {}}}, &quot;copy&quot;, &quot;form&quot;, this.value);\">Copy list</button>","expectedHTML":"<h1>List Proto</h1><style>#topline .wide-cell{min-width:300px;}</style><h3>Items:</h3><table><div id=\"в12\" path-в=\"State:commit:comments:0\"><tr><td>456</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 0);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 0);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 0);\">del</button></td></tr></div><div id=\"в13\" path-в=\"State:commit:comments:1\"><tr><td>123</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 1);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 1);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 1);\">del</button></td></tr></div><div id=\"в14\" path-в=\"State:commit:comments:2\"><tr><td>3</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 2);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 2);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 2);\">del</button></td></tr></div><div id=\"в15\" path-в=\"State:commit:comments:3\"><tr><td>4</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 3);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 3);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 3);\">del</button></td></tr></div><div id=\"в16\" path-в=\"State:commit:comments:4\"><tr><td>9</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 4);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 4);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 4);\">del</button></td></tr></div><div id=\"в17\" path-в=\"State:commit:comments:5\"><tr><td>6</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 5);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 5);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 5);\">del</button></td></tr></div><div id=\"в18\" path-в=\"State:commit:comments:6\"><tr><td>2</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 6);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 6);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 6);\">del</button></td></tr></div><div id=\"в19\" path-в=\"State:commit:comments:7\"><tr><td>7</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 7);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 7);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 7);\">del</button></td></tr></div><div id=\"в20\" path-в=\"State:commit:comments:8\"><tr><td>8</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 8);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 8);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 8);\">del</button></td></tr></div></table><br><label>Add Item<br><input type=\"text\" size=\"50\" onchange=\"B.do ({from: {ev: &quot;onchange&quot;, attrs: {&quot;type&quot;: &quot;text&quot;, &quot;value&quot;: &quot;&quot;, &quot;size&quot;: 50}}}, &quot;set&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;newComment&quot;], this.value);\" onkeydown=\"B.do ({from: {ev: &quot;onkeydown&quot;, attrs: {&quot;type&quot;: &quot;text&quot;, &quot;value&quot;: &quot;&quot;, &quot;size&quot;: 50}}}, &quot;creating.keydown&quot;, [&quot;*&quot;], event.keyCode, value, [&quot;State&quot;,&quot;commit&quot;,&quot;newComment&quot;]);\"></label><br><button onclick=\"B.do ({from: {ev: &quot;onclick&quot;, attrs: {}}}, &quot;copy&quot;, &quot;form&quot;, this.value);\">Copy list</button>","oldView":[["h1","List Proto"],[["style",[["#topline .wide-cell",{"min-width":"300px"}]]],["h3","Items:"],["table",[["div",{"id":"в2","path-в":"State:commit:comments:0"},["LITERAL","<tr><td>456</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 0);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 0);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 0);\">del</button></td></tr>"]],["div",{"id":"в3","path-в":"State:commit:comments:1"},["LITERAL","<tr><td>123</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 1);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 1);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 1);\">del</button></td></tr>"]],["div",{"id":"в4","path-в":"State:commit:comments:2"},["LITERAL","<tr><td>3</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 2);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 2);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 2);\">del</button></td></tr>"]],["div",{"id":"в5","path-в":"State:commit:comments:3"},["LITERAL","<tr><td>5</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 3);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 3);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 3);\">del</button></td></tr>"]],["div",{"id":"в6","path-в":"State:commit:comments:4"},["LITERAL","<tr><td>4</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 4);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 4);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 4);\">del</button></td></tr>"]],["div",{"id":"в7","path-в":"State:commit:comments:5"},["LITERAL","<tr><td>9</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 5);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 5);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 5);\">del</button></td></tr>"]],["div",{"id":"в8","path-в":"State:commit:comments:6"},["LITERAL","<tr><td>6</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 6);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 6);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 6);\">del</button></td></tr>"]],["div",{"id":"в9","path-в":"State:commit:comments:7"},["LITERAL","<tr><td>2</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 7);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 7);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 7);\">del</button></td></tr>"]],["div",{"id":"в10","path-в":"State:commit:comments:8"},["LITERAL","<tr><td>7</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 8);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 8);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 8);\">del</button></td></tr>"]],["div",{"id":"в11","path-в":"State:commit:comments:9"},["LITERAL","<tr><td>8</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 9);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 9);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 9);\">del</button></td></tr>"]]]],["br"],["label",["Add Item",["br"],["input",{"type":"text","value":"","size":50,"onchange":"B.do ({from: {ev: \"onchange\", attrs: {\"type\": \"text\", \"value\": \"\", \"size\": 50}}}, \"set\", [\"State\",\"commit\",\"newComment\"], this.value);","onkeydown":"B.do ({from: {ev: \"onkeydown\", attrs: {\"type\": \"text\", \"value\": \"\", \"size\": 50}}}, \"creating.keydown\", [\"*\"], event.keyCode, value, [\"State\",\"commit\",\"newComment\"]);"}]]],["br"],["button",{"onclick":"B.do ({from: {ev: \"onclick\", attrs: {}}}, \"copy\", \"form\", this.value);"},"Copy list"]]],"newView":[["h1","List Proto"],[["style",[["#topline .wide-cell",{"min-width":"300px"}]]],["h3","Items:"],["table",[["div",{"id":"в12","path-в":"State:commit:comments:0"},["LITERAL","<tr><td>456</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 0);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 0);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 0);\">del</button></td></tr>"]],["div",{"id":"в13","path-в":"State:commit:comments:1"},["LITERAL","<tr><td>123</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 1);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 1);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 1);\">del</button></td></tr>"]],["div",{"id":"в14","path-в":"State:commit:comments:2"},["LITERAL","<tr><td>3</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 2);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 2);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 2);\">del</button></td></tr>"]],["div",{"id":"в15","path-в":"State:commit:comments:3"},["LITERAL","<tr><td>4</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 3);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 3);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 3);\">del</button></td></tr>"]],["div",{"id":"в16","path-в":"State:commit:comments:4"},["LITERAL","<tr><td>9</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 4);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 4);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 4);\">del</button></td></tr>"]],["div",{"id":"в17","path-в":"State:commit:comments:5"},["LITERAL","<tr><td>6</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 5);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 5);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 5);\">del</button></td></tr>"]],["div",{"id":"в18","path-в":"State:commit:comments:6"},["LITERAL","<tr><td>2</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 6);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 6);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 6);\">del</button></td></tr>"]],["div",{"id":"в19","path-в":"State:commit:comments:7"},["LITERAL","<tr><td>7</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 7);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 7);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 7);\">del</button></td></tr>"]],["div",{"id":"в20","path-в":"State:commit:comments:8"},["LITERAL","<tr><td>8</td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;up&quot;, 8);\">up</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;move-comment&quot;, &quot;down&quot;, 8);\">down</button></td><td><button onmousedown=\"B.do ({from: {ev: &quot;onmousedown&quot;, attrs: {}}}, &quot;rem&quot;, [&quot;State&quot;,&quot;commit&quot;,&quot;comments&quot;], 8);\">del</button></td></tr>"]]]],["br"],["label",["Add Item",["br"],["input",{"type":"text","value":"","size":50,"onchange":"B.do ({from: {ev: \"onchange\", attrs: {\"type\": \"text\", \"value\": \"\", \"size\": 50}}}, \"set\", [\"State\",\"commit\",\"newComment\"], this.value);","onkeydown":"B.do ({from: {ev: \"onkeydown\", attrs: {\"type\": \"text\", \"value\": \"\", \"size\": 50}}}, \"creating.keydown\", [\"*\"], event.keyCode, value, [\"State\",\"commit\",\"newComment\"]);"}]]],["br"],["button",{"onclick":"B.do ({from: {ev: \"onclick\", attrs: {}}}, \"copy\", \"form\", this.value);"},"Copy list"]]],"diff":{"0":["keep","<h1",{"el":{},"old":[0],"New":[0],"active":false}],"1":["keep","List Proto",{"el":{},"old":[0,0],"New":[0,0]}],"2":["keep",">"],"3":["keep","<style",{"el":{},"old":[1],"New":[1],"active":false}],"4":["keep","#topline .wide-cell{min-width:300px;}",{"el":{},"old":[1,0],"New":[1,0]}],"5":["keep",">"],"6":["keep","<h3",{"el":{},"old":[2],"New":[2],"active":false}],"7":["keep","Items:",{"el":{},"old":[2,0],"New":[2,0]}],"8":["keep",">"],"9":["keep","<table",{"el":{},"old":[3],"New":[3],"active":false}],"10":["keep","<tbody",{"old":[3,0],"New":[3,0],"active":false}],"11":["rem","<div {\"id\":\"в2\",\"path-в\":\"State:commit:comments:0\"}"],"12":["add","<div {\"id\":\"в12\",\"path-в\":\"State:commit:comments:0\"}"],"13":["keep","<tr"],"14":["keep","<td"],"15":["keep","456"],"16":["keep",">"],"17":["keep","<td"],"18":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 0);\"}"],"19":["keep","up"],"20":["keep",">"],"21":["keep",">"],"22":["keep","<td"],"23":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 0);\"}"],"24":["keep","down"],"25":["keep",">"],"26":["keep",">"],"27":["keep","<td"],"28":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 0);\"}"],"29":["keep","del"],"30":["keep",">"],"31":["keep",">"],"32":["keep",">"],"33":["keep",">"],"34":["rem","<div {\"id\":\"в3\",\"path-в\":\"State:commit:comments:1\"}"],"35":["add","<div {\"id\":\"в13\",\"path-в\":\"State:commit:comments:1\"}"],"36":["keep","<tr"],"37":["keep","<td"],"38":["keep","123"],"39":["keep",">"],"40":["keep","<td"],"41":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 1);\"}"],"42":["keep","up"],"43":["keep",">"],"44":["keep",">"],"45":["keep","<td"],"46":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 1);\"}"],"47":["keep","down"],"48":["keep",">"],"49":["keep",">"],"50":["keep","<td"],"51":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 1);\"}"],"52":["keep","del"],"53":["keep",">"],"54":["keep",">"],"55":["keep",">"],"56":["keep",">"],"57":["rem","<div {\"id\":\"в4\",\"path-в\":\"State:commit:comments:2\"}"],"58":["add","<div {\"id\":\"в14\",\"path-в\":\"State:commit:comments:2\"}"],"59":["keep","<tr"],"60":["keep","<td"],"61":["keep","3"],"62":["keep",">"],"63":["keep","<td"],"64":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 2);\"}"],"65":["keep","up"],"66":["keep",">"],"67":["keep",">"],"68":["keep","<td"],"69":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 2);\"}"],"70":["keep","down"],"71":["keep",">"],"72":["keep",">"],"73":["keep","<td"],"74":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 2);\"}"],"75":["keep","del"],"76":["keep",">"],"77":["keep",">"],"78":["keep",">"],"79":["keep",">"],"80":["rem","<div {\"id\":\"в5\",\"path-в\":\"State:commit:comments:3\"}"],"81":["add","<div {\"id\":\"в15\",\"path-в\":\"State:commit:comments:3\"}"],"82":["keep","<tr"],"83":["keep","<td"],"84":["rem","5"],"85":["add","4"],"86":["keep",">"],"87":["keep","<td"],"88":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 3);\"}"],"89":["keep","up"],"90":["keep",">"],"91":["keep",">"],"92":["keep","<td"],"93":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 3);\"}"],"94":["keep","down"],"95":["keep",">"],"96":["keep",">"],"97":["keep","<td"],"98":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 3);\"}"],"99":["keep","del"],"100":["keep",">"],"101":["keep",">"],"102":["keep",">"],"103":["keep",">"],"104":["rem","<div {\"id\":\"в6\",\"path-в\":\"State:commit:comments:4\"}"],"105":["add","<div {\"id\":\"в16\",\"path-в\":\"State:commit:comments:4\"}"],"106":["keep","<tr"],"107":["keep","<td"],"108":["rem","4"],"109":["add","9"],"110":["keep",">"],"111":["keep","<td"],"112":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 4);\"}"],"113":["keep","up"],"114":["keep",">"],"115":["keep",">"],"116":["keep","<td"],"117":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 4);\"}"],"118":["keep","down"],"119":["keep",">"],"120":["keep",">"],"121":["keep","<td"],"122":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 4);\"}"],"123":["keep","del"],"124":["keep",">"],"125":["keep",">"],"126":["keep",">"],"127":["keep",">"],"128":["rem","<div {\"id\":\"в7\",\"path-в\":\"State:commit:comments:5\"}"],"129":["add","<div {\"id\":\"в17\",\"path-в\":\"State:commit:comments:5\"}"],"130":["keep","<tr"],"131":["keep","<td"],"132":["rem","9"],"133":["add","6"],"134":["keep",">"],"135":["keep","<td"],"136":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 5);\"}"],"137":["keep","up"],"138":["keep",">"],"139":["keep",">"],"140":["keep","<td"],"141":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 5);\"}"],"142":["keep","down"],"143":["keep",">"],"144":["keep",">"],"145":["keep","<td"],"146":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 5);\"}"],"147":["keep","del"],"148":["keep",">"],"149":["keep",">"],"150":["keep",">"],"151":["keep",">"],"152":["rem","<div {\"id\":\"в8\",\"path-в\":\"State:commit:comments:6\"}"],"153":["add","<div {\"id\":\"в18\",\"path-в\":\"State:commit:comments:6\"}"],"154":["keep","<tr"],"155":["keep","<td"],"156":["rem","6"],"157":["add","2"],"158":["keep",">"],"159":["keep","<td"],"160":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 6);\"}"],"161":["keep","up"],"162":["keep",">"],"163":["keep",">"],"164":["keep","<td"],"165":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 6);\"}"],"166":["keep","down"],"167":["keep",">"],"168":["keep",">"],"169":["keep","<td"],"170":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 6);\"}"],"171":["keep","del"],"172":["keep",">"],"173":["keep",">"],"174":["keep",">"],"175":["keep",">"],"176":["rem","<div {\"id\":\"в9\",\"path-в\":\"State:commit:comments:7\"}"],"177":["add","<div {\"id\":\"в19\",\"path-в\":\"State:commit:comments:7\"}"],"178":["keep","<tr"],"179":["keep","<td"],"180":["rem","2"],"181":["add","7"],"182":["keep",">"],"183":["keep","<td"],"184":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 7);\"}"],"185":["keep","up"],"186":["keep",">"],"187":["keep",">"],"188":["keep","<td"],"189":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 7);\"}"],"190":["keep","down"],"191":["keep",">"],"192":["keep",">"],"193":["keep","<td"],"194":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 7);\"}"],"195":["keep","del"],"196":["keep",">"],"197":["keep",">"],"198":["keep",">"],"199":["keep",">"],"200":["rem","<div {\"id\":\"в10\",\"path-в\":\"State:commit:comments:8\"}"],"201":["add","<div {\"id\":\"в20\",\"path-в\":\"State:commit:comments:8\"}"],"202":["keep","<tr"],"203":["keep","<td"],"204":["rem","7"],"205":["add","8"],"206":["keep",">"],"207":["keep","<td"],"208":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 8);\"}"],"209":["keep","up"],"210":["keep",">"],"211":["keep",">"],"212":["keep","<td"],"213":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 8);\"}"],"214":["keep","down"],"215":["keep",">"],"216":["keep",">"],"217":["keep","<td"],"218":["keep","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 8);\"}"],"219":["keep","del"],"220":["keep",">"],"221":["keep",">"],"222":["keep",">"],"223":["keep",">"],"224":["rem","<div {\"id\":\"в11\",\"path-в\":\"State:commit:comments:9\"}"],"225":["rem","<tr"],"226":["rem","<td"],"227":["rem","8"],"228":["keep",">"],"229":["rem","<td"],"230":["rem","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"up\\\", 9);\"}"],"231":["rem","up"],"232":["keep",">"],"233":["rem",">"],"234":["rem","<td"],"235":["rem","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"move-comment\\\", \\\"down\\\", 9);\"}"],"236":["rem","down"],"237":["rem",">"],"238":["rem",">"],"239":["rem","<td"],"240":["rem","<button {\"onmousedown\":\"B.do ({from: {ev: \\\"onmousedown\\\", attrs: {}}}, \\\"rem\\\", [\\\"State\\\",\\\"commit\\\",\\\"comments\\\"], 9);\"}"],"241":["rem","del"],"242":["rem",">"],"243":["rem",">"],"244":["rem",">"],"245":["rem",">"],"246":["rem",">"],"247":["rem",">"],"248":["keep","<br"],"249":["keep",">"],"250":["keep","<label"],"251":["keep","Add Item"],"252":["keep","<br"],"253":["keep",">"],"254":["keep","<input {\"type\":\"text\",\"size\":50,\"onchange\":\"B.do ({from: {ev: \\\"onchange\\\", attrs: {\\\"type\\\": \\\"text\\\", \\\"value\\\": \\\"\\\", \\\"size\\\": 50}}}, \\\"set\\\", [\\\"State\\\",\\\"commit\\\",\\\"newComment\\\"], this.value);\",\"onkeydown\":\"B.do ({from: {ev: \\\"onkeydown\\\", attrs: {\\\"type\\\": \\\"text\\\", \\\"value\\\": \\\"\\\", \\\"size\\\": 50}}}, \\\"creating.keydown\\\", [\\\"*\\\"], event.keyCode, value, [\\\"State\\\",\\\"commit\\\",\\\"newComment\\\"]);\"}"],"255":["keep",">"],"256":["keep",">"],"257":["keep","<br"],"258":["keep",">"],"259":["keep","<button {\"onclick\":\"B.do ({from: {ev: \\\"onclick\\\", attrs: {}}}, \\\"copy\\\", \\\"form\\\", this.value);\"}"],"260":["keep","Copy list"],"261":["keep",">"]}}

live examples don't working

live examples don't working