Merge pull request #35005 from dimagi/bmb/webpack

Building Webpack on HQ

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
     // https://eslint.org/docs/4.0.0/user-guide/configuring#specifying-parser-options
     "parserOptions": {
         "ecmaVersion": 6,
+        "sourceType": "module",
     },
 
     // http://eslint.org/docs/user-guide/configuring#specifying-environments

.gitignore

@@ -85,3 +85,6 @@ corehq/apps/hqwebapp/static/hqwebapp/js/lib/modernizr.js
 # direnv
 .envrc
 .direnv
+
+# webpack build related
+/webpack/_build/

corehq/apps/app_manager/tests/test_views.py

@@ -557,7 +557,7 @@ def test_view_form_legacy(self, mock1):
         'WEBSOCKET_URI', 'selected_form', 'module', 'MINIMUM_PASSWORD_LENGTH', 'MINIMUM_ZXCVBN_SCORE',
         'SUPPORT_EMAIL', 'app_view_options', 'show_advanced', 'role_version', 'custom_assertions',
         'is_app_settings_page', 'domain_names', 'latest_version_for_build_profiles', 'ANALYTICS_CONFIG',
-        'csrf_token', 'LANGUAGE_CODE', 'app_name', 'requirejs_main', 'sub', 'is_saas_environment',
+        'csrf_token', 'LANGUAGE_CODE', 'app_name', 'sub', 'is_saas_environment',
         'selected_module', 'add_ons_layout', 'is_dimagi_environment', 'TIME_ZONE', 'env', 'add_ons',
         'show_shadow_forms', 'can_edit_apps', 'ANALYTICS_IDS', 'active_tab', 'current_url_name',
         'show_release_mode', 'application_profile_url', 'linkable_domains', 'domain_links',
@@ -581,7 +581,7 @@ def test_view_form_legacy(self, mock1):
         'nav_menu_media_specifics', 'user', 'TIME_ZONE', 'domain', 'module_brief', 'timezone', 'active_tab',
         'data_registry_enabled', 'confirm', 'messages', 'releases_active', 'show_status_page',
         'show_search_workflow', 'data_registries', 'label', 'underscore', 'forloop', 'show_shadow_modules',
-        'requirejs_main', 'SUPPORT_EMAIL', 'valid_parents_for_child_module', 'parent_case_modules',
+        'SUPPORT_EMAIL', 'valid_parents_for_child_module', 'parent_case_modules',
         'current_url_name', 'LANGUAGE_BIDI', 'DEFAULT_MESSAGE_LEVELS', 'show_report_modules', 'BASE_MAIN',
         'app_id', 'request', 'MINIMUM_PASSWORD_LENGTH', 'type', 'is_saas_environment', 'show_all_projects_link',
         'enterprise_mode', 'csrf_token', 'WS4REDIS_HEARTBEAT', 'is_dimagi_environment', 'domain_names',
@@ -607,7 +607,7 @@ def test_view_form_legacy(self, mock1):
         'show_release_mode', 'linked_name', 'linked_version', 'latest_commcare_version',
         'nav_menu_media_specifics', 'user', 'TIME_ZONE', 'domain', 'case_config_options', 'timezone',
         'root_requires_same_case', 'active_tab', 'confirm', 'messages', 'releases_active', 'show_status_page',
-        'form_filter_patterns', 'form_workflows', 'label', 'underscore', 'forloop', 'requirejs_main',
+        'form_filter_patterns', 'form_workflows', 'label', 'underscore', 'forloop',
         'SUPPORT_EMAIL', 'current_url_name', 'LANGUAGE_BIDI', 'DEFAULT_MESSAGE_LEVELS', 'show_report_modules',
         'BASE_MAIN', 'xform_languages', 'app_id', 'request', 'allow_usercase', 'MINIMUM_PASSWORD_LENGTH', 'type',
         'is_saas_environment', 'show_all_projects_link', 'enterprise_mode', 'module_is_multi_select', 'csrf_token',

