Skip to content

Commit 74c201c

Browse files
vladimyrvladimyr
committed
refactor!: refactor ejs template
Upstream functionalities of `html-webpack-plugin` aren't duplicated anymore which dictates injection to be enabled in contrast to previous requirements. Template is greatly simplified by utilizing modern es6 constructs and preparing required data inside topmost ejs block. `appMountId` defaults to `app` in case `appMountIds` haven't been provided. New option is added: `description` - renders as appropriate meta. New section is added: `<noscript>` - displays friendly warning in case javascript execution is turned off. BREAKING CHANGE: `baseHref`, `meta`, `favicon`, `inlineManifestWebpackName` & `devServer` options are deprecated!
1 parent 14e2ec6 commit 74c201c

File tree

1 file changed

+88
-123
lines changed

1 file changed

+88
-123
lines changed

‎index.ejs

+88-123
Original file line numberDiff line numberDiff line change
@@ -1,127 +1,92 @@
1-
<% var item, key %><%
2-
htmlWebpackPlugin.options.appMountIds = htmlWebpackPlugin.options.appMountIds || [] %><%
3-
htmlWebpackPlugin.options.lang = htmlWebpackPlugin.options.lang || "en" %><%
4-
htmlWebpackPlugin.options.links = htmlWebpackPlugin.options.links || [] %><%
5-
htmlWebpackPlugin.options.meta = htmlWebpackPlugin.options.meta || [] %><%
6-
htmlWebpackPlugin.options.scripts = htmlWebpackPlugin.options.scripts || []
7-
%><!DOCTYPE html>
8-
<html lang="<%= htmlWebpackPlugin.options.lang %>"<% if (htmlWebpackPlugin.files.manifest) { %> manifest="<%= htmlWebpackPlugin.files.manifest %>"<% } %>>
9-
<head>
10-
<meta charset="utf-8">
11-
<meta content="ie=edge" http-equiv="x-ua-compatible"><%
12-
13-
if (htmlWebpackPlugin.options.baseHref) { %>
14-
<base href="<%= htmlWebpackPlugin.options.baseHref %>"><%
15-
} %><%
16-
17-
if (Array.isArray(htmlWebpackPlugin.options.meta)) { %><%
18-
for (item of htmlWebpackPlugin.options.meta) { %>
19-
<meta<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %>><%
20-
} %><%
21-
} %><%
22-
23-
%>
24-
<title><%= htmlWebpackPlugin.options.title %></title><%
25-
26-
if (htmlWebpackPlugin.files.favicon) { %>
27-
<link href="<%= htmlWebpackPlugin.files.favicon %>" rel="shortcut icon" /><%
28-
} %><%
1+
<%
2+
const { options } = htmlWebpackPlugin;
3+
4+
const lang = options.lang || 'en';
5+
const title = options.title;
6+
const description = options.description;
7+
const mobile = options.mobile;
8+
const headHtmlSnippet = options.headHtmlSnippet;
9+
const unsupportedBrowser = options.unsupportedBrowser;
10+
const bodyHtmlSnippet = options.bodyHtmlSnippet;
11+
const appMountHtmlSnippet = options.appMountHtmlSnippet;
12+
const appMountIds = options.appMountIds || [];
13+
const window = options.window;
14+
const googleAnalytics = options.googleAnalytics;
15+
16+
const isString = arg => typeof arg === 'string';
17+
18+
let appMountId = options.appMountId;
19+
if (appMountIds.length <= 0) appMountId = appMountId || 'app';
20+
21+
const links = (options.links || []).map(link => {
22+
if (isString(link)) return { href: link, rel: 'stylesheet' };
23+
return link;
24+
});
25+
const scripts = (options.scripts || []).map(script => {
26+
if (isString(script)) return { src: script, type: 'text/javascript' };
27+
return script;
28+
});
2929
30-
if (htmlWebpackPlugin.options.mobile) { %>
31-
<meta content="width=device-width, initial-scale=1" name="viewport"><%
32-
} %><%
33-
34-
for (item of htmlWebpackPlugin.options.links) { %><%
35-
if (typeof item === 'string' || item instanceof String) { item = { href: item, rel: 'stylesheet' } } %>
36-
<link<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %> /><%
37-
} %><%
38-
39-
for (key in htmlWebpackPlugin.files.css) { %><%
40-
if (htmlWebpackPlugin.files.cssIntegrity) { %>
41-
<link
42-
href="<%= htmlWebpackPlugin.files.css[key] %>"
43-
rel="stylesheet"
44-
integrity="<%= htmlWebpackPlugin.files.cssIntegrity[key] %>"
45-
crossorigin="<%= webpackConfig.output.crossOriginLoading %>" /><%
46-
} else { %>
47-
<link href="<%= htmlWebpackPlugin.files.css[key] %>" rel="stylesheet" /><%
48-
} %><%
49-
} %><%
50-
if (htmlWebpackPlugin.options.headHtmlSnippet) { %>
51-
<%= htmlWebpackPlugin.options.headHtmlSnippet %><%
30+
%><!DOCTYPE html>
31+
<html lang="<%= lang %>">
32+
<head>
33+
<meta charset="utf-8">
34+
<meta content="ie=edge" http-equiv="x-ua-compatible">
35+
<title><%= title %></title><%
36+
if (description) { %>
37+
<meta name="description" content="<%= description %>"><%
38+
} %><%
39+
if (mobile) { %>
40+
<meta content="width=device-width, initial-scale=1" name="viewport"><%
41+
} %><%
42+
for (let link of links) { %>
43+
<link<% for (let [key, value] of Object.entries(link)) { %> <%= key %>="<%= value %>"<% } %>/><%
44+
} %><%
45+
if (headHtmlSnippet) { %>
46+
<%= headHtmlSnippet %><%
47+
} %>
48+
</head>
49+
<body>
50+
<noscript>
51+
We're sorry but <%= title %> doesn't work properly without JavaScript enabled. Please enable it to continue.
52+
</noscript><%
53+
if (unsupportedBrowser) { %>
54+
<style>.unsupported-browser { display: none; }</style>
55+
<div class="unsupported-browser">
56+
Sorry, your browser is not supported. Please upgrade to the latest version or switch your browser to use this
57+
site. See <a href="http://outdatedbrowser.com/" rel="noopener noreferrer">outdatedbrowser.com</a> for options.
58+
</div><%
59+
} %><%
60+
if (bodyHtmlSnippet) { %>
61+
<%= bodyHtmlSnippet %><%
62+
} %><%
63+
if (appMountId) { %>
64+
<div id="<%= appMountId %>"><% if (appMountHtmlSnippet) { %><%= appMountHtmlSnippet %><% } %></div><%
65+
} %><%
66+
for (let appMountId of appMountIds) { %>
67+
<div id="<%= appMountId %>"></div><%
68+
} %><%
69+
if (window) { %>
70+
<script type="text/javascript"><%
71+
for (let [key, value] of Object.entries(window)) { %>
72+
window['<%= key %>'] = <%= JSON.stringify(value) %>;<%
5273
} %>
53-
</head>
54-
<body><%
55-
if (htmlWebpackPlugin.options.unsupportedBrowser) { %>
56-
<style>.unsupported-browser { display: none; }</style>
57-
<div class="unsupported-browser">
58-
Sorry, your browser is not supported. Please upgrade to the latest version or switch your browser to use this
59-
site. See <a href="http://outdatedbrowser.com/">outdatedbrowser.com</a> for options.
60-
</div><%
61-
} %><%
62-
63-
if (htmlWebpackPlugin.options.bodyHtmlSnippet) { %>
64-
<%= htmlWebpackPlugin.options.bodyHtmlSnippet %><%
65-
} %><%
66-
67-
if (htmlWebpackPlugin.options.appMountId) { %>
68-
<div id="<%= htmlWebpackPlugin.options.appMountId %>"><%
69-
if (htmlWebpackPlugin.options.appMountHtmlSnippet) { %>
70-
<%= htmlWebpackPlugin.options.appMountHtmlSnippet %><%
71-
} %>
72-
</div><%
73-
} %><%
74-
75-
for (item of htmlWebpackPlugin.options.appMountIds) { %>
76-
<div id="<%= item %>"></div><%
77-
} %><%
78-
79-
if (htmlWebpackPlugin.options.window) { %>
80-
<script type="text/javascript"><%
81-
for (key in htmlWebpackPlugin.options.window) { %>
82-
window['<%= key %>'] = <%= JSON.stringify(htmlWebpackPlugin.options.window[key]) %>;<%
83-
} %>
84-
</script><%
85-
} %><%
86-
87-
if (htmlWebpackPlugin.options.inlineManifestWebpackName) { %>
88-
<%= htmlWebpackPlugin.files[htmlWebpackPlugin.options.inlineManifestWebpackName] %><%
89-
} %><%
90-
91-
for (item of htmlWebpackPlugin.options.scripts) { %><%
92-
if (typeof item === 'string' || item instanceof String) { item = { src: item, type: 'text/javascript' } } %>
93-
<script<% for (key in item) { %> <%= key %>="<%= item[key] %>"<% } %>></script><%
94-
} %><%
95-
96-
for (key in htmlWebpackPlugin.files.chunks) { %><%
97-
if (htmlWebpackPlugin.files.jsIntegrity) { %>
98-
<script
99-
src="<%= htmlWebpackPlugin.files.chunks[key].entry %>"
100-
type="text/javascript"
101-
integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[key].entry)] %>"
102-
crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script><%
103-
} else { %>
104-
<script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script><%
105-
} %><%
106-
} %><%
107-
108-
if (htmlWebpackPlugin.options.devServer) { %>
109-
<script src="<%= htmlWebpackPlugin.options.devServer %>/webpack-dev-server.js" type="text/javascript"></script><%
110-
} %><%
111-
112-
if (htmlWebpackPlugin.options.googleAnalytics) { %>
113-
<script type="text/javascript">
114-
window.GoogleAnalyticsObject='ga';window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;<%
115-
116-
if (htmlWebpackPlugin.options.googleAnalytics.trackingId) { %>
117-
ga('create','<%= htmlWebpackPlugin.options.googleAnalytics.trackingId %>','auto');<%
118-
} else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); } %><%
119-
120-
if (htmlWebpackPlugin.options.googleAnalytics.pageViewOnLoad) { %>
121-
ga('send','pageview')<%
122-
} %>
123-
</script>
124-
<script async defer src="https://www.google-analytics.com/analytics.js" type="text/javascript"></script><%
74+
</script><%
75+
} %><%
76+
for (let script of scripts) { %>
77+
<script<% for (let [key, value] of Object.entries(script)) { %> <%= key %>="<%= value %>"<% } %>></script><%
78+
} %><%
79+
if (googleAnalytics) { %>
80+
<script type="text/javascript">
81+
window.GoogleAnalyticsObject='ga';window.ga=function(){ga.q.push(arguments);};ga.q=[];ga.l=+new Date;<%
82+
if (googleAnalytics.trackingId) { %>
83+
ga('create','<%= googleAnalytics.trackingId %>','auto');<%
84+
} else { throw new Error("html-webpack-template requires googleAnalytics.trackingId config"); } %><%
85+
if (googleAnalytics.pageViewOnLoad) { %>
86+
ga('send','pageview');<%
12587
} %>
126-
</body>
88+
</script>
89+
<script async defer src="https://www.google-analytics.com/analytics.js" type="text/javascript"></script><%
90+
} %>
91+
</body>
12792
</html>

0 commit comments

Comments
 (0)