From 8321602eac792013dd4972aa158b326f4df271f4 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <madsr@hey.com>
Date: Wed, 25 May 2022 22:04:44 +0200
Subject: [PATCH] lazy load sections

---
 .../src/backoffice/backoffice-main.element.ts    | 16 +++++++---------
 .../src/core/extension/extension.registry.ts     |  2 +-
 src/Umbraco.Web.UI.Client/src/index.ts           |  8 ++++----
 3 files changed, 12 insertions(+), 14 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
index 4d6d81499b..a1273643ed 100644
--- a/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/backoffice/backoffice-main.element.ts
@@ -6,13 +6,7 @@ import { Subscription } from 'rxjs';
 
 import { UmbContextConsumerMixin } from '../core/context';
 import { UmbSectionContext } from '../section.context';
-
-import { UmbExtensionManifest, UmbManifestSectionMeta } from '../core/extension';
-
-// TODO: lazy load these. How to we handle dynamic import of our typescript file?
-import '../content/content-section.element';
-import '../media/media-section.element';
-import '../settings/settings-section.element';
+import { UmbExtensionManifest } from '../core/extension';
 
 @defineElement('umb-backoffice-main')
 export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
@@ -59,8 +53,12 @@ export class UmbBackofficeMain extends UmbContextConsumerMixin(LitElement) {
     if (!section) return;
 
     // TODO: How do we handle dynamic imports of our files?
-    if (section.js) {
-      await import(/* @vite-ignore */ section.js);
+    if (typeof section.js === 'string') {
+      await import(/* @vite-ignore */section.js);
+    }
+
+    if (typeof section.js === 'function') {
+      await section.js();
     }
 
     if (section.elementName) {
diff --git a/src/Umbraco.Web.UI.Client/src/core/extension/extension.registry.ts b/src/Umbraco.Web.UI.Client/src/core/extension/extension.registry.ts
index 24653215c0..ad082f3051 100644
--- a/src/Umbraco.Web.UI.Client/src/core/extension/extension.registry.ts
+++ b/src/Umbraco.Web.UI.Client/src/core/extension/extension.registry.ts
@@ -8,7 +8,7 @@ export interface UmbExtensionManifestBase {
   type: string;
   alias: string;
   name: string;
-  js?: string;
+  js?: string | (() => Promise<unknown>);
   elementName?: string;
   meta: unknown;
 }
diff --git a/src/Umbraco.Web.UI.Client/src/index.ts b/src/Umbraco.Web.UI.Client/src/index.ts
index 3526e459ed..03948ab085 100644
--- a/src/Umbraco.Web.UI.Client/src/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/index.ts
@@ -32,6 +32,7 @@ const registerInternalManifests = async () => {
       alias: 'Umb.Section.Content',
       name: 'Content',
       elementName: 'umb-content-section',
+      js: () => import('./content/content-section.element'),
       meta: {
         weight: 50
       }
@@ -41,6 +42,7 @@ const registerInternalManifests = async () => {
       alias: 'Umb.Section.Media',
       name: 'Media',
       elementName: 'umb-media-section',
+      js: () => import('./media/media-section.element'),
       meta: {
         weight: 40
       }
@@ -59,6 +61,7 @@ const registerInternalManifests = async () => {
       alias: 'Umb.Section.Settings',
       name: 'Settings',
       elementName: 'umb-settings-section',
+      js: () => import('./settings/settings-section.element'),
       meta: {
         weight: 20
       }
@@ -66,9 +69,6 @@ const registerInternalManifests = async () => {
   ];
   manifests.forEach((manifest: UmbExtensionManifest) => extensionRegistry.register(manifest));
 
-
-
-  
   extensionRegistry.register({
     type: 'propertyEditor',
     alias: 'Umb.PropertyEditor.MyPropertyEditor',
@@ -77,7 +77,7 @@ const registerInternalManifests = async () => {
     meta: {
       test: 20
     }
-  })
+  });
 }
 
 const setup = async () => {