Hygiene: move SVG string to file

- Add SVG Inline Loader for Webpack. This allows SVG files to be
  imported.

- Update the Webpack and test configurations to use the new loader.

- Scope the ESLint rules down to just JavaScript files so that linting
  isn't attempted on the SVG.

Bug: T165036
Change-Id: I00bccff4c3167975c19d577be6343dcaca7ddb2d

Gruntfile.js

@@ -23,7 +23,7 @@ module.exports = function ( grunt ) {
 			},
 			sources: {
 				src: [
-					'src/**',
+					'src/**/*.js',
 					'tests/node-qunit/**/*.js',
 					'!resources/dist/index.js',
 					'!docs/**',

package.json

@@ -32,6 +32,7 @@
     "redux-thunk": "2.2.0",
     "stylelint": "8.2.0",
     "stylelint-config-wikimedia": "0.4.2",
+    "svg-inline-loader": "0.8.0",
     "tap-dot": "^1.0.5",
     "webpack": "^2.6.0"
   },

src/ui/pokey-mask.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
+  <defs>
+    <clippath id="mwe-popups-mask">
+      <polygon points="0 8, 10 8, 18 0, 26 8, 1000 8, 1000 1000, 0 1000"/>
+    </clippath>
+    <clippath id="mwe-popups-mask-flip">
+      <polygon points="0 8, 274 8, 282 0, 290 8, 1000 8, 1000 1000, 0 1000"/>
+    </clippath>
+    <clippath id="mwe-popups-landscape-mask">
+      <polygon points="0 8, 174 8, 182 0, 190 8, 1000 8, 1000 1000, 0 1000"/>
+    </clippath>
+    <clippath id="mwe-popups-landscape-mask-flip">
+      <polygon points="0 0, 1000 0, 1000 242, 190 242, 182 250, 174 242, 0 242"/>
+    </clippath>
+  </defs>
+</svg>

src/ui/renderer.js

@@ -3,6 +3,7 @@
  */
 
 import wait from '../wait';
+import pokeyMaskSVG from './pokey-mask.svg';
 import { previewTypes } from '../preview/model';
 
 var mw = window.mediaWiki,
@@ -30,24 +31,7 @@ var mw = window.mediaWiki,
 export function createPokeyMasks( container ) {
 	$( '<div>' )
 		.attr( 'id', 'mwe-popups-svg' )
-		.html(
-			'<svg width="0" height="0">' +
-				'<defs>' +
-					'<clippath id="mwe-popups-mask">' +
-						'<polygon points="0 8, 10 8, 18 0, 26 8, 1000 8, 1000 1000, 0 1000"/>' +
-					'</clippath>' +
-					'<clippath id="mwe-popups-mask-flip">' +
-						'<polygon points="0 8, 274 8, 282 0, 290 8, 1000 8, 1000 1000, 0 1000"/>' +
-					'</clippath>' +
-					'<clippath id="mwe-popups-landscape-mask">' +
-						'<polygon points="0 8, 174 8, 182 0, 190 8, 1000 8, 1000 1000, 0 1000"/>' +
-					'</clippath>' +
-					'<clippath id="mwe-popups-landscape-mask-flip">' +
-						'<polygon points="0 0, 1000 0, 1000 242, 190 242, 182 250, 174 242, 0 242"/>' +
-					'</clippath>' +
-				'</defs>' +
-			'</svg>'
-		)
+		.html( pokeyMaskSVG )
 		.appendTo( container );
 }
 

tests/node-qunit/run.js

@@ -1,4 +1,6 @@
 #!/usr/bin/env node
+const fs = require( 'fs' ),
+	svgInlineLoader = require( 'svg-inline-loader' );
 
 require( 'babel-register' )( {
 	presets: [
@@ -9,4 +11,11 @@ require( 'babel-register' )( {
 		} ]
 	]
 } );
+
+require.extensions[ '.svg' ] = ( module, filename ) => {
+	const svg = fs.readFileSync( filename, { encoding: 'utf8' } );
+	// eslint-disable-next-line no-underscore-dangle
+	module._compile( svgInlineLoader( svg ), filename );
+};
+
 require( 'mw-node-qunit' );

webpack.config.js

@@ -39,6 +39,17 @@ conf = {
 			'redux-thunk': path.resolve( __dirname, reduxThunkPath )
 		}
 	},
+	module: {
+		rules: [
+			{
+				test: /\.svg$/,
+				loader: 'svg-inline-loader',
+				options: {
+					removeSVGTagAttrs: false // Keep width and height attributes.
+				}
+			}
+		]
+	},
 	plugins: [
 		// To generate identifiers that are preserved over builds, webpack supplies
 		// the NamedModulesPlugin (generates comments with file names on bundle)