remove extension registry from window

2022-06-09 10:17:10 +02:00
parent bd8395bf45
commit b5b3394595
3 changed files with 181 additions and 195 deletions
--- a/src/Umbraco.Web.UI.Client/src/app.ts
+++ b/src/Umbraco.Web.UI.Client/src/app.ts
@@ -3,78 +3,101 @@ import '@umbraco-ui/uui-css/dist/uui-css.css';

 import { UUIIconRegistryEssential } from '@umbraco-ui/uui';
 import { css, html, LitElement } from 'lit';
-import { customElement } from 'lit/decorators.js';
+import { customElement, state } from 'lit/decorators.js';

 import { getInitStatus } from './core/api/fetcher';
 import { UmbContextProviderMixin } from './core/context';
-
-const routes = [
-  {
-    path: 'login',
-    component: () => import('./auth/login/login.element'),
-  },
-  {
-    path: 'install',
-    component: () => import('./installer/installer.element'),
-  },
-  {
-    path: '**',
-    component: () => import('./backoffice/backoffice.element'),
-  },
-];
+import { UmbExtensionManifest, UmbExtensionManifestCore, UmbExtensionRegistry } from './core/extension';
+import { internalManifests } from './temp-internal-manifests';

@customElement('umb-app')
 export class UmbApp extends UmbContextProviderMixin(LitElement) {
  static styles = css`
    :host,
-    #outlet {
+    #router-slot {
      display: block;
      width: 100%;
      height: 100vh;
    }
  `;

+  @state()
+  private _routes = [
+    {
+      path: 'login',
+      component: () => import('./auth/login/login.element'),
+    },
+    {
+      path: 'install',
+      component: () => import('./installer/installer.element'),
+    },
+    {
+      path: '**',
+      component: () => import('./backoffice/backoffice.element'),
+    },
+  ];
+
+  private _extensionRegistry: UmbExtensionRegistry = new UmbExtensionRegistry();
  private _iconRegistry: UUIIconRegistryEssential = new UUIIconRegistryEssential();
  private _isInstalled = false;

  constructor() {
    super();
-    this._iconRegistry.attach(this);
+    this._setup();
+  }

-    const { extensionRegistry } = window.Umbraco;
-    this.provideContext('umbExtensionRegistry', extensionRegistry);
+  private async _setup () {
+    this._iconRegistry.attach(this);
+    this.provideContext('umbExtensionRegistry', this._extensionRegistry);
+
+    await this._registerExtensionManifestsFromServer();
+    await this._registerInternalManifests();
+    await this._setInitStatus();
+    this._redirect();
+  }
+
+  private async _setInitStatus() {
+    try {
+      const { data } = await getInitStatus({});
+      this._isInstalled = data.installed;
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  private _redirect () {
+    if (!this._isInstalled) {
+      history.pushState(null, '', '/install');
+      return;
+    }
+
+    if (this._isAuthorized()) {
+      history.pushState(null, '', window.location.pathname);
+    } else {
+      history.pushState(null, '', '/login');
+    }
  }

  private _isAuthorized(): boolean {
    return sessionStorage.getItem('is-authenticated') === 'true';
  }

-  protected async firstUpdated(): Promise<void> {
-    this.shadowRoot?.querySelector('router-slot')?.render();
+  private async _registerExtensionManifestsFromServer() {
+    // TODO: add schema and use fetcher
+    const res = await fetch('/umbraco/backoffice/manifests');
+    const { manifests } = await res.json();
+    manifests.forEach((manifest: UmbExtensionManifest) => this._extensionRegistry.register(manifest));
+  };

-    try {
-      const { data } = await getInitStatus({});
-
-      this._isInstalled = data.installed;
-
-      if (!this._isInstalled) {
-        history.pushState(null, '', '/install');
-        return;
-      }
-
-      if (!this._isAuthorized() || window.location.pathname === '/install') {
-        history.pushState(null, '', 'login');
-      } else {
-        const next = window.location.pathname === '/' ? '/section/content' : window.location.pathname;
-        history.pushState(null, '', next);
-      }
-    } catch (error) {
-      console.log(error);
-    }
+  private async _registerInternalManifests() {
+    // TODO: where do we get these from?  
+    internalManifests.forEach((manifest: UmbExtensionManifestCore) =>
+      this._extensionRegistry.register<UmbExtensionManifestCore>(manifest)
+    );
  }

  render() {
-    return html`<router-slot id="outlet" .routes=${routes}></router-slot>`;
+    return html`<router-slot id="router-slot" .routes=${this._routes}></router-slot>`;
  }
 }

--- a/src/Umbraco.Web.UI.Client/src/index.ts
+++ b/src/Umbraco.Web.UI.Client/src/index.ts
@@ -1,157 +1,5 @@
 import 'element-internals-polyfill';
 import { startMockServiceWorker } from './mocks/browser';
-import { UmbExtensionRegistry, UmbExtensionManifest, UmbExtensionManifestCore } from './core/extension';
-
-const extensionRegistry = new UmbExtensionRegistry();
-
-export interface Umbraco {
-  extensionRegistry: UmbExtensionRegistry;
-}
-
-declare global {
-  interface Window {
-    Umbraco: Umbraco;
-  }
-}
-
-window.Umbraco = {
-  extensionRegistry,
-};
-
-const registerExtensionManifestsFromServer = async () => {
-  // TODO: add schema and use fetcher
-  const res = await fetch('/umbraco/backoffice/manifests');
-  const { manifests } = await res.json();
-  manifests.forEach((manifest: UmbExtensionManifest) => extensionRegistry.register(manifest));
-};
-
-const registerInternalManifests = async () => {
-  // TODO: where do we get these from?
-  const manifests: Array<UmbExtensionManifestCore> = [
-    {
-      type: 'section',
-      alias: 'Umb.Section.Content',
-      name: 'Content',
-      elementName: 'umb-content-section',
-      js: () => import('./backoffice/sections/content/content-section.element'),
-      meta: {
-        pathname: 'content', // TODO: how to we want to support pretty urls?
-        weight: 50,
-      },
-    },
-    {
-      type: 'section',
-      alias: 'Umb.Section.Members',
-      name: 'Members',
-      elementName: 'umb-members-section',
-      meta: {
-        pathname: 'members',
-        weight: 30,
-      },
-    },
-    {
-      type: 'section',
-      alias: 'Umb.Section.Settings',
-      name: 'Settings',
-      elementName: 'umb-settings-section',
-      js: () => import('./backoffice/sections/settings/settings-section.element'),
-      meta: {
-        pathname: 'settings', // TODO: how to we want to support pretty urls?
-        weight: 20,
-      },
-    },
-    {
-      type: 'dashboard',
-      alias: 'Umb.Dashboard.Welcome',
-      name: 'Welcome',
-      elementName: 'umb-dashboard-welcome',
-      js: () => import('./backoffice/dashboards/dashboard-welcome.element'),
-      meta: {
-        sections: ['Umb.Section.Content'],
-        pathname: 'welcome', // TODO: how to we want to support pretty urls?
-        weight: 20,
-      },
-    },
-    {
-      type: 'dashboard',
-      alias: 'Umb.Dashboard.RedirectManagement',
-      name: 'Redirect Management',
-      elementName: 'umb-dashboard-redirect-management',
-      js: () => import('./backoffice/dashboards/dashboard-redirect-management.element'),
-      meta: {
-        sections: ['Umb.Section.Content'],
-        pathname: 'redirect-management', // TODO: how to we want to support pretty urls?
-        weight: 10,
-      },
-    },
-    {
-      type: 'propertyEditorUI',
-      alias: 'Umb.PropertyEditorUI.Text',
-      name: 'Text',
-      js: () => import('./backoffice/property-editors/property-editor-text.element'),
-      meta: {
-        icon: 'document',
-        group: 'common',
-      },
-    },
-    {
-      type: 'propertyEditorUI',
-      alias: 'Umb.PropertyEditorUI.Textarea',
-      name: 'Textarea',
-      elementName: 'umb-property-editor-textarea',
-      js: () => import('./backoffice/property-editors/property-editor-textarea.element'),
-      meta: {
-        icon: 'document',
-        group: 'common',
-      },
-    },
-    {
-      type: 'propertyEditorUI',
-      alias: 'Umb.PropertyEditorUI.ContextExample',
-      name: 'Context Example',
-      js: () => import('./backoffice/property-editors/property-editor-context-example.element'),
-      meta: {
-        icon: 'document',
-        group: 'common',
-      },
-    },
-    {
-      type: 'editorView',
-      alias: 'Umb.EditorView.ContentEdit',
-      name: 'Content',
-      elementName: 'umb-editor-view-node-edit',
-      js: () => import('./backoffice/editor-views/editor-view-node-edit.element'),
-      meta: {
-        pathname: 'content',
-        weight: 100,
-        icon: 'document',
-      },
-    },
-    {
-      type: 'editorView',
-      alias: 'Umb.EditorView.ContentInfo',
-      name: 'Info',
-      elementName: 'umb-editor-view-node-info',
-      js: () => import('./backoffice/editor-views/editor-view-node-info.element'),
-      meta: {
-        pathname: 'info',
-        weight: 90,
-        icon: 'info',
-      }
-    }
-  ];
-
-  manifests.forEach((manifest: UmbExtensionManifestCore) =>
-    extensionRegistry.register<UmbExtensionManifestCore>(manifest)
-  );
-};
-
-const setup = async () => {
-  await registerExtensionManifestsFromServer();
-  await registerInternalManifests();
-  // TODO: implement loading of "startUp" extensions
-  await import('./app');
-};

 startMockServiceWorker();
-setup();
+import('./app');
--- a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
+++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts
@@ -0,0 +1,115 @@
+import { UmbExtensionManifestCore } from './core/extension';
+
+export const internalManifests: Array<UmbExtensionManifestCore> = [
+  {
+    type: 'section',
+    alias: 'Umb.Section.Content',
+    name: 'Content',
+    elementName: 'umb-content-section',
+    js: () => import('./backoffice/sections/content/content-section.element'),
+    meta: {
+      pathname: 'content', // TODO: how to we want to support pretty urls?
+      weight: 50,
+    },
+  },
+  {
+    type: 'section',
+    alias: 'Umb.Section.Members',
+    name: 'Members',
+    elementName: 'umb-members-section',
+    meta: {
+      pathname: 'members',
+      weight: 30,
+    },
+  },
+  {
+    type: 'section',
+    alias: 'Umb.Section.Settings',
+    name: 'Settings',
+    elementName: 'umb-settings-section',
+    js: () => import('./backoffice/sections/settings/settings-section.element'),
+    meta: {
+      pathname: 'settings', // TODO: how to we want to support pretty urls?
+      weight: 20,
+    },
+  },
+  {
+    type: 'dashboard',
+    alias: 'Umb.Dashboard.Welcome',
+    name: 'Welcome',
+    elementName: 'umb-dashboard-welcome',
+    js: () => import('./backoffice/dashboards/dashboard-welcome.element'),
+    meta: {
+      sections: ['Umb.Section.Content'],
+      pathname: 'welcome', // TODO: how to we want to support pretty urls?
+      weight: 20,
+    },
+  },
+  {
+    type: 'dashboard',
+    alias: 'Umb.Dashboard.RedirectManagement',
+    name: 'Redirect Management',
+    elementName: 'umb-dashboard-redirect-management',
+    js: () => import('./backoffice/dashboards/dashboard-redirect-management.element'),
+    meta: {
+      sections: ['Umb.Section.Content'],
+      pathname: 'redirect-management', // TODO: how to we want to support pretty urls?
+      weight: 10,
+    },
+  },
+  {
+    type: 'propertyEditorUI',
+    alias: 'Umb.PropertyEditorUI.Text',
+    name: 'Text',
+    js: () => import('./backoffice/property-editors/property-editor-text.element'),
+    meta: {
+      icon: 'document',
+      group: 'common',
+    },
+  },
+  {
+    type: 'propertyEditorUI',
+    alias: 'Umb.PropertyEditorUI.Textarea',
+    name: 'Textarea',
+    elementName: 'umb-property-editor-textarea',
+    js: () => import('./backoffice/property-editors/property-editor-textarea.element'),
+    meta: {
+      icon: 'document',
+      group: 'common',
+    },
+  },
+  {
+    type: 'propertyEditorUI',
+    alias: 'Umb.PropertyEditorUI.ContextExample',
+    name: 'Context Example',
+    js: () => import('./backoffice/property-editors/property-editor-context-example.element'),
+    meta: {
+      icon: 'document',
+      group: 'common',
+    },
+  },
+  {
+    type: 'editorView',
+    alias: 'Umb.EditorView.ContentEdit',
+    name: 'Content',
+    elementName: 'umb-editor-view-node-edit',
+    js: () => import('./backoffice/editor-views/editor-view-node-edit.element'),
+    meta: {
+      pathname: 'content',
+      weight: 100,
+      icon: 'document',
+    },
+  },
+  {
+    type: 'editorView',
+    alias: 'Umb.EditorView.ContentInfo',
+    name: 'Info',
+    elementName: 'umb-editor-view-node-info',
+    js: () => import('./backoffice/editor-views/editor-view-node-info.element'),
+    meta: {
+      pathname: 'info',
+      weight: 90,
+      icon: 'info',
+    }
+  }
+];