feat: preview 2.0

.changeset/smooth-pans-talk.md

@@ -0,0 +1,6 @@
+---
+"@sap-ux-private/preview-middleware-client": patch
+"@sap-ux/preview-middleware": patch
+---
+
+Feature: Makes preview-middleware and preview-middleware-client ready for SAP UI5 2.0; considers the new sandbox2.js for the bootstrap.

packages/preview-middleware-client/src/flp/bootstrap.ts

@@ -0,0 +1,23 @@
+/**
+ * Calculates the script content for accessing the right sap/ushell/bootstrap sandbox.
+ */
+export default async function bootstrap(): Promise<void> {
+    var head = document.getElementsByTagName('head')[0];
+    if (head) {
+        await fetch('/resources/sap-ui-version.json')
+            .then((resp) => resp.json())
+            .then((json) => {
+                const version = json?.version;
+                const major = version ? parseInt(version.split('.')[0], 10) : 2;
+                var script = document.createElement('script');
+
+                script.src =
+                    major >= 2
+                        ? '/resources/sap/ushell/bootstrap/sandbox2.js'
+                        : '/test-resources/sap/ushell/bootstrap/sandbox.js';
+                script.id = 'sap-ushell-bootstrap';
+                script.type = 'text/javascript';
+                head.appendChild(script);
+            });
+    }
+}

packages/preview-middleware-client/src/flp/init.ts

@@ -7,6 +7,7 @@ import IconPool from 'sap/ui/core/IconPool';
 import ResourceBundle from 'sap/base/i18n/ResourceBundle';
 import AppState from 'sap/ushell/services/AppState';
 import { getManifestAppdescr } from '../adp/api-handler';
+import VersionInfo from 'sap/ui/VersionInfo';
 
 /**
  * SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
@@ -244,14 +245,15 @@ export async function init({
     const urlParams = new URLSearchParams(window.location.search);
     const container = sap?.ushell?.Container ?? (sap.ui.require('sap/ushell/Container') as typeof sap.ushell.Container);
     let scenario: string = '';
+    const { version } = (await VersionInfo.load()) as { version: string };
+
     // Register RTA if configured
     if (flex) {
         const flexSettings = JSON.parse(flex) as FlexSettings;
         scenario = flexSettings.scenario;
         container.attachRendererCreatedEvent(async function () {
             const lifecycleService = await container.getServiceAsync<AppLifeCycle>('AppLifeCycle');
             lifecycleService.attachAppLoaded((event) => {
-                const version = sap.ui.version;
                 const minor = parseInt(version.split('.')[1], 10);
                 const view = event.getParameter('componentInstance');
                 const flexSettings = JSON.parse(flex) as FlexSettings;
@@ -304,15 +306,23 @@ export async function init({
     const resourceBundle = await loadI18nResourceBundle(scenario as Scenario);
     setI18nTitle(resourceBundle);
     registerSAPFonts();
-    const renderer = await container.createRenderer(undefined, true);
+    const major = version ? parseInt(version.split('.')[0], 10) : 2;
+    const renderer =
+        major < 2
+            ? await container.createRenderer(undefined, true)
+            : await (container as any).createRendererInternal(undefined, true);
     renderer.placeAt('content');
 }
 
-const bootstrapConfig = document.getElementById('sap-ui-bootstrap');
-if (bootstrapConfig) {
-    init({
-        appUrls: bootstrapConfig.getAttribute('data-open-ux-preview-libs-manifests'),
-        flex: bootstrapConfig.getAttribute('data-open-ux-preview-flex-settings'),
-        customInit: bootstrapConfig.getAttribute('data-open-ux-preview-customInit')
-    }).catch(() => Log.error('Sandbox initialization failed.'));
+const uiBootstrap = document.getElementById('sap-ui-bootstrap');
+if (uiBootstrap) {
+    try {
+        init({
+            appUrls: uiBootstrap.getAttribute('data-open-ux-preview-libs-manifests'),
+            flex: uiBootstrap.getAttribute('data-open-ux-preview-flex-settings'),
+            customInit: uiBootstrap.getAttribute('data-open-ux-preview-customInit')
+        });
+    } catch (e) {
+        Log.error('Sandbox initialization failed: ' + e.message);
+    }
 }

packages/preview-middleware-client/src/flp/initConnectors.ts

@@ -1,3 +1,5 @@
+import VersionInfo from 'sap/ui/VersionInfo';
+
 /**
  * Initializes UI5 connectors based on the current UI5 version.
  *
@@ -6,14 +8,15 @@
  * This setup allows for flexibility in using different connectors based on the UI5 version.
  *
  * @example
- * intiConnectors(); // Simply call the function without any arguments.
- * @returns {void}
+ * initConnectors(); // Simply call the function without any arguments.
  */
