@commercetools-frontend/mc-html-template 21.3.2 → 21.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/generate-template.js +4 -76
- package/build/load-html-docs.js +11 -0
- package/build/load-html-scripts.js +11 -23
- package/build/load-html-styles.js +9 -19
- package/build/process-headers.js +1 -1
- package/build/utils/replace-html-placeholders.js +1 -1
- package/package.json +9 -15
- package/webpack.js +9 -1
- package/html-scripts/.eslintrc.yaml +0 -2
- package/html-scripts/data-layer.js +0 -1
- package/html-scripts/loading-screen.js +0 -26
- package/html-styles/loading-screen.css +0 -50
|
@@ -1,82 +1,10 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
|
|
3
|
+
const htmlDocs = require('./load-html-docs');
|
|
6
4
|
|
|
7
5
|
module.exports = function generateTemplate({
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
cssImports = [],
|
|
7
|
+
scriptImports = []
|
|
10
8
|
}) {
|
|
11
|
-
|
|
12
|
-
const scriptImports = (0, _map.default)(scriptChunks).call(scriptChunks, chunkPath => `<script src="__CDN_URL__${chunkPath}"></script>`);
|
|
13
|
-
return `
|
|
14
|
-
<!DOCTYPE html>
|
|
15
|
-
<html lang="en">
|
|
16
|
-
<head>
|
|
17
|
-
<meta charset="utf-8">
|
|
18
|
-
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
|
|
19
|
-
<meta name="referrer" content="no-referrer">
|
|
20
|
-
<meta http-equiv="Content-Security-Policy" content="__CSP__">
|
|
21
|
-
<link rel="preconnect" href="__CDN_URL__">
|
|
22
|
-
<link rel="preconnect" href="__MC_API_URL__">
|
|
23
|
-
<!-- Fav and touch icons -->
|
|
24
|
-
<link rel="shortcut icon" type="image/png" href="__CDN_URL__favicon.png">
|
|
25
|
-
<!-- Standard iPhone -->
|
|
26
|
-
<link rel="apple-touch-icon" sizes="57x57" href="__CDN_URL__favicon_57x57px.png">
|
|
27
|
-
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="__CDN_URL__favicon_57x57px.png">
|
|
28
|
-
<!-- Retina iPhone - COMMENTED OUT AS ICON FILES DO NOT EXIST -->
|
|
29
|
-
<!-- <link rel="apple-touch-icon" sizes="114x114" href="__CDN_URL__favicon_114x114px.png"/>
|
|
30
|
-
<link rel="apple-touch-icon-precomposed" sizes="114×114" href="__CDN_URL__favicon_114x114px.png"/>-->
|
|
31
|
-
<!-- Standard iPad -->
|
|
32
|
-
<link rel="apple-touch-icon" sizes="72x72" href="__CDN_URL__favicon_72x72px.png">
|
|
33
|
-
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="__CDN_URL__favicon_72x72px.png">
|
|
34
|
-
<!-- Retina iPad -->
|
|
35
|
-
<link rel="apple-touch-icon" sizes="144x144" href="__CDN_URL__favicon_144x144px.png">
|
|
36
|
-
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="__CDN_URL__favicon_144x144px.png">
|
|
37
|
-
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i' rel='stylesheet' type='text/css'></link>
|
|
38
|
-
${cssImports.join('\n')}
|
|
39
|
-
<title>Merchant Center</title>
|
|
40
|
-
</head>
|
|
41
|
-
<body>
|
|
42
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
43
|
-
|
|
44
|
-
<div id="app-loader">
|
|
45
|
-
<!-- Loading screen styles -->
|
|
46
|
-
<style>__LOADING_SCREEN_CSS__</style>
|
|
47
|
-
|
|
48
|
-
<div class="loading-screen loading-screen--hidden">
|
|
49
|
-
<svg class="loading-spinner" viewBox="0 0 40 40">
|
|
50
|
-
<path class="loading-spinner-circle" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946, 14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"></path>
|
|
51
|
-
<path class="loading-spinner-pointer" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z"></path>
|
|
52
|
-
</svg>
|
|
53
|
-
<svg width="200" height="29" xmlns="http://www.w3.org/2000/svg">
|
|
54
|
-
<g fill="none" fill-rule="evenodd">
|
|
55
|
-
<path d="M38.342 20.486c1.102 0 1.738-.073 3.133-.367l.343 2.35c-1.077.293-2.276.44-3.476.44-5.358 0-6.9-3.353-6.9-7.268.049-3.818 2.35-7.048 6.876-7.048 1.2 0 2.227.147 3.475.465l-.465 2.325c-1.321-.294-2.104-.342-2.936-.342-2.839.048-4.234 2.153-4.283 4.6 0 2.422.906 4.845 4.233 4.845M49.304 20.51c2.814-.024 3.72-2.3 3.72-4.77-.024-2.253-.98-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.126 4.771 3.769 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.689 7.096-6.387 7.12-4.601-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM73.896 22.615v-8.81c0-2.226-.832-2.838-2.227-2.838-.954 0-2.031.539-3.01 1.346.05.294.073.88.073 1.052v9.25h-2.74v-8.907c0-2.227-.661-2.766-2.056-2.766-.88 0-2.104.588-3.157 1.371v10.302h-2.716V8.838h2.716v1.174c.832-.66 2.154-1.419 3.597-1.443 1.91-.024 3.01.636 3.623 1.664 1.125-1.052 2.79-1.64 4.062-1.664 4.478-.074 4.55 3.523 4.55 5.04v9.006h-2.715M95.427 22.615v-8.81c0-2.226-.831-2.838-2.226-2.838-.955 0-2.032.539-3.01 1.346.049.294.073.88.073 1.052v9.25h-2.74v-8.907c0-2.227-.662-2.766-2.057-2.766-.88 0-2.104.588-3.157 1.371v10.302h-2.716V8.838h2.716v1.174c.833-.66 2.154-1.419 3.598-1.443 1.908-.024 3.01.636 3.622 1.664 1.126-1.052 2.79-1.64 4.062-1.664 4.478-.074 4.551 3.523 4.551 5.04v9.006h-2.716M103.035 14.124h6.044c-.098-2.79-1.492-3.353-2.789-3.353-2.056-.024-3.01 1.37-3.255 3.353zm7.782 5.97l.416 2.227c-1.224.416-2.912.612-4.233.612-5.433 0-6.755-3.646-6.755-7.292s1.616-7.023 6.167-7.023c2.814 0 5.163 1.737 5.188 6.166l-.025 1.444h-8.662c.049 2.692 1.493 4.331 4.209 4.331 1.076 0 2.202-.122 3.695-.465zM121.582 11.358a7.379 7.379 0 0 0-1.762-.195c-1.689-.025-2.57.808-3.206 1.468v9.984h-2.716V8.838h2.716v1.223a4.503 4.503 0 0 1 3.182-1.395 6.356 6.356 0 0 1 2.275.368l-.489 2.324M129.533 20.486c1.102 0 1.738-.073 3.132-.367l.344 2.35c-1.077.293-2.276.44-3.476.44-5.359 0-6.9-3.353-6.9-7.268.049-3.818 2.349-7.048 6.876-7.048 1.2 0 2.227.147 3.475.465l-.465 2.325c-1.322-.294-2.105-.342-2.936-.342-2.839.048-4.234 2.153-4.284 4.6 0 2.422.907 4.845 4.234 4.845M136.898 14.124h6.045c-.098-2.79-1.493-3.353-2.79-3.353-2.056-.024-3.01 1.37-3.255 3.353zm7.782 5.97l.416 2.227c-1.224.416-2.912.612-4.234.612-5.432 0-6.754-3.646-6.754-7.292s1.616-7.023 6.167-7.023c2.815 0 5.164 1.737 5.188 6.166l-.024 1.444h-8.663c.049 2.692 1.493 4.331 4.209 4.331 1.076 0 2.202-.122 3.695-.465zM154.662 11.09h-3.744v6.68c0 1.394.171 2.374 1.59 2.569.784.074 1.591 0 2.374-.098l.171 2.35c-.807.146-1.957.17-2.422.17-3.206-.121-4.405-1.761-4.405-4.33v-7.342h-1.982V9.205l1.982-.22V5.779h2.692v3.06h3.744v2.25M162.565 20.51c2.815-.024 3.72-2.3 3.72-4.77-.024-2.253-.979-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.127 4.771 3.77 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.689 7.096-6.387 7.12-4.6-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM177.197 20.51c2.814-.024 3.72-2.3 3.72-4.77-.025-2.253-.98-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.126 4.771 3.769 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.69 7.096-6.387 7.12-4.601-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM185.71 22.615h2.619V3.919h-2.619zM191.094 19.948c1.542.391 2.985.587 3.89.587 1.078 0 2.179-.22 2.252-1.517.074-1.37-1.346-1.787-2.96-2.472-1.836-.758-3.818-1.786-3.77-4.331.05-1.273.808-3.769 4.87-3.646 1.224.024 2.692.22 3.915.538l-.464 2.251c-1.444-.342-2.52-.49-3.573-.513-1.175 0-2.08.367-2.129 1.468-.024.93.71 1.42 2.52 2.153 1.836.759 4.43 1.738 4.308 4.625-.074 1.835-1.273 3.842-4.968 3.793-1.175-.024-3.059-.171-4.453-.66l.562-2.276" fill="#27373C"/>
|
|
56
|
-
<path d="M.349 22.312a.601.601 0 0 0-.002 1.091l11.663 5.46c.156.074.325.112.493.113V16.787c-.173 0-.346.037-.508.112L.35 22.312" fill="#E3712C"/>
|
|
57
|
-
<path d="M12.503 16.787v12.19c.18.003.361-.035.528-.113l11.63-5.444a.6.6 0 0 0-.002-1.09L13.011 16.9a1.2 1.2 0 0 0-.508-.113" fill="#EBA13B"/>
|
|
58
|
-
<path d="M0 6.363a.596.596 0 0 0 .347.546l11.663 5.46a1.194 1.194 0 0 0 .93.039l.327-.152c1.203-.56.406-.187 11.394-5.33a.6.6 0 0 0-.002-1.091L13.011.405a1.205 1.205 0 0 0-1.016 0L.35 5.818A.603.603 0 0 0 0 6.363" fill="#23A486"/>
|
|
59
|
-
<path d="M12.503 13.168v3.62c-.173 0-.346.036-.508.111L.35 22.312a.601.601 0 0 0-.348.545L0 6.77v-.407c0 .234.134.447.346.546l11.664 5.46a1.194 1.194 0 0 0 .93.039l-.02.009c-.362.167-.417.334-.417.75" fill="#CCCCC7"/>
|
|
60
|
-
</g>
|
|
61
|
-
</svg>
|
|
62
|
-
<p class="long-loading-notice long-loading-notice--hidden">Sorry, this is taking an unusually long time.</p>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
<div id="app"></div>
|
|
66
|
-
|
|
67
|
-
<!-- Loading screen handling -->
|
|
68
|
-
<script>__LOADING_SCREEN_JS__</script>
|
|
69
|
-
|
|
70
|
-
<!-- Application globals -->
|
|
71
|
-
<script>window.app = __APP_ENVIRONMENT__;</script>
|
|
72
|
-
|
|
73
|
-
<!-- Tracking scripts (load before application bundles) -->
|
|
74
|
-
<script>__DATALAYER_JS__</script>
|
|
75
|
-
__GTM_SCRIPT__
|
|
76
|
-
|
|
77
|
-
<!-- Main application chunks -->
|
|
78
|
-
${scriptImports.join('\n')}
|
|
79
|
-
</body>
|
|
80
|
-
</html>
|
|
81
|
-
`;
|
|
9
|
+
return htmlDocs.application.replace(new RegExp('__APPLICATION_CSS_IMPORTS__', 'g'), cssImports.join('\n')).replace(new RegExp('__APPLICATION_SCRIPT_IMPORTS__', 'g'), scriptImports.join('\n'));
|
|
82
10
|
};
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
// this file was prevaled
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* https://github.com/kentcdodds/babel-plugin-preval#preval-file-comment--preval
|
|
5
|
+
* NOTE: This file is pre-evaluated during build time, using `babel-plugin-preval`.
|
|
6
|
+
* This is ok as the loaded files are static anyway and it prevents possible
|
|
7
|
+
* loading issues when files are required through Webpack own context.
|
|
8
|
+
*/
|
|
9
|
+
module.exports = {
|
|
10
|
+
"application": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no\">\n <meta name=\"referrer\" content=\"no-referrer\">\n\n <meta http-equiv=\"Content-Security-Policy\" content=\"__CSP__\">\n\n <!-- Preconnects -->\n <link rel=\"preconnect\" href=\"__CDN_URL__\">\n <link rel=\"preconnect\" href=\"__MC_API_URL__\">\n\n <!-- Fav and touch icons -->\n <link rel=\"shortcut icon\" type=\"image/png\" href=\"__CDN_URL__favicon.png\">\n <!-- Standard iPhone -->\n <link rel=\"apple-touch-icon\" sizes=\"57x57\" href=\"__CDN_URL__favicon_57x57px.png\">\n <link rel=\"apple-touch-icon-precomposed\" sizes=\"57x57\" href=\"__CDN_URL__favicon_57x57px.png\">\n <!-- Standard iPad -->\n <link rel=\"apple-touch-icon\" sizes=\"72x72\" href=\"__CDN_URL__favicon_72x72px.png\">\n <link rel=\"apple-touch-icon-precomposed\" sizes=\"72x72\" href=\"__CDN_URL__favicon_72x72px.png\">\n <!-- Retina iPad -->\n <link rel=\"apple-touch-icon\" sizes=\"144x144\" href=\"__CDN_URL__favicon_144x144px.png\">\n <link rel=\"apple-touch-icon-precomposed\" sizes=\"144x144\" href=\"__CDN_URL__favicon_144x144px.png\">\n\n <!-- Fonts -->\n <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i' rel='stylesheet' type='text/css'>\n\n __APPLICATION_CSS_IMPORTS__\n\n <title>Merchant Center</title>\n </head>\n <body>\n <noscript>You need to enable JavaScript to run this app.</noscript>\n\n <div id=\"app-loader\">\n <!-- Loading screen styles -->\n __LOADING_SCREEN_CSS__\n\n <div class=\"loading-screen loading-screen--hidden\">\n <svg class=\"loading-spinner\" viewBox=\"0 0 40 40\">\n <path class=\"loading-spinner-circle\" d=\"M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946, 14.946,14.946 s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z\"></path>\n <path class=\"loading-spinner-pointer\" d=\"M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0 C22.32,8.481,24.301,9.057,26.013,10.047z\"></path>\n </svg>\n <svg width=\"200\" height=\"29\" xmlns=\"http://www.w3.org/2000/svg\">\n <g fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M38.342 20.486c1.102 0 1.738-.073 3.133-.367l.343 2.35c-1.077.293-2.276.44-3.476.44-5.358 0-6.9-3.353-6.9-7.268.049-3.818 2.35-7.048 6.876-7.048 1.2 0 2.227.147 3.475.465l-.465 2.325c-1.321-.294-2.104-.342-2.936-.342-2.839.048-4.234 2.153-4.283 4.6 0 2.422.906 4.845 4.233 4.845M49.304 20.51c2.814-.024 3.72-2.3 3.72-4.77-.024-2.253-.98-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.126 4.771 3.769 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.689 7.096-6.387 7.12-4.601-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM73.896 22.615v-8.81c0-2.226-.832-2.838-2.227-2.838-.954 0-2.031.539-3.01 1.346.05.294.073.88.073 1.052v9.25h-2.74v-8.907c0-2.227-.661-2.766-2.056-2.766-.88 0-2.104.588-3.157 1.371v10.302h-2.716V8.838h2.716v1.174c.832-.66 2.154-1.419 3.597-1.443 1.91-.024 3.01.636 3.623 1.664 1.125-1.052 2.79-1.64 4.062-1.664 4.478-.074 4.55 3.523 4.55 5.04v9.006h-2.715M95.427 22.615v-8.81c0-2.226-.831-2.838-2.226-2.838-.955 0-2.032.539-3.01 1.346.049.294.073.88.073 1.052v9.25h-2.74v-8.907c0-2.227-.662-2.766-2.057-2.766-.88 0-2.104.588-3.157 1.371v10.302h-2.716V8.838h2.716v1.174c.833-.66 2.154-1.419 3.598-1.443 1.908-.024 3.01.636 3.622 1.664 1.126-1.052 2.79-1.64 4.062-1.664 4.478-.074 4.551 3.523 4.551 5.04v9.006h-2.716M103.035 14.124h6.044c-.098-2.79-1.492-3.353-2.789-3.353-2.056-.024-3.01 1.37-3.255 3.353zm7.782 5.97l.416 2.227c-1.224.416-2.912.612-4.233.612-5.433 0-6.755-3.646-6.755-7.292s1.616-7.023 6.167-7.023c2.814 0 5.163 1.737 5.188 6.166l-.025 1.444h-8.662c.049 2.692 1.493 4.331 4.209 4.331 1.076 0 2.202-.122 3.695-.465zM121.582 11.358a7.379 7.379 0 0 0-1.762-.195c-1.689-.025-2.57.808-3.206 1.468v9.984h-2.716V8.838h2.716v1.223a4.503 4.503 0 0 1 3.182-1.395 6.356 6.356 0 0 1 2.275.368l-.489 2.324M129.533 20.486c1.102 0 1.738-.073 3.132-.367l.344 2.35c-1.077.293-2.276.44-3.476.44-5.359 0-6.9-3.353-6.9-7.268.049-3.818 2.349-7.048 6.876-7.048 1.2 0 2.227.147 3.475.465l-.465 2.325c-1.322-.294-2.105-.342-2.936-.342-2.839.048-4.234 2.153-4.284 4.6 0 2.422.907 4.845 4.234 4.845M136.898 14.124h6.045c-.098-2.79-1.493-3.353-2.79-3.353-2.056-.024-3.01 1.37-3.255 3.353zm7.782 5.97l.416 2.227c-1.224.416-2.912.612-4.234.612-5.432 0-6.754-3.646-6.754-7.292s1.616-7.023 6.167-7.023c2.815 0 5.164 1.737 5.188 6.166l-.024 1.444h-8.663c.049 2.692 1.493 4.331 4.209 4.331 1.076 0 2.202-.122 3.695-.465zM154.662 11.09h-3.744v6.68c0 1.394.171 2.374 1.59 2.569.784.074 1.591 0 2.374-.098l.171 2.35c-.807.146-1.957.17-2.422.17-3.206-.121-4.405-1.761-4.405-4.33v-7.342h-1.982V9.205l1.982-.22V5.779h2.692v3.06h3.744v2.25M162.565 20.51c2.815-.024 3.72-2.3 3.72-4.77-.024-2.253-.979-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.127 4.771 3.77 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.689 7.096-6.387 7.12-4.6-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM177.197 20.51c2.814-.024 3.72-2.3 3.72-4.77-.025-2.253-.98-4.798-3.744-4.798-2.692.025-3.745 2.521-3.745 4.797 0 2.569 1.126 4.771 3.769 4.771zm0-11.917c4.405.025 6.363 3.304 6.363 7.146 0 3.744-1.69 7.096-6.387 7.12-4.601-.048-6.363-3.376-6.363-7.12 0-3.842 1.982-7.097 6.387-7.146zM185.71 22.615h2.619V3.919h-2.619zM191.094 19.948c1.542.391 2.985.587 3.89.587 1.078 0 2.179-.22 2.252-1.517.074-1.37-1.346-1.787-2.96-2.472-1.836-.758-3.818-1.786-3.77-4.331.05-1.273.808-3.769 4.87-3.646 1.224.024 2.692.22 3.915.538l-.464 2.251c-1.444-.342-2.52-.49-3.573-.513-1.175 0-2.08.367-2.129 1.468-.024.93.71 1.42 2.52 2.153 1.836.759 4.43 1.738 4.308 4.625-.074 1.835-1.273 3.842-4.968 3.793-1.175-.024-3.059-.171-4.453-.66l.562-2.276\" fill=\"#27373C\"/>\n <path d=\"M.349 22.312a.601.601 0 0 0-.002 1.091l11.663 5.46c.156.074.325.112.493.113V16.787c-.173 0-.346.037-.508.112L.35 22.312\" fill=\"#E3712C\"/>\n <path d=\"M12.503 16.787v12.19c.18.003.361-.035.528-.113l11.63-5.444a.6.6 0 0 0-.002-1.09L13.011 16.9a1.2 1.2 0 0 0-.508-.113\" fill=\"#EBA13B\"/>\n <path d=\"M0 6.363a.596.596 0 0 0 .347.546l11.663 5.46a1.194 1.194 0 0 0 .93.039l.327-.152c1.203-.56.406-.187 11.394-5.33a.6.6 0 0 0-.002-1.091L13.011.405a1.205 1.205 0 0 0-1.016 0L.35 5.818A.603.603 0 0 0 0 6.363\" fill=\"#23A486\"/>\n <path d=\"M12.503 13.168v3.62c-.173 0-.346.036-.508.111L.35 22.312a.601.601 0 0 0-.348.545L0 6.77v-.407c0 .234.134.447.346.546l11.664 5.46a1.194 1.194 0 0 0 .93.039l-.02.009c-.362.167-.417.334-.417.75\" fill=\"#CCCCC7\"/>\n </g>\n </svg>\n <p class=\"long-loading-notice long-loading-notice--hidden\">Sorry, this is taking an unusually long time.</p>\n </div>\n </div>\n <div id=\"app\"></div>\n\n <!-- Loading screen handling -->\n __LOADING_SCREEN_JS__\n\n <!-- Application globals -->\n <script>window.app = __APPLICATION_ENVIRONMENT__;</script>\n\n <!-- Tracking scripts (load before application bundles) -->\n __DATALAYER_JS__\n __GTM_SCRIPT__\n\n <!-- Main application chunks -->\n __APPLICATION_SCRIPT_IMPORTS__\n </body>\n</html>"
|
|
11
|
+
};
|
|
@@ -1,25 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const loadScriptAsString = fileName => {
|
|
11
|
-
const content = fs.readFileSync(path.join(__dirname, '../html-scripts', fileName), {
|
|
12
|
-
encoding: 'utf8'
|
|
13
|
-
});
|
|
14
|
-
if (process.env.NODE_ENV !== 'production') return content; // Minify scripts for production usage
|
|
15
|
-
|
|
16
|
-
const result = uglify.minify(content);
|
|
17
|
-
if (result.error) throw result.error;
|
|
18
|
-
if (result.warnings) console.warn(result.warnings);
|
|
19
|
-
return result.code;
|
|
20
|
-
};
|
|
21
|
-
|
|
1
|
+
// this file was prevaled
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* https://github.com/kentcdodds/babel-plugin-preval#preval-file-comment--preval
|
|
5
|
+
* NOTE: This file is pre-evaluated during build time, using `babel-plugin-preval`.
|
|
6
|
+
* This is ok as the loaded files are static anyway and it prevents possible
|
|
7
|
+
* loading issues when files are required through Webpack own context.
|
|
8
|
+
*/
|
|
22
9
|
module.exports = {
|
|
23
|
-
dataLayer:
|
|
24
|
-
loadingScreen:
|
|
10
|
+
"dataLayer": "window.dataLayer=[{\"gtm.start\":(new Date).getTime(),event:\"gtm.js\"}];",
|
|
11
|
+
"loadingScreen": "window.onAppLoaded=function(){const e=document.querySelector(\"#app-loader\");e&&e.parentNode.removeChild(e)},setTimeout(function(){const e=document.querySelector(\".loading-screen\");e&&e.classList.remove(\"loading-screen--hidden\")},250),setTimeout(function(){const e=document.querySelector(\".long-loading-notice\");e&&e.classList.remove(\"long-loading-notice--hidden\")},2e3);",
|
|
12
|
+
"publicPath": "window.__dynamicImportHandler__=function(n){return window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n.replace(/^(\\.\\/)?/,\"\")},window.__dynamicImportPreload__=function(n){return n.map(n=>window.app.cdnUrl.replace(/\\/$/,\"\")+\"/\"+n)};"
|
|
25
13
|
};
|
|
@@ -1,21 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const loadStyleAsString = fileName => {
|
|
11
|
-
const content = fs.readFileSync(path.join(__dirname, '../html-styles', fileName), {
|
|
12
|
-
encoding: 'utf8'
|
|
13
|
-
});
|
|
14
|
-
if (process.env.NODE_ENV !== 'production') return content; // Minify styles for production usage
|
|
15
|
-
|
|
16
|
-
return uglifycss.processString(content);
|
|
17
|
-
};
|
|
18
|
-
|
|
1
|
+
// this file was prevaled
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* https://github.com/kentcdodds/babel-plugin-preval#preval-file-comment--preval
|
|
5
|
+
* NOTE: This file is pre-evaluated during build time, using `babel-plugin-preval`.
|
|
6
|
+
* This is ok as the loaded files are static anyway and it prevents possible
|
|
7
|
+
* loading issues when files are required through Webpack own context.
|
|
8
|
+
*/
|
|
19
9
|
module.exports = {
|
|
20
|
-
loadingScreen:
|
|
10
|
+
"loadingScreen": ".loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;width:100vw}.loading-screen--hidden{display:none}.loading-screen>*+*{margin:24px 0 0}.loading-spinner{width:32px;height:32px}.long-loading-notice{color:#999;font-family:'Open Sans',sans-serif;font-size:12px}.long-loading-notice--hidden{visibility:hidden}.loading-spinner-circle{fill:#213c45;opacity:.2}@keyframes loading-spinner-animation{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.loading-spinner-pointer{transform-origin:20px 20px 0;animation:loading-spinner-animation .5s infinite linear}"
|
|
21
11
|
};
|
package/build/process-headers.js
CHANGED
|
@@ -55,7 +55,7 @@ const processHeaders = applicationConfig => {
|
|
|
55
55
|
const isMcDevEnv = applicationConfig.env.env === 'development'; // List hashes for injected inline scripts.
|
|
56
56
|
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src
|
|
57
57
|
|
|
58
|
-
const htmlScriptsHashes = [createAssetHash(htmlScripts.
|
|
58
|
+
const htmlScriptsHashes = [createAssetHash(htmlScripts.loadingScreen), createAssetHash(`window.app = ${sanitizeAppEnvironment(applicationConfig.env)};`), createAssetHash(htmlScripts.publicPath), createAssetHash(htmlScripts.dataLayer)]; // // List hashes for injected inline styles.
|
|
59
59
|
// // https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src
|
|
60
60
|
// const htmlStylesHashes = [createAssetHash(htmlStyles.loadingScreen)];
|
|
61
61
|
|
|
@@ -17,6 +17,6 @@ const getGtmTrackingScript = gtmId => {
|
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
const replaceHtmlPlaceholders = (indexHtmlContent, options) => indexHtmlContent.replace(new RegExp('__CSP__', 'g'), options.headers ? options.headers['Content-Security-Policy'] : '').replace(new RegExp('__CDN_URL__', 'g'), options.env.cdnUrl ? // Ensure there is a trailing slash
|
|
20
|
-
`${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('
|
|
20
|
+
`${trimTrailingSlash(options.env.cdnUrl)}/` : '').replace(new RegExp('__MC_API_URL__', 'g'), trimTrailingSlash(options.env.mcApiUrl)).replace(new RegExp('__APPLICATION_ENVIRONMENT__', 'g'), sanitizeAppEnvironment(options.env)).replace(new RegExp('__GTM_SCRIPT__', 'g'), getGtmTrackingScript(options.env.trackingGtm)).replace(new RegExp('__DATALAYER_JS__', 'g'), `<script>${htmlScripts.dataLayer}</script>`).replace(new RegExp('__LOADING_SCREEN_JS__', 'g'), `<script>${htmlScripts.loadingScreen}</script>`).replace(new RegExp('__LOADING_SCREEN_CSS__', 'g'), `<style>${htmlStyles.loadingScreen}</style>`);
|
|
21
21
|
|
|
22
22
|
module.exports = replaceHtmlPlaceholders;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@commercetools-frontend/mc-html-template",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.4.0",
|
|
4
4
|
"description": "Everything related to render the index.html for a MC application",
|
|
5
5
|
"bugs": "https://github.com/commercetools/merchant-center-application-kit/issues",
|
|
6
6
|
"repository": {
|
|
@@ -15,32 +15,25 @@
|
|
|
15
15
|
"access": "public"
|
|
16
16
|
},
|
|
17
17
|
"main": "./build/index.js",
|
|
18
|
-
"files": [
|
|
19
|
-
"build",
|
|
20
|
-
"html-scripts",
|
|
21
|
-
"html-styles",
|
|
22
|
-
"webpack.js",
|
|
23
|
-
"package.json",
|
|
24
|
-
"LICENSE",
|
|
25
|
-
"README.md"
|
|
26
|
-
],
|
|
18
|
+
"files": ["build", "webpack.js", "package.json", "LICENSE", "README.md"],
|
|
27
19
|
"scripts": {
|
|
28
20
|
"build": "rimraf build && babel src --out-dir build",
|
|
29
21
|
"build:bundles:watch": "yarn build -w"
|
|
30
22
|
},
|
|
31
23
|
"dependencies": {
|
|
32
|
-
"@babel/runtime": "^7.17.
|
|
33
|
-
"@babel/runtime-corejs3": "^7.17.
|
|
34
|
-
"@commercetools-frontend/application-config": "21.3.
|
|
35
|
-
"@commercetools-frontend/constants": "21.3.
|
|
24
|
+
"@babel/runtime": "^7.17.9",
|
|
25
|
+
"@babel/runtime-corejs3": "^7.17.9",
|
|
26
|
+
"@commercetools-frontend/application-config": "21.3.4",
|
|
27
|
+
"@commercetools-frontend/constants": "21.3.4",
|
|
36
28
|
"core-js": "^3.21.1",
|
|
37
29
|
"serialize-javascript": "6.0.0",
|
|
38
|
-
"uglify-js": "3.15.
|
|
30
|
+
"uglify-js": "3.15.4",
|
|
39
31
|
"uglifycss": "0.0.29"
|
|
40
32
|
},
|
|
41
33
|
"devDependencies": {
|
|
42
34
|
"@babel/plugin-transform-runtime": "^7.17.0",
|
|
43
35
|
"@babel/preset-env": "^7.16.11",
|
|
36
|
+
"babel-plugin-preval": "^5.1.0",
|
|
44
37
|
"rimraf": "3.0.2"
|
|
45
38
|
},
|
|
46
39
|
"engines": {
|
|
@@ -61,6 +54,7 @@
|
|
|
61
54
|
]
|
|
62
55
|
],
|
|
63
56
|
"plugins": [
|
|
57
|
+
"preval",
|
|
64
58
|
[
|
|
65
59
|
"@babel/plugin-transform-runtime",
|
|
66
60
|
{
|
package/webpack.js
CHANGED
|
@@ -24,5 +24,13 @@ module.exports = (templateParams) => {
|
|
|
24
24
|
fileName.replace(/^\//, '')
|
|
25
25
|
);
|
|
26
26
|
|
|
27
|
-
|
|
27
|
+
const cssImports = cssChunks.map(
|
|
28
|
+
(chunkPath) =>
|
|
29
|
+
`<link href="__CDN_URL__${chunkPath}" rel='stylesheet' type='text/css'>`
|
|
30
|
+
);
|
|
31
|
+
const scriptImports = scriptChunks.map(
|
|
32
|
+
(chunkPath) => `<script src="__CDN_URL__${chunkPath}"></script>`
|
|
33
|
+
);
|
|
34
|
+
|
|
35
|
+
return generateTemplate({ cssImports, scriptImports });
|
|
28
36
|
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
window.dataLayer = [{ 'gtm.start': new Date().getTime(), event: 'gtm.js' }];
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
// Assigning global callback used by ConfigureIntlProvider to remove
|
|
2
|
-
// loading screen.
|
|
3
|
-
window.onAppLoaded = function onAppLoaded() {
|
|
4
|
-
const appLoaderEl = document.querySelector('#app-loader');
|
|
5
|
-
|
|
6
|
-
if (appLoaderEl) {
|
|
7
|
-
appLoaderEl.parentNode.removeChild(appLoaderEl);
|
|
8
|
-
}
|
|
9
|
-
};
|
|
10
|
-
// Handles showing and hiding different loading screen elements
|
|
11
|
-
// Needs to be compatible with all browsers supported without transpilation.
|
|
12
|
-
(function removeLoaders() {
|
|
13
|
-
setTimeout(function removeLoadingScreen() {
|
|
14
|
-
const loadingScreenEl = document.querySelector('.loading-screen');
|
|
15
|
-
if (loadingScreenEl) {
|
|
16
|
-
loadingScreenEl.classList.remove('loading-screen--hidden');
|
|
17
|
-
}
|
|
18
|
-
}, 250);
|
|
19
|
-
|
|
20
|
-
setTimeout(function removeLongLoadingNotice() {
|
|
21
|
-
const longLoadingNoticeEl = document.querySelector('.long-loading-notice');
|
|
22
|
-
if (longLoadingNoticeEl) {
|
|
23
|
-
longLoadingNoticeEl.classList.remove('long-loading-notice--hidden');
|
|
24
|
-
}
|
|
25
|
-
}, 2000);
|
|
26
|
-
})();
|
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
.loading-screen {
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
align-items: center;
|
|
5
|
-
justify-content: center;
|
|
6
|
-
height: 100vh;
|
|
7
|
-
width: 100vw;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.loading-screen--hidden {
|
|
11
|
-
display: none;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
.loading-screen > * + * {
|
|
15
|
-
margin: 24px 0 0;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.loading-spinner {
|
|
19
|
-
width: 32px;
|
|
20
|
-
height: 32px;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
.long-loading-notice {
|
|
24
|
-
color: #999;
|
|
25
|
-
font-family: 'Open Sans', sans-serif;
|
|
26
|
-
font-size: 12px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.long-loading-notice--hidden {
|
|
30
|
-
visibility: hidden;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.loading-spinner-circle {
|
|
34
|
-
fill: #213c45;
|
|
35
|
-
opacity: 0.2;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
@keyframes loading-spinner-animation {
|
|
39
|
-
0% {
|
|
40
|
-
transform: rotate(0deg);
|
|
41
|
-
}
|
|
42
|
-
100% {
|
|
43
|
-
transform: rotate(360deg);
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
.loading-spinner-pointer {
|
|
48
|
-
transform-origin: 20px 20px 0;
|
|
49
|
-
animation: loading-spinner-animation 0.5s infinite linear;
|
|
50
|
-
}
|