Merge pull request #911 from rschamp/feature/html-webpack-plugin

Use html-webpack-plugin for html rendering

mustache-renderer-webpack-plugin/index.js

@@ -1,50 +0,0 @@
-var defaults = require('lodash.defaults');
-var fs = require('fs');
-var mustache = require('mustache');
-
-var render = function (template, route, config) {
-    config = config || {};
-    // Route definition
-    defaults(route, config);
-
-    // Render template
-    return mustache.render(template, route);
-};
-
-function MustacheRendererPlugin (options) {
-    if (!options.templatePath) throw new Error('MustacheRendererPlugin requires a templatePath option');
-    // Read template
-    var template = fs.readFileSync(options.templatePath, 'utf8');
-    this.template = template;
-    this.routes = options.routes || {};
-    this.config = options.config || {};
-    return this;
-}
-
-MustacheRendererPlugin.prototype.apply = function (compiler) {
-    var template = this.template;
-    var config = this.config;
-    var routes = this.routes;
-
-    compiler.plugin('emit', function (compilation, callback) {
-        var outputRoutes = {};
-        routes.forEach(function (route) {
-            var filename = route.name + '.html';
-            var content = render(template, route, config);
-            outputRoutes[route.pattern] = filename;
-            compilation.assets[filename] = {
-                source: function () {return content;},
-                size: function () {return content.length;}
-            };
-        });
-        var routeJson = JSON.stringify(outputRoutes);
-        compilation.assets['routes.json'] = {
-            source: function () {return routeJson;},
-            size: function () {return routeJson.length;}
-        };
-        callback();
-    });
-};
-
-module.exports = MustacheRendererPlugin;
-

package.json

@@ -26,7 +26,6 @@
     "express": "4.13.4",
     "express-http-proxy": "0.6.0",
     "lodash.defaults": "4.0.1",
-    "mustache": "2.2.1",
     "newrelic": "1.25.4",
     "raven": "0.10.0"
   },
@@ -53,6 +52,7 @@
     "git-bundle-sha": "0.0.2",
     "glob": "5.0.15",
     "google-libphonenumber": "1.0.21",
+    "html-webpack-plugin": "2.22.0",
     "iso-3166-2": "0.4.0",
     "json-loader": "0.5.2",
     "json2po-stream": "1.0.3",

src/template-config.js

@@ -1,4 +1,16 @@
+/**
+ * Default options for the html-webpack-plugin HTML renderer
+ *
+ * See https://github.com/ampedandwired/html-webpack-plugin#configuration
+ * for possible options. Any other options will be available to the template
+ * under `htmlWebpackPlugin.options`
+ */
+
 module.exports = {
+    // html-webpack-plugin options
+    template: './src/template.ejs',
+    inject: false,
+
     // Search and metadata
     title: 'Imagine, Program, Share',
     description:

src/template.ejs

@@ -6,25 +6,25 @@
         <meta charset="UTF-8" />
 
         <meta http-equiv="x-ua-compatible" content="ie=edge">
-        <meta name="viewport" content="width={{viewportWidth}}, initial-scale=1">
+        <meta name="viewport" content="width=<%= htmlWebpackPlugin.options.viewportWidth %>, initial-scale=1">
 
-        <title>Scratch - {{title}}</title>
+        <title>Scratch - <%= htmlWebpackPlugin.options.title %></title>
 
         <!-- Prevent mobile Safari from making phone numbers -->
         <meta name="format-detection" content="telephone=no">
 
         <!-- Search & Open Graph-->
-        <meta name="description" content="{{description}}" />
+        <meta name="description" content="<%= htmlWebpackPlugin.options.description %>" />
         <meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM" />
 
         <meta property="og:url" content="https://scratch.mit.edu/" />
         <meta property="og:type" content="website" />
-        <meta property="og:title" content="Scratch - {{title}}" />
-        <meta property="og:description" content="{{description}}" />
-        <meta property="og:image" content="{{&og_image}}" />
-        <meta property="og:image:type" content="{{&og_image_type}}" />
-        <meta property="og:image:width" content="{{&og_image_width}}" />
-        <meta property="og:image:height" content="{{&og_image_height}}" />
+        <meta property="og:title" content="Scratch - <%= htmlWebpackPlugin.options.title %>" />
+        <meta property="og:description" content="<%= htmlWebpackPlugin.options.description %>" />
+        <meta property="og:image" content="<%- htmlWebpackPlugin.options.og_image %>" />
+        <meta property="og:image:type" content="<%- htmlWebpackPlugin.options.og_image_type %>" />
+        <meta property="og:image:width" content="<%- htmlWebpackPlugin.options.og_image_width %>" />
+        <meta property="og:image:height" content="<%- htmlWebpackPlugin.options.og_image_height %>" />
 
         <!-- Favicon & CSS normalize -->
         <link rel="shortcut icon" href="/favicon.ico" />
@@ -35,15 +35,17 @@
 
         <!-- Analytics (GA) -->
         <script>
+            /* eslint-disable */
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
             m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
             })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
 
