界面已本地化;技能介绍与说明文档按所选语言由 AI 自动翻译,代码、命令、路径和专业术语保留原文,以原作者文档为准。
探索技能
设计与创意 · SKILL.md

fix-bootstrap-params

fix-bootstrap-params

【设计与创意】Fix HTML bootstrap parameter issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules: - `no-deprecated-api` - For missing/deprecated bootstrap parameters (async, compat-version, animation, binding-syntax, etc.) - `no-deprecated-theme` - For deprecated theme values in data-sap-ui-theme - `no-deprecated-librar…

独立 GitHub 快照 · 自动分类 · 以原作者文档为准

技能说明

GitHub

name: fix-bootstrap-params description: | Fix HTML bootstrap parameter issues that UI5 linter reports but cannot auto-fix. Use this skill when linter outputs these rules:

  • no-deprecated-api - For missing/deprecated bootstrap parameters (async, compat-version, animation, binding-syntax, etc.)
  • no-deprecated-theme - For deprecated theme values in data-sap-ui-theme
  • no-deprecated-library - For deprecated libraries in data-sap-ui-libs Trigger on error messages containing: "Missing bootstrap parameter", "Abandoned bootstrap parameter", "Redundant bootstrap parameter", "deprecated value", "bootstrap" Automatically applies safe fixes to HTML files containing UI5 bootstrap script tags.

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

Rule IDMessage PatternThis Skill's Action
no-deprecated-apiMissing bootstrap parameter 'data-sap-ui-async'Add data-sap-ui-async="true"
no-deprecated-apiMissing bootstrap parameter 'data-sap-ui-compat-version'Add data-sap-ui-compat-version="edge"
no-deprecated-apiUse of deprecated value 'false' for bootstrap parameter 'data-sap-ui-async'Change to "true"
no-deprecated-apiUse of deprecated value '...' for bootstrap parameter 'data-sap-ui-compat-version'Change to "edge"
no-deprecated-apiAbandoned bootstrap parameter '...' should be removedRemove the parameter
no-deprecated-apiRedundant bootstrap parameter '...' should be removedRemove the parameter
no-deprecated-apiBootstrap parameter '...' should be replaced with '...'Replace with new parameter
no-deprecated-themeUse of deprecated theme '...'Change to sap_horizon
no-deprecated-libraryUse of deprecated library '...'Remove from libs

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)
我的收藏