Making template compatible with html-webpack-plugin injection

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_size = 2
+indent_style = space
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintignore

@@ -0,0 +1 @@
+node_modules

.eslintrc.js

@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: 'semistandard'
+};

.gitignore

@@ -1,3 +1,5 @@
 node_modules
+.vscode
+.idea
 npm-debug.log
 dist

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) <year> <copyright holders>
+Copyright (c) 2015 Jake Trent <[email protected]>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
+THE SOFTWARE.

examples/.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["@babel/preset-env"]
 }

examples/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/index.js

@@ -1,7 +1,12 @@
-const app = document.getElementById('app')
+const app = document.getElementById('app');
 
-app.innerHTML =
-  'This is an app in the template.<br /><br />' +
-  'Some variables from your webpack.config.js:<br/>' +
-  'title: ' + document.title + '<br />' +
-  'window.env.apiHost: ' + window.env.apiHost
+app.innerHTML = `
+This is an app in the template.<br><br>
+Some variables from your <strong>webpack.config.js</strong>:<br>
+<pre>
+title: ${document.title}
+window.env.apiHost: ${window.env.apiHost}
+</pre>
+`;
+
+document.documentElement.style.fontFamily = 'Roboto';

examples/package.json

@@ -7,11 +7,11 @@
     "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "babel-core": "^6.4.0",
-    "babel-loader": "^6.2.1",
-    "babel-preset-es2015": "^6.3.13",
-    "html-webpack-plugin": "^2.3.0",
-    "webpack": "^1.12.10",
-    "webpack-dev-server": "^1.14.0"
+    "@babel/core": "^7.6.4",
+    "@babel/preset-env": "^7.6.3",
+    "babel-loader": "^8.0.6",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
   }
 }

examples/webpack.config.js

@@ -1,35 +1,32 @@
-var path = require('path')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+'use strict';
 
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+/** @type {import('webpack').Configuration} */
 module.exports = {
-  entry: ['./index'],
+  entry: './index',
   output: {
-    path: __dirname + '/dist',
+    path: path.join(__dirname, '/dist'),
     filename: 'main.js'
   },
-  resolveLoader: { root: path.join(__dirname, 'node_modules') },
   module: {
-    loaders: [{ test: /\.js$/, loader: 'babel-loader' }]
+    rules: [{ test: /\.js$/, loader: 'babel-loader' }]
   },
   devServer: {
     port: 3001
   },
   plugins: [
     new HtmlWebpackPlugin({
-      inject: false,
-      template: '../index.ejs',
-      appMountId: 'app',
-      devServer: 'http://localhost:3001',
+      template: require('..'),
       googleAnalytics: {
         trackingId: 'UA-XXXX-XX',
         pageViewOnLoad: true
       },
-      meta: [
-        {
-          name: 'description',
-          content: 'A better default template for html-webpack-plugin.'
-        }
-      ],
+      meta: {
+        name: 'description',
+        content: 'A better default template for html-webpack-plugin.'
+      },
       mobile: true,
       lang: 'en-US',
       links: [
@@ -61,4 +58,4 @@ module.exports = {
       }
     })
   ]
-}
+};

index.ejs

