Removed the example code from index.js that builds the PEG.js parser …

…in the browser. The parser should now be built on the server.

Since is what a user should do in production anyway, having code that builds the parser in the browser was unnecessary and confusing. This does add an additional build dependency of PEG.js.
The minified script should include the parser in the same file, i.e., libjass.js and ass.pegjs.js should be minifed together into libjass.min.js. The instructions for minification have been updated to reflect this.
Tests have been updated likewise, and now have prettier output.

.gitignore

@@ -4,10 +4,14 @@ libjass.js
 parser.js
 tags.js
 utility.js
+
+ass.pegjs.js
+
 dialogue.min.js
 iterators.min.js
 libjass.min.js
 parser.min.js
 tags.min.js
 utility.min.js
+
 *.map

BUILD.md

@@ -2,10 +2,20 @@
     1. node.js http://nodejs.org/ (or via your package manager)
     1. TypeScript http://www.typescriptlang.org/#Download
 
+            npm install typescript
+
+    1. PEG.js http://pegjs.majda.cz/
+
+            npm install pegjs
+
 1. Generate libjass.js
 
         tsc libjass.ts --out libjass.js --sourcemap --noImplicitAny --target ES5
 
+1. Generate ass.pegjs.js
+
+        pegjs --export-var "libjass.parser" ass.pegjs ass.pegjs.js
+
 1. Set the URLs of the video and the ASS file in index.xhtml
 
         <video id="video" src=" <URL OF VIDEO HERE> " controls="">
@@ -26,7 +36,11 @@ for each font. The name of the font is what it's called in the ASS file.
 
 The next steps are for building the minified file libjass.min.js, and are optional.
 
-1. Minify libjass.js to libjass.min.js
+1. Minify libjass.js and ass.pegjs.js to libjass.min.js
+
+    For example, the following command-line for Microsoft AJAX Minifer:
+
+        "C:\Program Files (x86)\Microsoft\Microsoft Ajax Minifier\ajaxmin.exe" G:\src\libjass\libjass.js G:\src\libjass\ass.pegjs.js -enc:in utf-8 -enc:out utf-8 -out G:\src\libjass\libjass.min.js -comments:none -debug:false,console,libjass.debugMode,libjass.verboseMode -esc:true -inline:false -map:V3 G:\src\libjass\libjass.min.js.map -strict:true
 
 1. Prepend the license notice to libjass.min.js from any one of the TS files.
 
@@ -36,7 +50,6 @@ The next steps are for building the minified file libjass.min.js, and are option
 		<title>&gt;2012 &gt;Streaman Animu</title>
 		<link rel="stylesheet" href="index.css" />
 		<link rel="stylesheet" href="fonts.css" />
-		<script src="peg-0.7.0.min.js" />
 		<script src="libjass.min.js" />
 		<script src="index.js" />
 		<style id="animation-styles" type="text/css" />

LICENSE

