Skip to content

Overhaul samples app architecture and CI - #1253

Merged
ChronosSF merged 2 commits into
vnextfrom
rkaraivanov/app-architecture-improvements
Sep 2, 2026
Merged

Overhaul samples app architecture and CI#1253
ChronosSF merged 2 commits into
vnextfrom
rkaraivanov/app-architecture-improvements

Conversation

@rkaraivanov

Copy link
Copy Markdown
Member

The nav sidebar was server-rendered into all 962 pages (~185MB of dist), Rollup hosted shared library code inside arbitrary sample chunks (11MB chunks, wrong-theme leaks), samples flashed unstyled until their JS chunk evaluated, and CI only built.

  • Render the nav on the client from a static nav.json endpoint; delete NavSidebar.astro. Sidebar visibility is decided before first paint, so no layout shift.
  • Split node_modules into per-package vendor chunks (plus a chunk for Vite's preload helper) so no sample chunk hosts shared code and unrelated pages never run a foreign sample's side effects.
  • Emit each sample's stylesheets into at build time: theme sheets as cacheable s copied to public/ig-themes/, local CSS/SCSS inlined. Fixes first-paint flash and the memoised getTheme() latching onto another sample's theme.
  • Extract the triplicated glob→slug pipeline into samples.ts.
  • Gate CI with astro check and Playwright smoke tests (14 tests against the production build); retire the broken Azure pipeline.

The nav sidebar was server-rendered into all 962 pages (~185MB of
dist), Rollup hosted shared library code inside arbitrary sample
chunks (11MB chunks, wrong-theme leaks), samples flashed unstyled
until their JS chunk evaluated, and CI only built.

- Render the nav on the client from a static nav.json endpoint;
  delete NavSidebar.astro. Sidebar visibility is decided before
  first paint, so no layout shift.
- Split node_modules into per-package vendor chunks (plus a chunk
  for Vite's preload helper) so no sample chunk hosts shared code
  and unrelated pages never run a foreign sample's side effects.
- Emit each sample's stylesheets into <head> at build time: theme
  sheets as cacheable <link>s copied to public/ig-themes/, local
  CSS/SCSS inlined. Fixes first-paint flash and the memoised
  getTheme() latching onto another sample's theme.
- Extract the triplicated glob→slug pipeline into samples.ts.
- Gate CI with astro check and Playwright smoke tests (14 tests
  against the production build); retire the broken Azure pipeline.
ChronosSF
ChronosSF previously approved these changes Sep 2, 2026
@ChronosSF ChronosSF added the status: verified The PR is tested and ready for a merge label Sep 2, 2026

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Navigation timing, sandboxed iframe storage access, and overly broad smoke-test error suppression remain unresolved.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Overhauls the Astro samples browser to reduce duplicated output, prevent cross-sample styling issues, and strengthen CI.

Changes:

  • Moves navigation rendering to a client-fetched static tree.
  • Emits sample styles in <head> and isolates shared dependencies into vendor chunks.
  • Adds type-checking and production smoke tests to CI.
File summaries
File Description
.github/workflows/node.js.yml Adds checks and smoke tests.
.gitignore Ignores generated themes and test results.
astro.config.mjs Revises CSS handling and chunk splitting.
azure-pipelines/build-pipeline.yml Removes obsolete Azure pipeline.
package-lock.json Locks Playwright dependencies.
package.json Adds theme and test scripts.
playwright.config.ts Configures production smoke tests.
public/styles/layout.css Adds pre-paint navigation and component guards.
scripts/copy-ig-themes.js Copies theme assets into public output.
src/components/NavSidebar.astro Removes server-rendered navigation.
src/layouts/SampleLayout.astro Adds head styles and client navigation shell.
src/pages/[...slug].astro Resolves styles and loads sample modules.
src/pages/index.astro Uses shared sample enumeration.
src/pages/nav.json.ts Exposes the static navigation tree.
src/scripts/nav.ts Implements client-side navigation.
src/utils/samples.ts Centralizes sample and stylesheet resolution.
tests/smoke/samples.spec.ts Adds production regression coverage.
Review details
  • Files reviewed: 15/17 changed files
  • Comments generated: 3
  • Review effort level: Balanced

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread src/layouts/SampleLayout.astro
Comment thread src/scripts/nav.ts Outdated
Comment thread tests/smoke/samples.spec.ts Outdated
The index armed the sidebar flag from the deferred nav module, so a
click before it ran reached the sample without a sidebar. vnext did
this synchronously; restore that in the pre-paint inline script.
This also removes the module's unguarded sessionStorage writes.

The smoke tests ignored every resource failure, so a missing
first-party asset (e.g. a copied theme sheet) passed CI. Ignore
only failures from external origins.
@ChronosSF
ChronosSF merged commit 8f54fd5 into vnext Sep 2, 2026
4 checks passed
@ChronosSF
ChronosSF deleted the rkaraivanov/app-architecture-improvements branch September 2, 2026 12:25
ChronosSF added a commit that referenced this pull request Sep 2, 2026
Merge pull request #1253 from IgniteUI/rkaraivanov/app-architecture-i…
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

status: verified The PR is tested and ready for a merge

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants