Introduce frontend bundle builds via rollup

inducer · Nov 30, 2021 · 05f9536 · 05f9536
1 parent bcb07fa
commit 05f9536
Show file tree

Hide file tree

Showing 37 changed files with 15,227 additions and 562 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,15 @@
+module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: [
+    'airbnb-base',
+  ],
+  parserOptions: {
+    ecmaVersion: 13,
+    sourceType: 'module',
+  },
+  rules: {
+  },
+};
diff --git a/.gitignore b/.gitignore
@@ -40,3 +40,5 @@ bulk-storage
 /.venv/
 
 tags
+
+frontend-dist
diff --git a/course/templates/course/analytics-page.html b/course/templates/course/analytics-page.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% block title %}

diff --git a/course/templates/course/calendar.html b/course/templates/course/calendar.html
@@ -1,44 +1,30 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
-
 {% load static %}
 
 {% block title %}
   {{ course.number}}
   {% trans "Calendar" %} - {{ relate_site_name }}
 {% endblock %}
 
-{%block head_assets_extra %}
-  <link rel='stylesheet' href='{% static "fullcalendar/dist/fullcalendar.css" %}' />
-  <script src='{% static "moment/moment.js" %}'></script>
-  <script src='{% static "fullcalendar/dist/fullcalendar.js" %}'></script>
-  {# load calendar with local language #}
-  {% get_current_language as LANGUAGE_CODE %}
-  {% if LANGUAGE_CODE != "en" %}
-    <script src='{% static "fullcalendar/dist/lang/" %}{{ LANGUAGE_CODE |js_lang_fallback:"fullcalendar" }}.js'></script>
-  {% endif %}
+{% block bundle_loads %}
+  {{ block.super }}
+  <script src="{% static 'bundle-fullcalendar.js' %}"></script>
 {% endblock %}
 
 {% block content %}
   <h1>{{ course.number}} {% trans "Calendar" %}</h1>
 
   <div id="coursecal" style="margin-top:3em"></div>
 
-
   <script type="text/javascript">
-    $(document).ready(function() {
-        $('#coursecal').fullCalendar({
-          header: {
-            left: 'prev,next today',
-            center: 'title',
-            right: 'month,agendaWeek,agendaDay'
-          },
-          defaultDate: '{{ default_date }}',
-          timezone: "local",
-
-          events: {{ events_json|safe }}
-        })
-    });
+      $(document).ready(function() {
+            rlFullCalendar.setupCalendar(
+                  document.getElementById("coursecal"),
+                  {{ events_json|safe }},
+                  '{{ default_date }}'
+                )
+          });
   </script>
 
 {% blocktrans trimmed %}

diff --git a/course/templates/course/course-base-with-markup.html b/course/templates/course/course-base-with-markup.html
@@ -0,0 +1,15 @@
+{% extends "course/course-base.html" %}
+{% load static %}
+
+{% block bundle_loads %}
+  {# contains mathjax config #}
+  <script src="{% static 'bundle-base-with-markup.js' %}"></script>
+
+  <script type="text/javascript">
+    const rlUtils = rlBase.rlUtils;
+    const tmpl = rlBase.tmpl;
+  </script>
+
+  <script src="{% static "mathjax/es5/tex-svg.js" %}" id="MathJax-script" async></script>
+
+{% endblock %}
diff --git a/course/templates/course/course-datatables.html b/course/templates/course/course-datatables.html
@@ -0,0 +1,9 @@
+{% extends "course/course-base.html" %}
+{% load static %}
+
+{% block bundle_loads %}
+  <script src="{% static 'bundle-datatables.js' %}"></script>
+  <script type="text/javascript">
+    const rlUtils = rlDataTables.rlUtils;
+  </script>
+{% endblock %}
diff --git a/course/templates/course/flow-page.html b/course/templates/course/flow-page.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% load crispy_forms_tags %}
@@ -484,7 +484,7 @@
               expiration_mode: $("#id_expiration_mode").val()
             },
             beforeSend: function(xhr, settings) {
-              var csrftoken = get_cookie('csrftoken');
+              var csrftoken = rlUtils.getCookie('relate_csrftoken');
               xhr.setRequestHeader("X-CSRFToken", csrftoken);
             }
           })
@@ -545,7 +545,7 @@
                     bookmark_state: new_bookmarked ? "1": "0"
                   },
                   beforeSend: function(xhr, settings) {
-                    var csrftoken = get_cookie('csrftoken');
+                    var csrftoken = rlUtils.getCookie('relate_csrftoken');
                     xhr.setRequestHeader("X-CSRFToken", csrftoken);
                   }
                 })
@@ -594,7 +594,6 @@
 {% block page_bottom_javascript_extra %}
 
   {% if expects_answer %}