@@ -200,10 +200,3 @@
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
-
-
-
-
-
-This product bundles PEG.js (http://pegjs.majda.cz/), which is available under
-the MIT license.

README.md

@@ -16,20 +16,17 @@ As a result, libjass is able to render subtitles with very low CPU usage. The do
 
 * The .ts files are the source of libjass. They are TypeScript files and must be compiled into JavaScript for the browser using the TypeScript compiler. Instructions are in BUILD.md
 
-* The two peg.js files are the source of [PEG.js](http://pegjs.majda.cz/). This is the parser generator library used to build a parser for the ASS format.
-
-* ass.pegjs is the source of that parser.
+* The ass.pegjs file is the source of a parser for the ASS format.
 
 * The rest of the files - index.xhtml, index.js, index.css, fonts.css are a sample implementation of how to use libjass. These files are not needed to use libjass on your website. They only exist as an example of the libjass API, placement of <div> elements to render the subs, etc.
 
 
 ### I want to use libjass for my website. What do I need to do?
 
-1. You need to build libjass.js using the instructions in BUILD.md
-1. You need to load libjass.js on the page with your video.
+1. You need to build libjass.js and ass.pegjs.js using the instructions in BUILD.md
+1. You need to load libjass.js and ass.pegjs.js on the page with your video.
 1. You need to call the libjass API.
 
-
 ### Where's the API documentation? What API do I need to call to use libjass?
 
 Formal documentation is coming soon. In the meantime, here's an overview:
@@ -46,8 +43,6 @@ Formal documentation is coming soon. In the meantime, here's an overview:
 
 * Lastly, index.js contains an implementation of preloading all the fonts used in the ASS file. It matches the font names extracted from the script with URLs defined in fonts.css and XHR's the fonts.
 
-* The constructor ASS() also takes in a parser object. This is created by XHR'ing ass.pegjs and using PEG.js to process it. It is also possible to use the PEG.js API server-side to create the parser as a JS file. You can then serve the pre-generated parser along with libjass.js and the rest of your site's JavaScript. Instructions for generating the parser outside the browser (using node.js) are on the PEG.js website linked above.
-
 
 ### Can I contribute?
 

dialogue.ts

@@ -42,7 +42,7 @@ module libjass {
 
 		private _sub: HTMLDivElement = null;
 
-		constructor(template: Object, private _ass: ASS, parser: Parser) {
+		constructor(template: Object, private _ass: ASS) {
 			this._id = ++Dialogue._lastDialogueId;
 
 			this._style = this._ass.styles.filter(aStyle => aStyle.name === template["Style"])[0];

index.js

@@ -48,7 +48,6 @@ addEventListener("DOMContentLoaded", function () {
 	var videoMetadataLoaded = false;
 	var ass = null;
 
-	var parser = null;
 	var rawASS = null;
 
 	var testVideoAndASSLoaded = function () {
@@ -310,29 +309,6 @@ addEventListener("DOMContentLoaded", function () {
 		testVideoAndASSLoaded();
 	}
 
-	var parserRequest = new XMLHttpRequest();
-	parserRequest.open("GET", "ass.pegjs", true);
-	parserRequest.addEventListener("readystatechange", function () {
-		if (parserRequest.readyState === XMLHttpRequest.DONE) {
-			debug("Parser data received.");
-			parser = PEG.buildParser(parserRequest.responseText);
-			debug("Parser created.");
-
-			if (rawASS) {
-				ass = new ASS(rawASS, parser);
-				if (libjass.debugMode) {
-					window.ass = ass;
-				}
-
-				document.querySelector("#script-resolution-label-width").appendChild(document.createTextNode(ass.resolutionX));
-				document.querySelector("#script-resolution-label-height").appendChild(document.createTextNode(ass.resolutionY));
-
-				testVideoAndASSLoaded();
-			}
-		}
-	}, false);
-	parserRequest.send(null);
-
 	var track = document.querySelector("#video > track[data-format='ass']");
 	var subsRequest = new XMLHttpRequest();
 	subsRequest.open("GET", track.src || track.getAttribute("src"), true);
@@ -341,17 +317,15 @@ addEventListener("DOMContentLoaded", function () {
 			debug("ASS script received.");
 			rawASS = subsRequest.responseText;
 
-			if (parser) {
-				ass = new ASS(rawASS, parser);
-				if (libjass.debugMode) {
-					window.ass = ass;
-				}
+			ass = new ASS(rawASS);
+			if (libjass.debugMode) {
+				window.ass = ass;
+			}
 
-				document.querySelector("#script-resolution-label-width").appendChild(document.createTextNode(ass.resolutionX));
-				document.querySelector("#script-resolution-label-height").appendChild(document.createTextNode(ass.resolutionY));
+			document.querySelector("#script-resolution-label-width").appendChild(document.createTextNode(ass.resolutionX));
+			document.querySelector("#script-resolution-label-height").appendChild(document.createTextNode(ass.resolutionY));
 
-				testVideoAndASSLoaded();
-			}
+			testVideoAndASSLoaded();
 		}
 	}, false);
 	subsRequest.send(null);

index.xhtml

@@ -24,16 +24,17 @@
 		<link rel="stylesheet" href="index.css" />
 		<link rel="stylesheet" href="fonts.css" />
 
-		<script src="peg-0.7.0.min.js" />
+		<!-- Unminified libjass.js -->
 		<script src="libjass.js" />
+		<script src="ass.pegjs.js" />
 
+		<!-- Minified libjass.js -->
 		<!--
-		<script src="peg-0.7.0.min.js" />
 		<script src="libjass.min.js" />
 		-->
 
+		<!-- Individual components in libjass.js -->
 		<!--
-		<script src="peg-0.7.0.js" />
 		<script src="dialogue.js" />
 		<script src="iterators.js" />
 		<script src="parser.js" />

parser.ts

@@ -27,6 +27,8 @@ module libjass {
 		parse(input: string, startRule?: string): any
 	}
 
+	export var parser: Parser;
+
 	export class ASS {
 		private _resolutionX: number;
 		private _resolutionY: number;
@@ -45,9 +47,8 @@ module libjass {
 		 *
 		 * @constructor
 		 * @param {string} rawASS
-		 * @param {{parse: function(string, string=): !*}} parser
 		 */
-		constructor(rawASS: string, parser: Parser) {
+		constructor(rawASS: string) {
 			// Make an iterable for all the lines in the script file.
 			var lines =
 				rawASS.replace(/\r$/gm, "").split("\n")
@@ -86,7 +87,7 @@ module libjass {
 					}
 
 					// Create the style and add it into the styles array
-					this._styles.push(new Style(template, parser));
+					this._styles.push(new Style(template));
 				}
 			});
 
@@ -102,7 +103,7 @@ module libjass {
 					}
 
 					// Create the dialogue and add it to the dialogues array
-					this._dialogues.push(new Dialogue(template, this, parser));
+					this._dialogues.push(new Dialogue(template, this));
 				}
 			});
 		}
@@ -270,7 +271,7 @@ module libjass {
 		private _marginRight: number;
 		private _marginVertical: number;
 
-		constructor(template: Object, parser: Parser) {
+		constructor(template: Object) {
 			this._name = template["Name"];
 
 			this._italic = template["Italic"] === "-1";