Migrate from UI5 v2 to OpenUI5 v1.142.0 with ComponentSupport#5
Closed
oblomov-dev wants to merge 9 commits intomainfrom
Closed
Migrate from UI5 v2 to OpenUI5 v1.142.0 with ComponentSupport#5oblomov-dev wants to merge 9 commits intomainfrom
oblomov-dev wants to merge 9 commits intomainfrom
Conversation
The previous version "2.12.0" does not exist in the npm registry (OpenUI5 has no 2.x releases on npm yet — latest is 1.147.1), which caused `npm run start` to fail when @ui5/cli tried to resolve the framework libraries. Pinning to 1.147.1 lets the framework install and the dev server start successfully. The manifest's minUI5Version is lowered to 1.120.0 so it stays compatible with the resolved framework. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
Generated by `npm install` while verifying the framework version fix. Matches the convention used by the sibling `app/` folder which also checks in its lockfile. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
- index.html: enable async loading, edge compat-version and explicit sap.m preload — these are the strict defaults that OpenUI5 2.x will ship with anyway, so making them explicit on 1.147 prevents regressions when bumping the framework. - package.json: enable the built-in CSP middleware via --sap-csp-policies and --serve-csp-reports so the dev server now emits sap-target-level-1 and sap-target-level-3 report-only headers, matching the CSP profile a legacy-free 2.x app needs to comply with. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
Points the bootstrap script at https://sdk.openui5.org/1.142.0-legacy-free/ so the runtime actually loads the legacy-free distribution (deprecated APIs removed) instead of the regular distro served from the local @ui5/server. The framework section in ui5.yaml stays in place for build and ui5lint; only the runtime source moves to the CDN. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
ui5 serve does not generate Component-preload.js — it is created by ui5 build for production. The dev server returns 404 with text/html and X-Content-Type-Options: nosniff, which under strict MIME checking blocks script execution. Together with data-sap-ui-async + compat-version=edge, the loader escalates this from a soft fallback to a fatal "Failed to load component" error. Setting data-sap-ui-xx-component-preload="off" tells the runtime to load Component.js individually — appropriate for dev. The production build still produces the preload bundle, which then loads via the Component-preload mode the framework picks at runtime. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
Replaces the previous data-sap-ui-xx-component-preload="off" workaround with a serverside fix that does not depend on the bootstrap config being honored or on the browser holding fresh HTML. The custom middleware ui5-v2-no-preload runs after serveResources and intercepts any GET *-preload.js that the standard middleware did not handle. Instead of letting Express return 404 with text/html (which the browser refuses to execute under nosniff), it returns 200 with a harmless JS comment and Content-Type: application/javascript. The UI5 loader then sees a successful but empty preload and proceeds to load Component.js individually — the normal dev path. ui5 build is unaffected because it generates the real Component-preload.js, served by serveResources before the middleware runs. The middleware is wired via a multi-document ui5.yaml: the project doc references it under server.customMiddleware, and a second doc declares it as a kind: extension / type: server-middleware so the project graph picks it up without needing a separate package. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
Bumps _version from 1.65.0 to 2.0.0 so the framework picks the manifest-v2 codepaths: rootView is forced to async, sap.ui5/resources/js is rejected, and the deprecated routing target options viewPath/viewName/ viewId are no longer accepted. The app's existing layout already complies — Component declares IAsyncContentCreation, routing targets use id/name, and there are no resources/js entries. minUI5Version is raised from 1.120.0 to 1.136.0 because manifest v2 is only supported from 1.136 onwards (also enforced by ui5lint via no-legacy-ui5-version-in-manifest). https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
- Switch the bootstrap to declarative ComponentSupport: the body now carries <div data-sap-ui-component data-name="ui5_v2" ...> and the script's data-sap-ui-on-init points to sap/ui/core/ComponentSupport. This removes the custom index.js entirely. ComponentSupport forces async=true and manifest=true on the generated ComponentContainer, which matches the manifest-v2 expectation. - Drop the legacy <meta http-equiv="X-UA-Compatible"> tag (only relevant for IE, and IE is not supported by UI5 anymore). - Align the framework version in ui5.yaml with the runtime CDN (1.142.0) so that ui5 build / ui5lint reflect the same surface area the browser actually executes. - Add "type": "module" to package.json and rename the dev middleware from .mjs to .js, so the project uses ESM as the default Node module system instead of relying on the .mjs extension to opt in. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
Renames the application folder ui5_v2 → app_v2 along with everything keyed off the old name: - sap.app.id and all manifest.json paths (rootView.viewName, models.bundleName, routing.config.path) - UIComponent / Controller .extend() namespace strings - mvc:View controllerName attributes - Bootstrap data-sap-ui-resource-roots and data-name on the ComponentSupport div - ui5.yaml metadata.name - package.json name field (and the regenerated package-lock.json) - The lint-ui5_v2 GitHub Actions workflow (filename, name and working-directory) Verified with ui5lint (0 problems) and a live ui5 serve smoke test covering /index.html, /manifest.json, /Component.js and the custom no-preload middleware. https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR migrates the application from UI5 v2.12.0 to OpenUI5 v1.142.0 (legacy-free), updating the bootstrap mechanism to use the native ComponentSupport loader instead of a custom initialization script.
Key Changes
resources/sap-ui-core.jsto CDN-hosted OpenUI5 SDK (1.142.0-legacy-free)module:ui5_v2/indexinitialization with nativemodule:sap/ui/core/ComponentSupportdata-sap-ui-async="true",data-sap-ui-compat-version="edge",data-sap-ui-libs="sap.m"webapp/index.js(ComponentContainer initialization) in favor of declarative component loadingdata-sap-ui-componentattributes instead of programmatic container placementno-preload-middleware.jsto handle preload bundle requests during developmentui5.yamlto reference new middleware and adjusted minimum UI5 version to 1.136.0manifest.jsonversion to 2.0.0 and adjusted minUI5Version"type": "module"topackage.jsonfor ES module support--sap-csp-policies --serve-csp-reportsX-UA-Compatible)Implementation Details
The migration leverages OpenUI5's native ComponentSupport feature, which automatically instantiates components declared in the HTML markup. This eliminates the need for custom initialization code and aligns with modern UI5 development practices. The custom middleware intercepts preload bundle requests and returns empty stubs, allowing individual modules to load via the standard loader during development.
https://claude.ai/code/session_014huxgSNpSGGgCKxXDbDwxT