Fix Bootstrap Params

Fix Bootstrap Parameters

Key Rules

1. ONLY modify the bootstrap <script> tag (identified by id="sap-ui-bootstrap" or src matching sap-ui-core.js). All other <script> tags — including inline scripts, config blocks, and non-UI5 script references — MUST be preserved exactly as-is. They will be handled by fix-csp-compliance in a later phase.
2. Do not delete, move, or rewrite any <script> block that is not the bootstrap tag. If the file has <script>window.config = {...}</script> before or after the bootstrap tag, leave it untouched.

This skill fixes HTML bootstrap parameter issues that the UI5 linter detects but cannot auto-fix because the changes may affect application behavior.

Linter Rules Handled

When to Use

Apply this skill when you see linter output like:

index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async'  no-deprecated-api
index.html:9:3 error Missing bootstrap parameter 'data-sap-ui-compat-version'  no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed  no-deprecated-api
index.html:15:3 error Use of deprecated theme 'sap_bluecrystal'  no-deprecated-theme

Fix Strategy

1. Locate the Bootstrap Script Tag

Find the <script> tag with either:

• id="sap-ui-bootstrap"
• src attribute matching pattern: sap-ui-core.js, sap-ui-custom.js, sap-ui-boot.js, etc.

2. Apply Fixes Based on Rule and Message

no-deprecated-api - Missing Parameters

Missing data-sap-ui-async: Add data-sap-ui-async="true" Missing data-sap-ui-compat-version: Add data-sap-ui-compat-version="edge"

<!-- Before -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_horizon">
</script>

<!-- After -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-async="true"
    data-sap-ui-compat-version="edge"
    data-sap-ui-theme="sap_horizon">
</script>

no-deprecated-api - Deprecated Values

data-sap-ui-async="false": Change to "true" data-sap-ui-compat-version with non-edge value: Change to "edge"

no-deprecated-api - Abandoned Parameters (remove completely)

Remove these parameters entirely:

• data-sap-ui-no-duplicate-ids - Enforced in modern UI5
• data-sap-ui-auto-aria-body-role - Removed in modern UI5
• data-sap-ui-manifest-first - Use Component.create manifest option instead
• data-sap-ui-origin-info - No longer supported
• data-sap-ui-areas - Use Control.placeAt instead
• data-sap-ui-trace - No longer supported
• data-sap-ui-xx-no-less - No longer supported

no-deprecated-api - Redundant Parameters

• data-sap-ui-binding-syntax="simple" - Remove; complex syntax is enforced in modern UI5
• data-sap-ui-binding-syntax="complex" - Remove if compat-version="edge" is set
• data-sap-ui-preload with invalid values - Remove

no-deprecated-api - Replaced Parameters

• data-sap-ui-animation → data-sap-ui-animation-mode (convert true→full, false→minimal)

no-deprecated-theme - Deprecated Themes

Replace with modern theme:

• sap_bluecrystal → sap_horizon
• sap_belize → sap_horizon
• sap_belize_plus → sap_horizon
• sap_belize_hcb → sap_horizon_hcb
• sap_belize_hcw → sap_horizon_hcw
• sap_hcb → sap_horizon_hcb
• sap_ux → sap_horizon
• sap_platinum → sap_horizon
• sap_goldreflection → sap_horizon

no-deprecated-library - Deprecated Libraries

Remove deprecated libraries from data-sap-ui-libs:

• sap.ui.commons
• sap.ui.ux3
• sap.makit
• sap.me
• sap.ca.ui
• sap.sac.grid
• sap.ui.suite
• sap.zen.commons
• sap.zen.crosstab
• sap.zen.dsh

Implementation Steps

1. Read the HTML file
2. Parse to find the bootstrap script tag
3. For each linter error (identified by rule ID and message):
   • If missing parameter: Add the parameter with recommended value
   • If deprecated value: Update to recommended value
   • If abandoned/redundant: Remove the parameter
   • If deprecated theme: Replace with modern theme
   • If deprecated library: Remove from libs list
4. Preserve formatting (indentation, line breaks) as much as possible
5. Write the updated file

Example Fix

Given linter output:

index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-async'  no-deprecated-api
index.html:8:3 error Missing bootstrap parameter 'data-sap-ui-compat-version'  no-deprecated-api
index.html:12:3 error Abandoned bootstrap parameter 'data-sap-ui-no-duplicate-ids' should be removed  no-deprecated-api
index.html:10:3 error Use of deprecated theme 'sap_bluecrystal'  no-deprecated-theme

Transform:

<!-- Before -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-no-duplicate-ids="true"
    data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>

<!-- After -->
<script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-async="true"
    data-sap-ui-compat-version="edge"
    data-sap-ui-theme="sap_horizon"
    data-sap-ui-resource-roots='{"my.app": "./"}'>
</script>

Notes

• Always add data-sap-ui-async="true" before other data attributes for consistency
• Setting compat-version="edge" enables complex binding syntax automatically, so binding-syntax becomes redundant
• Removed parameters should not leave trailing whitespace or empty lines
• If the file has multiple script tags, only modify the bootstrap tag — leave all others intact (including inline <script> blocks that will be handled by CSP compliance in Phase 5)