-    <script src="{{ STATIC_URL }}blueimp-tmpl/js/tmpl.min.js"></script>
     <script>
       function generate_past_submission_dropdown_content(){
         var jqxhr = $.ajax({

diff --git a/course/templates/course/grade-flow-page.html b/course/templates/course/grade-flow-page.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% load crispy_forms_tags %}
@@ -407,7 +407,6 @@ <h1> {% trans "Grading" %}: <tt>{{ flow_identifier}} - {{ page_data.group_id }}/
 {% block page_bottom_javascript_extra %}
 
   {% if expects_answer %}
-    <script src="{{ STATIC_URL }}blueimp-tmpl/js/tmpl.min.js"></script>
     <script>
 
       function generate_past_submission_and_grades_dropdown_content(){

diff --git a/course/templates/course/gradebook-by-opp.html b/course/templates/course/gradebook-by-opp.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 {% load i18n %}
 
 {% load crispy_forms_tags %}
@@ -8,11 +8,6 @@
   {% trans "Grade book" %}: {{ opportunity.name }} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
-
 {% block content %}
   <h1>{% trans "Grade book" %}: {{ opportunity.name }} </h1>
 

diff --git a/course/templates/course/gradebook-opp-list.html b/course/templates/course/gradebook-opp-list.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 
 {% load i18n %}
 
@@ -8,10 +8,6 @@
   {% trans "List of Grading Opportunities" %} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
 {% block content %}
   <h1>{% trans "List of Grading Opportunities" %}</h1>
 

diff --git a/course/templates/course/gradebook-participant-list.html b/course/templates/course/gradebook-participant-list.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 {% load i18n %}
 
 {% load static %}
@@ -7,10 +7,6 @@
   {% trans "List of Participants" %} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
 {% block content %}
   <h1>{% trans "List of Participants" %}</h1>
 

diff --git a/course/templates/course/gradebook-participant.html b/course/templates/course/gradebook-participant.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 {% load i18n %}
 
 {% load static %}
@@ -7,10 +7,6 @@
   {% trans "My Grades" %} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
 {% block content %}
   {% if grade_participation.pk == participation.pk %}
     <h1>{% trans "My Grades" %}</h1>

diff --git a/course/templates/course/gradebook.html b/course/templates/course/gradebook.html
@@ -1,14 +1,10 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 {% load i18n %}
 
 {% block title %}
   {% trans "Grade book" %} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
 {% block content %}
   <h1>{% trans "Grade book" %}</h1>
 

diff --git a/course/templates/course/query-participations.html b/course/templates/course/query-participations.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-datatables.html" %}
 {% load i18n %}
 {% load static %}
 {% load crispy_forms_tags %}
@@ -7,10 +7,6 @@
   {% trans "Query Participations" %} - {{ relate_site_name }}
 {% endblock %}
 
-{% block header_extra %}
-  {% include "datatables-header.html" %}
-{% endblock %}
-
 {% block content %}
   <h1>{% trans "Query Participations" %}</h1>
 

diff --git a/course/templates/course/sandbox-markup.html b/course/templates/course/sandbox-markup.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% load crispy_forms_tags %}

diff --git a/course/templates/course/sandbox-page.html b/course/templates/course/sandbox-page.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% load crispy_forms_tags %}

diff --git a/course/templates/course/static-page.html b/course/templates/course/static-page.html
@@ -1,4 +1,4 @@
-{% extends "course/course-base.html" %}
+{% extends "course/course-base-with-markup.html" %}
 {% load i18n %}
 
 {% block page_navbar %}

diff --git a/course/templatetags/coursetags.py b/course/templatetags/coursetags.py
@@ -64,25 +64,6 @@ def do_get_current_js_lang_name(parser, token):
                 "'as variable' (got %r)" % args)
     return GetCurrentLanguageJsFmtNode(args[2])
 
-
-@register.filter(name="js_lang_fallback")
-def js_lang_fallback(lang_name, js_name=None):
-    """
-    Return the fallback lang name for js files.
-    :param a :class:`str:`
-    :param js_name: a :class:`str:`, optional.
-    :return: a :class:`str:`
-    """
-
-    # The mapping is crap, we use a special case table to fix it.
-    if js_name == "fullcalendar":
-        known_fallback_mapping = {
-            "zh-hans": "zh-cn",
-            "zh-hant": "zh-tw"}
-        return known_fallback_mapping.get(lang_name.lower(), lang_name).lower()
-
-    return lang_name
-
 # }}}
 
 

diff --git a/doc/misc.rst b/doc/misc.rst
@@ -23,8 +23,7 @@ use the ``relate`` comand, you need to activate the virtualenv that was created:
 Installation for Relate Development
 -----------------------------------
 
-Install `Node.js <https://nodejs.org>`__ and NPM, or `Yarn <https://yarnpkg.com>`__
-(version 1, an alternative package manager) at your option.
+Install `Node.js <https://nodejs.org>`__ and NPM.
 
 Install `poetry <https://python-poetry.org>`__ to manage dependencies and virtual
 environments::
@@ -62,13 +61,10 @@ Initialize the database::
     python manage.py migrate
     python manage.py createsuperuser --username=$(whoami)
 
-Retrieve static (JS/CSS) dependencies::
+Retrieve frontend (JS/CSS) dependencies and build::
 
     npm install
-
-or::
-
-    yarn
+    npm run build
 
 Run the server::