Skip to content

Commit ca309fa

Browse files
baltpeterbaltpeter
committed
code splitting using js.Batch
1 parent d2d3074 commit ca309fa

File tree

1 file changed

+141
-67
lines changed

1 file changed

+141
-67
lines changed

‎layouts/partials/scripts.html‎

Lines changed: 141 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -12,113 +12,187 @@
1212
window.BASE_URL = {{ "/" | absURL }};
1313
</script>
1414

15+
{{ if .Site.Params.devMode }}
16+
<script type="module">window.hugoDevMode = true;</script>
17+
{{ end }}
18+
19+
<!--
20+
Some bundles need to be built separately:
21+
22+
- The error handler is deliberately meant to also work in browsers we otherwise don't support and not rely on any
23+
external code.
24+
- The PDF worker needs to run in a `WebWorker`.
25+
-->
26+
{{ $buildOptionsSeparateBundles := dict "target" "es2015" "minify" true "sourceMap" "linked" }}
27+
{{ $errorHandlerBundle := resources.Get "js/error-handler.js" | js.Build $buildOptionsSeparateBundles }}
28+
{{ $pdfWorkerBundle := resources.Get "js/Utility/pdf.worker.ts" | js.Build $buildOptionsSeparateBundles }}
29+
30+
<script src="{{ "js/translations-requests.gen.js" | absURL }}"></script>
31+
<script src="{{ (printf "js/translations-%s.gen.js" .Site.Language.Lang) | absURL }}"></script>
32+
33+
<script src="{{ $errorHandlerBundle.RelPermalink | absURL }}"></script>
34+
35+
{{ $batch := js.Batch "js" }}
36+
37+
<!-- Configure batch build options. -->
1538
{{ $defines
1639
:= dict
1740
"process.env.NODE_ENV" ((cond .Site.Params.devMode "development" "production") | jsonify)
1841
"global" "window"
42+
43+
"window.PDF_WORKER_URL" ($pdfWorkerBundle.RelPermalink | jsonify)
1944
}}
20-
{{ $commonJsBuildOptions
21-
:= dict
45+
{{ with $batch.Config }}
46+
{{ .SetOptions (dict
2247
"defines" $defines
2348
"target" "es2015"
49+
"format" "esm"
2450
"minify" true
2551
"sourceMap" "linked"
26-
}}
27-
28-
{{ $pdfWorkerBundle := resources.Get "js/Utility/pdf.worker.ts" | js.Build $commonJsBuildOptions }}
29-
<!-- We are using the `RelPermalink` here because otherwise we try to load the worker from the German domain even for
30-
the other languages, which causes cross-origin errors. I don't understand why. -->
31-
{{ $pdfWorkerDefines := dict "defines" (dict "window.PDF_WORKER_URL" ($pdfWorkerBundle.RelPermalink | jsonify)) }}
52+
) }}
53+
{{ end }}
3254

33-
<!-- Entry points that are included in every page. -->
34-
{{ $errorHandlerBundle := resources.Get "js/error-handler.js" | js.Build (merge $commonJsBuildOptions $pdfWorkerDefines) }}
35-
{{ $generalBundle := resources.Get "js/general.tsx" | js.Build (merge $commonJsBuildOptions $pdfWorkerDefines) }}
55+
<!--
56+
Scripts that are needed on every page and need to be loaded first.
3657
37-
<script src="{{ "js/translations-requests.gen.js" | absURL }}"></script>
38-
<script src="{{ (printf "js/translations-%s.gen.js" .Site.Language.Lang) | absURL }}"></script>
58+
The docs suggest that groups are included in alphabetical order (https://gohugo.io/functions/js/batch/#known-issues).
59+
While I haven't seen this be the case, I guess it doesn't hurt to make sure.
60+
-->
61+
{{ with $batch.Group "_general" }}
62+
{{ with .Script "general" }}
63+
{{ .SetOptions (dict "resource" (resources.Get "js/general.tsx")) }}
64+
{{ end }}
3965

40-
<script src="{{ $errorHandlerBundle.Permalink }}"></script>
41-
<script src="{{ $generalBundle.Permalink }}"></script>
66+
{{ if $.Site.Params.devMode }}
67+
{{ with .Script "test-interface" }}
68+
{{ .SetOptions (dict "resource" (resources.Get "js/test-interface.tsx")) }}
69+
{{ end }}
70+
{{ end }}
71+
{{ end }}
4272

43-
{{ if .Site.Params.devMode }}
44-
<script>window.hugoDevMode = true;</script>
45-
{{ $testInterfaceBundle := resources.Get "js/test-interface.tsx" | js.Build $commonJsBuildOptions }}
46-
<script src="{{ $testInterfaceBundle.Permalink }}"></script>
73+
<!-- Register group-specific scripts. -->
74+
{{ with $batch.Group "app" }}
75+
{{ with .Script "app" }}
76+
{{ .SetOptions (dict "resource" (resources.Get "js/app.tsx")) }}
77+
{{ end }}
4778
{{ end }}
4879

49-
<!-- Page-specific entry points -->
50-
{{ if eq .Type "generator" }}
51-
{{ $appBundle := resources.Get "js/app.tsx" | js.Build (merge $commonJsBuildOptions $pdfWorkerDefines) }}
52-
<script src="{{ $appBundle.Permalink }}"></script>
80+
{{ with $batch.Group "advanced-generator" }}
81+
{{ with .Script "generator" }}
82+
{{ .SetOptions (dict "resource" (resources.Get "js/generator.tsx")) }}
83+
{{ end }}
5384
{{ end }}
5485

55-
{{ if eq .Type "g" }}
56-
{{ $gBundle := resources.Get "js/generator.tsx" | js.Build (merge $commonJsBuildOptions $pdfWorkerDefines) }}
57-
<script src="{{ $gBundle.Permalink }}"></script>
86+
{{ with $batch.Group "company-list" }}
87+
{{ with .Script "company-list" }}
88+
{{ .SetOptions (dict "resource" (resources.Get "js/company-list.tsx")) }}
89+
{{ end }}
5890
{{ end }}
5991

60-
{{ if or (eq .Type "company") (eq .Type "categories") }}
61-
{{ $companyListBundle := resources.Get "js/company-list.tsx" | js.Build $commonJsBuildOptions }}
62-
<script src="{{ $companyListBundle.Permalink }}"></script>
92+
{{ with $batch.Group "my-requests" }}
93+
{{ with .Script "my-requests" }}
94+
{{ .SetOptions (dict "resource" (resources.Get "js/my-requests.tsx")) }}
95+
{{ end }}
6396
{{ end }}
6497

65-
{{ if eq .Type "my-requests" }}
66-
{{ $myRequestsBundle := resources.Get "js/my-requests.tsx" | js.Build $commonJsBuildOptions }}
67-
<script src="{{ $myRequestsBundle.Permalink }}"></script>
68-
<script>window.renderMyRequestsWidget();</script>
98+
{{ with $batch.Group "privacy-controls" }}
99+
{{ with .Script "privacy-controls" }}
100+
{{ .SetOptions (dict "resource" (resources.Get "js/privacy-controls.tsx")) }}
101+
{{ end }}
69102
{{ end }}
70103

71-
{{ if eq .Type "privacy-controls" }}
72-
{{ $privacyControlsBundle := resources.Get "js/privacy-controls.tsx" | js.Build $commonJsBuildOptions }}
73-
<script src="{{ $privacyControlsBundle.Permalink }}"></script>
104+
{{ with $batch.Group "id-data-controls" }}
105+
{{ with .Script "id-data-controls" }}
106+
{{ .SetOptions (dict "resource" (resources.Get "js/id-data-controls.tsx")) }}
107+
{{ end }}
74108
{{ end }}
75109

76-
{{ if eq .Type "id-data-controls" }}
77-
{{ $idDataControlsBundle := resources.Get "js/id-data-controls.tsx" | js.Build $commonJsBuildOptions }}
78-
<script src="{{ $idDataControlsBundle.Permalink }}"></script>
110+
{{ with $batch.Group "suggest" }}
111+
{{ with .Script "suggest" }}
112+
{{ .SetOptions (dict "resource" (resources.Get "js/suggest-edit.jsx")) }}
113+
{{ end }}
79114
{{ end }}
80115

81-
{{ if eq .Type "suggest" }}
82-
{{ $suggestBundle := resources.Get "js/suggest-edit.jsx" | js.Build $commonJsBuildOptions }}
83-
<script src="{{ $suggestBundle.Permalink }}"></script>
116+
{{ with $batch.Group "sva-finder" }}
117+
{{ with .Script "sva-finder" }}
118+
{{ .SetOptions (dict "resource" (resources.Get "js/Components/SvaFinder.tsx")) }}
119+
{{ end }}
84120
{{ end }}
85121

86-
{{ if or (eq .Type "supervisory-authorities") .Params.has_sva_finder }}
87-
{{ $svaFinderBundle := resources.Get "js/Components/SvaFinder.tsx" | js.Build $commonJsBuildOptions }}
88-
<script src="{{ $svaFinderBundle.Permalink }}"></script>
122+
{{ with $batch.Group "act" }}
123+
{{ with .Script "act-widget" }}
124+
{{ .SetOptions (dict "resource" (resources.Get "js/Components/ActWidget.tsx")) }}
125+
{{ end }}
126+
{{ end }}
89127

90-
{{ if eq .Type "supervisory-authorities" }}
91-
<script>window.renderSvaFinder();</script>
128+
{{ with $batch.Group "donate" }}
129+
{{ with .Script "donation-widget" }}
130+
{{ .SetOptions (dict "resource" (resources.Get "js/Components/DonationWidget.tsx")) }}
92131
{{ end }}
93132
{{ end }}
94133

95-
{{ if eq .Type "act" }}
96-
{{ $actWidget := resources.Get "js/Components/ActWidget.tsx" | js.Build $commonJsBuildOptions }}
97-
<script src="{{ $actWidget.Permalink }}"></script>
134+
{{ with $batch.Group "misconduct-report" }}
135+
{{ with .Script "misconduct-reporter" }}
136+
{{ .SetOptions (dict "resource" (resources.Get "js/Components/MisconductReporter.tsx")) }}
137+
{{ end }}
98138
{{ end }}
99139

100-
{{ if eq .Type "donate" }}
101-
{{ $donationWidgetBundle := resources.Get "js/Components/DonationWidget.tsx" | js.Build $commonJsBuildOptions }}
102-
<script src="{{ $donationWidgetBundle.Permalink }}"></script>
103-
<script>window.renderDonationWidget();</script>
140+
{{ with $batch.Group "home" }}
141+
{{ with .Script "home" }}
142+
{{ .SetOptions (dict "resource" (resources.Get "js/home.tsx")) }}
143+
{{ end }}
104144
{{ end }}
105145

106-
{{ if eq .Type "misconduct-report" }}
107-
{{ $misconductReporterBundle := resources.Get "js/Components/MisconductReporter.tsx" | js.Build $commonJsBuildOptions }}
108-
<script src="{{ $misconductReporterBundle.Permalink }}"></script>
146+
<!-- Determine the script groups that apply to this page. -->
147+
{{ $groups := slice "_general" }}
148+
149+
{{ if eq $.Type "generator" }} {{ $groups = $groups | append "app" }} {{ end }}
150+
{{ if eq $.Type "g" }} {{ $groups = $groups | append "advanced-generator" }} {{ end }}
151+
{{ if or (eq $.Type "company") (eq $.Type "categories") }} {{ $groups = $groups | append "company-list" }} {{ end }}
152+
{{ if eq $.Type "my-requests" }} {{ $groups = $groups | append "my-requests" }} {{ end }}
153+
{{ if eq $.Type "privacy-controls" }} {{ $groups = $groups | append "privacy-controls" }} {{ end }}
154+
{{ if eq $.Type "id-data-controls" }} {{ $groups = $groups | append "id-data-controls" }} {{ end }}
155+
{{ if eq $.Type "suggest" }} {{ $groups = $groups | append "suggest" }} {{ end }}
156+
{{ if or (eq $.Type "supervisory-authorities") $.Params.has_sva_finder }} {{ $groups = $groups | append "sva-finder" }} {{ end }}
157+
{{ if eq $.Type "act" }} {{ $groups = $groups | append "act" }} {{ end }}
158+
{{ if eq $.Type "donate" }} {{ $groups = $groups | append "donate" }} {{ end }}
159+
{{ if eq $.Type "misconduct-report" }} {{ $groups = $groups | append "misconduct-report" }} {{ end }}
160+
{{ if $.IsHome }} {{ $groups = $groups | append "home" }} {{ end }}
161+
162+
<!-- Build and include the scripts that apply for this page. -->
163+
{{ with $batch.Build }}
164+
{{ $groupsInBatch := .Groups }}
165+
{{ range $groups }}
166+
{{ with index $groupsInBatch . }}
167+
{{ range . }}
168+
{{ $s := . }}
169+
{{ if eq $s.MediaType.SubType "css" }}
170+
<link href="{{ $s.RelPermalink }}" rel="stylesheet" />
171+
{{ else }}
172+
<script src="{{ $s.RelPermalink }}" type="module"></script>
173+
{{ end }}
174+
{{ end }}
175+
{{ end }}
176+
{{ end }}
109177
{{ end }}
110178

111-
{{ if .IsHome }}
112-
{{ $homeBundle := resources.Get "js/home.tsx" | js.Build $commonJsBuildOptions }}
113-
<script src="{{ $homeBundle.Permalink }}"></script>
179+
<!-- Page-specific initialization scripts. -->
180+
{{ if in $groups "my-requests" }}
181+
<script type="module">window.renderMyRequestsWidget();</script>
114182
{{ end }}
115183

116-
{{/* TODO: Do this in the js build via hugo pipes */}}
117-
{{ if eq .Type "donate" }}
118-
{{ $loader := resources.Get "styles/loader.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify | fingerprint }}
119-
{{ $link := $loader.RelPermalink | absURL }}
120-
{{ if (or (eq hugo.Environment "production") (eq hugo.Environment "staging")) }}
121-
{{ $link = $link | replaceRE "\\.[^\\.]*(\\.[^\\.]*)$" "$1" }}
184+
{{ if eq .Type "supervisory-authorities" }}
185+
<script type="module">window.renderSvaFinder();</script>
122186
{{ end }}
123-
<link rel="stylesheet" href="{{ $link }}" integrity="{{ $loader.Data.Integrity }}" crossorigin="anonymous">
187+
188+
{{ if in $groups "donate" }}
189+
<script type="module">window.renderDonationWidget();</script>
190+
191+
{{/* TODO: Do this in the js build via hugo pipes */}}
192+
{{ $loader := resources.Get "styles/loader.scss" | toCSS (dict "enableSourceMap" .Site.Params.devMode) | postCSS (dict "config" "postcss.config.js" "noMap" true) | minify | fingerprint }}
193+
{{ $link := $loader.RelPermalink | absURL }}
194+
{{ if (or (eq hugo.Environment "production") (eq hugo.Environment "staging")) }}
195+
{{ $link = $link | replaceRE "\\.[^\\.]*(\\.[^\\.]*)$" "$1" }}
196+
{{ end }}
197+
<link rel="stylesheet" href="{{ $link }}" integrity="{{ $loader.Data.Integrity }}" crossorigin="anonymous">
124198
{{ end }}

0 commit comments

Comments
 (0)