@@ -1,127 +1,98 @@
-<% var item, key %><%
-htmlWebpackPlugin.options.appMountIds = htmlWebpackPlugin.options.appMountIds || [] %><%
-htmlWebpackPlugin.options.lang = htmlWebpackPlugin.options.lang || "en" %><%
-htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %><%
-htmlWebpackPlugin.options.meta = htmlWebpackPlugin.options.meta || [] %><%
-htmlWebpackPlugin.options.scripts = htmlWebpackPlugin.options.scripts || []
-%><!DOCTYPE html>
-<html lang="<%= htmlWebpackPlugin.options.lang %>"<% if (htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>>
-  <head>
-    <meta charset="utf-8">
-    <meta content="ie=edge" http-equiv="x-ua-compatible"><%
-
-    if (htmlWebpackPlugin.options.baseHref) { %>
-    <base href="<%= htmlWebpackPlugin.options.baseHref %>"><%
-    } %><%
-
-    if (Array.isArray(htmlWebpackPlugin.options.meta)) { %><%
-      for (item of htmlWebpackPlugin.options.meta) { %>
-    <meta<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %>><%
-      } %><%
-    } %><%
-
-    %>
-    <title><%= htmlWebpackPlugin.options.title %></title><%
-
-    if (htmlWebpackPlugin.files.favicon) { %>
-    <link href="<%= htmlWebpackPlugin.files.favicon %>" rel="shortcut icon" /><%
-    } %><%
+<%
+const { options } = htmlWebpackPlugin;
+
+const xhtml = options.xhtml;
+const lang = options.lang || 'en';
+const title = options.title;
+const description = options.description;
+const mobile = options.mobile;
+const headHtmlSnippet = options.headHtmlSnippet;
+const unsupportedBrowser = options.unsupportedBrowser;
+const bodyHtmlSnippet = options.bodyHtmlSnippet;
+const appMountHtmlSnippet = options.appMountHtmlSnippet;
+const appMountIds = options.appMountIds || [];
+const window = options.window;
+const googleAnalytics = options.googleAnalytics;
+
+const isString = arg => typeof arg === 'string';
+const toAttributes = obj => {
+  return Object.entries(obj)
+    .map(([key, value]) => ` ${key}="${value}"`)
+    .join('');
+}
+
+let appMountId = options.appMountId;
+if (appMountIds.length <= 0) appMountId = appMountId || 'app';
+
+const links = (options.links || []).map(link => {
+  if (isString(link)) return { href: link, rel: 'stylesheet' };
+  return link;
+});
+const scripts = (options.scripts || []).map(script => {
+  if (isString(script)) return { src: script, type: 'text/javascript' };
+  return script;
+});
 
-    if (htmlWebpackPlugin.options.mobile) { %>
-    <meta content="width=device-width, initial-scale=1" name="viewport"><%
-    } %><%
-
-    for (item of htmlWebpackPlugin.options.links) { %><%
-      if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
-    <link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> /><%
-    } %><%
-
-    for (key in htmlWebpackPlugin.files.css) { %><%
-      if (htmlWebpackPlugin.files.cssIntegrity) { %>
-    <link
-      href="<%= htmlWebpackPlugin.files.css[key] %>"
-      rel="stylesheet"
-      integrity="<%= htmlWebpackPlugin.files.cssIntegrity[key] %>"
-      crossorigin="<%= webpackConfig.output.crossOriginLoading %>" /><%
-      } else { %>
-    <link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet" /><%
-      } %><%
-    } %><%
-    if (htmlWebpackPlugin.options.headHtmlSnippet) { %>
-    <%= htmlWebpackPlugin.options.headHtmlSnippet %><%
+%><!DOCTYPE html>
+<html lang="<%= lang %>">
+<head>
+  <meta charset="utf-8">
+  <meta content="ie=edge" http-equiv="x-ua-compatible">
+  <title><%= title %></title><%
+  if (description) { %>
+  <meta name="description" content="<%= description %>"><%
+  } %><%
+  if (mobile) { %>
+  <meta content="width=device-width, initial-scale=1" name="viewport"><%
+  } %><%
+  for (let link of links) { %>
+  <link<%= toAttributes(link) %><% if (xhtml) { %>/<% } %>><%
+  } %><%
+  if (headHtmlSnippet) { %>
+  <%= headHtmlSnippet %><%
+  } %>
+</head>
+<body>
+  <noscript>
+    We're sorry but <%= title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
+  </noscript><%
+  if (unsupportedBrowser) { %>
+  <style>.unsupported-browser { display: none; }</style>
+  <div class="unsupported-browser">
+    Sorry, your browser is not supported. Please upgrade to the latest version or switch your browser to use this
+    site. See <a href="https://bestvpn.org/outdatedbrowser/" rel="noopener noreferrer">outdatedbrowser.com</a> for options.
+  </div><%
+  } %><%
+  if (bodyHtmlSnippet) { %>
+  <%= bodyHtmlSnippet %><%
+  } %><%
+  if (appMountId) { %>
+  <div id="<%= appMountId %>"><% if (appMountHtmlSnippet) { %><%= appMountHtmlSnippet %><% } %></div><%
+  } %><%
+  for (let appMountId of appMountIds) { %>
+  <div id="<%= appMountId %>"></div><%
+  } %><%
+  if (window) { %>
+  <script type="text/javascript"><%
+    for (let [key, value] of Object.entries(window)) { %>
+    window['<%= key %>'] = <%= JSON.stringify(value) %>;<%
     } %>
-  </head>
-  <body><%
-    if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
-    <style>.unsupported-browser { display: none; }</style>
-    <div class="unsupported-browser">
-      Sorry, your browser is not supported. Please upgrade to the latest version or switch your browser to use this
-      site. See <a href="http://outdatedbrowser.com/">outdatedbrowser.com</a> for options.
-    </div><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.bodyHtmlSnippet) { %>
-    <%= htmlWebpackPlugin.options.bodyHtmlSnippet %><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.appMountId) { %>
-    <div id="<%= htmlWebpackPlugin.options.appMountId %>"><%
-      if (htmlWebpackPlugin.options.appMountHtmlSnippet) { %>
-    <%= htmlWebpackPlugin.options.appMountHtmlSnippet %><%
-      } %>
-    </div><%
-    } %><%
-
-    for (item of htmlWebpackPlugin.options.appMountIds) { %>
-    <div id="<%= item %>"></div><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.window) { %>
-    <script type="text/javascript"><%
-      for (key in htmlWebpackPlugin.options.window) { %>
-      window['<%= key %>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[key]) %>;<%
-      } %>
-    </script><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.inlineManifestWebpackName) { %>
-    <%= htmlWebpackPlugin.files[htmlWebpackPlugin.options.inlineManifestWebpackName] %><%
-    } %><%
-
-    for (item of htmlWebpackPlugin.options.scripts) { %><%
-      if (typeof item === 'string' || item instanceof String) { item = { src: item, type: 'text/javascript' } } %>
-    <script<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %>></script><%
-    } %><%
-
-    for (key in htmlWebpackPlugin.files.chunks) { %><%
-      if (htmlWebpackPlugin.files.jsIntegrity) { %>
-    <script
-      src="<%= htmlWebpackPlugin.files.chunks[key].entry %>"
-      type="text/javascript"
-      integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[key].entry)] %>"
-      crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script><%
-      } else { %>
-    <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script><%
-      } %><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.devServer) { %>
-    <script src="<%= htmlWebpackPlugin.options.devServer %>/webpack-dev-server.js" type="text/javascript"></script><%
-    } %><%
-
-    if (htmlWebpackPlugin.options.googleAnalytics) { %>
-    <script type="text/javascript">
-      window.GoogleAnalyticsObject='ga';window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;<%
-
-      if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
-      ga('create','<%= htmlWebpackPlugin.options.googleAnalytics.trackingId %>','auto');<%
-      } else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); } %><%
-
-      if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
-      ga('send','pageview')<%
-      } %>
-    </script>
-    <script async defer src="https://www.google-analytics.com/analytics.js" type="text/javascript"></script><%
+  </script><%
+  } %><%
+  for (let script of scripts) { %>
+  <script<%= toAttributes(script) %>></script><%
+  } %><%
+  if (googleAnalytics) { %>
+  <script type="text/javascript">
+    window.GoogleAnalyticsObject='ga';window.ga=function(){ga.q.push(arguments);};ga.q=[];ga.l=+new Date;<%
+    if (googleAnalytics.trackingId) { %>
+    ga('create','<%= googleAnalytics.trackingId %>','auto');<%
+    } else { throw new Error('html-webpack-template requires googleAnalytics.trackingId config'); } %><%
+    if (googleAnalytics.pageViewOnLoad) { %>
+    ga('send','pageview');<%
     } %>
-  </body>
+  </script>
+  <script async defer src="https://www.google-analytics.com/analytics.js" type="text/javascript"></script><%
+  } %>
+</body>
 </html>