-            ga('create', '{{&ga_tracker}}', {
+            ga('create', '<%- htmlWebpackPlugin.options.ga_tracker %>', {
                 'sampleRate': 10
             });
             ga('send', 'pageview');
+            /* eslint-enable */
         </script>
     </head>
 
@@ -51,11 +53,11 @@
         <div id="app"></div>
 
         <!-- Vendor & Initialize (Session & Localization)-->
-        <script src="/js/common.bundle.js"></script>
+        <script src="/<%= htmlWebpackPlugin.files.chunks.common.entry %>"></script>
 
         <!-- Scripts -->
-        <script src="/js/{{name}}.intl.js"></script>
-        <script src="/js/{{name}}.bundle.js"></script>
+        <script src="/js/<%= htmlWebpackPlugin.options.route.name %>.intl.js"></script>
+        <script src="/<%= htmlWebpackPlugin.files.chunks[htmlWebpackPlugin.options.route.name].entry %>"></script>
 
         <!-- Translate title element -->
         <script>
@@ -65,7 +67,7 @@
                     loc = loc.split('-')[0];
                 }
                 if (typeof window._messages[loc] !== 'undefined') {
-                    var localizedTitle = window._messages[loc]['general.' + '{{title}}'.toLowerCase()] || '';
+                    var localizedTitle = window._messages[loc]['general.' + '<%= htmlWebpackPlugin.options.title %>'.toLowerCase()] || '';
                     if (localizedTitle.length > 0) {
                         document.title = 'Scratch - ' + localizedTitle;
                     }

webpack.config.js

@@ -1,7 +1,8 @@
 var autoprefixer = require('autoprefixer');
 var CopyWebpackPlugin = require('copy-webpack-plugin');
+var defaults = require('lodash.defaults');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
 var gitsha = require('git-bundle-sha');
-var MustacheRendererPlugin = require('./mustache-renderer-webpack-plugin');
 var path = require('path');
 var webpack = require('webpack');
 
@@ -100,12 +101,17 @@ module.exports = {
         fs: 'empty'
     },
     plugins: [
-        new VersionPlugin({length: 5}),
-        new MustacheRendererPlugin({
-            templatePath: path.resolve(__dirname, './src/template.html'),
-            routes: routes,
-            config: require('./src/template-config.js')
-        }),
+        new VersionPlugin({length: 5})
+    ].concat(routes
+        .filter(function (route) {return !route.redirect;})
+        .map(function (route) {
+            return new HtmlWebpackPlugin(defaults({}, require('./src/template-config.js'), {
+                title: route.title,
+                filename: route.name + '.html',
+                route: route
+            }));
+        })
+    ).concat([
         new CopyWebpackPlugin([
             {from: 'static'},
             {from: 'intl', to: 'js'}
@@ -124,5 +130,5 @@ module.exports = {
         }),
         new webpack.optimize.CommonsChunkPlugin('common', 'js/common.bundle.js'),
         new webpack.optimize.OccurenceOrderPlugin()
-    ]
+    ])
 };