Feature/remove systemjs from demos. Сleanup

.github/workflows/publish-demos.yml

@@ -150,10 +150,6 @@ jobs:
       working-directory: apps/demos
       run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
 
-    - name: Prepare configs
-      working-directory: apps/demos
-      run: pnpm run prepare-js
-
     - name: Copy metadata
       working-directory: apps/demos
       run: pnpm run make-demos-bundle --copy-metadata
@@ -249,10 +245,6 @@ jobs:
       working-directory: apps/demos
       run: pnpm add ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz
 
-    - name: Prepare configs
-      working-directory: apps/demos
-      run: pnpm run prepare-js
-
     - name: Copy metadata
       working-directory: apps/demos
       run: pnpm run make-demos-bundle --copy-metadata

.github/workflows/visual-tests-demos.yml

@@ -669,11 +669,6 @@ jobs:
       working-directory: apps/demos
       run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
 
-    - name: Prepare JS
-      if: steps.changed-react-demos.outputs.has-react-demos == 'true'
-      working-directory: apps/demos
-      run: pnpm run prepare-js
-
     - name: Check generated JS demos
       if: steps.changed-react-demos.outputs.has-react-demos == 'true'
       working-directory: apps/demos
@@ -741,10 +736,6 @@ jobs:
       working-directory: apps/demos
       run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
 
-    - name: Prepare JS
-      working-directory: apps/demos
-      run: pnpm run prepare-js
-
     - name: Check generated JS demos
       working-directory: apps/demos
       run: |
@@ -999,10 +990,6 @@ jobs:
       working-directory: apps/demos
       run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
 
-    - name: Prepare JS
-      working-directory: apps/demos
-      run: pnpm run prepare-js
-
     - name: Download demo bundles (React)
       if: startsWith(matrix.CONSTEL, 'react')
       uses: actions/download-artifact@v8
@@ -1179,10 +1166,6 @@ jobs:
         working-directory: apps/demos
         run: pnpm add --ignore-workspace --allow-build=core-js --allow-build=inferno devextreme-aspnet-data@5.1.0 devextreme-aspnet-data-nojquery@5.1.0 ../../devextreme-installer.tgz ../../devextreme-dist-installer.tgz ../../devextreme-react-installer.tgz ../../devextreme-vue-installer.tgz ../../devextreme-angular-installer.tgz && rm -f pnpm-workspace.yaml pnpm-lock.yaml
 
-      - name: Prepare JS
-        working-directory: apps/demos
-        run: pnpm run prepare-js
-
       - name: Download demo bundles (React)
         if: matrix.CONSTEL == 'react'
         uses: actions/download-artifact@v8

CLAUDE.md

@@ -114,7 +114,7 @@ packages/
   testcafe-models/      # TestCafe page object models
 
 apps/
-  demos/                # Technical demos (Angular, React, Vue, jQuery)
+  demos/                # Technical demos (Angular, React, Vue, jQuery) — esbuild on demand
 
 e2e/
   testcafe-devextreme/  # E2E tests
@@ -142,6 +142,31 @@ Do not edit directly:
 - `packages/devextreme/js/__internal/core/localization/default_messages.ts`
 - `packages/devextreme/js/__internal/core/localization/cldr-data/**/*`
 
+## Demos
+
+Technical demos live in `apps/demos`.
+
+From the repo root:
+
+```bash
+pnpm run demos:prepare   # build DevExtreme, pack wrappers, vendor bundles
+pnpm run demos:start     # http://localhost:8080/
+```
+
+`demos:start` is long-running. Do not start a second copy if the developer already has it running.
+
+Angular, React, and Vue demos bundle on demand with esbuild when a page is opened (`bundle.js` / `bundle.css` next to the demo source — gitignored, do not commit). jQuery demos load `dx.all.js` from `devextreme-dist`.
+
+### Editing demos
+
+From `apps/demos`:
+
+```bash
+pnpm run add-demo                  # scaffold a new demo
+pnpm run convert-to-js split       # after React TypeScript changes
+pnpm run fix-lint
+```
+
 ## Code Style Conventions
 
 These rules apply to `packages/devextreme/js/**/*.d.ts` (see `.github/instructions/API_conventions.instructions.md`):

