(refactor) Improve code splits further across apps

packages/esm-active-visits-app/src/index.ts

@@ -1,7 +1,5 @@
 import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import activeVisitsComponent from './active-visits-widget/active-visits.component';
-import visitDetailComponent from './visits-summary/visit-detail.component';
 
 const moduleName = '@openmrs/esm-active-visits-app';
 
@@ -16,9 +14,9 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const activeVisits = getSyncLifecycle(activeVisitsComponent, options);
+export const activeVisits = getAsyncLifecycle(() => import('./active-visits-widget/active-visits.component'), options);
 
-export const visitDetail = getSyncLifecycle(visitDetailComponent, options);
+export const visitDetail = getAsyncLifecycle(() => import('./visits-summary/visit-detail.component'), options);
 
 export const homeActiveVisitsTile = getAsyncLifecycle(
   () => import('./home-page-tiles/active-visits-metric-tile/active-visits-tile.component'),

packages/esm-bed-management-app/src/index.ts

@@ -1,4 +1,4 @@
-import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import { createLeftPanelLink } from './left-panel-link.component';
 

packages/esm-patient-list-management-app/src/index.ts

@@ -3,9 +3,6 @@ import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
 import { dashboardMeta } from './dashboard.meta';
 import { setupOffline } from './offline';
-import rootComponent from './root.component';
-import listDetailsTableComponent from './list-details-table/list-details-table.component';
-import addPatientToPatientListMenuItemComponent from './add-patient-to-patient-list-menu-item.component';
 
 const moduleName = '@openmrs/esm-patient-list-management-app';
 
@@ -21,21 +18,24 @@ export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
 }
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export const addPatientToListModal = getAsyncLifecycle(() => import('./add-patient/add-patient.component'), {
   featureName: 'patient-actions-modal',
   moduleName,
 });
 
-export const addPatientToPatientListMenuItem = getSyncLifecycle(addPatientToPatientListMenuItemComponent, {
-  featureName: 'patient-actions-slot',
-  moduleName,
-});
+export const addPatientToPatientListMenuItem = getAsyncLifecycle(
+  () => import('./add-patient-to-patient-list-menu-item.component'),
+  {
+    featureName: 'patient-actions-slot',
+    moduleName,
+  },
+);
 
 export const patientListDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
 
