Feature/demos remove system js html - #34672
Open
vorobey wants to merge 13 commits into
Open
Conversation
…ss#34656) Co-authored-by: Eldar Iusupzhanov <eldar.iusupzhanov@users.noreply.github.com>
Widget Gallery is dropping its in-browser code-editing feature independently of this work, so this flag has no reader left anywhere in the repo — it was purely a signal for that feature.
Replaces SystemJS's per-request in-browser transpile with real esbuild
bundling, reusing the existing CSP-check scripts as the shared core
rather than duplicating them:
- csp-bundle.js / csp-bundle-angular.js: parameterized to write
bundle.js/bundle.css next to a demo's own source (BUNDLE_IN_PLACE)
instead of only to the CSP-check's csp-bundled-demos/ side directory.
Also fixes two bugs found while wiring this up: a missing
require.main guard that made requiring csp-bundle.js trigger a full
bundle-everything run, and the Angular AOT compiler plugin sometimes
listing a CSS output in its esbuild metafile that it never actually
writes to disk.
- utils/build/{build-react-vue-demo,build-angular-demo}.js: thin
wrappers that drive the above for a single demo.
- utils/shell/server.js: lazy build-on-request — rebuilds only the
demo being viewed when its source is newer than its bundle, so local
dev doesn't need a pre-build/watch step over ~2,500 demos.
- utils/templates/{Angular,React,Vue}/index.html: scaffold templates
for new demos, updated to the <script src="./bundle.js"> shape.
Real demos get index.html regenerated by the builder itself
(idempotent once migrated), which is why these are just the
before-first-build placeholder.
- visual-tests-demos.yml: build-demos becomes a matrix job (React/Vue single-shard, Angular 3-shard, mirroring csp-check-frameworks' already-proven split) using BUNDLE_IN_PLACE=1 instead of the old `nx prepare-bundles` vendor-bundle step; testcafe-frameworks-all/ -changed download the new per-framework/-shard artifacts and overlay them onto their own checkout instead of the old single vendor bundle; csp-check-frameworks/csp-check-jquery drop the now-moot CSP_USE_BUNDLED env (every demo is bundled now, there's no SystemJS dev mode left to compare against). - csp-server.js: Demos/ is unconditionally the bundled, strict-CSP source now, so the whole SystemJS-dev-vs-csp-bundled-demos duality (relaxed nonce/strict-dynamic/unsafe-eval script-src, Vue's unsafe-inline style-src default, the SystemJS-only font-src allowlist entries) collapses to one profile; the csp-bundled-demos/ routes/handler are dropped as dead code. - csp-check.js: same simplification — always reads from Demos/. Not yet run in real CI — drafted and diff-reviewed locally, since this repo's demo CI can't be exercised outside GitHub Actions.
Now that every demo builds via esbuild (previous commits), delete the
SystemJS-era per-demo config.js generation and vendor-bundle pipeline
it fed:
- utils/internal/create-config.js, configs/{Angular,React,ReactJs,Vue}/
(the SystemJS module-map templates + per-demo config.js generator —
a real bundler resolves imports from actual `import` statements, so
this whole system has no replacement, it's just gone)
- utils/bundle/index.js, scripts/{build-bundles,update-config}.js, and
the now-dead `prepare-bundles` Nx target (systemjs-builder's Babel
6/7 vendor-bundle build)
- shared/loaders/{demo-ts-loader,demo-vue-loader,demo-ts-shared}.js,
utils/svg-loader.js (the in-browser SystemJS loader plugins)
- prepare-js-configs.js trimmed to what it still does (shared-resource
copying) with the config-gen calls removed
Drops systemjs, systemjs-builder, systemjs-plugin-json, and
dx-systemjs-vue-browser from package.json, along with the babel-core
patch and terser override that existed solely for systemjs-builder's
Babel 6 pipeline, and the now-pointless systemjs entry in
renovate.json's ignore list. pnpm-lock.yaml regenerated accordingly
(42 packages removed); `pnpm install --frozen-lockfile` verified clean.
…collision devextreme-angular's wrapper generator produced two different nested options with the identical class name DxoPivotGridFieldChooserTextsComponent and selector dxo-pivot-grid-field-chooser-texts: dxPivotGrid's own fieldChooser.texts, and the standalone dxPivotGridFieldChooser's own texts. The generator names classes as Dxo+parentWidgetName+optionName with no collision detection, and "PivotGrid"+"FieldChooserTexts" === "PivotGridFieldChooser"+"Texts". This was invisible under SystemJS's JIT Angular compiler, but a hard NG8023 ambiguous-selector error under AOT — which is exactly why the esbuild migration's PivotGrid/StandaloneFieldChooser Angular demo (the only one combining both widgets) failed to build in the previous commits. Fixed at the source with a forcedName metadata override in make-integration-metadata.ts — the same mechanism already used for identical collisions elsewhere in that file (e.g. Toolbar.items) — then regenerated and rebuilt devextreme-angular so the fix reaches apps/demos/node_modules/devextreme-angular (a symlink to packages/devextreme-angular/npm/dist, not src/ directly). Also drops csp-bundle-angular.js's KNOWN_BROKEN_DEMOS skip-list, now that the bug it worked around is actually fixed.
…for FieldChooserTexts rename The forcedName metadata fix for the PivotGrid/FieldChooser texts naming collision (58d765c) regenerated devextreme-angular but missed the React/Vue wrappers, which the check-regenerate CI job caught.
The generated JavaScript twins of the React demos (utils/ts-to-js-converter, `Js` output postfix) were left behind by the SystemJS migration: nothing in the build, the dev server or CI referenced the ReactJs approach, so their index.html still loaded system.js plus a config.js that no longer has a producer. - csp-bundle.js / server.js: accept ReactJs as a bundled approach. It needs no framework branch of its own — the shared esbuild options already map '.js' to the jsx loader, and only Vue takes a plugin branch. - .prettierrc.json: drop the ReactJs-only *.html override. index.html is generated by the builder now, and singleAttributePerLine/printWidth 100 meant every in-place rebuild would leave the tree failing lint-html. - ts-to-js-converter: exclude index.html from the converter's forced prettier flags. They override the config file, so the converter would otherwise reflow the builder's HTML on every run and make the "Check generated JS demos" job flap. The flags stay for the sources — prettier resolves .prettierignore from its cwd (the demo's own out dir), so they are load-bearing there. The demos themselves are regenerated on the stacked branch. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Regenerates every demo's index.html (React/Vue/Angular, all widgets except PivotGrid/StandaloneFieldChooser's Angular variant — blocked on a devextreme-angular naming collision fixed in a later commit) via the build infrastructure from the previous commit: drops the SystemJS runtime/config.js/System.import bootstrap in favor of a plain <script src="./bundle.js">, verified with real headless-Chrome renders across representative widgets (grids, charts, maps, schedulers, gantt, editors) and the menuMeta.json Modules-field demos (VectorMap, Localization, Autocomplete, DropDownBox, DropDownButton, Drawer, Form/SmartPaste, List) that used to rely on SystemJS's static module map. bundle.js/bundle.css themselves are generated, gitignored build output (same convention as the old Demos/**/config.js) — not part of this diff.
Regenerated by the builder itself, not hand-edited: BUNDLE_IN_PLACE=1 node utils/server/csp-bundle.js --framework=ReactJs 500 ok / 0 fail. Every file comes out byte-identical to its already-migrated React twin, which is what keeps `convert-to-js` a no-op — it copies **/*.html from the React demo, so any divergence here would show up as "Generated JS demos are outdated" in CI. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
… demo The one demo the mass migration could not convert: it combines dxPivotGrid and dxPivotGridFieldChooser, whose generated Angular wrappers collided on the DxoPivotGridFieldChooserTextsComponent selector and failed AOT with NG8023. Now that the wrapper collision is fixed on the base branch, its index.html converts like the rest. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This was referenced Aug 6, 2026
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
4 participants
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.
part 2. shall be merged after #34671