[FEATURE] Introduce backend module web component router
A custom Lit-based web componenent router is added which reflects module URLs into the browser adress bar and at the same time prepares for native web components to be used as future iframe module alternatives. Such modules will be implemented as JavaScript modules, that provide an implementation for a custom HTML Web Component. The first of such components (added within this change) is a wrapper component for traditional iframe-based backend modules. Module state changes are advertised via DOM events and propagated to the browser address bar, browser title, and the module menu. Adress bar updates ================== The module URL to address bar synchronisation enables sharable module deeplinks to be copied from the browser address bar. Whenever a component advertises a state change (e.g. iframe change), a sharable deep link is generated and shown in the browser adressbar. Technical preparation for the required deeplinking has been added with #93674. History Management ================== Browser history state is managed via the iframe history context of the content module frame (that is unlike other modern Single Page Applications which use history.pushState and history.replaceState). This approach required some synchronisation work, but there are technical limitations that prevent a combination of iframe history updates in combination for newer API like history.pushState. (The limitation is: state added by history.pushState is skipped by iframe history handling). The advantage of this compromise is: All "traditional" modules will preserve their state handling as before, no breaking/behavioral changes for iframe-based modules. Routing ======= The router uses two parameters to perform routing: * module – Module name as defined in ext_tables.php * endpoint – (json) api to be used by the component (= module URL) The module attribute is used to perform the actual routing to the respective backend module component, while the endpoint attribute serves as API to parse/fetch the state of the module. A named slot is used to switch between the available module components. That means only one of the routers childNodes will be visible at a time, while all modules are actively attached to the DOM. State is therefore preserved when switching between modules and the iframe is always kept active, allowing to act as history state-container (as described in "History Management"). Example of two modules that are attached to the DOM, where only <typo3-configuration-module> is visible as the <slot> in the shadow root puts a reference to this childNode: <typo3-backend-module-router module="system_config" endpoint="…"> #shadow-root <slot name="TYPO3/CMS/Lowlevel/ConfigurationModule"></slot> <typo3-iframe-module endpoint="…" slot="TYPO3/CMS/Backend/Module/Iframe"></…> <typo3-configuration-module endpoint="…" slot="TYPO3/CMS/Lowlevel/ConfigurationModule"></…> </typo3-backend-module-router> Note: The "TYPO3/CMS/Lowlevel/ConfigurationModule" component is not yet part of this commit, and only serves as an example (will be implemented later on). The slot name is resolved from the module key. Out of scope for this patch (will follow later) =============================================== * Link based routing interception via data-module tag for anchor tags. To be added as an additional convenience API on top of the router module and endpoint attribute (current API). * Convenience components for module layout * Integration into shortcut handler * Install-tool URLs do not reflect into addressbar right now Install-tool modules are redirected, therefore url updates can not be mapped as backend URLs right now Solution will probably be to integrate the install tool components as web component into the backend. Resolves: #93988 Related: #93674 Releases: master Change-Id: I682e89649b597c8c74b6a0a8f198f6bcf5bbc347 Reviewed-on: https://review.typo3.org/c/Packages/TYPO3.CMS/+/67464 Tested-by:core-ci <typo3@b13.com> Tested-by:
Oliver Bartsch <bo@cedev.de> Tested-by:
Andreas Fernandez <a.fernandez@scripting-base.de> Tested-by:
Benjamin Franzke <bfr@qbus.de> Reviewed-by:
Oliver Bartsch <bo@cedev.de> Reviewed-by:
Andreas Fernandez <a.fernandez@scripting-base.de> Reviewed-by:
Benjamin Franzke <bfr@qbus.de>
Showing
- Build/Sources/Sass/scaffold/_scaffold.scss 3 additions, 0 deletionsBuild/Sources/Sass/scaffold/_scaffold.scss
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Enum/Viewport/ScaffoldIdentifier.ts 1 addition, 0 deletions...ces/Public/TypeScript/Enum/Viewport/ScaffoldIdentifier.ts
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module.ts 64 additions, 0 deletions.../TypeScript/backend/Resources/Public/TypeScript/Module.ts
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Iframe.ts 122 additions, 0 deletions...ript/backend/Resources/Public/TypeScript/Module/Iframe.ts
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Module/Router.ts 208 additions, 0 deletions...ript/backend/Resources/Public/TypeScript/Module/Router.ts
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/ModuleMenu.ts 48 additions, 47 deletions...eScript/backend/Resources/Public/TypeScript/ModuleMenu.ts
- Build/Sources/TypeScript/backend/Resources/Public/TypeScript/Viewport/ContentContainer.ts 14 additions, 11 deletions.../Resources/Public/TypeScript/Viewport/ContentContainer.ts
- Build/types/TYPO3/index.d.ts 0 additions, 1 deletionBuild/types/TYPO3/index.d.ts
- typo3/sysext/backend/Classes/Controller/BackendController.php 13 additions, 10 deletions...3/sysext/backend/Classes/Controller/BackendController.php
- typo3/sysext/backend/Classes/Controller/StateTrackerController.php 33 additions, 0 deletions...ext/backend/Classes/Controller/StateTrackerController.php
- typo3/sysext/backend/Classes/Domain/Model/Module/BackendModule.php 25 additions, 0 deletions...ext/backend/Classes/Domain/Model/Module/BackendModule.php
- typo3/sysext/backend/Classes/Domain/Repository/Module/BackendModuleRepository.php 9 additions, 0 deletions...sses/Domain/Repository/Module/BackendModuleRepository.php
- typo3/sysext/backend/Classes/Module/ModuleLoader.php 6 additions, 0 deletionstypo3/sysext/backend/Classes/Module/ModuleLoader.php
- typo3/sysext/backend/Configuration/Backend/Routes.php 7 additions, 0 deletionstypo3/sysext/backend/Configuration/Backend/Routes.php
- typo3/sysext/backend/Resources/Private/Templates/Backend/Main.html 1 addition, 1 deletion...ext/backend/Resources/Private/Templates/Backend/Main.html
- typo3/sysext/backend/Resources/Private/Templates/ModuleMenu/Main.html 1 addition, 0 deletions.../backend/Resources/Private/Templates/ModuleMenu/Main.html
- typo3/sysext/backend/Resources/Public/Css/backend.css 1 addition, 1 deletiontypo3/sysext/backend/Resources/Public/Css/backend.css
- typo3/sysext/backend/Resources/Public/JavaScript/Enum/Viewport/ScaffoldIdentifier.js 1 addition, 1 deletion...ces/Public/JavaScript/Enum/Viewport/ScaffoldIdentifier.js
- typo3/sysext/backend/Resources/Public/JavaScript/Module.js 13 additions, 0 deletionstypo3/sysext/backend/Resources/Public/JavaScript/Module.js
- typo3/sysext/backend/Resources/Public/JavaScript/Module/Iframe.js 23 additions, 0 deletions...sext/backend/Resources/Public/JavaScript/Module/Iframe.js
Please register or sign in to comment