diff --git a/git-tutorial.css b/git-tutorial.css index 81b1ac7..a1719ae 100644 --- a/git-tutorial.css +++ b/git-tutorial.css @@ -10,7 +10,7 @@ article#git-tutorial { position: absolute; top:0; left:0.5em; transition: right, #git-tutorial pre.log { border: thin solid gray; padding: 0.3em; font-size: 100%; font-family: monospace; box-sizing: border-box; } #git-tutorial .graph-view { font-size: 100%; font-family: monospace; } #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; } -article#git-tutorial p, article#git-tutorial h1 { max-width: 63rem; } +article#git-tutorial p, article#git-tutorial h1, article#git-tutorial h2, article#git-tutorial h3 { max-width: 63rem; } #git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; } #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; } @@ -84,11 +84,13 @@ article#git-tutorial .onlytoc { display: none; } /* #toc .onlytoc { } */ #git-tutorial #toc .tocsmall { font-size: smaller; } #git-tutorial #toc .notoc { display: none; } -#git-tutorial h1 { display: inline-block; } -#git-tutorial h1 + p { clear: both; } -#git-tutorial .permalink { opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em; +#git-tutorial h1, #git-tutorial h2, #git-tutorial h3 { display: inline-block; } +#git-tutorial h1 + p, #git-tutorial h2 + p, #git-tutorial h3 + p { clear: both; } +#git-tutorial .permalink, #git-tutorial .permalink *, #git-tutorial .permalink:after { text-decoration: none; color: black; } +#git-tutorial .permalink:after { content: '🔗'; opacity: 0.5; clear: both; padding: 1.2em 1.2em 0 0.5em; font-size: small; text-decoration: none; color: gray; } -#git-tutorial h1:hover + .permalink, #git-tutorial .permalink:hover { opacity: 1; } +#git-tutorial .permalink:hover:after { opacity: 1; } +#git-tutorial .permalink:hover h1, #git-tutorial .permalink:hover h2, #git-tutorial .permalink:hover h3 { text-decoration: underline; } #git-tutorial #toc ul { list-style-type: none; padding: 0 !important; /*list-style-type: disc;*/ } #git-tutorial #toc a { color: #666; } #git-tutorial #toc .function { color: #00f; } @@ -131,14 +133,14 @@ article#git-tutorial .onlytoc { display: none; } #git-tutorial .graph-view .legend { padding: 0.8em 0.3em 0.3em; } /* Section counters */ -#git-tutorial { counter-reset: h1counter h2counter h3counter; } -#git-tutorial > section { counter-reset: h2counter h3counter;} -#git-tutorial > section > h1 { counter-increment: h1counter; } -#git-tutorial > section > h1::before { content: counter(h1counter) ". " } -#git-tutorial > section > section { counter-reset: h3counter; } -#git-tutorial > section > section > h1 { counter-increment: h2counter; } -#git-tutorial > section > section > h1::before { content: counter(h1counter) "." counter(h2counter) ". " } -#git-tutorial > section > section.exercise > h1::before { content: "Exercise " counter(h1counter) "." counter(h2counter) ". " } +#git-tutorial { counter-reset: h1counter h2counter h3counter h4counter; } +#git-tutorial > section { counter-reset: h3counter;} +#git-tutorial > section > h2 { counter-increment: h2counter; } +#git-tutorial > section > h2::before { content: counter(h2counter) ". " } +#git-tutorial > section > section { counter-reset: h4counter; } +#git-tutorial > section > section > h3 { counter-increment: h3counter; } +#git-tutorial > section > section > h3::before { content: counter(h2counter) "." counter(h3counter) ". " } +#git-tutorial > section > section.exercise > h3::before { content: "Exercise " counter(h2counter) "." counter(h3counter) ". " } #git-tutorial .exercise-task { border: thin solid #80c5c5; background: #f1faff; padding: 1em } #git-tutorial .exercise-reason { border: thin solid #80c5c5; background: #f8fdff; padding: 1em } diff --git a/git-tutorial.js b/git-tutorial.js index 1b0aee1..e34c9bb 100644 --- a/git-tutorial.js +++ b/git-tutorial.js @@ -1,5 +1,18 @@ -function ___stringToUint8Array(s) { - var s = ""+s; +/* jslint browser: true */ +/* jslint convert: false */ +/* jslint devel: false */ +/* jshint es3: true */ + +/* remove jslint "undefined variable" warnings for these */ +/* global pako */ +/* global Sha1 */ +/* global JSZip */ +/* global saveAs */ +/* global Viz */ +/* global CodeMirror */ + +function ___stringToUint8Array(str) { + var s = String(str); var a = []; for (var i = 0; i < s.length; i++) { a.push(s.charCodeAt(i)); @@ -14,18 +27,18 @@ function ___uint8ArrayToString(a) { return s.join(''); } // Convert bytes to hex -function ___to_hex(s) { - var s = String(s); - var hex = "" +function ___to_hex(str) { + var s = String(str); + var hex = ""; for (var i = 0; i < s.length; i++) { hex += ___left_pad(s.charCodeAt(i).toString(16), '0', 2); } return hex; } -function ___hex_to_bin(hex) { - var hex = String(hex); - var str = "" +function ___hex_to_bin(hexstr) { + var hex = String(hexstr); + var str = ""; for (var i = 0; i < hex.length; i+=2) { str += String.fromCharCode(parseInt(hex.substr(i, 2), 16)); } @@ -33,26 +46,26 @@ function ___hex_to_bin(hex) { } // These three functions are accessible in the user scripts. -sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); }; -deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); } -inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); } +var sha1_from_bytes_returns_hex = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); }; +var deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); }; +var inflate = function(s) { return ___uint8ArrayToString(pako.inflate(___stringToUint8Array(s))); }; -var ___global_unique_id = 0 +var ___global_unique_id = 0; function ___specialchars(str) { return String(str) .replace(/&/g, '&') .replace(//g, '>') - .replace(/"/g, '"') + .replace(/"/g, '"'); } -function ___left_pad(s, char, len) { - var s = ""+s; - while (s.length < len) { s = char + s; } +function ___left_pad(str, chr, len) { + var s = String(str); + while (s.length < len) { s = chr + s; } return s; } -function ___to_hex_for_printf(s) { - var s = String(s); - var hex = "" +function ___to_hex_for_printf(str) { + var s = String(str); + var hex = ""; for (var i = 0; i < s.length; i++) { var h = ___left_pad(s.charCodeAt(i).toString(16), '0', 2); hex += '\\x' + h + ''; @@ -62,18 +75,18 @@ function ___to_hex_for_printf(s) { function ___specialchars_and_colour(s) { return s.replace(/[^-a-zA-Z0-9+_/!%$@.()':]/g, function (c) { switch (c) { - case " ": return ' '; break; - case "\\": return '\\\\'; break; - case "\0": return '\\000'; break; - case "\r": return '\\r'; break; - case "\n": return '\\n'; break; - case "\t": return '\\t'; break; - case '&': return '&'; break; - case '<': return '<'; break; - case '>': return '>'; break; - case '"': return '"'; break; - case "'": return '''; break; - default: return '\\x'+___left_pad(c.charCodeAt(0).toString(16), 0, 2)+''; break; + case " ": return ' '; + case "\\": return '\\\\'; + case "\0": return '\\000'; + case "\r": return '\\r'; + case "\n": return '\\n'; + case "\t": return '\\t'; + case '&': return '&'; + case '<': return '<'; + case '>': return '>'; + case '"': return '"'; + case "'": return '''; + default: return '\\x'+___left_pad(c.charCodeAt(0).toString(16), 0, 2)+''; } }); } @@ -105,7 +118,7 @@ function ___scroll_to_dest(srcid, destclass) { var dests = wrapper_and_dests.dests; if (dests.length > 0) { - dest = dests[dests.length - 1]; + var dest = dests[dests.length - 1]; while (dest && dest.tagName.toLowerCase() != 'tr') { dest = dest.parentElement; } if (dest) { dest.scrollIntoView({ behavior: 'smooth', block: 'center' }); @@ -243,6 +256,8 @@ function ___hilite(srcid, destclass) { } function ___lolite(src, dest) { // For now, keep the highlight onmouseout, to help with scrolling while looking for the target of an arrow. + var ignore = [src, dest]; + ignore = ignore; } (function() { var oldresize = window.onresize; @@ -253,156 +268,176 @@ function ___lolite(src, dest) { ___hilite(srcid, destclass); } if (oldresize) { oldresize(); } - } + }; })(); function ___hex_hash(s) { var id = ___global_unique_id++; var hash = "object-hash-"+___to_hex(s.substr(0,20)); - return '' - + ___to_hex_for_printf(s.substr(0,10)) - + ___to_hex_for_printf(s.substr(10,10)) - + '' - + ___specialchars_and_colour(s.substr(20) /* should be empty unless there's a bug */); + return '' + + /*+*/ ___to_hex_for_printf(s.substr(0,10)) + + /*+*/ ___to_hex_for_printf(s.substr(10,10)) + + /*+*/ '' + + /*+*/ ___specialchars_and_colour(s.substr(20) /* should be empty unless there's a bug */); } -function ___specialchars_and_colour_and_hex(s) { +function ___special_tree(s) { var target_hashes = []; - if (s.substr(0,5) == "tree ") { - var sp = s.split('\0'); - sp[0] = ___specialchars_and_colour(sp[0]); - sp[1] = ___specialchars_and_colour(sp[1]); - for (i = 2; i < sp.length; i++) { - target_hashes.push(___to_hex(sp[i].substr(0,20))); - sp[i] = ___hex_hash(sp[i].substr(0,20)) - + ___specialchars_and_colour(sp[i].substr(20)); - } - var html = sp.join('\\000'); - return { type: 'tree', target_hashes: target_hashes, html: html }; - } else if (/^[0-9a-f]{40}\n$/.test(s)) { - var id = ___global_unique_id++; - var h = s.substr(0,40); - target_hashes.push(h); - var hash = "object-hash-"+h; - var html = '' - + s.substr(0,40) - + '' - + ___specialchars_and_colour(s.substr(40)); - return { type: 'hash', target_hashes: target_hashes, html: html }; - } else if (/^ref: refs\/[^\n]*\n$/.test(s)) { - var id = ___global_unique_id++; - var h = s.substr(5, s.length-6) - target_hashes.push(h); - var hash = "object-hash-"+h; - var html = s.substr(0,5) - + '' - + ___specialchars_and_colour(s.substr(5, s.length-6)) - + '' - + ___specialchars_and_colour(s.substr(s.length-1)); - return { type: 'symbolic ref', target_hashes: target_hashes, html: html }; - } else if(s.substr(0,4) == "DIRC") { - var html = 'DIRC'; // magic - var i = 4; - var binary_span = function(bits) { - var bytes = bits / 8; - html += '' + ___to_hex_for_printf(s.substr(i, bytes)) + ''; - i += bytes; - } - binary_span(32); // version - binary_span(32); // entries - - var entry_start = i; - while (i + 20 < s.length) { - binary_span(64); // ctime - binary_span(64); // mtime - binary_span(32); // device - binary_span(32); // inode - binary_span(32); // mode (stored as octal → binary) - binary_span(32); // uid - binary_span(32); // gid - binary_span(32); // size - var h = s.substr(i, 20); - target_hashes.push(___to_hex(h)); - html += ___hex_hash(h); // hash - i += 20; - var length = s.substr(i, 2); - length = length.charCodeAt(0) * 256 + length.charCodeAt(1); - length &= 0xfff; - binary_span(16); // 4 bits flags, 12 bits file length - // file path until null - html += ___specialchars_and_colour(s.substr(i, length)); - i += length; - while (i < s.length && (i - entry_start) % 8 != 0) { - // null bytes - if (s.charCodeAt(i) == 0) { - // as expected - html += '\\000'; - } else { - // there's a bug in this git index, display the hex chars as they come. - html += ___specialchars_and_colour(s.substr(i, 1)); - } - i++; - } - entry_start = i; - } + var sp = s.split('\0'); + sp[0] = ___specialchars_and_colour(sp[0]); + sp[1] = ___specialchars_and_colour(sp[1]); + for (var i = 2; i < sp.length; i++) { + target_hashes.push(___to_hex(sp[i].substr(0,20))); + sp[i] = ___hex_hash(sp[i].substr(0,20)) + + /*+*/ ___specialchars_and_colour(sp[i].substr(20)); + } + var html = sp.join('\\000'); + return { type: 'tree', target_hashes: target_hashes, html: html }; +} +function ___special_hash(s) { + var target_hashes = []; + var id = ___global_unique_id++; + var h = s.substr(0,40); + target_hashes.push(h); + var hash = "object-hash-"+h; + var html = '' + + /*+*/ s.substr(0,40) + + /*+*/ '' + + /*+*/ ___specialchars_and_colour(s.substr(40)); + return { type: 'hash', target_hashes: target_hashes, html: html }; +} +function ___special_ref(s) { + var target_hashes = []; + var id = ___global_unique_id++; + var h = s.substr(5, s.length-6); + target_hashes.push(h); + var hash = "object-hash-"+h; + var html = s.substr(0,5) + + /*+*/ '' + + /*+*/ ___specialchars_and_colour(s.substr(5, s.length-6)) + + /*+*/ '' + + /*+*/ ___specialchars_and_colour(s.substr(s.length-1)); + return { type: 'symbolic ref', target_hashes: target_hashes, html: html }; +} +function ___special_index(s) { + var target_hashes = []; + var html = 'DIRC'; // magic + var i = 4; + var binary_span = function(bits) { + var bytes = bits / 8; + html += '' + ___to_hex_for_printf(s.substr(i, bytes)) + ''; + i += bytes; + }; + binary_span(32); // version + binary_span(32); // entries + var entry_start = i; + while (i + 20 < s.length) { + binary_span(64); // ctime + binary_span(64); // mtime + binary_span(32); // device + binary_span(32); // inode + binary_span(32); // mode (stored as octal → binary) + binary_span(32); // uid + binary_span(32); // gid + binary_span(32); // size var h = s.substr(i, 20); target_hashes.push(___to_hex(h)); html += ___hex_hash(h); // hash i += 20; - - html += ___specialchars_and_colour(s.substr(i)); // should be empty - - return { type: 'index / staging', target_hashes: target_hashes, html: html }; - } else if(s.substr(0,7) == "commit ") { - var sz = s.split('\0'); - var sp = sz[1].split('\n'); - sz[0] = ___specialchars_and_colour(sz[0]); - var i; - for (i = 0; i < sp.length && sp[i] != ''; i++) { - if (/(tree|parent) [0-9a-f]{40}/.test(sp[i])) { - var prefix_len = sp[i].startsWith('tree ') ? 5 : 7; - var id=___global_unique_id++; - var h = sp[i].substr(prefix_len); - target_hashes.push(h); - var hash = "object-hash-"+h; - sp[i] = ___specialchars_and_colour(sp[i].substr(0,prefix_len)) - + '' - + sp[i].substr(prefix_len) - + ''; + var length = s.substr(i, 2); + length = length.charCodeAt(0) * 256 + length.charCodeAt(1); + length = /* jslint bitwise: true */ length & 0xfff /* jslint bitwise: false */; + binary_span(16); // 4 bits flags, 12 bits file length + // file path until null + html += ___specialchars_and_colour(s.substr(i, length)); + i += length; + while (i < s.length && (i - entry_start) % 8 != 0) { + // null bytes + if (s.charCodeAt(i) == 0) { + // as expected + html += '\\000'; } else { - sp[i] = ___specialchars_and_colour(sp[i]); + // there's a bug in this git index, display the hex chars as they come. + html += ___specialchars_and_colour(s.substr(i, 1)); } + i++; } - for (; i < sp.length; i++) { + entry_start = i; + } + + var last_h = s.substr(i, 20); + target_hashes.push(___to_hex(last_h)); + html += ___hex_hash(last_h); // hash + i += 20; + + html += ___specialchars_and_colour(s.substr(i)); // should be empty + + return { type: 'index / staging', target_hashes: target_hashes, html: html }; +} +function ___special_commit(s) { + var target_hashes = []; + var sz = s.split('\0'); + var sp = sz[1].split('\n'); + sz[0] = ___specialchars_and_colour(sz[0]); + var i; + for (i = 0; i < sp.length && sp[i] != ''; i++) { + if (/(tree|parent) [0-9a-f]{40}/.test(sp[i])) { + var prefix_len = sp[i].startsWith('tree ') ? 5 : 7; + var id=___global_unique_id++; + var h = sp[i].substr(prefix_len); + target_hashes.push(h); + var hash = "object-hash-"+h; + sp[i] = ___specialchars_and_colour(sp[i].substr(0,prefix_len)) + + /*+*/ '' + + /*+*/ sp[i].substr(prefix_len) + + /*+*/ ''; + } else { sp[i] = ___specialchars_and_colour(sp[i]); } - var sp_joined = sp.join('\\n'); - var html = [sz[0], sp_joined].join('\\000'); - return { type: 'commit', target_hashes: target_hashes, html: html }; + } + for (; i < sp.length; i++) { + sp[i] = ___specialchars_and_colour(sp[i]); + } + var sp_joined = sp.join('\\n'); + var html = [sz[0], sp_joined].join('\\000'); + return { type: 'commit', target_hashes: target_hashes, html: html }; +} +function ___specialchars_and_colour_and_hex(str) { + var s = String(str); + if (s.substr(0,5) == "tree ") { + return ___special_tree(s); + } else if (/^[0-9a-f]{40}\n$/.test(s)) { + return ___special_hash(s); + } else if (/^ref: refs\/[^\n]*\n$/.test(s)) { + return ___special_ref(s); + } else if(s.substr(0,4) == "DIRC") { + return ___special_index(s); + } else if(s.substr(0,7) == "commit ") { + return ___special_commit(s); } else if (s.substr(0, 5) == "blob ") { - return { type: 'blob', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; + return { type: 'blob', target_hashes: [], html: ___specialchars_and_colour(s) }; } else if (s.substr(0, 11) == "type length") { - return { type: 'example object', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; + return { type: 'example object', target_hashes: [], html: ___specialchars_and_colour(s) }; } else { - return { type: 'regular file', target_hashes: target_hashes, html: ___specialchars_and_colour(s) }; + return { type: 'regular file', target_hashes: [], html: ___specialchars_and_colour(s) }; } } function ___specialchars_and_colour_and_hex_and_zlib(s) { + var inflated = null; try { - var inflated = pako.inflate(___stringToUint8Array(s)); + inflated = pako.inflate(___stringToUint8Array(s)); } catch(e) { - var inflated = false; + inflated = false; } if (inflated) { var id=___global_unique_id++; return { - html: - '' - + 'deflated:' - + ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html - + '' - + '', + html: '' + + /*+*/ 'deflated:' + + /*+*/ ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)).html + + /*+*/ '' + + /*+*/ '', td: function(td) { td.classList.add('deflate-toggle'); td.setAttribute('onclick', '___deflated_click('+id+')'); } }; } else { @@ -424,7 +459,7 @@ function ___filesystem_to_printf(fs) { } }) // directories start with 'd' which sorts before 'f' - .sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); + .sort(function (a,b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); }); return entries.join(' '); } function ___deflated_click(id) { @@ -462,16 +497,16 @@ function ___get_ref_path(x) { function ___format_filepath(x) { var sp = x.split('/'); if (___is_hashed_object_path(x)) { - return sp.slice(0, sp.length-2).map(___specialchars_and_colour).join('/')+(sp.length > 2 ? '/' : '') - + '' - + sp.slice(sp.length-2).map(___specialchars_and_colour).join('/') - + ""; + return sp.slice(0, sp.length-2).map(___specialchars_and_colour).join('/')+(sp.length > 2 ? '/' : '') + + /*+*/ '' + + /*+*/ sp.slice(sp.length-2).map(___specialchars_and_colour).join('/') + + /*+*/ ""; } else if (___is_ref_path(x)) { var refs_idx = sp.indexOf('refs'); - return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/' - + ''//TODO - + sp.slice(refs_idx).map(___specialchars_and_colour).join('/') - + ""; + return sp.slice(0, refs_idx).map(___specialchars_and_colour).join('/')+'/' + + /*+*/ ''/*TODO*/ + + /*+*/ sp.slice(refs_idx).map(___specialchars_and_colour).join('/') + + /*+*/ ""; } else { return ___specialchars_and_colour(x); } @@ -486,9 +521,9 @@ function ___format_contents(contents) { } function ___format_entry(previous_filesystem, x) { - var previous_filesystem = previous_filesystem || {}; + var previous_fs = previous_filesystem || {}; var tr = document.createElement('tr'); - if (! (previous_filesystem.hasOwnProperty(x[0]) && previous_filesystem[x[0]] == x[1])) { + if (! (previous_fs.hasOwnProperty(x[0]) && previous_fs[x[0]] == x[1])) { tr.classList.add('different'); } @@ -511,7 +546,7 @@ function ___format_entry(previous_filesystem, x) { } function ___sort_filesystem_entries(fs) { return Object.entries(fs) - .sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); + .sort(function (a,b) { return (a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); }); } function ___filesystem_to_table(fs, previous_filesystem) { var table = document.createElement('table'); @@ -545,28 +580,53 @@ function ___filesystem_to_table(fs, previous_filesystem) { tr_empty.append(td_empty); td_empty.setAttribute('colspan', '2'); td_empty.classList.add('empty-filesystem'); - td_empty.innerText = "The filesystem is empty." + td_empty.innerText = "The filesystem is empty."; } return table; } +function ___filesystem_serialize(fs) { + // We could use ___to_hex(JSON.stringify(fs)), but that requires a somewhat recent JavaScript + // specification, and it would be unfortunate to increase the requirements + // just for a simple serialization/deserialization + var serialized = ''; + var entries = ___sort_filesystem_entries(fs); + for (var i = 0; i < entries.length; i++) { + var name = ___to_hex(entries[i][0]); + var contents = entries[i][1] === null ? 'null' : ___to_hex(entries[i][1]); + serialized += (i == 0 ? '' : ',') + name + ':' + contents; + } + return serialized; +} +function ___filesystem_deserialize(str) { + // We could use JSON.parse(___hex_to_bin(str)), but that requires a somewhat recent JavaScript + // specification, and it would be unfortunate to increase the requirements + // just for a simple serialization/deserialization + var deserialized = {}; + var entries = str.split(','); + for (var i = 0; i < entries.length; i++) { + var entry = entries[i].split(':'); + deserialized[___hex_to_bin(entry[0])] = (entry[1] == 'null' ? null : ___hex_to_bin(entry[1])); + } + return deserialized; +} function ___filesystem_to_string(fs, just_table, previous_filesystem) { var entries = ___sort_filesystem_entries(fs); var id = ___global_unique_id++; var html = ''; if (! just_table) { - html += 'Filesystem contents: ' + entries.length + " files and directories. " - + 'Download as .zip' - + ' or ' - + '' - + "Copy commands to recreate in *nix terminal" - + "." - + "
" - + '' - + ''; + html += 'Filesystem contents: ' + entries.length + " files and directories. " + + /*+*/ 'Download as .zip' + + /*+*/ ' or ' + + /*+*/ '' + + /*+*/ "Copy commands to recreate in *nix terminal" + + /*+*/ "." + + /*+*/ "
" + + /*+*/ '' + + /*+*/ ''; } html += ___filesystem_to_table(fs, previous_filesystem).outerHTML; // TODO: use DOM primitives instead. return html; @@ -579,7 +639,7 @@ function ___textarea_value(elem) { } } function ___copyzip_click(id) { - var fs = JSON.parse(___hex_to_bin(document.getElementById(id).value)); + var fs = ___filesystem_deserialize(document.getElementById(id).value); var paths = Object.keys(fs); var hierarchy = { subfolders: {}, files: [] }; @@ -615,10 +675,9 @@ function ___copyzip_click(id) { var join_paths = function(a, b) { return (a == "") ? b : (a + "/" + b); - } + }; var add_to_zip = function(zip, base_directory, hierarchy) { - var subtrees = []; for (var i in hierarchy.subfolders) { if (hierarchy.subfolders.hasOwnProperty(i)) { var zipfolder = zip.folder(i); @@ -629,7 +688,7 @@ function ___copyzip_click(id) { var filename = hierarchy.files[f]; zip.file(filename, ___stringToUint8Array(fs[join_paths(base_directory, filename)]), {binary: true}); } - } + }; var zip = new JSZip(); add_to_zip(zip, '', hierarchy); @@ -655,38 +714,39 @@ function ___copyprintf_click(id) { elem.disabled = true; } } -var ___script_log_header = '' - + 'var ___log = [];\n' - + 'var alert = (function (real_console, real_alert) {\n' - + ' return function(message) {\n' - + ' ___log[___log.length] = { alert: true, txt: message };\n' - + ' real_console.log("alert:", message);\n' - + ' };\n' - + '})(window.console, window.alert);\n' - + 'var console = (function(real_console) {\n' - + ' return {\n' - + ' log: function() {\n' - + ' ___log[___log.length] = { alert: false, txt: Array.from(arguments).map(function (x) { return x.toString(); }).join(", ") };\n' - + ' real_console.log.apply(real_console, arguments);\n' - + ' },\n' - + ' assert: real_console.assert,\n' - + ' };\n' - + '})(window.console);\n' - + '\n'; +var ___script_log_header = '' + + /*+*/ 'var ___log = [];\n' + + /*+*/ 'var alert = (function (real_console, real_alert) {\n' + + /*+*/ ' return function(message) {\n' + + /*+*/ ' ___log[___log.length] = { alert: true, txt: message };\n' + + /*+*/ ' if (real_console && real_console.log) { real_console.log("alert:", message); }\n' + + /*+*/ ' };\n' + + /*+*/ '})(window.console, window.alert);\n' + + /*+*/ 'var console = (function(real_console) {\n' + + /*+*/ ' return {\n' + + /*+*/ ' log: function() {\n' + + /*+*/ ' ___log[___log.length] = { alert: false, txt: Array.from(arguments).map(function (x) { return x.toString(); }).join(", ") };\n' + + /*+*/ ' if (real_console && real_console.log) { real_console.log.apply(real_console, arguments); }\n' + + /*+*/ ' },\n' + + /*+*/ ' assert: real_console.assert,\n' + + /*+*/ ' };\n' + + /*+*/ '})(window.console);\n' + + /*+*/ '\n'; function ___file_contents_to_graphview(filesystem, path_of_this_file, s) { var gv = ''; + var s2 = null; try { var inflated = pako.inflate(___stringToUint8Array(s)); if (inflated) { - var s2 = ___uint8ArrayToString(inflated); + s2 = ___uint8ArrayToString(inflated); } else { - var s2 = s; + s2 = s; } } catch(e) { - var s2 = s; + s2 = s; } - var special = ___specialchars_and_colour_and_hex(s2) + var special = ___specialchars_and_colour_and_hex(s2); var target_hashes = special.target_hashes; var type = special.type; var paths = Object.keys(filesystem); @@ -712,7 +772,7 @@ var ___previous_directory_node_style = 'color = "#80c5c5", fontcolor = "#80c5c5" var ___directory_node_style = 'color = "#008b8b", fontcolor = "#008b8b"'; // darkcyan = #008b8b function ___quote_gv(name) { - console.log('TODO: escape GV') + if (window.console && window.console.log) { window.console.log('TODO: escape GV'); } return '"' + name.replace('\n', '\\n') + '"'; } @@ -722,11 +782,10 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) { var components = x[0].split('/'); + var shortname = components[components.length - 1]; if (___is_hashed_object_path(x[0])) { // var hash = components.slice(components.length-2).join(''); - var shortname = components[components.length - 1].substr(0, 3) + '…'; - } else { - var shortname = components[components.length - 1]; + shortname = shortname.substr(0, 3) + '…'; } var parent = components.slice(0, components.length - 1).join('/'); @@ -748,7 +807,11 @@ function ___entry_to_graphview(previous_filesystem, filesystem, x) { gv += ___quote_gv(x[0]) + ' [ id="' + id + '" ]'; if (x[1] === null) { - shortname = shortname + '\ndirectory'; + if (shortname.length <= 2) { + shortname = shortname + '\ndir'; + } else { + shortname = shortname + '\ndirectory'; + } if (previous_filesystem.hasOwnProperty(x[0])) { // dim nodes that existed in the previous_filesystem gv += ___quote_gv(x[0]) + ' [' + ___previous_directory_node_style + ']'; @@ -821,10 +884,10 @@ function ___hide_graphview_hover(id, default_id) { document.getElementById(id).style.pointerEvents = 'none'; } -var ___legend = '' -+ '
' -+ '
Legend:
' -+ Viz( +var ___legend = '' + +/*+*/ '
' + +/*+*/ '
Legend:
' + +/*+*/ Viz( 'digraph legend {\n' + ' bgcolor=transparent;\n' + ' ranksep=0;\n' + @@ -837,9 +900,9 @@ var ___legend = '' ' "parent" -> "child" ['+___directory_edge_style+'];\n' + ' "ref" -> "abcdef" ['+___ref_edge_style+'];\n' + ' "existing" -> "new" [style=invis];\n' + - '}') -+ '
' -+ '
'; + '}') + +/*+*/ '' + +/*+*/ ''; function ___filesystem_to_graphview(filesystem, previous_filesystem) { var html = ''; @@ -884,22 +947,22 @@ function ___filesystem_to_graphview(filesystem, previous_filesystem) { } function ___log_to_html(log) { - return '
'
-    + log.map(function(l) {
-        return '
'
-          + ___specialchars(l.txt)
-          + '
';
-      }).join('\n')
-    + '
' + return '
' +
+   /*+*/ log.map(function(l) {
+           return '
' +
+            /*+*/ ___specialchars(l.txt) +
+            /*+*/ '
';
+         }).join('\n') +
+   /*+*/ '
'; } function ___eval_result_to_html(id, filesystem, previous_filesystem, log, quiet, omit_graph) { var loghtml = ___log_to_html(log); var table = ___filesystem_to_string(filesystem, quiet, previous_filesystem); var gv = ___filesystem_to_graphview(filesystem, previous_filesystem); - var html = (log.length > 0 ? '

