Preview support for UI5 2.x

.changeset/preview-2.0.md

@@ -0,0 +1,7 @@
+---
+"@sap-ux-private/preview-middleware-client": patch
+"@sap-ux/preview-middleware": patch
+"@sap-ux/ui5-proxy-middleware": patch
+---
+
+Preview support for UI5 2.x 

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

@@ -0,0 +1,26 @@
+/**
+ * Calculates the script content for accessing the right sap/ushell/bootstrap sandbox.
+ */
+(window as any)['sap-ui-config'] = {
+    'xx-bootTask': ushellBootstrap
+};
+
+function ushellBootstrap(fnCallback: Function) {
+    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;
+            const src =
+                major >= 2
+                    ? '/resources/sap/ushell/bootstrap/sandbox2.js'
+                    : '/test-resources/sap/ushell/bootstrap/sandbox.js';
+            const shellBootstrap = document.getElementById('sap-ushell-bootstrap');
+            if (shellBootstrap) {
+                shellBootstrap.onload = () => {
+                    (window as any)['sap-ui-config']['xx-bootTask'](fnCallback);
+                };
+                shellBootstrap.setAttribute('src', src);
+            }
+        });
+}

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

@@ -7,6 +7,8 @@ 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';
+import { getError } from '../cpe/error-utils';
 
 /**
  * SAPUI5 delivered namespaces from https://ui5.sap.com/#/api/sap
@@ -46,6 +48,10 @@ interface Manifest {
     };
 }
 
+type InternalContainer = typeof sap.ushell.Container & {
+    createRendererInternal: typeof sap.ushell.Container.createRenderer
+}
+
 type AppIndexData = Record<
     string,
     {
@@ -242,16 +248,16 @@ export async function init({
     customInit?: string | null;
 }): Promise<void> {
     const urlParams = new URLSearchParams(window.location.search);
-    const container = sap?.ushell?.Container ?? (sap.ui.require('sap/ushell/Container') as typeof sap.ushell.Container);
+    const container = (sap?.ushell?.Container ?? (sap.ui.require('sap/ushell/Container')) as InternalContainer);
     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 +310,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.'));
+    try {
+        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 (e) {
+        const error = getError(e);
+        Log.error('Sandbox initialization failed: ' + error.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.
  *
@@ -7,13 +9,14 @@
  *
  * @example
  * intiConnectors(); // Simply call the function without any arguments.
- * @returns {void}
  */
-export function initConnectors(): void {
-    const version = sap.ui.version;
-    const minor = parseInt(version.split('.')[1], 10);
+export 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();
         });

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

@@ -40,7 +40,8 @@
         };
     </script>
 
-    <script src="<%- basePath %>/test-resources/sap/ushell/bootstrap/sandbox.js" id="sap-ushell-bootstrap"></script>
+    <script src="/preview/client/flp/bootstrap.js" id="preview-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"

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

@@ -79,7 +79,8 @@ exports[`config generatePreviewFiles minimum settings 1`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -156,7 +157,8 @@ Object {
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -236,7 +238,8 @@ Object {
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"

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

@@ -508,7 +508,8 @@ exports[`FlpSandbox router editor with config 1`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -586,7 +587,8 @@ exports[`FlpSandbox router rta 1`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -694,7 +696,8 @@ exports[`FlpSandbox router rta with developerMode=true 2`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -787,7 +790,8 @@ exports[`FlpSandbox router rta with developerMode=true and plugin 1`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"
@@ -880,7 +884,8 @@ exports[`FlpSandbox router test/flp.html 1`] = `
         };
     </script>
 
-    <script src=\\"../test-resources/sap/ushell/bootstrap/sandbox.js\\" id=\\"sap-ushell-bootstrap\\"></script>
+    <script src=\\"/preview/client/flp/bootstrap.js\\" id=\\"preview-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\\"

packages/ui5-proxy-middleware/src/base/proxy.ts

@@ -28,7 +28,7 @@ export const ui5Proxy = (config: ProxyConfig, options?: Options, filter?: Filter
     });
     const today = new Date();
     const etag = `W/"${config.version || 'ui5-latest-' + today.getDate() + today.getMonth() + today.getFullYear()}"`;
-    const ui5Ver = config.version ? `/${config.version}` : '';
+    const ui5Ver = config.version && !config.version.startsWith('2') ? `/${config.version}` : '';
     const proxyConfig: Options = {
         target: config.url,
         changeOrigin: true,