feat(plugins/html): add sap.html opt-in plugin for native HTML tags - #13
Open
petermuessig wants to merge 3 commits into
Open
petermuessig wants to merge 3 commits into
petermuessig wants to merge 3 commits into
Conversation
Maps lowercase HTML tags (<div>, <span>, <input>, …) to the
corresponding sap.html.* UI5 control classes introduced in OpenUI5
1.154.0, so native HTML can be written in TSX views without per-tag
imports.
Key design points:
- Opt-in via withScope(htmlScope, () => …); outside the scope,
lowercase tags throw a clear "no htmlIntrinsic" error.
- Tag resolution: first character uppercased, rest unchanged
("div" → sap/html/Div, "h1" → sap/html/H1).
- Text children: sole text → `text` property; mixed text+controls →
sap.ui.core.html.TextContent wrappers preserving source order;
void elements reject children.
- preloadSapHtml() uses the library metadata's `controls` list to
async-require every sap/html/* module in one batch, so the sync
sap.ui.require resolver always finds them.
- Full UI5 pipeline reused: data binding, events, dot-handlers,
class=, ref=, and auto-prefix-id all work unchanged.
Also includes:
- Per-tag JSX.IntrinsicElements types (AnchorAttributes,
InputAttributes, ButtonHtmlAttributes, …) replacing the previous
permissive HTMLAttributes bag.
- ./plugins/html exports subpath in package.json.
- NativeHtml.tsx showcase view (chapter 19) with live demo.
- Learn + Explore navigation entries and docs pages.
- QUnit tests (26 assertions) using fake sap.html controls via a
patched sap.ui.require; no real sap.html library required at
test time.
The ToolPage aside had no scroll context — `sapTntToolPage`'s `overflow: hidden` clipped the NavigationList's scrollbar track so items below the fold were unreachable. Adding `overflow-y: auto` on `.sapTntToolPageAsideContent` surfaces a scrollbar on the nav panel. Also scroll the active `.sapTntNLISelected` item into view on each route change (setTimeout-deferred so the binding update lands first), so deep-linking to a low item like "Plugins / Extend → Native HTML via sap.html" reveals the selection without manual scrolling.
This branch has not been deployed
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
1 participant
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
Adds a new
plugins/htmlopt-in package that maps lowercase HTML tags in TSX views to the correspondingsap.html.*UI5 control classes (available from OpenUI5 1.154.0), making native HTML feel as first-class as any other control — no per-tag imports required.withScope(htmlScope, () => …)enables HTML tags for a subtree; outside the scope, lowercase tags throw a clear error.<div>→sap/html/Div,<h1>→sap/html/H1,<blockquote>→sap/html/Blockquote.textproperty; mixed text + controls →sap.ui.core.html.TextContentwrappers preserving source order; void elements (<br>,<input>, …) reject children.preloadSapHtml()reads the library metadata'scontrolslist and async-requires everysap/html/*module in one batch, so the sync resolver always finds them.class=,ref=, and auto-prefix-id all work unchanged.Changes
packages/jsx-runtime/src/plugins/html/index.tstagToModulePath,resolveHtmlControl,normaliseHtmlProps,sapHtmlIntrinsic,htmlScope,preloadSapHtmlpackages/jsx-runtime/src/plugins/html/README.mdpackages/jsx-runtime/package.json./plugins/htmlexports subpathpackages/jsx-runtime/src/runtime/runtime.tsHTMLAttributesbag inJSX.IntrinsicElementswith per-tag types (AnchorAttributes,InputAttributes,ButtonHtmlAttributes, …)packages/jsx-runtime/scripts/jsx-runtime-aug.d.tspackages/jsx-runtime/test/qunit/plugins/html.qunit.tssap.ui.require— no real sap.html required at test timepackages/jsx-runtime/test/qunit/testsuite.qunit.tsplugins/htmltest suitepackages/jsx-runtime-showcase/ui5.yaml1.154.0-SNAPSHOT, addedsap.htmllibrarypackages/jsx-runtime-showcase/ui5-workspace.yamlpackages/jsx-runtime-showcase/webapp/Component.tsasync init()withawait preloadSapHtml()before router initpackages/jsx-runtime-showcase/webapp/view/showcases/NativeHtml.tsxpackages/jsx-runtime-showcase/webapp/docs/native-html.mdpackages/jsx-runtime-showcase/webapp/docs/samples/native-html.mdpackages/jsx-runtime-showcase/webapp/view/ExploreSample.tsxnative-htmlregistry entrypackages/jsx-runtime-showcase/webapp/controller/Explorer.controller.tspackages/jsx-runtime-showcase/webapp/view/LearnDoc.tsxsap-icon://html5icon casedocs/gotchas.md.changeset/html-plugin-sap-html.mdminorchangeset — triggers a0.2.0version bump on releaseTest plan
pnpm --filter @ui5-community/jsx-runtime build— compiles cleanlypnpm --filter @ui5-community/jsx-runtime test— 26/26plugins/htmltests green, all other suites unchanged<input>updates model;MessageToastfires on button/link click