apps/demos/.gitignore

@@ -23,9 +23,6 @@ changed-files.json
 
 !.vscode/settings.json
 
-shared/empty-file.js
-
-Demos/**/config.js
 Demos/**/tsconfig.json
 
 # esbuild in-place demo build output (see utils/build/) — generated next to

apps/demos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -15,17 +15,11 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   changeDetection: ChangeDetectionStrategy.Eager,
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   providers: [Service],
   preserveWhitespaces: true,
   imports: [

apps/demos/Demos/ActionSheet/Basics/Angular/app/app.component.ts

@@ -7,16 +7,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxActionSheetModule,
     DxButtonModule,

apps/demos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.ts

@@ -8,16 +8,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   providers: [Service],
   imports: [
     DxActionSheetModule,

apps/demos/Demos/Autocomplete/Overview/Angular/app/app.component.ts

@@ -15,17 +15,11 @@ function isNotEmpty(value: unknown): boolean {
   return value !== undefined && value !== null && value !== '';
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxAutocompleteModule,
   ],

apps/demos/Demos/Box/Overview/Angular/app/app.component.ts

@@ -6,16 +6,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxBoxModule,
   ],

apps/demos/Demos/Button/Icons/Angular/app/app.component.ts

@@ -7,16 +7,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   preserveWhitespaces: true,
   imports: [
     DxButtonModule,

apps/demos/Demos/Button/PredefinedTypes/Angular/app/app.component.ts

@@ -7,16 +7,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxButtonModule,
   ],

apps/demos/Demos/ButtonGroup/Overview/Angular/app/app.component.ts

@@ -9,17 +9,11 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   preserveWhitespaces: true,
   imports: [
     DxButtonGroupModule,

apps/demos/Demos/Calendar/MultipleSelection/Angular/app/app.component.ts

@@ -7,16 +7,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxSelectBoxModule,
     DxCalendarModule,

apps/demos/Demos/Calendar/Overview/Angular/app/app.component.ts

@@ -9,16 +9,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   imports: [
     DxCalendarModule,
     DxCheckBoxModule,

apps/demos/Demos/CardView/CardTemplate/Angular/app/app.component.ts

@@ -13,15 +13,9 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
+  templateUrl: './app.component.html',
   providers: [Service],
   imports: [
     DxCardViewModule,

apps/demos/Demos/CardView/CardTemplate/Angular/app/license-info/license-info.component.ts

@@ -1,15 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { Vehicle } from '../app.service';
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'license-info',
-  templateUrl: `.${modulePrefix}/license-info/license-info.component.html`,
+  templateUrl: './license-info.component.html',
 })
 export class LicenseInfo {
   vehicleLink = '';

apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.ts

@@ -1,16 +1,10 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { DxButtonModule } from 'devextreme-angular';
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'vehicle-card',
-  templateUrl: `.${modulePrefix}/vehicle-card/vehicle-card.component.html`,
-  styleUrls: [`.${modulePrefix}/vehicle-card/vehicle-card.component.css`],
+  templateUrl: './vehicle-card.component.html',
+  styleUrls: ['./vehicle-card.component.css'],
   imports: [
     DxButtonModule,
   ],

apps/demos/Demos/CardView/ColumnChooser/Angular/app/app.component.ts

@@ -7,16 +7,10 @@ if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
 
-let modulePrefix = '';
-// @ts-ignore
-if (window && window.config?.packageConfigPaths) {
-  modulePrefix = '/app';
-}
-
 @Component({
   selector: 'demo-app',
-  templateUrl: `.${modulePrefix}/app.component.html`,
-  styleUrls: [`.${modulePrefix}/app.component.css`],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
   providers: [Service],
   imports: [
     DxCardViewModule,