Console output:

' + loghtml : '') - + (omit_graph ? '' : gv.html) - + table; + var html = (log.length > 0 ? '

Console output:

' + loghtml : '') + + /*+*/ (omit_graph ? '' : gv.html) + + /*+*/ table; document.getElementById(id).innerHTML = '
' + html + '
'; if (!omit_graph) { gv.js(); } } @@ -907,59 +970,60 @@ function ___git_eval(current) { document.getElementById('hide-eval-' + current).style.display = ''; var script = ___script_log_header; script += 'try {'; - for (i = 0; i <= current - 1; i++) { + for (var i = 0; i <= current - 1; i++) { script += ___textarea_value(___global_editors[i]); } - script += '\n' - + 'var ___previous_filesystem = {};\n' - + 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n' - + '___log = [];\n'; + script += '\n' + + /*+*/ 'var ___previous_filesystem = {};\n' + + /*+*/ 'for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n' + + /*+*/ '___log = [];\n'; script += ___textarea_value(___global_editors[current]); - script += '\n' - + '} catch (e) {' - + ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {' - + ' throw e;' - + ' } else {' - + ' ___log.push({ alert: true, txt: "command failed" });' - + ' }' - + '}' - + '"End of the script";\n' - + '\n' - + '\n' - + '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n' - + 'filesystem;\n'; + script += '\n' + + /*+*/ '} catch (e) {' + + /*+*/ ' if (("" + e.message).indexOf("GIT: assertion failed: ") != 0) {' + + /*+*/ ' throw e;' + + /*+*/ ' } else {' + + /*+*/ ' ___log.push({ alert: true, txt: "command failed" });' + + /*+*/ ' }' + + /*+*/ '}' + + /*+*/ '"End of the script";\n' + + /*+*/ '\n' + + /*+*/ '\n' + + /*+*/ '___eval_result_to_html("out" + current, filesystem, ___previous_filesystem, ___log, false);\n' + + /*+*/ 'filesystem;\n'; try { - eval(script); + /* jslint evil: true */ eval(script); /* jslint evil: false */ } catch (e) { // Stack traces usually include :line:column var rx = /:([0-9][0-9]*):[0-9][0-9]*/g; var linecol = rx.exec(''+e.stack); var line = null; if (linecol && linecol.length > 0) { - line=parseInt(linecol[1]); + line=parseInt(linecol[1], 10); } else { // Some older versions of Firefox and probably some other browsers use just :line - var rx = /:([0-9][0-9]*)*/g; - var justline = rx.exec(''+e.stack); + var rx2 = /:([0-9][0-9]*)*/g; + var justline = rx2.exec(''+e.stack); if (justline && justline.length > 0) { line=parseInt(justline[1], 10); } } + var showline = null; if (typeof(line) == 'number') { var lines = script.split('\n'); if (line < lines.length) { var from = Math.max(0, line-2); var to = Math.min(lines.length - 1, line+2+1); - var showline = '' - + 'Possible location of the error: near line ' + line + '\n' - + '\n' - + lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n') - + '\n' - + '\n'; + showline = '' + + /*+*/ 'Possible location of the error: near line ' + line + '\n' + + /*+*/ '\n' + + /*+*/ lines.slice(from, to).map(function(l, i) { return '' + (from + i) + ': ' + l; }).join('\n') + + /*+*/ '\n' + + /*+*/ '\n'; } } else { - var showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n' - + 'The stacktrace below may contain more information.\n' + showline = 'Sorry, this tutorial could not pinpoint precisely\nthe location of the error.\n' + + /*+*/ 'The stacktrace below may contain more information.\n'; } var error = ___specialchars("" + e + "\n\n" + e.stack); document.getElementById('out' + current).innerHTML = '
' + showline + error + '
'; @@ -980,7 +1044,7 @@ function ___process_elements() { for (var i = 0; i < sections.length; i++) { var level = ___level(sections[i]); while (level < previousLevel) { - var p = stack.pop(); + stack.pop(); previousLevel--; } while (level > previousLevel) { @@ -998,8 +1062,11 @@ function ___sections_to_html(sections) { for (var i = 0; i < sections.length; i++) { var li = document.createElement('li'); ol.appendChild(li); - var headers = sections[i].s.getElementsByTagName('h1'); - console.assert(!headers || headers.length >= 1) + var headers = sections[i].s.querySelectorAll('h2,h3'); + if (!headers || headers.length < 1) { + if (window.console && window.console.log) { window.console.log("internal error: found no headers in section"); } + continue; + } var target = sections[i].s.getAttribute('id'); var a = document.createElement('a'); li.appendChild(a); @@ -1007,10 +1074,12 @@ function ___sections_to_html(sections) { if (target) { a.setAttribute('href', '#' + target); } if (target) { var a2 = document.createElement('a'); - ___insertAfter(a2, headers[0]); - a2.className = "permalink" + var hd = headers[0]; + hd.parentElement.replaceChild(a2, hd); + a2.appendChild(hd); + a2.className = "permalink"; a2.setAttribute('href', '#' + target); - a2.innerText = "🔗" + //a2.innerHTML += "🔗" } li.appendChild(___functions_to_html(sections[i].s)); li.appendChild(___sections_to_html(sections[i].subsections)); @@ -1037,7 +1106,7 @@ function ___functions_to_html(section) { // Since CodeMirror replaces the textareas, the collection of HTML nodes // is automatically updated in some browsers, and the indices become wrong // after a replacement, so we copy the HTML element collection to a proper array. - for (var j = 0; j < tas.length; j++) { ta.push(tas[j]); } + for (var i = 0; i < tas.length; i++) { ta[i] = tas[i]; } for (var j = 0; j < ta.length; j++) { if (___ancestor(ta[j], 'section') == section) { var lines = ta[j].value.split('\n'); @@ -1045,17 +1114,19 @@ function ___functions_to_html(section) { var editor = ret.editor; var editor_id = ret.editor_id; editor.on('keydown', ___clearScrolledToLine); - for (var i = 0; i < lines.length; i++) { + for (var k = 0; k < lines.length; k++) { var text = false; - var fun = lines[i].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/); + var fun = lines[k].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/); if (fun) { text = fun[1]; } - var v = lines[i].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/); + var v = lines[k].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/); if (v) { text = v[1]; } if (text) { var li = document.createElement('li'); var a = document.createElement('a'); - a.setAttribute('href', 'javascript: ___scrollToLine(___global_editors['+(editor_id)+'], '+i+'); void(0);'); + /* split the javascript: … string to prevent jslint from complaining. */ + var js = 'java'+'script'; + a.setAttribute('href', js + ': ___scrollToLine(___global_editors['+(editor_id)+'], '+k+'); void(0);'); var code = document.createElement('code'); if (fun) { var spanFunction = document.createElement('span'); @@ -1130,7 +1201,7 @@ function ___hide_eval(editor_id) { function ___get_all_code() { var all = ''; for (var i = 0; i < ___global_editors.length; i++) { - var val = ___global_editors[i].getValue() + var val = ___global_editors[i].getValue(); all += val + (val.endsWith('\n') ? '' : '\n') + (val.endsWith('\n\n') ? '' : '\n'); } return all.substr(0, all.length-1/*remove last newline in the last \n\n*/); @@ -1145,7 +1216,7 @@ function ___copy_all_code() { elem.innerHTML = ''; elem.appendChild(elem2); var all_code = ___get_all_code(); - elem2.value = all_code + elem2.value = all_code; elem2.focus(); elem2.disabled = false; elem2.select(); @@ -1157,19 +1228,42 @@ function ___copy_all_code() { function ___loc_count() { var srclines = ___get_all_code().split('\n'); - var lcv = srclines.filter(function (l) { return ! (/^(\s*}?)?$/.test(l)); }).length + var lcv = srclines.filter(function (l) { return ! (/^(\s*}?)?$/.test(l)); }).length; var lc = document.getElementsByClassName('loc-count'); for (var i = 0; i < lc.length; i++) { lc[i].innerText = lcv; } var lctv = srclines.length; var lct = document.getElementsByClassName('loc-count-total'); - for (var i = 0; i < lct.length; i++) { - lct[i].innerText = lctv; + for (var j = 0; j < lct.length; j++) { + lct[j].innerText = lctv; } } function ___git_tutorial_onload() { ___process_elements(); ___loc_count(); -} \ No newline at end of file +} + +/* remove jslint "unused variable" warnings for these */ +var ___jslint_variables_called_from_event_handlers_and_from_tutorial = [ + ___scroll_to_dest, + ___lolite, + ___deflated_click, + ___copyzip_click, + ___copyprintf_click, + ___click_graphview_hover, + ___mouseout_graphview_hover, + ___mouseover_graphview_hover, + ___eval_result_to_html, + ___git_eval, + ___scrollToLine, + ___hide_eval, + ___copy_all_code, + ___git_tutorial_onload, + sha1_from_bytes_returns_hex, + inflate, + deflate +]; +// also ignore this dummy variable. +___jslint_variables_called_from_event_handlers_and_from_tutorial = ___jslint_variables_called_from_event_handlers_and_from_tutorial; \ No newline at end of file diff --git a/index.html b/index.html index d04b6c8..5e57151 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,4 @@ + @@ -41,12 +42,12 @@ function ___example(id, f) {
-

Git tutorial: reimplementing part of GIT in JavaScript

-

By for LIGO. .

+ +

By for LIGO. .

Please send remarks and suggestions to git-tutorial@suzanne.soy or simply fork this repository on GitHub

-

Credits and license

+

Credits and license

This article was written as part of my work for LIGO.

The main reference for this tutorial is the Pro Git book section on GIT internals.

@@ -148,7 +149,7 @@ Copyright notice: (C) 1995-2013 Jean-loup Gailly and Mark Adler -Copyright (c) <''year''> <''copyright holders''> +Copyright (c) <''year''> <''copyright holders''> This software is provided 'as-is', without any express or implied warranty. In no event will the authors be held liable for any damages @@ -237,7 +238,7 @@ GPL version 3 GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007 - Copyright (C) 2007 Free Software Foundation, Inc. + Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/> Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. @@ -855,6 +856,7 @@ Program, unless a warranty or assumption of liability accompanies a copy of the Program in return for a fee. END OF TERMS AND CONDITIONS + @@ -887,7 +889,7 @@ vulnerabilities (user input is not sanitized when displayed).
-

Introduction

+

Introduction

GIT is based on a simple model, with a lot of shorthands for common use cases. This model is sometimes hard to guess just from the @@ -900,10 +902,10 @@ excluded, a few more in total.

-

The Operating System's filesystem

+

The Operating System's filesystem

-

Model of the filesystem

+

Model of the filesystem

The Operating System's filesystem will be simulated by a very simple key-value store. In this very simple filesystem, directories are entries mapped to null and files are entries mapped @@ -916,7 +918,7 @@ var current_directory = '';

-

Filesystem access functions (read, write, mkdir, exists, remove, cd)

+

Filesystem access functions (read, write, mkdir, exists, remove, cd)

The filesystem exposes functions to read an entire file, create or replace an entire file, create a directory, test the existence of a filesystem entry, and change the current directory.

-

Adding a file to the GIT database

+

Adding a file to the GIT database

So far, our GIT database does not know about any of the user's files. In order to add the contents of the README file in the database, we use git hash-object -w -t blob README, @@ -1132,7 +1134,7 @@ hash_object(true, 'blob', false, 'src/main.scm');

-

zlib compression

+

zlib compression

GIT compresses objects with zlib. The deflate() function used in the script above comes from the pako 2.0.3 library. To view a zlib-compressed object in your *nix terminal, simply write this @@ -1150,7 +1152,7 @@ unzlib() {

-

Storing trees (list of hashed files and subtrees)

+

Storing trees (list of hashed files and subtrees)

At this point GIT knows about the contents of both of the user's files, but it would be nice to also store the filenames. This is done by creating a tree object

@@ -1214,7 +1216,7 @@ function hex_to_raw_bytes(hex) {
-

Example use of store_tree()

+

Example use of store_tree()

The following code, once uncommented, stores into the GIT database the trees for src and for the root directory of the GIT project.

@@ -1229,7 +1231,7 @@ the hierarchy, and stores the corresponding trees bottom-up.

-

Storing a tree from a list of paths

+

Storing a tree from a list of paths

Making trees out of the subfolders one by one is cumbersome. The following utility function takes a list of paths, and builds a tree from those.

@@ -1291,7 +1293,7 @@ paths_to_tree(["README", "src/main.scm"]);
-

Storing a commit in the GIT database

+

Storing a commit in the GIT database

Now that the GIT database contains the entire tree for the current version, a commit can be created. A commit contains

    @@ -1368,7 +1370,7 @@ function format_timezone(tm) {
    -

    Storing an example commit

    +

    Storing an example commit

    It is now possible to store a commit in the database. This saves a copy of the tree along with some metadata about this version. The first commit has no parent, which is represented by passing @@ -1392,7 +1394,7 @@ var initial_commit = store_commit(

    -

    resolving references

    +

    resolving references

    The next few subsections will introduce symbolic references and other references like branch names, the special name HEAD @@ -1468,7 +1470,7 @@ function trim_newline(s) {

    -

    git symbolic-ref

    +

    git symbolic-ref

    git symbolic-ref is a low-level command which reads (and in the official GIT implementation also writes and updates) symbolic references given a path relative to .git/. @@ -1537,7 +1539,7 @@ function git_symbolic_ref(ref) {

    -

    git rev-parse

    +

    git rev-parse

    git rev-parse is another low-level command. It takes a symbolic reference or other reference, and returns the hash. The difference with git symbolic-ref is that symbolic-ref follows indirections to other references, and returns the last named reference in the chain of indirections, whereas rev-parse @@ -1577,7 +1579,7 @@ function git_rev_parse(ref) {

    -

    git branch

    +

    git branch

    A branch is a pointer to a commit, stored in a file in .git/refs/heads/name_of_the_branch. The branch can be overwritten with git branch -f. Also, as will be explained later, @@ -1649,7 +1651,7 @@ git_branch('main', initial_commit, true);