Add zip files for chapters that need background code

marijnh · marijnh · commit b508d1348174 · 2014-10-22T16:33:49.000+02:00
To make it easy to run them locally. Add links to such files to
the sandbox page.
diff --git a/00_intro.txt b/00_intro.txt
@@ -1,5 +1,5 @@
 :next_link: 01_values
-:load_files: ["js/intro.js"]
+:load_files: ["code/intro.js"]
 
 = Introduction =
 
diff --git a/04_data.txt b/04_data.txt
@@ -2,6 +2,7 @@
 :prev_link: 03_functions
 :next_link: 05_higher_order
 :load_files: ["code/jacques_journal.js", "code/chapter/04_data.js"]
+:zip: node/html
 
 = Data Structures: Objects and Arrays =
 
diff --git a/05_higher_order.txt b/05_higher_order.txt
@@ -1,7 +1,8 @@
 :chap_num: 5
 :prev_link: 04_data
 :next_link: 06_object
-:load_files: ["code/ancestry.js", "code/chapter/05_higher_order.js", "js/intro.js"]
+:load_files: ["code/ancestry.js", "code/chapter/05_higher_order.js", "code/intro.js"]
+:zip: node/html
 
 = Higher-Order Functions =
 
diff --git a/06_object.txt b/06_object.txt
@@ -2,6 +2,7 @@
 :prev_link: 05_higher_order
 :next_link: 07_elife
 :load_files: ["code/mountains.js", "code/chapter/06_object.js"]
+:zip: node/html
 
 = The Secret Life of Objects =
 
diff --git a/07_elife.txt b/07_elife.txt
@@ -1,7 +1,8 @@
 :chap_num: 7
 :prev_link: 06_object
 :next_link: 08_error
-:load_files: ["code/chapter/07_elife.js", "js/animateworld.js"]
+:load_files: ["code/chapter/07_elife.js", "code/animateworld.js"]
+:zip: html
 
 = Project: Electronic Life =
 
diff --git a/10_modules.txt b/10_modules.txt
@@ -1,7 +1,7 @@
 :chap_num: 10
 :prev_link: 09_regexp
 :next_link: 11_language
-:load_files: ["code/chapter/10_modules.js", "js/loadfile.js"]
+:load_files: ["code/chapter/10_modules.js", "code/loadfile.js"]
 
 = Modules =
 
diff --git a/11_language.txt b/11_language.txt
@@ -2,6 +2,7 @@
 :prev_link: 10_modules
 :next_link: 12_browser
 :load_files: ["code/chapter/11_language.js"]
+:zip: node/html
 
 = Project: A Programming Language =
 
diff --git a/15_game.txt b/15_game.txt
@@ -2,6 +2,7 @@
 :prev_link: 14_event
 :next_link: 16_canvas
 :load_files: ["code/chapter/15_game.js", "code/game_levels.js"]
+:zip: html include=["css/game.css"]
 
 = Project: A Platform Game =
 
@@ -1212,9 +1213,11 @@ This page feeds them to `runGame`, starting an actual game:
 ----
 <link rel="stylesheet" href="css/game.css">
 
-<script>
-  runGame(GAME_LEVELS, DOMDisplay);
-</script>
+<body>
+  <script>
+    runGame(GAME_LEVELS, DOMDisplay);
+  </script>
+</body>
 ----
 
 ifdef::interactive_target[]
@@ -1244,6 +1247,7 @@ ifdef::interactive_target[]
 ----
 <link rel="stylesheet" href="css/game.css">
 
+<body>
 <script>
   // The old runGame function. Modify it...
   function runGame(plans, Display) {
@@ -1261,6 +1265,7 @@ ifdef::interactive_target[]
   }
   runGame(GAME_LEVELS, DOMDisplay);
 </script>
+</body>
 ----
 
 endif::interactive_target[]
@@ -1317,6 +1322,7 @@ ifdef::interactive_target[]
 ----
 <link rel="stylesheet" href="css/game.css">
 
+<body>
 <script>
   // The old runLevel function. Modify this...
   function runLevel(level, Display, andThen) {
@@ -1334,6 +1340,7 @@ ifdef::interactive_target[]
   }
   runGame(GAME_LEVELS, DOMDisplay);
 </script>
