site: Vendor javascript dependencies

Download our javascript dependencies when building the site. This allows
us to improve load times since the browser can reuse the same
connection. It also mildly improves privacy.

I also looked at webpack, but it seemed to be overkill for what I want
to do. Most of the files on this site are already split into independent
bundles included only when necessary. And it also pull in a lot of
javascript depenencies/overhead. I think it would still be nice to run a
tree shaker on our dependencies.

Closes: #59
Signed-off-by: Sean Anderson <[email protected]>

.gitignore

@@ -27,3 +27,6 @@ logs/*
 # Build artifacts
 *.pkg.tar*
 *.deb
+
+# Vendored dependencies
+trends/site/static/vendor/

setup.py

@@ -2,7 +2,74 @@
 # SPDX-License-Identifier: AGPL-3.0-only
 # Copyright (C) 2020-21 Sean Anderson <[email protected]>
 
+from distutils.command.build import build as distutils_build
 import setuptools
+from setuptools.command.develop import develop as setuptools_develop
+import os
+
+class build_fetch(setuptools.Command):
+    def initialize_options(self):
+        self.build_lib = None
+        self.inplace = False
+        self.package_dir = None
+
+    def finalize_options(self):
+        self.set_undefined_options('build_ext',
+            ('build_lib', 'build_lib'),
+            ('inplace', 'inplace'),
+        )
+
+    def run(self):
+        import requests
+
+        if self.inplace:
+            build_py = self.get_finalized_command('build_py')
+            vendor = f"{build_py.get_package_dir('trends.site')}/static/vendor"
+        else:
+            vendor = f"{self.build_lib}/trends/site/static/vendor"
+
+        try:
+            os.mkdir(vendor)
+        except FileExistsError:
+            pass
+
+        ts = ["js/tom-select.popular.min.js", "css/tom-select.min.css"]
+        ts += [f"{file}.map" for file in ts]
+        urls = [f"https://cdn.jsdelivr.net/npm/[email protected]/dist/{file}" for file in ts]
+        urls.append("https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js")
+
+        with requests.Session() as s:
+            for url in urls:
+                file = os.path.basename(url)
+                etag = f".{file}.etag"
+                file = os.path.join(vendor, file)
+                etag = os.path.join(vendor, etag)
+
+                print(f"Saving {url} to {file}")
+                headers = {}
+                try:
+                    with open(etag) as e:
+                        headers['If-None-Match'] = e.read()
+                except FileNotFoundError:
+                    pass
+
+                resp = s.get(url, headers=headers)
+                resp.raise_for_status()
+                if not len(headers) or resp.status_code != requests.codes.not_modified:
+                    with open(file, 'wb') as f:
+                        f.write(resp.content)
+
+                    with open(etag, 'w') as e:
+                        e.write(resp.headers['etag'])
+
+class develop(setuptools_develop):
+    def run(self):
+        self.reinitialize_command('build_fetch', inplace=1)
+        self.run_command('build_fetch')
+        super().run()
+
+class build(distutils_build):
+    sub_commands = [('build_fetch', None)] + distutils_build.sub_commands
 
 setuptools.setup(
     name = 'trends.tf',
@@ -20,7 +87,10 @@
         'COPYING',
         'LICENSES/*',
     ],
-    setup_requires = ['setuptools_scm'],
+    setup_requires = [
+        'requests',
+        'setuptools_scm',
+    ],
     install_requires = [
         'flask >= 2.0',
         'mpmetrics',
@@ -42,6 +112,11 @@
             'testing.postgresql'
         ],
     },
+    cmdclass = {
+        'build': build,
+        'build_fetch': build_fetch,
+        'develop': develop,
+    },
     entry_points = {
         'console_scripts': [
             "trends_importer=trends.importer.cli:main",

trends/site/templates/base.html

@@ -10,9 +10,10 @@
 	<link rel="stylesheet" type="text/css"
 	 href="{{ url_for('static', filename='css/style.css') }}">
 	<title>{% block title %}trends.tf{% endblock %}</title>
-	{% set tom_select_prefix = "https://cdn.jsdelivr.net/npm/[email protected]/dist" %}
-	<script type="module" src="{{ tom_select_prefix }}/js/tom-select.popular.min.js"></script>
-	<link rel="stylesheet" type="text/css" href="{{ tom_select_prefix }}/css/tom-select.min.css">
+	<script type="module"
+	 src="{{ url_for('static', filename="vendor/tom-select.popular.min.js") }}"></script>
+	<link rel="stylesheet" type="text/css"
+	 href="{{ url_for('static', filename="vendor/tom-select.min.css") }}">
 	{{ local_js("js/dates.js") }}
 	{{ local_js("js/filter.js") }}
 	<link rel="icon" href="{{ url_for('static', filename="img/favicon.ico") }}">

trends/site/templates/player/trends.html

@@ -9,7 +9,8 @@
 	{{ super() }}
 	<script type="text/javascript" defer>steamid64 = "{{ g.player['steamid64'] }}";</script>
 	<script id="trend-data" type="application/json">{{ trends | tojson }}</script>
-	<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
+	<script type="module"
+	 src="{{ url_for('static', filename="vendor/chart.min.js") }}"></script>
 	{{ local_js("js/trends.js") }}
 {% endblock %}
 {% block content %}