feat: add Navigation and OData V4 tutorials, align all packages#295
Open
petermuessig wants to merge 2 commits into
Open
feat: add Navigation and OData V4 tutorials, align all packages#295petermuessig wants to merge 2 commits into
petermuessig wants to merge 2 commits into
Conversation
Bring two new tutorials — Navigation and Routing, OData V4 — into the monorepo, and rework all four tutorials onto a single template so they share the same toolchain, layout, namespace, and documentation conventions. Tutorials - packages/navigation/ — 17 steps imported from the OpenUI5 demokit, promoted to the standard `steps/` layout, package names changed to `ui5.tutorial.navigation.stepNN`, ui5.yaml metadata aligned with the rest of the repo, dev dependencies switched to the walkthrough set (@types/openui5, ui5-middleware-serveframework, ui5-tooling-transpile), app namespace renamed `sap.ui.demo.nav` -> `ui5.tutorial.navigation` across manifests, TS imports, JSDoc, XML controllerName, tsconfig paths, and HTML resource-roots. - packages/odatav4/ — 11 steps imported from the same demokit source, restructured from `solutions/` -> `steps/`, root-level markdown moved into per-step README.md, shared `images/` split into per-step `assets/`. JS sources fully converted to TypeScript ES modules (Component, App.controller, model/models, initMockServer, the ~800- line sinon-based mock server, view XML), Hungarian variable prefixes stripped (oModel -> model, aMatches -> matches, sUrl -> url, ...) to match the project's TS style. App namespace standardised to `ui5.tutorial.odatav4`. Namespace alignment across the existing tutorials - packages/walkthrough/ renamed `ui5.walkthrough` -> `ui5.tutorial.walkthrough` across ~630 files (manifests, TS imports + @namespace, XML controllerName + xmlns, tsconfig paths, HTML resource-roots, every README code snippet, step package.json names). - packages/quickstart/ renamed `ui5.quickstart` -> `ui5.tutorial.quickstart` with the same shape across 27 files; ui5.yaml `metadata.name` `quickstart-tutorial` -> `ui5.tutorial.quickstart`. After this commit, all 69 step workspaces follow the same naming convention: `ui5.tutorial.<tutorial>.stepNN`. Documentation - Per-tutorial overview READMEs (packages/{navigation,odatav4}/README.md) now mirror packages/walkthrough/README.md: each step bullet has an inline `[🔗 Live Preview]` link and paired `<details class="ts-only">` / `<details class="js-only">` `[📥 Download Solution]` blocks. - Step READMEs ship with paired ```ts / ```js code blocks so the Jekyll code-couple toggle renders both flavours. JS half generated from the build's sanitized `*-dbg.js` output where applicable. - Folder-structure images replaced with fenced ```text ASCII trees (using `.?s` placeholders so the global toggle flips the extensions); images deleted from the per-step assets. - All callout syntaxes (GitHub-flavoured alerts `> [!NOTE]` plus walkthrough's emoji blockquotes `> 📝 **Note:** <br>`) normalised to the `:note:` / `:tip:` / `:info:` / `:caution:` / `:warning:` shorthand mandated by `_/AUTOMATE.md`. - Step-level "view and download all files at \[demokit\]" links retargeted to the published `https://ui5.github.io/tutorials/...` URLs so they resolve against the local dist via the dev server. - License year bumped 2025 -> 2026 across all overview READMEs; `## License` sections added to the navigation and odatav4 overviews to match the walkthrough/quickstart convention. Tooling - tools/dev-server/server.js: mount `dist/` under `/dist/...` so `npm start` serves the locally-built apps and ZIPs; rewrite the published `https://ui5.github.io/tutorials/...` URLs in rendered markdown to the local `/dist/...` paths for the four known tutorial slugs (walkthrough, quickstart, navigation, odatav4); friendly hint page when an artifact is missing. - README.md: document the `npm install && npm run build && npm start` workflow. Verification - `npm install` succeeds and registers all 69 workspaces under the new `ui5.tutorial.*` namespace. - `npm run typecheck -ws --if-present` exits 0. - `npm run build` exits 0; produces `dist/<tutorial>/build/NN/` apps, `<tutorial>-step-NN.zip` and `<tutorial>-step-NN-js.zip` downloads, and the rewritten `dist/index.md` overview for each tutorial. - `index-cdn.html` present for every webapp that bootstraps SAPUI5 (68 of 69 — walkthrough step 01 is the bare HTML "Hello World" and intentionally has none). - Dev-server smoke test: Live Preview links from the overview README resolve to `/dist/<tutorial>/build/NN/index-cdn.html` with HTTP 200.
flovogt
requested changes
Jun 30, 2026
Versions - Bump framework to OpenUI5 1.148.1 (latest LTS patch) in every step ui5.yaml and CDN bootstrap URL. - Bump manifest _version to 2.8.0 and minUI5Version to 1.148 across all 69 manifests (mapping per UI5/manifest v2/mapping.json). - specVersion: "4.0" for every ui5.yaml. - @types/openui5 ^1.148.0 in every step package.json. - Sync README narrative and inline manifest snippets that referenced OpenUI5 1.120 / _version 1.60.0 / 1.38.0 to the new values. Reviewer findings (PR #295, @flovogt) - Manifest v2 (_version 2.8.0). - specVersion '4.0'. - Ensure trailing newline on every webapp source file. Cross-tutorial inconsistency cleanup - Quickstart Component.ts: @namespace sap.m.tutorial.quickstart.NN -> ui5.tutorial.quickstart, switch to public static metadata and add interfaces: ["sap.ui.core.IAsyncContentCreation"]. - Strip residual Hungarian-notation in quickstart controllers/index.ts (oEvent/bState/oView) and the named identifiers in odatav4 OPA tests (iGrowingBy/sViewName/oListBinding). - Add explicit "strict": false, "strictNullChecks": false to walkthrough and quickstart tsconfig.json files (match navigation/odatav4). - Drop redundant data-sap-ui-libs from quickstart steps 02 and 03 index.html (Component manifest already declares the libs). - Add data-sap-ui-theme="sap_horizon" to quickstart and navigation bootstrap script tags so the theme is explicit and consistent with walkthrough/odatav4. Indentation normalization per .editorconfig - JSON / XML / YAML / .properties -> 2 spaces. - TS / JS / HTML -> tabs. - Re-indent fenced code blocks inside step README.md files to match the same conventions so doc snippets mirror the actual source files. Verified: npm run typecheck and npm run build both exit 0; ui5-linter clean on sampled steps; manifest validation clean.
Contributor
Author
|
@flovogt thanks for the review — all three findings are addressed in 9b4f266, plus a broader cleanup pass on cross-tutorial inconsistencies that showed up once versions were aligned. Threads resolved above. Review findings ✅
UI5 LTS alignment
Cross-tutorial cleanup
Indentation normalization per
|
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
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.
What this PR does
Brings two new tutorials into the monorepo — Navigation and Routing (17 steps) and OData V4 (11 steps) — and reworks all four tutorials onto a single template so they share the same toolchain, layout, namespace, and documentation conventions.
After this PR the repo ships 4 tutorials with 69 step workspaces, all under the
ui5.tutorial.<name>.stepNNnaming.Tutorials
packages/navigation/(new)steps/NN/layout.sap.ui.demo.nav→ui5.tutorial.navigationacross manifests, TS imports, JSDoc@namespace, XMLcontrollerName,tsconfigpaths, and HTML resource-roots.@types/openui5,ui5-middleware-serveframework,ui5-tooling-transpile).package.jsonnames →ui5.tutorial.navigation.stepNN;ui5.yamlmetadata aligned.packages/odatav4/(new)solutions/→steps/, root-level markdown moved into per-stepREADME.md, sharedimages/split into per-stepassets/.Component,App.controller,model/models,initMockServer, the ~800-line sinon-based mock server, plus the view XML.oModel→model,aMatches→matches,sUrl→url, …) to match the project's TS style — confirmed againstpackages/walkthrough/.ui5.tutorial.odatav4.Namespace alignment of the existing tutorials
packages/walkthrough/— renamedui5.walkthrough→ui5.tutorial.walkthroughacross ~630 files (manifests, TS imports +@namespace, XMLcontrollerName+xmlns,tsconfigpaths, HTML resource-roots, every README code snippet, steppackage.jsonnames).packages/quickstart/— renamedui5.quickstart→ui5.tutorial.quickstartwith the same shape across 27 files;ui5.yamlmetadata.namequickstart-tutorial→ui5.tutorial.quickstart.Documentation
packages/{navigation,odatav4}/README.md) now mirrorpackages/walkthrough/README.md: each step bullet has an inline🔗 Live Previewlink plus paired<details class="ts-only">/<details class="js-only">📥 Download Solutionblocks.```ts/```jscode blocks so the Jekyll code-couple toggle renders both flavours. The JS half is generated from the build's sanitised*-dbg.jsoutput where applicable.```textASCII trees (using.?splaceholders so the toggle flips the extensions); images deleted from per-stepassets/.> [!NOTE]plus walkthrough's emoji blockquotes> 📝 **Note:** <br>) normalised to the:note:/:tip:/:info:/:caution:/:warning:shorthand mandated by_/AUTOMATE.md— 76 callouts converted.https://ui5.github.io/tutorials/...URLs so they resolve against the localdist/via the dev server.## Licensesections added to the new navigation and odatav4 overviews.Tooling
tools/dev-server/server.js:dist/under/dist/...sonpm startserves the locally-built apps and ZIPs.https://ui5.github.io/tutorials/...URLs in rendered markdown to local/dist/...paths for the four known tutorial slugs (walkthrough,quickstart,navigation,odatav4).README.md: document thenpm install && npm run build && npm startworkflow.Verification
npm installsucceeds and registers all 69 workspaces under the newui5.tutorial.*namespace.npm run typecheck -ws --if-present→ exit 0.npm run build→ exit 0. Producesdist/<tutorial>/build/NN/apps,<tutorial>-step-NN.zipand<tutorial>-step-NN-js.zipdownloads, and the rewrittendist/index.mdoverview for each tutorial.index-cdn.htmlpresent for every webapp that bootstraps SAPUI5 (68 of 69 — walkthrough step 01 is the bare HTML "Hello World" and intentionally has none)./dist/<tutorial>/build/NN/index-cdn.htmlwith HTTP 200.Stats
1363 files changed: 49,009 insertions, 1,320 deletions.
JIRA: FIORITECHP1-35769