-export function initConnectors(): void {
-    const version = sap.ui.version;
-    const minor = parseInt(version.split('.')[1], 10);
+export default async function initConnectors(): Promise<void> {
+    const { version } = (await VersionInfo.load()) as { version: string };
+    const versionArray = version ? version.split('.') : ['2', '99'];
+    const minor = parseInt(versionArray[1], 10);
+    const major = parseInt(versionArray[0], 10);
 
-    if (minor < 72) {
+    if (major === 1 && minor < 72) {
         sap.ui.require(['open/ux/preview/client/flp/enableFakeConnector'], function (enableFakeConnector: () => void) {
             enableFakeConnector();
         });
@@ -26,5 +29,3 @@ export function initConnectors(): void {
         );
     }
 }
-
-initConnectors();

packages/preview-middleware-client/test/__mock__/window.ts

@@ -26,6 +26,7 @@ export const sapMock = {
     ushell: {
         Container: {
             createRenderer: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
+            createRendererInternal: jest.fn().mockReturnValue({ placeAt: jest.fn() }),
             attachRendererCreatedEvent: jest.fn(),
             getServiceAsync: jest.fn()
         }

packages/preview-middleware-client/test/unit/flp/init.test.ts

@@ -12,6 +12,7 @@ import * as apiHandler from '../../../src/adp/api-handler';
 import { fetchMock, sapMock } from 'mock/window';
 import type { InitRtaScript, RTAPlugin, StartAdaptation } from 'sap/ui/rta/api/startAdaptation';
 import type { Scenario } from '@sap-ux-private/control-property-editor-common';
+import VersionInfo from 'mock/sap/ui/VersionInfo';
 
 describe('flp/init', () => {
     test('registerSAPFonts', () => {
@@ -44,7 +45,7 @@ describe('flp/init', () => {
         } as unknown as apiHandler.ManifestAppdescr);
         await loadI18nResourceBundle('other' as Scenario);
         expect(mockBundle.create).toBeCalledWith({
-            url: 'i18n/i18n.properties',
+            url: 'i18n/i18n.properties'
         });
     });
     test('loadI18nResourceBundle - adaptation project', async () => {
@@ -166,6 +167,7 @@ describe('flp/init', () => {
         });
 
         test('nothing configured', async () => {
+            VersionInfo.load.mockResolvedValue({ version: '1.118.1' });
             await init({});
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).not.toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -177,7 +179,7 @@ describe('flp/init', () => {
                 layer: 'CUSTOMER_BASE',
                 pluginScript: 'my/script'
             };
-            sapMock.ui.version = '1.84.50';
+            VersionInfo.load.mockResolvedValue({ version: '1.84.50' });
             await init({ flex: JSON.stringify(flexSettings) });
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -215,7 +217,7 @@ describe('flp/init', () => {
                 layer: 'CUSTOMER_BASE',
                 pluginScript: 'my/script'
             };
-            sapMock.ui.version = '1.71.60';
+            VersionInfo.load.mockResolvedValue({ version: '1.71.60' });
             await init({ flex: JSON.stringify(flexSettings) });
             expect(sapMock.ushell.Container.attachRendererCreatedEvent).toBeCalled();
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
@@ -250,12 +252,21 @@ describe('flp/init', () => {
 
         test('custom init module configured & ui5 version is 1.120.9', async () => {
             const customInit = 'my/app/test/integration/opaTests.qunit';
-            sapMock.ui.version = '1.120.09';
+            VersionInfo.load.mockResolvedValue({ version: '1.120.9' });
+
             await init({ customInit: customInit });
 
             expect(sapMock.ui.require).toBeCalledWith([customInit]);
-
             expect(sapMock.ushell.Container.createRenderer).toBeCalledWith(undefined, true);
         });
+
+        test('custom init module configured & ui5 version is 2.0.0', async () => {
+            const customInit = 'my/app/test/integration/opaTests.qunit';
+            VersionInfo.load.mockResolvedValue({ version: '2.0.0' });
+
+            await init({ customInit: customInit });
+
+            expect(sapMock.ui.require).toBeCalledWith([customInit]);
+        });
     });
 });

packages/preview-middleware-client/test/unit/flp/initConnectors.test.ts

@@ -1,14 +1,16 @@
 import { sapMock } from 'mock/window';
-import { initConnectors } from '../../../src/flp/initConnectors';
+import VersionInfo from 'mock/sap/ui/VersionInfo';
+import initConnectors from '../../../src/flp/initConnectors';
 
 describe('flp/initConnectors', () => {
     afterEach(() => {
         jest.restoreAllMocks();
     });
 
-    test('enables fake lrep connector when ui5 version is 1.71', () => {
+    test('enables fake lrep connector when ui5 version is 1.71', async () => {
         sapMock.ui.version = '1.71.60';
-        initConnectors();
+        VersionInfo.load.mockResolvedValue({ version: '1.71.60' });
+        await initConnectors();
 
         expect(sapMock.ui.require).toBeCalledWith(
             ['open/ux/preview/client/flp/enableFakeConnector'],
@@ -22,10 +24,11 @@ describe('flp/initConnectors', () => {
         expect(enableFakeConSpy).toHaveBeenCalled();
     });
 
-    test('defines a local connector for writing and applying changes and returns it', () => {
+    test('defines a local connector for writing and applying changes and returns it', async () => {
         sapMock.ui.version = '1.120.4';
+        VersionInfo.load.mockResolvedValue({ version: '1.120.4' });
 
-        initConnectors();
+        await initConnectors();
 
         const WorkspaceConnectorMock = { layers: [] };
         const requireCb = sapMock.ui.define.mock.calls[0][2] as (WorkspaceConnector: unknown) => void;

packages/preview-middleware/src/base/config.ts

@@ -261,8 +261,9 @@ export function createFlpTemplateConfig(config: FlpConfig, manifest: Partial<Man
     const ui5Theme = config.theme ?? (supportedThemes.includes(DEFAULT_THEME) ? DEFAULT_THEME : supportedThemes[0]);
     const id = manifest['sap.app']?.id ?? '';
     const ns = id.replace(/\./g, '/');
+    const basePath = posix.relative(posix.dirname(config.path), '/') ?? '.';
     return {
-        basePath: posix.relative(posix.dirname(config.path), '/') ?? '.',
+        basePath,
         apps: {},
         init: config.init ? ns + config.init : undefined,
         ui5: {

packages/preview-middleware/templates/flp/sandbox.html

@@ -34,13 +34,15 @@
                             enableSearch: false
                         }
                     }
-                }
-            },
-            applications:  <%- JSON.stringify(apps) %>
+              }
+          },
+          services: {},
+          applications: <%- JSON.stringify(apps) %>
         };
     </script>
 
-    <script src="<%- basePath %>/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
+    <script type="text/javascript" src="'/preview/client/flp/bootstrap.js'" id="open-ux-bootstrap"></script>
+    <script id="sap-ushell-bootstrap"></script>
     <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions="allow"'' is a NON-SECURE setting for test environments -->
     <script id="sap-ui-bootstrap"
         src="<%- basePath %>/resources/sap-ui-core.js"
@@ -65,23 +67,25 @@
         (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
     </script>
 
-<% if (locals.flex && flex?.developerMode) { %>
+    <% if (locals.flex && flex?.developerMode) { %>
         <!-- Hides Rta native toolbar  -->
-    <style>
-        #shell-header, .sapUiRtaToolbar {
-            visibility: hidden;
-            height: 1px;
-        } 
-        .sapUshellShellCanvas {
-            top: 0 !important;
-        }
-        .sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
-            background-color: transparent !important;
-        }
-    </style><% } %>
+        <style>
+            #shell-header,
+            .sapUiRtaToolbar {
+                visibility: hidden;
+                height: 1px;
+            }
+            .sapUshellShellCanvas {
+                top: 0 !important;
+            }
+            .sapUiRtaMode .sapUiShellBackgroundImage.sapUiGlobalBackgroundImageForce.sapUshellShellBG {
+                background-color: transparent !important;
+            }
+        </style><% } %>
 </head>
 
 <!-- UI Content -->
+
 <body class="sapUiBody" id="content">
 </body>
 

packages/preview-middleware/test/unit/base/__snapshots__/config.test.ts.snap

@@ -73,13 +73,15 @@ exports[`config generatePreviewFiles minimum settings 1`] = `
                             enableSearch: false
                         }
                     }
-                }
-            },
-            applications:  {\\"app-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
+              }
+          },
+          services: {},
+          applications: {\\"app-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script type=\\"text/javascript\\" src=\\"'/preview/client/flp/bootstrap.js'\\" id=\\"open-ux-bootstrap\\"></script>
+    <script id=\\"sap-ushell-bootstrap\\"></script>
     <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
     <script id=\\"sap-ui-bootstrap\\"
         src=\\"../resources/sap-ui-core.js\\"
@@ -101,10 +103,11 @@ exports[`config generatePreviewFiles minimum settings 1`] = `
         (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
     </script>
 
-
+    
 </head>
 
 <!-- UI Content -->
+
 <body class=\\"sapUiBody\\" id=\\"content\\">
 </body>
 
@@ -150,13 +153,15 @@ Object {
                             enableSearch: false
                         }
                     }
-                }
-            },
-            applications:  {\\"simpleApp-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/apps/simple-app\\",\\"applicationDependencies\\":{\\"manifest\\":true}},\\"testfev2other-preview\\":{\\"title\\":\\"My Other App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.other\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/apps/other-app\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
+              }
+          },
+          services: {},
+          applications: {\\"simpleApp-preview\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/apps/simple-app\\",\\"applicationDependencies\\":{\\"manifest\\":true}},\\"testfev2other-preview\\":{\\"title\\":\\"My Other App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.other\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"/apps/other-app\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script type=\\"text/javascript\\" src=\\"'/preview/client/flp/bootstrap.js'\\" id=\\"open-ux-bootstrap\\"></script>
+    <script id=\\"sap-ushell-bootstrap\\"></script>
     <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
     <script id=\\"sap-ui-bootstrap\\"
         src=\\"../resources/sap-ui-core.js\\"
@@ -178,10 +183,11 @@ Object {
         (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
     </script>
 
-
+    
 </head>
 
 <!-- UI Content -->
+
 <body class=\\"sapUiBody\\" id=\\"content\\">
 </body>
 
@@ -230,13 +236,15 @@ Object {
                             enableSearch: false
                         }
                     }
-                }
-            },
-            applications:  {\\"myapp-myaction\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
+              }
+          },
+          services: {},
+          applications: {\\"myapp-myaction\\":{\\"title\\":\\"My Simple App\\",\\"description\\":\\"This is a very simple application.\\",\\"additionalInformation\\":\\"SAPUI5.Component=test.fe.v2.app\\",\\"applicationType\\":\\"URL\\",\\"url\\":\\"..\\",\\"applicationDependencies\\":{\\"manifest\\":true}}}
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script type=\\"text/javascript\\" src=\\"'/preview/client/flp/bootstrap.js'\\" id=\\"open-ux-bootstrap\\"></script>
+    <script id=\\"sap-ushell-bootstrap\\"></script>
     <!-- Bootstrap the UI5 core library. 'data-sap-ui-frameOptions=\\"allow\\"'' is a NON-SECURE setting for test environments -->
     <script id=\\"sap-ui-bootstrap\\"
         src=\\"../resources/sap-ui-core.js\\"
@@ -258,10 +266,11 @@ Object {
         (() => sap.ui.require(['open/ux/preview/client/flp/initConnectors']))()
     </script>
 
-
+    
 </head>
 
 <!-- UI Content -->
+
 <body class=\\"sapUiBody\\" id=\\"content\\">
 </body>