corehq/apps/hqadmin/templates/hqadmin/hqadmin_base_report.html

@@ -5,7 +5,7 @@
 {% block title %}{% if current_page and section %}{% if current_page.title %}{{ current_page.title }} : {% endif %}{{ section.page_name }} {% else %}{{ report.title }}{% endif %}: Admin Reports{% endblock %}
 
 {% block js %}{{ block.super }}
-  {% if not requirejs_main %}
+  {% if not use_js_bundler %}
     {% if request.use_datatables %}
       <script src="{% static 'reports/js/bootstrap3/config.dataTables.bootstrap.js' %}"></script>
     {% endif %}

corehq/apps/hqwebapp/management/commands/generate_webpack_settings.py

@@ -0,0 +1,22 @@
+import json
+from pathlib import Path
+
+from django.conf import settings
+from django.core.management.base import BaseCommand
+
+import corehq
+
+WEBPACK_BUILD_DIR = Path(corehq.__file__).resolve().parent.parent / "webpack" / "_build"
+
+
+class Command(BaseCommand):
+    help = ("Generates a settings file for webpack so that the same staticfiles directory "
+            "that Django is using is passed to the Webpack build.")
+
+    def handle(self, **options):
+        webpack_settings = {
+            'staticfilesPath': settings.STATIC_ROOT,
+        }
+        WEBPACK_BUILD_DIR.mkdir(parents=True, exist_ok=True)
+        with open(WEBPACK_BUILD_DIR / "settings.json", "w") as f:
+            json.dump(webpack_settings, f)

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap3/commcarehq.js

@@ -0,0 +1,11 @@
+// Core requirements for Bootstrap 3 Webpack Entry Modules
+import ko from 'knockout';
+import mapping from 'ko.mapping';
+ko.mapping = mapping;
+
+import 'bootstrap';
+
+import 'hqwebapp/js/django';
+
+import 'hqwebapp/js/bootstrap3/common';
+import 'hqwebapp/js/bootstrap3/base_main';

corehq/apps/hqwebapp/static/hqwebapp/js/bootstrap5/commcarehq.js

@@ -0,0 +1,11 @@
+// Core requirements for Bootstrap 5 Webpack Entry Modules
+import ko from 'knockout';
+import mapping from 'ko.mapping';
+ko.mapping = mapping;
+
+import 'bootstrap5';
+
+import 'hqwebapp/js/django';
+
+import 'hqwebapp/js/bootstrap5/common';
+import 'hqwebapp/js/bootstrap5/base_main';

corehq/apps/hqwebapp/static/hqwebapp/js/hqModules.js