+</body>
 ----
 
 endif::interactive_target[]
diff --git a/16_canvas.txt b/16_canvas.txt
@@ -2,6 +2,7 @@
 :prev_link: 15_game
 :next_link: 17_http
 :load_files: ["code/chapter/15_game.js", "code/game_levels.js", "code/chapter/16_canvas.js"]
+:zip: html include=["img/player.png", "img/sprites.png"]
 
 = Drawing on Canvas =
 
diff --git a/17_http.txt b/17_http.txt
@@ -1,7 +1,7 @@
 :chap_num: 17
 :prev_link: 16_canvas
 :next_link: 18_forms
-:load_files: ["code/chapter/17_http.js", "js/promise.js"]
+:load_files: ["code/chapter/17_http.js", "code/promise.js"]
 
 = HTTP =
 
diff --git a/18_forms.txt b/18_forms.txt
@@ -1,7 +1,7 @@
 :chap_num: 18
 :prev_link: 17_http
 :next_link: 19_paint
-:load_files: ["js/promise.js"]
+:load_files: ["code/promise.js"]
 
 = Forms and Form Fields =
 
diff --git a/19_paint.txt b/19_paint.txt
@@ -2,6 +2,7 @@
 :prev_link: 18_forms
 :next_link: 20_node
 :load_files: ["code/chapter/19_paint.js"]
+:zip: html include=["css/paint.css"]
 
 = Project: A Paint Program =
 
diff --git a/20_node.txt b/20_node.txt
@@ -1,6 +1,7 @@
 :chap_num: 20
 :prev_link: 19_paint
 :next_link: 21_skillsharing
+:code_links: ["code/file_server.js", "code/file_server_promises.js"]
 
 = Node.js =
 
diff --git a/21_skillsharing.txt b/21_skillsharing.txt
@@ -1,5 +1,6 @@
 :chap_num: 21
 :prev_link: 20_node
+:code_links: ["code/skillsharing.zip"]
 
 = Project: Skill-Sharing Website =
 
@@ -1164,7 +1165,7 @@ in the other.
 (((Node.js)))The following exercises will involve modifying the system
 defined in this chapter. To work on them, make sure you ((download))
 the code first
