lazy load sections

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) {

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;
 }

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 () => {