SVG/CSS generator: Make faster by skipping already-fetched icons

Also keep the CSS file in alphabetical order so additions make
for clean diffs. (The async built file had a pseudo-random order)

Change-Id: Iad76ef36c90f42ba3232f135b05465408f42b2ba

modules/ve-math/tools/makeSvgsAndCss.js

@@ -2,22 +2,30 @@
 
 /* jshint node: true */
 
-var i, count, group, symbols, symbolObject,
-	symbolList = [],
-	symbolsFile = '../symbols.json',
-	cssFile = '../ve.ui.MWMathSymbols.css',
-	fs = require( 'fs' ),
-	http = require( 'http' ),
-	querystring = require( 'querystring' ),
-	SVGO = require( 'svgo' ),
-	svgo = new SVGO( {
-		plugins: [
-			{ convertTransform: false }
-		]
-	} ),
-	mathoidMaxConnections = 5;
+( function () {
+	var i, count, group, symbols, symbolObject,
+		symbolsData, cssData, cssLines, index,
+		cssRules = [],
+		cssClasses = [],
+		symbolList = [],
+		symbolsFile = '../symbols.json',
+		cssFile = '../ve.ui.MWMathSymbols.css',
+		cssPrefix = '.ve-ui-mwMathSymbol-',
+		fs = require( 'fs' ),
+		http = require( 'http' ),
+		querystring = require( 'querystring' ),
+		SVGO = require( 'svgo' ),
+		svgo = new SVGO( {
+			plugins: [
+				{ convertTransform: false }
+			]
+		} ),
+		mathoidMaxConnections = 5;
 
-fs.readFile( symbolsFile, function ( err, data ) {
+	symbolsData = fs.readFileSync( symbolsFile ).toString();
+	try {
+		cssData = fs.readFileSync( cssFile ).toString();
+	} catch ( e ) {}
 
 	function encodeURIComponentForCSS( str ) {
 		return encodeURIComponent( str )
@@ -26,6 +34,13 @@ fs.readFile( symbolsFile, function ( err, data ) {
 			} );
 	}
 
+	function texToClass( tex ) {
+		// Make the className, replacing any non-alphanumerics with their character code
+		return tex.replace( /[^\w]/g, function ( c ) {
+			return '_' + c.charCodeAt( 0 ) + '_';
+		} );
+	}
+
 	function makeRequest( symbol ) {
 		var request,
 			data = querystring.stringify( {
@@ -53,13 +68,8 @@ fs.readFile( symbolsFile, function ( err, data ) {
 			} );
 
 			res.on( 'end', function () {
-				var classname, svg;
-				// Make the classname, replacing any non-alphanumerics with their character code
-				classname = symbol.replace( /[^\w]/g, function ( c ) {
-					return '_' + c.charCodeAt( 0 ) + '_';
-				} );
-
-				svg = JSON.parse( body ).svg;
+				var className = texToClass( symbol ),
+					svg = JSON.parse( body ).svg;
 
 				if ( !svg ) {
 					console.log( symbol + ' FAILED: ' + body );
@@ -69,14 +79,13 @@ fs.readFile( symbolsFile, function ( err, data ) {
 
 				svgo.optimize( svg, function ( result ) {
 					// write to the css file
-					fs.appendFileSync(
-						cssFile,
-						'\n.ve-ui-mwMathSymbol-' + classname + ' {\n' +
+					cssRules.push(
+						cssPrefix + className + ' {\n' +
 						'\tbackground-image: url(data:image/svg+xml,' + encodeURIComponentForCSS( result.data ) + ');\n' +
-						'}\n'
+						'}'
 					);
+					console.log( symbol + ' -> ' + className );
 				} );
-				console.log( symbol + ' -> ' + classname );
 				onEnd();
 
 			} );
@@ -97,18 +106,53 @@ fs.readFile( symbolsFile, function ( err, data ) {
 			count++;
 			makeRequest( symbolList.shift() );
 		}
-	}
-
-	symbolObject = JSON.parse( data.toString() );
-	for ( group in symbolObject ) {
-		symbols = symbolObject[ group ];
-		for ( i = 0; i < symbols.length; i++ ) {
-			symbolList.push( symbols[ i ].tex );
+		if ( !symbolList.length && !count ) {
+			cssRules.sort();
+			fs.writeFileSync(
+				cssFile,
+				'/*!\n' +
+				' * This file is GENERATED by tools/makeSvgsAndCss.js\n' +
+				' * DO NOT EDIT\n' +
+				' */\n' +
+				'\n' +
+				cssRules.join( '\n\n' ) +
+				'\n'
+			);
 		}
 	}
 
-	fs.writeFileSync( cssFile, '/*!\n * This file is GENERATED by tools/makeSvgsAndCss.js\n * DO NOT EDIT\n */\n' );
+	if ( cssData ) {
+		cssLines = cssData.split( '\n' );
+		for ( i = 0; i < cssLines.length; i++ ) {
+			if ( cssLines[ i ].indexOf( cssPrefix ) === 0 ) {
+				cssRules.push( cssLines.slice( i, i + 3 ).join( '\n' ) );
+				cssClasses.push( cssLines[ i ].slice( cssPrefix.length, -2 ) );
+			}
+		}
+	}
+
+	symbolObject = JSON.parse( symbolsData );
+	for ( group in symbolObject ) {
+		symbols = symbolObject[ group ];
+		for ( i = 0; i < symbols.length; i++ ) {
+			index = cssClasses.indexOf( texToClass( symbols[ i ].tex ) );
+			if ( index === -1 ) {
+				symbolList.push( symbols[ i ].tex );
+			} else {
+				// Remove CSS classes we found in the symbol list so that
+				// and the end of this loop, cssClasses contains classes
+				// that have been deleted from the symbol list
+				cssClasses.splice( index, 1 );
+			}
+		}
+	}
+
+	// Remove classes that are no longer in the JSON
+	cssRules = cssRules.filter( function ( rule ) {
+		return cssClasses.indexOf( rule.split( '\n' )[ 0 ].slice( cssPrefix.length, -2 ) ) === -1;
+	} );
+
 	count = 0;
 	runNext();
 
-} );
+} )();