From b5b339459541a7f92045a75cbd8da96d427dbcb3 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 9 Jun 2022 10:17:10 +0200 Subject: [PATCH] remove extension registry from window --- src/Umbraco.Web.UI.Client/src/app.ts | 107 +++++++----- src/Umbraco.Web.UI.Client/src/index.ts | 154 +----------------- .../src/temp-internal-manifests.ts | 115 +++++++++++++ 3 files changed, 181 insertions(+), 195 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts diff --git a/src/Umbraco.Web.UI.Client/src/app.ts b/src/Umbraco.Web.UI.Client/src/app.ts index cdead9267e..5af77604d0 100644 --- 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 { - 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(manifest) + ); } render() { - return html``; + return html``; } } diff --git a/src/Umbraco.Web.UI.Client/src/index.ts b/src/Umbraco.Web.UI.Client/src/index.ts index b0816c5567..afe9f82878 100644 --- 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 = [ - { - 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(manifest) - ); -}; - -const setup = async () => { - await registerExtensionManifestsFromServer(); - await registerInternalManifests(); - // TODO: implement loading of "startUp" extensions - await import('./app'); -}; startMockServiceWorker(); -setup(); \ No newline at end of file +import('./app'); \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts new file mode 100644 index 0000000000..19d93b6aa0 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/temp-internal-manifests.ts @@ -0,0 +1,115 @@ +import { UmbExtensionManifestCore } from './core/extension'; + +export const internalManifests: Array = [ + { + 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', + } + } +]; \ No newline at end of file