feature(chore, security): Remove SystemJS from app demos - #34676
Conversation
There was a problem hiding this comment.
Pull request overview
This PR removes the legacy SystemJS-based demos infrastructure and shifts demos toward an esbuild-bundled model (including CSP/visual-test pipeline updates). It also includes related cleanup/fixes in the PivotGrid wrapper generation (to avoid nested-option naming/selector conflicts) and a DataController paging sync adjustment with new Jest coverage.
Changes:
- Removed SystemJS-related demo tooling/configuration and dependencies; updated demo templates and CI workflows to use esbuild bundles (including sharded build artifacts for visual tests/CSP checks).
- Refactored demo dev server + bundling utilities to support on-demand (lazy) in-place demo bundling.
- Improved grid DataController/DataHelperMixin typing and introduced a new integration test for
paging.pageIndexsynchronization.
Reviewed changes
Copilot reviewed 47 out of 52 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Removes patchedDependencies entries tied to removed SystemJS-era tooling. |
| patches/systemjs-builder@0.16.15.patch | Deletes no-longer-needed patch for systemjs-builder. |
| patches/babel-core@6.26.3.patch | Deletes no-longer-needed patch for babel-core. |
| packages/devextreme/js/__internal/grids/grid_core/data_controller/data_helper_mixin.ts | Tightens typing/structure of the grid data helper mixin and renames lifecycle hook. |
| packages/devextreme/js/__internal/grids/grid_core/data_controller/data_controller.ts | Adjusts paging/filter behavior and refactors paging change logic into a method. |
| packages/devextreme/js/__internal/grids/grid_core/data_controller/tests/m_data_controller.integration.test.ts | Adds Jest integration coverage for paging.pageIndex sync on filtering/search. |
| packages/devextreme-vue/src/pivot-grid.ts | Renames PivotGrid fieldChooser texts nested component and updates expected children. |
| packages/devextreme-react/src/pivot-grid.ts | Renames PivotGrid fieldChooser texts nested component and updates expected children/exports. |
| packages/devextreme-metadata/make-integration-metadata.ts | Updates wrapper metadata to force the new nested option name for PivotGrid fieldChooser texts. |
| packages/devextreme-angular/src/ui/pivot-grid/nested/index.ts | Switches Angular nested exports to the renamed embedded field chooser texts component. |
| packages/devextreme-angular/src/ui/pivot-grid/nested/embedded-field-chooser-texts.ts | Renames Angular nested component selector/class/module to avoid selector conflicts. |
| packages/devextreme-angular/src/ui/pivot-grid/index.ts | Updates PivotGrid module imports/exports to reference the renamed nested module. |
| apps/demos/utils/ts-to-js-converter/converter.ts | Excludes generated demo index.html from formatting/globbing to prevent churn. |
| apps/demos/utils/templates/Vue/index.html | Updates Vue demo template to load esbuild outputs (bundle.js/bundle.css) instead of SystemJS. |
| apps/demos/utils/templates/React/index.html | Updates React demo template to load esbuild outputs instead of SystemJS. |
| apps/demos/utils/templates/Angular/index.html | Updates Angular demo template to load esbuild outputs (module bundle) instead of SystemJS. |
| apps/demos/utils/svg-loader.js | Removes SystemJS-era SVG loader. |
| apps/demos/utils/shell/server.js | Adds lazy in-place bundling of demos on request (avoids global watchers). |
| apps/demos/utils/server/csp-server.js | Simplifies CSP server routing/nonce logic for the new bundled-only demo approach. |
| apps/demos/utils/server/csp-check.js | Aligns CSP check discovery/sharding with bundled demos and CI sharding variables. |
| apps/demos/utils/server/csp-bundle.js | Extends bundler to support ReactJs + in-place mode; refactors shared options + exports internals for reuse. |
| apps/demos/utils/server/csp-bundle-angular.js | Adds in-place mode support and exports internals for reuse; removes the “known broken demos” skip. |
| apps/demos/utils/internal/create-config.js | Removes SystemJS config generator. |
| apps/demos/utils/bundle/index.js | Removes SystemJS builder-based bundle generation. |
| apps/demos/utils/build/build-react-vue-demo.js | Adds helper to build a single React/Vue demo in-place via csp-bundle internals. |
| apps/demos/utils/build/build-angular-demo.js | Adds helper to build a single Angular demo in-place via csp-bundle-angular internals. |
| apps/demos/shared/loaders/demo-vue-loader.js | Removes SystemJS Vue SFC loader infrastructure. |
| apps/demos/shared/loaders/demo-ts-shared.js | Removes browser TypeScript transpilation helper used by SystemJS loader pipeline. |
| apps/demos/shared/loaders/demo-ts-loader.js | Removes SystemJS TypeScript translate loader. |
| apps/demos/scripts/update-config.js | Removes SystemJS bundle-config update script. |
| apps/demos/scripts/prepare-js-configs.js | Removes SystemJS config generation step from demo prep. |
| apps/demos/scripts/build-bundles.js | Removes SystemJS bundle build script. |
| apps/demos/project.json | Removes prepare-bundles target and drops SystemJS config inputs/outputs from Nx metadata. |
| apps/demos/package.json | Removes SystemJS-related dependencies and scripts from demos package. |
| apps/demos/menuMeta.json | Removes DisableExternalEditor flags from multiple entries (metadata cleanup aligned with infra change). |
| apps/demos/index.html | Hardens selection logic and adjusts key computation for menu items. |
| apps/demos/configs/Vue/tsconfig.json | Removes SystemJS-era Vue tsconfig. |
| apps/demos/configs/Vue/config.js | Removes SystemJS-era Vue System.config. |
| apps/demos/configs/Vue/config.bundle.js | Removes SystemJS bundle config for Vue. |
| apps/demos/configs/ReactJs/config.js | Removes SystemJS-era ReactJs System.config. |
| apps/demos/configs/ReactJs/config.bundle.js | Removes SystemJS bundle config for ReactJs. |
| apps/demos/configs/React/tsconfig.json | Removes SystemJS-era React tsconfig. |
| apps/demos/configs/React/config.js | Removes SystemJS-era React System.config. |
| apps/demos/configs/React/config.bundle.js | Removes SystemJS bundle config for React. |
| apps/demos/configs/Angular/tsconfig.json | Removes SystemJS-era Angular tsconfig. |
| apps/demos/configs/Angular/config.js | Removes SystemJS-era Angular System.config. |
| apps/demos/configs/Angular/config.bundle.js | Removes SystemJS bundle config for Angular. |
| apps/demos/.prettierrc.json | Removes ReactJs-specific HTML formatting override (SystemJS infra cleanup). |
| apps/demos/.gitignore | Adds ignore rules for in-place esbuild outputs (bundle.js/bundle.css). |
| .github/workflows/visual-tests-demos.yml | Updates demo build/test workflows to build and distribute esbuild bundles via tar artifacts and introduces sharded Angular builds. |
| .github/renovate.json | Removes systemjs from a disabled dependency group. |
abf8c37 to
1f8646d
Compare
Co-authored-by: Arman Jivanyan <arman.jivanyan@devexpress.com>
Co-authored-by: Arman Jivanyan <arman.jivanyan@devexpress.com>
302a31b to
3f49784
Compare
Co-authored-by: Andrey Vorobev <738482+vorobey@users.noreply.github.com> Co-authored-by: Arman Jivanyan <arman.jivanyan@devexpress.com>
Co-authored-by: Arman Jivanyan <arman.jivanyan@devexpress.com> Co-authored-by: Andrei Vorobev <andrei.vorobev@devexpress.com>
Co-authored-by: Arman Jivanyan <arman.jivanyan@devexpress.com> Co-authored-by: Andrei Vorobev <andrei.vorobev@devexpress.com>
2c3654d to
8d5510f
Compare
Signed-off-by: Andrey Vorobev <738482+vorobey@users.noreply.github.com>
…emjs-from-demos # Conflicts: # pnpm-lock.yaml
…remove-systemjs-from-demos
There was a problem hiding this comment.
🔵 Needs a closer look
The change set is very broad (mass demo edits + build pipeline removals), so it should be validated by a human via running the demos/tests affected by the new non-SystemJS bundling flow.
Review details
- Files reviewed: 300/2820 changed files
- Comments generated: 0 new
- Review effort level: Lite
There was a problem hiding this comment.
🟡 Changes recommended
There is still at least one Angular demo that contains SystemJS-era packageConfigPaths/modulePrefix logic, so the “remove SystemJS” cleanup appears incomplete.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Review details
- Files reviewed: 300/2820 changed files
- Comments generated: 1
- Review effort level: Lite
No description provided.