-export const listDetailsTable = getSyncLifecycle(listDetailsTableComponent, {
+export const listDetailsTable = getAsyncLifecycle(() => import('./list-details-table/list-details-table.component'), {
   featureName: 'patient-table',
   moduleName,
 });

packages/esm-patient-registration-app/src/add-patient-link.extension.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { HeaderGlobalAction } from '@carbon/react';
 import { UserFollow } from '@carbon/react/icons';
 import { navigate } from '@openmrs/esm-framework';
 import styles from './add-patient-link.scss';
-import { useTranslation } from 'react-i18next';
 
 export default function Root() {
   const { t } = useTranslation();

packages/esm-patient-registration-app/src/index.ts

@@ -1,11 +1,8 @@
-import { registerBreadcrumbs, defineConfigSchema, getAsyncLifecycle, getSyncLifecycle } from '@openmrs/esm-framework';
+import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
 import { esmPatientRegistrationSchema } from './config-schema';
 import { moduleName, patientRegistration } from './constants';
 import { setupOffline } from './offline';
-import rootComponent from './root.component';
 import addPatientLinkComponent from './add-patient-link.extension';
-import editPatientDetailsButtonComponent from './widgets/edit-patient-details-button.component';
-import { PatientPhotoExtension } from './patient-photo.extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -41,23 +38,20 @@ export function startupApp() {
   setupOffline();
 }
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
-export const editPatient = getSyncLifecycle(rootComponent, {
-  featureName: 'edit-patient-details-form',
-  moduleName,
-});
+export const editPatient = getAsyncLifecycle(() => import('./root.component'), options);
 
 export const addPatientLink = getSyncLifecycle(addPatientLinkComponent, options);
 
 export const cancelPatientEditModal = getAsyncLifecycle(() => import('./widgets/cancel-patient-edit.modal'), options);
 
-export const patientPhotoExtension = getSyncLifecycle(PatientPhotoExtension, options);
+export const patientPhotoExtension = getAsyncLifecycle(() => import('./patient-photo.extension'), options);
 
-export const editPatientDetailsButton = getSyncLifecycle(editPatientDetailsButtonComponent, {
-  featureName: 'edit-patient-details',
-  moduleName,
-});
+export const editPatientDetailsButton = getAsyncLifecycle(
+  () => import('./widgets/edit-patient-details-button.component'),
+  options,
+);
 
 export const deleteIdentifierConfirmationModal = getAsyncLifecycle(
   () => import('./widgets/delete-identifier-confirmation.modal'),

packages/esm-patient-registration-app/src/patient-photo.extension.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { PatientPhoto, type PatientPhotoProps } from '@openmrs/esm-framework';
 
-export function PatientPhotoExtension(props: PatientPhotoProps) {
+function PatientPhotoExtension(props: PatientPhotoProps) {
   console.warn(
     'Using the patient-photo extension (or patient-photo-slot slot) is deprecated. Please use the PatientPhoto component from @openmrs/esm-framework.',
   );
   return <PatientPhoto {...props} />;
 }
+
+export default PatientPhotoExtension;

packages/esm-patient-search-app/src/index.ts

@@ -3,16 +3,11 @@ import {
   fetchCurrentPatient,
   fhirBaseUrl,
   getAsyncLifecycle,
-  getSyncLifecycle,
   makeUrl,
   messageOmrsServiceWorker,
   setupDynamicOfflineDataHandler,
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import rootComponent from './root.component';
-import patientSearchIconComponent from './patient-search-icon';
-import patientSearchButtonComponent from './patient-search-button/patient-search-button.component';
-import patientSearchBarComponent from './compact-patient-search-extension';
 
 const moduleName = '@openmrs/esm-patient-search-app';
 
@@ -23,15 +18,18 @@ const options = {
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
-export const patientSearchIcon = getSyncLifecycle(patientSearchIconComponent, options);
+export const patientSearchIcon = getAsyncLifecycle(() => import('./patient-search-icon'), options);
 
 // This extension renders the a Patient-Search Button, which when clicked, opens the search bar in an overlay.
-export const patientSearchButton = getSyncLifecycle(patientSearchButtonComponent, options);
+export const patientSearchButton = getAsyncLifecycle(
+  () => import('./patient-search-button/patient-search-button.component'),
+  options,
+);
 
 // This extension is not compatible with the tablet view.
-export const patientSearchBar = getSyncLifecycle(patientSearchBarComponent, options);
+export const patientSearchBar = getAsyncLifecycle(() => import('./compact-patient-search-extension'), options);
 
 export const patientSearchWorkspace = getAsyncLifecycle(
   () => import('./patient-search-workspace/patient-search.workspace'),

packages/esm-service-queues-app/src/index.ts

@@ -2,15 +2,6 @@ import { defineConfigSchema, getAsyncLifecycle, getSyncLifecycle, registerBreadc
 import { configSchema } from './config-schema';
 import { createDashboardLink } from './createDashboardLink.component';
 import { dashboardMeta } from './dashboard.meta';
-import rootComponent from './root.component';
-import queueTableByStatusMenuComponent from './queue-table/queue-table-by-status-menu.component';
-import appointmentListComponent from './queue-patient-linelists/scheduled-appointments-table.component';
-import queueListComponent from './queue-patient-linelists/queue-services-table.component';
-import outpatientSideNavComponent from './side-menu/side-menu.component';
-import homeDashboardComponent from './home.component';
-import patientInfoBannerSlotComponent from './patient-info/patient-info.component';
-import pastVisitSummaryComponent from './past-visit/past-visit.component';
-import VisitFormQueueFields from './create-queue-entry/queue-fields/visit-form-queue-fields.extension';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -21,19 +12,28 @@ const options = {
   moduleName,
 };
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
-export const queueTableByStatusMenu = getSyncLifecycle(queueTableByStatusMenuComponent, options);
+export const queueTableByStatusMenu = getAsyncLifecycle(
+  () => import('./queue-table/queue-table-by-status-menu.component'),
+  options,
+);
 
-export const appointmentsList = getSyncLifecycle(appointmentListComponent, options);
+export const appointmentsList = getAsyncLifecycle(
+  () => import('./queue-patient-linelists/scheduled-appointments-table.component'),
+  options,
+);
 
-export const queueList = getSyncLifecycle(queueListComponent, options);
+export const queueList = getAsyncLifecycle(
+  () => import('./queue-patient-linelists/queue-services-table.component'),
+  options,
+);
 
-export const outpatientSideNav = getSyncLifecycle(outpatientSideNavComponent, options);
+export const outpatientSideNav = getAsyncLifecycle(() => import('./side-menu/side-menu.component'), options);
 
 export const serviceQueuesDashboardLink = getSyncLifecycle(createDashboardLink(dashboardMeta), options);
 
-export const homeDashboard = getSyncLifecycle(homeDashboardComponent, options);
+export const homeDashboard = getAsyncLifecycle(() => import('./home.component'), options);
 
 export const editQueueEntryStatusModal = getAsyncLifecycle(
   () => import('./active-visits/change-status-dialog.component'),
@@ -43,7 +43,7 @@ export const editQueueEntryStatusModal = getAsyncLifecycle(
   },
 );
 
-export const patientInfoBannerSlot = getSyncLifecycle(patientInfoBannerSlotComponent, {
+export const patientInfoBannerSlot = getAsyncLifecycle(() => import('./patient-info/patient-info.component'), {
   featureName: 'patient info slot',
   moduleName,
 });
@@ -72,7 +72,7 @@ export const transitionQueueEntryStatusModal = getAsyncLifecycle(
   },
 );
 
-export const pastVisitSummary = getSyncLifecycle(pastVisitSummaryComponent, options);
+export const pastVisitSummary = getAsyncLifecycle(() => import('./past-visit/past-visit.component'), options);
 
 export const addProviderToRoomModal = getAsyncLifecycle(
   () => import('./add-provider-queue-room/add-provider-queue-room.component'),
@@ -147,7 +147,10 @@ export const addNewQueueServiceRoomWorkspace = getAsyncLifecycle(
   },
 );
 
-export const visitFormQueueFields = getSyncLifecycle(VisitFormQueueFields, options);
+export const visitFormQueueFields = getAsyncLifecycle(
+  () => import('./create-queue-entry/queue-fields/visit-form-queue-fields.extension'),
+  options,
+);
 
 export const createQueueEntryWorkspace = getAsyncLifecycle(
   () => import('./create-queue-entry/create-queue-entry.workspace'),

packages/esm-ward-app/src/index.ts

@@ -8,7 +8,6 @@ import {
 import { configSchema } from './config-schema';
 import { moduleName } from './constant';
 import { createDashboardLink } from './createDashboardLink.component';
-import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -17,7 +16,7 @@ const options = {
   moduleName,
 };
 
-export const root = getSyncLifecycle(rootComponent, options);
+export const root = getAsyncLifecycle(() => import('./root.component'), options);
 
 export const wardDashboardLink = getSyncLifecycle(createDashboardLink({ name: 'ward', title: 'wards' }), options);