@@ -57,7 +57,7 @@ function hqDefine(path, dependencies, moduleAccessor) {
     }
 
     (function (factory) {
-        if (typeof define === 'function' && define.amd && window.USE_REQUIREJS) {
+        if (typeof define === 'function' && define.amd && (window.USE_REQUIREJS || window.USE_WEBPACK)) {
             // HQ's requirejs build process (build_requirejs.py) replaces hqDefine calls with
             // define calls, so it's important that this do nothing but pass through to require
             define(path, dependencies, factory);
@@ -117,7 +117,7 @@ function hqImport(path) {
 // at module definition time, but this function can be used when doing so would
 // introduce a circular dependency.
 function hqRequire(paths, callback) {       // eslint-disable-line no-unused-vars
-    if (typeof define === 'function' && define.amd && window.USE_REQUIREJS) {
+    if (typeof define === 'function' && define.amd && (window.USE_REQUIREJS || window.USE_WEBPACK)) {
         // HQ's requirejs build process (build_requirejs.py) replaces hqRequire calls with
         // require calls, so it's important that this do nothing but pass through to require
         require(paths, callback);   // eslint-disable-line no-undef

corehq/apps/hqwebapp/templates/hqwebapp/base.html

@@ -1,6 +1,7 @@
 {% load menu_tags %}{% load i18n %}{% load hq_shared_tags %}{% load cache %}{% load compress %}{% load statici18n %}<!DOCTYPE html>
 {% get_current_language as LANGUAGE_CODE %}
 {% requirejs_main %}
+{% webpack_main %}
 <!--[if lt IE 7]><html lang="{{ LANGUAGE_CODE }}" class="lt-ie9 lt-ie8 lt-ie7"><![endif]-->
 <!--[if IE 7]><html lang="{{ LANGUAGE_CODE }}" class="lt-ie9 lt-ie8"><![endif]-->
 <!--[if IE 8]><html lang="{{ LANGUAGE_CODE }}" class="lt-ie9"><![endif]-->
@@ -149,21 +150,21 @@
       window.USE_BOOTSTRAP5 = {{ use_bootstrap5|BOOL }};
     </script>
 
-    {% if not requirejs_main %}
+    {% if not use_js_bundler %}
       {% javascript_libraries use_bootstrap5=use_bootstrap5 underscore=True jquery_ui=request.use_jquery_ui ko=True hq=True analytics=True %}
     {% endif %}
 
     {# Up here because if daterangepicker is called from within a form widget, #}
     {# the javascript requiring the config file is run before js-inline #}
-    {% if request.use_daterangepicker and not requirejs_main and not use_bootstrap5 %}
+    {% if request.use_daterangepicker and not use_js_bundler and not use_bootstrap5 %}
       {% compress js %}
         <script src="{% static 'moment/moment.js' %}"></script>
         <script src="{% static 'bootstrap-daterangepicker/daterangepicker.js' %}"></script>
         <script src="{% static 'hqwebapp/js/daterangepicker.config.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_tempusdominus and not requirejs_main and use_bootstrap5 %}
+    {% if request.use_tempusdominus and not use_js_bundler and use_bootstrap5 %}
       {% compress js %}
         <script src="{% static '@popperjs/core/dist/umd/popper.min.js' %}"></script>
         <script src="{% static '@eonasdan/tempus-dominus/dist/js/tempus-dominus.min.js' %}"></script>
@@ -318,8 +319,10 @@
 
     <script src="{% statici18n LANGUAGE_CODE %}"></script> {# DO NOT COMPRESS #}
 
+    {% include "hqwebapp/partials/webpack.html" %} {# must come after statici18n above #}
+
     {# HQ Specific Libraries #}
-    {% if not requirejs_main %}
+    {% if not use_js_bundler %}
       {% if use_bootstrap5 %}
         {% compress js %}
           <script src="{% static 'hqwebapp/js/hq_extensions.jquery.js' %}"></script>
@@ -347,7 +350,7 @@
 
     {# JavaScript Display Logic Libaries #}
 
-    {% if request.couch_user and not requirejs_main %}
+    {% if request.couch_user and not use_js_bundler %}
       {% if use_bootstrap5 %}
         <script src="{% static 'notifications/js/bootstrap5/notifications_service.js' %}"></script>
         <script src="{% static 'notifications/js/bootstrap5/notifications_service_main.js' %}"></script>
@@ -357,13 +360,13 @@
       {% endif %}
     {% endif %}
 
-    {% if not requirejs_main %}
+    {% if not use_js_bundler %}
       {% compress js %}
         <script src="{% static 'select2/dist/js/select2.full.min.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_nvd3 and not requirejs_main %}
+    {% if request.use_nvd3 and not use_js_bundler %}
       {% compress js %}
         <script src="{% static 'nvd3/lib/d3.v2.js' %}"></script>
         <script src="{% static 'nvd3/lib/fisheye.js' %}"></script>
@@ -372,15 +375,15 @@
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_nvd3_v3 and not requirejs_main %}
+    {% if request.use_nvd3_v3 and not use_js_bundler %}
       {% compress js %}
         <script src="{% static 'nvd3/lib/d3.v3.js' %}"></script>
         <script src="{% static 'd3/d3.min.js' %}"></script>
         <script src="{% static 'nvd3/nv.d3.min.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_datatables and not requirejs_main %}
+    {% if request.use_datatables and not use_js_bundler %}
       {% if use_bootstrap5 %}
         {% compress js %}
           <script src="{% static 'datatables.net/js/jquery.dataTables.min.js' %}"></script>
@@ -397,20 +400,20 @@
       {% endif %}
     {% endif %}
 
-    {% if request.use_typeahead and not requirejs_main and not use_bootstrap5 %}
+    {% if request.use_typeahead and not use_js_bundler and not use_bootstrap5 %}
       {% compress js %}
         <script src="{% static 'bootstrap3-typeahead/bootstrap3-typeahead.min.js' %}"></script>
         <script src="{% static 'hqwebapp/js/bootstrap-multi-typeahead.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_timepicker and not requirejs_main and not use_bootstrap5 %}
+    {% if request.use_timepicker and not use_js_bundler and not use_bootstrap5 %}
       {% compress js %}
         <script src="{% static 'bootstrap-timepicker/js/bootstrap-timepicker.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if not requirejs_main %}
+    {% if not use_js_bundler %}
       {% if request.use_maps %}
         {% compress js %}
           <script src="{% static 'jquery-color/dist/jquery.color.js' %}"></script>
@@ -419,25 +422,25 @@
       {% endif %}
     {% endif %}
 
-    {% if request.use_maps and not requirejs_main %}
+    {% if request.use_maps and not use_js_bundler %}
       {% compress js %}
         <script src="{% static 'reports/js/bootstrap3/maps_utils.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_timeago and not requirejs_main %}
+    {% if request.use_timeago and not use_js_bundler %}
       <script src="{% static 'jquery-timeago/jquery.timeago.js' %}"></script>
     {% endif %}
 
-    {% if request.use_multiselect and not requirejs_main %}
+    {% if request.use_multiselect and not use_js_bundler %}
       {% compress js %}
         <script src="{% static 'multiselect/js/jquery.multi-select.js' %}"></script>
         <script src="{% static 'quicksearch/dist/jquery.quicksearch.min.js' %}"></script>
         <script src="{% static 'hqwebapp/js/multiselect_utils.js' %}"></script>
       {% endcompress %}
     {% endif %}
 
-    {% if request.use_ko_validation and not requirejs_main %}
+    {% if request.use_ko_validation and not use_js_bundler %}
       <script src="{% static 'knockout-validation/dist/knockout.validation.min.js' %}"></script>
       {% if use_bootstrap5 %}
         <script src="{% static 'hqwebapp/js/bootstrap5/validators.ko.js' %}"></script>
@@ -469,15 +472,15 @@
       {% include 'hqwebapp/partials/bootstrap3/ko_feedback.html' %}
     {% endif %}
 
-    {% if show_overdue_invoice_modal and not requirejs_main %}
+    {% if show_overdue_invoice_modal and not use_js_bundler %}
       {% if use_bootstrap5 %}
         <script src="{% static 'hqwebapp/js/bootstrap5/downgrade_modal.js' %}"></script>
       {% else %}
         <script src="{% static 'hqwebapp/js/bootstrap3/downgrade_modal.js' %}"></script>
       {% endif %}
     {% endif %}
 
-    {% if show_prepaid_modal and not requirejs_main %}
+    {% if show_prepaid_modal and not use_js_bundler %}
       {% if use_bootstrap5 %}
         <script src="{% static 'hqwebapp/js/bootstrap5/prepaid_modal.js' %}"></script>
       {% else %}

corehq/apps/hqwebapp/templates/hqwebapp/partials/webpack.html

@@ -0,0 +1,11 @@
+{% load hq_shared_tags %}
+
+{% if webpack_main %}
+  <script>
+    window.USE_WEBPACK = {{ webpack_main|BOOL }};
+    console.log("Loaded webpack main module: {{ webpack_main }}");
+  </script>
+  {% for bundle_path in webpack_main|webpack_bundles %}
+    <script src="{% static bundle_path %}"></script>
+  {% endfor %}
+{% endif %}