Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[webpack] Web Apps #35594

Merged
merged 13 commits into from
Jan 22, 2025
Original file line number Diff line number Diff line change
Expand Up @@ -57,10 +57,10 @@ hqDefine("cloudcare/js/form_entry/utils", [
*/
module.initialRender = function (formJSON, resourceMap, $div) {
var defer = $.Deferred();
hqRequire([
"cloudcare/js/debugger/debugger",
"cloudcare/js/form_entry/form_ui",
], function (Debugger, FormUI) {
$.when(
import("cloudcare/js/debugger/debugger"),
import("cloudcare/js/form_entry/form_ui"),
).done(function (Debugger, FormUI) {
var form = FormUI.Form(formJSON),
$debug = $('#cloudcare-debugger'),
CloudCareDebugger = Debugger.CloudCareDebuggerFormEntry,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -309,9 +309,7 @@ hqDefine("cloudcare/js/form_entry/web_form_session", [
self.getFormattedQuestions(callback);
});
$.subscribe('formplayer.' + constants.DIRTY, function (e) {
hqRequire([
"cloudcare/js/formplayer/app",
], function (FormplayerFrontend) {
import("cloudcare/js/formplayer/app").then(function (FormplayerFrontend) {
FormplayerFrontend.trigger('setUnsavedFormInProgress');
});
});
Expand Down Expand Up @@ -622,7 +620,7 @@ hqDefine("cloudcare/js/form_entry/web_form_session", [
}

function changeLang(lang) {
hqRequire(["cloudcare/js/formplayer/menus/controller"], function (menusController) {
import("cloudcare/js/formplayer/menus/controller").then(function (menusController) {
var urlObject = utils.currentUrlToObject();
urlObject.changeLang = lang;
menusController.selectMenu(urlObject);
Expand Down
14 changes: 6 additions & 8 deletions corehq/apps/cloudcare/static/cloudcare/js/formplayer/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ hqDefine("cloudcare/js/formplayer/app", [
if (!FormplayerFrontend.regions) {
FormplayerFrontend.regions = CloudcareUtils.getRegionContainer();
}
hqRequire(["cloudcare/js/formplayer/router"], function (Router) {
import("cloudcare/js/formplayer/router").then(function (Router) {
FormplayerFrontend.router = Router.start();
});
});
Expand All @@ -87,7 +87,7 @@ hqDefine("cloudcare/js/formplayer/app", [
};

FormplayerFrontend.showRestoreAs = function (user) {
hqRequire(["cloudcare/js/formplayer/users/views"], function (UsersViews) {
import("cloudcare/js/formplayer/users/views").then(function (UsersViews) {
FormplayerFrontend.regions.getRegion('restoreAsBanner').show(
UsersViews.RestoreAsBanner({model: user, smallScreen: false}));
const mobileRegion = FormplayerFrontend.regions.getRegion('mobileRestoreAsBanner');
Expand Down Expand Up @@ -315,14 +315,12 @@ hqDefine("cloudcare/js/formplayer/app", [
var self = this,
user = UsersModels.setCurrentUser(options);

hqRequire([
"cloudcare/js/formplayer/users/utils", // restoreAsUser
], function () {
import("cloudcare/js/formplayer/users/utils").then(function () { // restoreAsUser
user.restoreAs = FormplayerFrontend.getChannel().request('restoreAsUser', user.domain, user.username);
AppsAPI.primeApps(user.restoreAs, options.apps);
});

hqRequire(["cloudcare/js/formplayer/router"], function (Router) {
import("cloudcare/js/formplayer/router").then(function (Router) {
FormplayerFrontend.router = Router.start();
$.when(AppsAPI.getAppEntities()).done(function (appCollection) {
var appId;
Expand Down Expand Up @@ -352,7 +350,7 @@ hqDefine("cloudcare/js/formplayer/app", [
});

if (options.allowedHost) {
hqRequire(["cloudcare/js/formplayer/hq_events"], function (HQEvents) {
import("cloudcare/js/formplayer/hq_events").then(function (HQEvents) {
window.addEventListener(
"message",
HQEvents.Receiver(options.allowedHost),
Expand Down Expand Up @@ -402,7 +400,7 @@ hqDefine("cloudcare/js/formplayer/app", [
});

FormplayerFrontend.on('configureDebugger', function () {
hqRequire(["cloudcare/js/debugger/debugger"], function (Debugger) {
import("cloudcare/js/debugger/debugger").then(function (Debugger) {
var CloudCareDebugger = Debugger.CloudCareDebuggerMenu,
TabIDs = Debugger.TabIDs,
user = UsersModels.getCurrentUser(),
Expand Down
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
'use strict';

Check warning on line 1 in corehq/apps/cloudcare/static/cloudcare/js/formplayer/main.js

View workflow job for this annotation

GitHub Actions / Lint Javascript

'use strict' is unnecessary inside of modules
hqDefine("cloudcare/js/formplayer/main", [
'jquery',
'hqwebapp/js/initial_page_data',
'cloudcare/js/formplayer/app',
'cloudcare/js/sentry',
'commcarehq',
], function (
$,
initialPageData,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ hqDefine("cloudcare/js/formplayer/menus/utils", [

var handleLocationRequest = function (optionsFromLastRequest) {
var success = function (position) {
hqRequire(["cloudcare/js/formplayer/menus/controller"], function (MenusController) {
import("cloudcare/js/formplayer/menus/controller").then(function (MenusController) {
FormplayerFrontend.regions.getRegion('loadingProgress').empty();
recordPosition(position);
MenusController.selectMenu(optionsFromLastRequest);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -132,6 +132,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
navState: navState,
imageUrl: imageUri ? FormplayerFrontend.getChannel().request('resourceMap', imageUri, appId) : "",
audioUrl: audioUri ? FormplayerFrontend.getChannel().request('resourceMap', audioUri, appId) : "",
badgeText: this.options.model.attributes.badgeText,
menuIndex: this.menuIndex,
};
},
Expand Down Expand Up @@ -873,7 +874,7 @@ hqDefine("cloudcare/js/formplayer/menus/views", [
if (this.selectedCaseIds.length > this.maxSelectValue) {
let errorMessage = _.template(gettext("You have selected more than the maximum selection limit " +
"of <%- value %> . Please uncheck some values to continue."))({ value: this.maxSelectValue });
hqRequire(["hqwebapp/js/bootstrap5/alert_user"], function (alertUser) {
import("hqwebapp/js/bootstrap5/alert_user").then(function(alertUser) {
alertUser.alert_user(errorMessage, 'danger');
});
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ hqDefine("cloudcare/js/formplayer/users/views", [
var loginAsNextOptions = FormplayerFrontend.getChannel().request('getLoginAsNextOptions');
if (loginAsNextOptions) {
FormplayerFrontend.trigger("clearLoginAsNextOptions");
hqRequire(["cloudcare/js/formplayer/menus/controller"], function (MenusController) {
import("cloudcare/js/formplayer/menus/controller").then(function (MenusController) {
MenusController.selectMenu(loginAsNextOptions);
});
} else {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
'use strict';

Check warning on line 1 in corehq/apps/cloudcare/static/cloudcare/js/formplayer/utils/calendar-picker-translations.js

View workflow job for this annotation

GitHub Actions / Lint Javascript

'use strict' is unnecessary inside of modules
hqDefine('cloudcare/js/formplayer/utils/calendar-picker-translations', [
'jquery',
'calendars/dist/js/jquery.plugin',
'calendars/dist/js/jquery.calendars',
Comment on lines 1 to +4
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Transition from hqDefine to ES6 imports needed

According to the PR objectives, we should be transitioning from hqRequire to webpack imports. Please update the module definition to use ES6 imports.

Here's how to refactor this:

-hqDefine('cloudcare/js/formplayer/utils/calendar-picker-translations', [
-    'jquery',
-    'calendars/dist/js/jquery.plugin',
-    'calendars/dist/js/jquery.calendars',
+import $ from 'jquery';
+import 'calendars/dist/js/jquery.plugin';
+import 'calendars/dist/js/jquery.calendars';

Committable suggestion skipped: line range outside the PR's diff.

'calendars/dist/js/jquery.calendars.picker',
'calendars/dist/js/jquery.calendars.ethiopian',
'calendars/dist/js/jquery.calendars.plus',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ hqDefine("cloudcare/js/formplayer/utils/utils", [
}
}

hqRequire(["cloudcare/js/formplayer/app"], function (FormplayerFrontend) {
import("cloudcare/js/formplayer/app").then(function (FormplayerFrontend) {
if (!FormplayerFrontend.syncInterval) {
FormplayerFrontend.syncInterval = setInterval(function () {
const urlObject = Utils.currentUrlToObject(),
Expand All @@ -506,7 +506,7 @@ hqDefine("cloudcare/js/formplayer/utils/utils", [
}

function stopSyncInterval() {
hqRequire(["cloudcare/js/formplayer/app"], function (FormplayerFrontend) {
import("cloudcare/js/formplayer/app").then(function (FormplayerFrontend) {
clearInterval(FormplayerFrontend.syncInterval);
FormplayerFrontend.syncInterval = null;
});
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
'use strict';

Check warning on line 1 in corehq/apps/cloudcare/static/cloudcare/js/preview_app/main.js

View workflow job for this annotation

GitHub Actions / Lint Javascript

'use strict' is unnecessary inside of modules
hqDefine("cloudcare/js/preview_app/main", [
'jquery',
'underscore',
Expand All @@ -6,6 +6,7 @@
'cloudcare/js/sentry',
'cloudcare/js/preview_app/preview_app',
'cloudcare/js/preview_app/dragscroll', // for .dragscroll elements
'commcarehq',
], function (
$,
_,
Expand Down
6 changes: 3 additions & 3 deletions corehq/apps/cloudcare/static/cloudcare/js/sentry.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
'use strict';

Check warning on line 1 in corehq/apps/cloudcare/static/cloudcare/js/sentry.js

View workflow job for this annotation

GitHub Actions / Lint Javascript

'use strict' is unnecessary inside of modules
hqDefine('cloudcare/js/sentry', [
'hqwebapp/js/initial_page_data',
'sentry_browser',
'sentry_captureconsole', // needed for Sentry.Integrations.CaptureConsole
], function (
initialPageData,
Sentry
Sentry,
SentryCaptureConsole
) {

let initSentry = function () {
const sentryConfig = initialPageData.get('sentry');

Expand All @@ -27,7 +27,7 @@
dom: false,
console: false,
}),
new Sentry.Integrations.CaptureConsole({
new SentryCaptureConsole.Integrations.CaptureConsole({
levels: ["error"],
}),
],
Expand Down
9 changes: 3 additions & 6 deletions corehq/apps/cloudcare/static/cloudcare/js/utils.js
Original file line number Diff line number Diff line change
Expand Up @@ -148,14 +148,11 @@ hqDefine('cloudcare/js/utils', [
};

var showProminentLoading = function () {
hqRequire([
"cloudcare/js/formplayer/app",
"cloudcare/js/formplayer/layout/views/progress_bar",
], function (FormplayerFrontend, ProgressBar) {
import("cloudcare/js/formplayer/app").then(function (FormplayerFrontend) {
setTimeout(function () {
const formplayerQueryInProgress = sessionStorage.formplayerQueryInProgress && JSON.parse(sessionStorage.formplayerQueryInProgress);
if (formplayerQueryInProgress) {
const progressView = ProgressBar({
const progressView = new ProgressBar({
progressMessage: gettext("Loading..."),
});
if (!FormplayerFrontend.regions) {
Expand Down Expand Up @@ -249,7 +246,7 @@ hqDefine('cloudcare/js/utils', [
if (toggles.toggleEnabled('USE_PROMINENT_PROGRESS_BAR')) {
$('#breadcrumb-region').css('z-index', '');
clearInterval(sessionStorage.progressIncrementInterval);
hqRequire(["cloudcare/js/formplayer/app"], function (FormplayerFrontend) {
import("cloudcare/js/formplayer/app").then(function (FormplayerFrontend) {
const progressView = FormplayerFrontend.regions.getRegion('loadingProgress').currentView;
if (progressView) {
progressView.setProgress(100, 100, 200);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
{% endcompress %}
{% endblock %}

{% requirejs_main_b5 "cloudcare/js/formplayer/main" %}
{% js_entry "cloudcare/js/formplayer/main" %}

{% block js %} {{ block.super }}
{% include "cloudcare/partials/dependencies.html" %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,6 @@
{% include 'cloudcare/partials/grid_view/single_app.html' %}

{% include 'cloudcare/partials/menu/audio.html' %}
{% include 'cloudcare/partials/menu/badge.html' %}
{% include 'cloudcare/partials/menu/breadcrumbs.html' %}
{% include 'cloudcare/partials/menu/dropdown.html' %}
{% include 'cloudcare/partials/menu/grid.html' %}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@
<td class="module-column module-column-icon">
<% if (imageUrl) { %>
<div class="module-icon-image badge-container" style="background-image: url('<%- imageUrl %>');">
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace duplicate IDs with classes for badge elements.

The same ID 'module-badge' is used multiple times, which violates HTML specifications. This issue is consistent across all menu templates (row.html, grid_item.html, and audio.html).

Apply this change to both badge elements:

-      <span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
+      <span class="module-badge badge bg-dark rounded-pill"><%- badgeText %></span>

Also applies to: 10-10

</div>
<% } else { %>
<div class="module-icon-container badge-container">
<i class="fa fa-pencil module-icon" aria-hidden="true"></i>
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
</div>
<% } %>
</td>
Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div>
<% if (imageUrl) { %>
<div class="gridicon badge-container" style="background-image: url('<%- imageUrl %>');">
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace duplicate IDs with classes for badge elements.

The same ID 'module-badge' is used multiple times, which violates HTML specifications. Convert to a class to maintain proper HTML semantics while preserving the shared styling.

Apply this change to both badge elements:

-      <span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
+      <span class="module-badge badge bg-dark rounded-pill"><%- badgeText %></span>

Also applies to: 14-14

</div>
<% } else { %>
<div class="gridicon gridicon-circle badge-container">
Expand All @@ -11,7 +11,7 @@
<% } else { %>
<i class="fa fa-folder gridicon-icon" aria-hidden="true"></i>
<% } %>
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
</div>
<% } %>
<div class="module-column-name text-center">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<td class="module-column module-column-icon">
<% if (imageUrl) { %>
<div class="module-icon-image badge-container" style="background-image: url('<%- imageUrl %>');">
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Replace duplicate IDs with classes for badge elements.

Using the same ID 'module-badge' multiple times in the template violates HTML specifications, as IDs must be unique within a document. Since these badges appear to share the same styling, convert the ID to a class.

Apply this change to both badge elements:

-      <span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
+      <span class="module-badge badge bg-dark rounded-pill"><%- badgeText %></span>

Also applies to: 14-14

</div>
<% } else { %>
<div class="module-icon-container badge-container">
Expand All @@ -11,7 +11,7 @@
<% } else { %>
<i class="fa fa-folder module-icon" aria-hidden="true"></i>
<% } %>
<%= _.template($('#maybe-custom-badge-template').text())(arguments[0]) %>{# maybe-custom-badge-template output is already escaped #}
<span id="module-badge" class="badge bg-dark rounded-pill"><%- badgeText %></span>
</div>
<% } %>
</td>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
{% load compress %}
{% load statici18n %}

{% requirejs_main_b5 "cloudcare/js/preview_app/main" %}
{% js_entry "cloudcare/js/preview_app/main" %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
Expand Down Expand Up @@ -51,13 +51,14 @@
<script src="{% statici18n LANGUAGE_CODE %}"></script> {# DO NOT COMPRESS #}

{% include "hqwebapp/partials/requirejs.html" %}
{% include "hqwebapp/partials/webpack.html" %}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it fine to be including both of these? Seems like it should be one or the other.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's not harmful, because all the logic in requirejs.html checks for a requirejs_main value, but yes it can be removed, I just missed it. ff214d8


<style id="list-cell-layout-style"></style>
<!-- For Formplayer's app preview -->

{# This is fine as an inline script; it'll be removed once form designer is migrated to RequireJS #}
{# This is fine as an inline script; it'll be removed once all of HQ is using webpack #}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🤣

<script>
window.USE_REQUIREJS = true;
window.USE_WEBPACK = true;
</script>
</head>
<body>
Expand All @@ -77,6 +78,7 @@
{# do not override this block, use initial_page_data template tag to populate #}
{% endblock %}
</div>
{% registerurl 'notifications_service' %}
<div class="commcarehq-urls" class="d-none">
{% block registered_urls %}
{# do not override this block, use registerurl template tag to populate #}
Expand Down
13 changes: 12 additions & 1 deletion webpack/webpack.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,17 @@ module.exports = {
},
},

{
test: /mapbox\.js\/dist\/mapbox/,
loader: "exports-loader",
options: {
type: "commonjs",
exports: {
syntax: "single",
name: "L",
},
},
},
{
test: /nvd3\/nv\.d3\.min/,
loader: "exports-loader",
Expand All @@ -80,7 +91,7 @@ module.exports = {
},
},
{
test: /sentry\.browser/,
test: /sentry\/js\/sentry/,
loader: "exports-loader",
options: {
type: "commonjs",
Expand Down
Loading