-(http://eloquentjavascript.net/code/skillshare.zip[_eloquentjavascript.net/code/skillshare.zip_])
+(http://eloquentjavascript.net/code/skillsharing.zip[_eloquentjavascript.net/code/skillsharing.zip_])
 and have Node installed (http://nodejs.org[_nodejs.org_]).
 
 === Disk persistence ===
diff --git a/bin/chapter_info.js b/bin/chapter_info.js
@@ -11,16 +11,23 @@ var allSolutions = fs.readdirSync("code/solutions/").filter(function(file) { ret
 var dir = fs.readdirSync(".");
 dir.sort();
 dir.forEach(function(file) {
-  var match = /^(\d+).*\.txt$/.exec(file), chapNum = match && match[1];
+  var match = /^((\d+).*).txt$/.exec(file), chapNum = match && match[2];
   if (!match) return;
   var text = fs.readFileSync(file, "utf8");
 
+  var includes = text.match(/\n:load_files: (.*)/);
+  if (includes) includes = includes = JSON.parse(includes[1]);
   var chapter = {number: +chapNum,
+                 id: match[1],
                  title: text.match(/\n= (.*?) =\n/)[1],
-                 start_code: getStartCode(text),
-                 exercises: []};
-  var includes = text.match(/\n:load_files: (.*)/);
-  if (includes) chapter.include = JSON.parse(includes[1]);
+                 start_code: getStartCode(text, includes),
+                 exercises: [],
+                 include: includes};
+  var zip = chapterZipFile(text, chapter);
+  var extraLinks = text.match(/\n:code_links: (.*)/);
+  if (extraLinks) extraLinks = JSON.parse(extraLinks[1]);
+  if (extraLinks || zip)
+    chapter.links = (zip ? [zip] : []).concat(extraLinks || []);
 
   var exerciseSection = text.indexOf("\n== Exercises ==\n");
   var exerciseBlock = exerciseSection ? text.slice(exerciseSection) : "";
@@ -52,8 +59,8 @@ dir.forEach(function(file) {
           file: "code/solutions/" + file,
           number: num,
           type: type,
-          code: sourceBlock[2],
-          solution: solution.trim()
+          code: type == "html" ? prepareHTML(sourceBlock[2], includes) : sourceBlock[2],
+          solution: type == "html" ? prepareHTML(solution.trim(), includes) : solution.trim()
         });
         break;
       }
@@ -160,7 +167,17 @@ if (!failed)
 else
   process.exit(1);
 
-function getStartCode(text) {
+function prepareHTML(code, include) {
+  return "<!doctype html>\n" + (include || []).map(function(s) {
+    return "<script src=\"" + s + "\"></script>\n";
+  }).join("") + "\n" + code;
+}
+
+function guessType(code) {
+  return /^[\s\w\n:]*</.test(code) ? "html" : "js";
+}
+
+function getStartCode(text, includes) {
   var found = /\/\/ start_code(.*)\n(?:\/\/.*\n)*\s*(?:\[.*\n)*\[source,.*?\]\n----\n([\s\S]*?\n)----/.exec(text);
   if (!found) return "";
 
@@ -172,5 +189,38 @@ function getStartCode(text) {
     var lines = snippet.trimRight().split("\n");
     snippet = lines.slice(lines.length - Number(m[1])).join("\n") + "\n";
   }
-  return snippet;
+  if (guessType(snippet) == "html")
+    return prepareHTML(snippet, includes);
+  else
+    return snippet;
+}
+
+function chapterZipFile(text, chapter) {
+  var spec = text.match(/\n:zip: (\S+)(?: include=(.*))?/);
+  if (!spec) return null;
+  if (!chapter.start_code) throw new Error("zip but no start code");
+  var name = "code/chapter/" + chapter.id + ".zip";
+  var files = (chapter.include || []).concat(spec[2] ? JSON.parse(spec[2]) : []);
+  var exists = fs.existsSync(name) && fs.statSync(name).mtime;
+  if (exists && files.every(function(file) { return fs.statSync("html/" + file).mtime < exists; }))
+    return name;
+
+  var zip = new (require("jszip"));
+  files.forEach(function(file) {
+    zip.file(chapter.id + "/" + file, fs.readFileSync("html/" + file));
+  });
+  if (spec[1].indexOf("html") != -1) {
+    var html = chapter.start_code;
+    if (guessType(html) != "html")
+      html = prepareHTML("<body><script>\n" + html.trim() + "\n</script></body>", chapter.include);
+    zip.file(chapter.id + "/index.html", html);
+  }
+  if (spec[1].indexOf("node") != -1) {
+    zip.file(chapter.id + "/code/load.js", fs.readFileSync("code/load.js", "utf8"));
+    var js = chapter.start_code;
+    if (chapter.include) js = "// load dependencies\nrequire(\"./code/load\")(" + chapter.include.map(JSON.stringify).join(", ") + ");\n\n" + js;
+    zip.file(chapter.id + "/run_with_node.js", js);
+  }
+  fs.writeFileSync(name, zip.generate({type: "nodebuffer"}));
+  return name;
 }
diff --git a/code/animateworld.js b/code/animateworld.js
diff --git a/code/index.html b/code/index.html
@@ -36,6 +36,11 @@ <h1>Code Sandbox<div style="font-size: 70%"><a class="subtlelink" href="../index
     <div class="sandbox-output" id="output"></div>
   </div>
 
+  <div id="runLocally">
+    To run this chapter's code locally, use these files:
+    <ul id="local-files" style="font-family: 'PT Mono', monospace; margin-top: 0"></ul>
+  </div>
+
   <div id="fileInfo">
     These files contain this chapter’s project code:
     <ul id="files" style="font-family: 'PT Mono', monospace; margin-top: 0"></ul>
diff --git a/code/intro.js b/code/intro.js
diff --git a/code/load.js b/code/load.js
@@ -0,0 +1,9 @@
+// Since the code for most chapter in Eloquent JavaScript isn't
+// written with node's module system in mind, this kludge is used to
+// load dependency files into the global namespace, so that the
+// examples can run on node.
+
+module.exports = function() {
+  for (var i = 0; i < arguments.length; i++)
+    (1,eval)(require("fs").readFileSync(__dirname + "/../" + arguments[i], "utf8"));
+};
diff --git a/code/loadfile.js b/code/loadfile.js
diff --git a/code/promise.js b/code/promise.js
diff --git a/html/js/code.js b/html/js/code.js
@@ -22,16 +22,10 @@ addEventListener("load", function() {
     }, 500);
   });
 
-  function addIncludes(code, include) {
-    if (!include) return code;
-    return include.map(function(s) {
-      return "<script src=\"" + s + "\"></script>\n";
-    }).join("") + code;
-  }
   function hasIncludes(code, include) {
     if (!include) return code;
 
-    var re = /(?:\s|<!--.*?-->)*<script src="(.*?)"><\/script>/g, m;
+    var re = /(?:\s|<!--.*?-->)*<script src="([^"]*)"><\/script>/g, m;
     var found = [];
     while (m = re.exec(code)) found.push(m[1]);
     return include.every(function(s) { return found.indexOf(s) > -1; });
@@ -77,6 +71,15 @@ addEventListener("load", function() {
   });
   var fileList = document.querySelector("#files");
   var fileInfo = document.querySelector("#fileInfo");
+  var runLocally = document.querySelector("#runLocally");
+  var localFileList = document.querySelector("#local-files");
+
+  function addItem(container, link) {
+    var li = container.appendChild(document.createElement("li"));
+    var a = li.appendChild(document.createElement("a"));
+    a.href = link;
+    a.textContent = link.replace(/^code\//, "");
+  }
 
   function selectChapter(number, context) {
     per.textContent = "";
@@ -90,14 +93,15 @@ addEventListener("load", function() {
     } else {
       per.appendChild(opt("box", "This chapter has no exercises"));
     }
-    fileInfo.style.display = "none";
-    fileList.textContent = "";
+    fileInfo.style.display = runLocally.style.display = "none";
+    fileList.textContent = localFileList.textContent = "";
+    if (chapter.links) chapter.links.forEach(function(file, i) {
+      if (!i) runLocally.style.display = "";
+      addItem(localFileList, file);
+    });
     if (chapter.include) chapter.include.forEach(function(file, i) {
       if (!i) fileInfo.style.display = "";
-      var li = fileList.appendChild(document.createElement("li"));
-      var a = li.appendChild(document.createElement("a"));
-      a.href = file;
-      a.textContent = file.replace(/^code\//, "");
+      addItem(fileList, file);
     });
     selectContext(context || "box");
   }
@@ -125,22 +129,18 @@ addEventListener("load", function() {
         code = "// " + code;
       else
         code = "<!-- " + code + "-->";
-      if (chapter.start_code) code += "\n\n" + addIncludes(chapter.start_code, chapter.include);
+      if (chapter.start_code) code += "\n\n" + chapter.start_code;
       context = {include: chapter.include};
       setEditorCode(code, guessed);
       visible = "box";
     } else {
-      var exercise = findExercise(value, chapter), code = exercise.code, sol = exercise.solution;
-      if (exercise.type == "html") {
-        code = addIncludes(code, chapter.include);
-        sol = addIncludes(sol, chapter.include);
-      }
+      var exercise = findExercise(value, chapter);
       context = {include: chapter.include,
-                 solution: sol,
+                 solution: exercise.solution,
                  type: exercise.type};
-      setEditorCode(code, exercise.type);
+      setEditorCode(exercise.code, exercise.type);
       visible = "exercise";
-      document.querySelector("#download").href = "data:text/plain;base64," + btoa(sol);
+      document.querySelector("#download").href = "data:text/plain;base64," + btoa(exercise.solution);
     }
     ["box", "exercise"].forEach(function(id) {
       document.querySelector("#" + id + "_info").style.display =
diff --git a/html/js/sandbox.js b/html/js/sandbox.js
diff --git a/package.json b/package.json
