diff --git a/.changeset/thirty-taxis-ring.md b/.changeset/thirty-taxis-ring.md new file mode 100644 index 0000000000..df3c1abca4 --- /dev/null +++ b/.changeset/thirty-taxis-ring.md @@ -0,0 +1,5 @@ +--- +'@sap-ux/ui5-proxy-middleware': patch +--- + +fix: UI5 2 directLoad diff --git a/packages/ui5-proxy-middleware/src/base/constants.ts b/packages/ui5-proxy-middleware/src/base/constants.ts index b0926d7611..a72aed8206 100644 --- a/packages/ui5-proxy-middleware/src/base/constants.ts +++ b/packages/ui5-proxy-middleware/src/base/constants.ts @@ -2,3 +2,5 @@ export const BOOTSTRAP_LINK = 'resources/sap-ui-core.js'; export const BOOTSTRAP_REPLACE_REGEX = /src="[.{0,2}\/]*resources\/sap-ui-core\.js"/; export const SANDBOX_LINK = 'test-resources/sap/ushell/bootstrap/sandbox.js'; export const SANDBOX_REPLACE_REGEX = /src="[.{0,2}\/]*test-resources\/sap\/ushell\/bootstrap\/sandbox\.js"/; +export const SANDBOX2_REPLACE_REGEX = /src="[.{0,2}\/]*resources\/sap\/ushell\/bootstrap\/sandbox2\.js"/; +export const SANDBOX2_LINK = 'resources/sap/ushell/bootstrap/sandbox2.js'; diff --git a/packages/ui5-proxy-middleware/src/base/utils.ts b/packages/ui5-proxy-middleware/src/base/utils.ts index dde20c3ed9..38bafce195 100644 --- a/packages/ui5-proxy-middleware/src/base/utils.ts +++ b/packages/ui5-proxy-middleware/src/base/utils.ts @@ -5,7 +5,14 @@ import { UI5Config } from '@sap-ux/ui5-config'; import type { NextFunction, Request, Response } from 'express'; import type { ProxyConfig } from './types'; import { existsSync, readFileSync } from 'fs'; -import { BOOTSTRAP_LINK, BOOTSTRAP_REPLACE_REGEX, SANDBOX_LINK, SANDBOX_REPLACE_REGEX } from './constants'; +import { + BOOTSTRAP_LINK, + BOOTSTRAP_REPLACE_REGEX, + SANDBOX_LINK, + SANDBOX_REPLACE_REGEX, + SANDBOX2_LINK, + SANDBOX2_REPLACE_REGEX +} from './constants'; import type { Url } from 'url'; import { t } from '../i18n'; import type { ReaderCollection } from '@ui5/fs'; @@ -241,11 +248,17 @@ export function injectUI5Url(originalHtml: string, ui5Configs: ProxyConfig[]): s if (ui5Config.path === '/resources') { const resourcesUrl = `src="${ui5Url}/${BOOTSTRAP_LINK}"`; html = html.replace(BOOTSTRAP_REPLACE_REGEX, resourcesUrl); + //replace sandbox2 url as this is now part of /resources + const flpSandbox2Url = `src="${ui5Url}/${SANDBOX2_LINK}"`; + html = html.replace(SANDBOX2_REPLACE_REGEX, flpSandbox2Url); } if (ui5Config.path === '/test-resources') { - const testResourcesUrl = `src="${ui5Url}/${SANDBOX_LINK}"`; - html = html.replace(SANDBOX_REPLACE_REGEX, testResourcesUrl); + const flpSandboxUrl = `src="${ui5Url}/${SANDBOX_LINK}"`; + html = html.replace(SANDBOX_REPLACE_REGEX, flpSandboxUrl); + //replace sandbox2 url here as well although this is no longer part of /test-resources to be backwards compatible + const flpSandbox2Url = `src="${ui5Url}/${SANDBOX2_LINK}"`; + html = html.replace(SANDBOX2_REPLACE_REGEX, flpSandbox2Url); } } return html; diff --git a/packages/ui5-proxy-middleware/test/base/utils.test.ts b/packages/ui5-proxy-middleware/test/base/utils.test.ts index e8140d74bc..b215f26bf5 100644 --- a/packages/ui5-proxy-middleware/test/base/utils.test.ts +++ b/packages/ui5-proxy-middleware/test/base/utils.test.ts @@ -478,24 +478,64 @@ describe('utils', () => { respMock.write = jest.fn(); respMock.end = jest.fn(); - const html = ''; + const htmlSandbox1 = ''; + const htmlSandbox2 = ''; beforeEach(() => { nextMock.mockReset(); }); - test('HTML is modified and response is sent', async () => { + test('HTML is modified and response is sent (UI5 1.x)', async () => { byGlobMock.mockResolvedValueOnce([ { - getString: () => html + getString: () => htmlSandbox1 } ]); - await baseUtils.injectScripts({ url: 'test/flp.html' } as any, respMock, nextMock, [], rootProject); + await baseUtils.injectScripts({ url: 'test/flp.html' } as any, respMock, nextMock, [{path: '/test-resources', url: 'http://ui5.sap.com', version: '1.124.0'}], rootProject); expect(respMock.writeHead).toBeCalledTimes(1); expect(respMock.writeHead).toBeCalledWith(200, { 'Content-Type': 'text/html' }); + expect(respMock.write).toBeCalledWith(''); + expect(respMock.end).toHaveBeenCalled(); + expect(nextMock).not.toHaveBeenCalled(); + + expect(byGlobMock).toHaveBeenCalledWith('**/test/flp.html'); + }); + + test('HTML is modified and response is sent (UI5 2.x backwards compatible)', async () => { + byGlobMock.mockResolvedValueOnce([ + { + getString: () => htmlSandbox2 + } + ]); + + await baseUtils.injectScripts({ url: 'test/flp.html' } as any, respMock, nextMock, [{path: '/test-resources', url: 'http://ui5.sap.com', version: '1.124.0'}], rootProject); + expect(respMock.writeHead).toBeCalledTimes(1); + expect(respMock.writeHead).toBeCalledWith(200, { + 'Content-Type': 'text/html' + }); + expect(respMock.write).toBeCalledWith(''); + expect(respMock.end).toHaveBeenCalled(); + expect(nextMock).not.toHaveBeenCalled(); + + expect(byGlobMock).toHaveBeenCalledWith('**/test/flp.html'); + }); + + test('HTML is modified and response is sent (UI5 2.x)', async () => { + byGlobMock.mockResolvedValueOnce([ + { + getString: () => htmlSandbox2 + } + ]); + + await baseUtils.injectScripts({ url: 'test/flp.html' } as any, respMock, nextMock, [{path: '/resources', url: 'http://ui5.sap.com', version: '1.124.0'}], rootProject); + expect(respMock.writeHead).toBeCalledTimes(1); + expect(respMock.writeHead).toBeCalledWith(200, { + 'Content-Type': 'text/html' + }); + expect(respMock.write).toBeCalledWith(''); expect(respMock.end).toHaveBeenCalled(); expect(nextMock).not.toHaveBeenCalled();