WIP. check demos bundles

.github/workflows/publish-demos.yml

@@ -249,3 +249,5 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_dir: ./apps/demos/publish-demos
+          destination_dir: demos
+          keep_files: true

apps/demos/configs/Angular/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2022",
     "experimentalDecorators": true,
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "skipLibCheck": true,
     "baseUrl": "./",
     "paths": {

apps/demos/package.json

@@ -15,16 +15,16 @@
         "devextreme-vue": "workspace:*"
     },
     "dependencies": {
-        "@angular/animations": "~21.1.0",
-        "@angular-devkit/build-angular": "~21.1.0",
-        "@angular/cli": "~21.1.5",
-        "@angular/common": "~21.1.0",
+        "@angular/animations": "~21.2.9",
+        "@angular-devkit/build-angular": "~21.2.8",
+        "@angular/cli": "~21.2.8",
+        "@angular/common": "~21.2.9",
         "@angular/compiler": "~21.2.0",
-        "@angular/compiler-cli": "~21.1.0",
+        "@angular/compiler-cli": "~21.2.9",
         "@angular/core": "~21.2.4",
-        "@angular/forms": "~21.1.0",
-        "@angular/platform-browser": "~21.1.0",
-        "@angular/platform-browser-dynamic": "~21.1.0",
+        "@angular/forms": "~21.2.9",
+        "@angular/platform-browser": "~21.2.9",
+        "@angular/platform-browser-dynamic": "~21.2.9",
         "@aspnet/signalr": "1.0.27",
         "@preact/signals-core": "^1.8.0",
         "@rollup/plugin-commonjs": "19.0.2",

apps/demos/utils/create-bundles/Angular/bundler.ts

@@ -1,6 +1,15 @@
 import { exec } from 'child_process';
 import { BuildOptions } from 'esbuild';
-import { existsSync, mkdirSync, removeSync } from 'fs-extra';
+import {
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  removeSync,
+  statSync,
+  writeFileSync,
+} from 'fs-extra';
+import { dirname, join, relative } from 'path';
 import { Demo, Framework } from '../helper/types';
 import { createDemoLayout, getDestinationPathByDemo, getSourcePathByDemo } from '../helper';
 import { getIndexHtmlPath, getProjectNameByDemo } from './utils';
@@ -10,6 +19,12 @@ interface Bundler {
   getBuildOptions: (demo: Demo) => BuildOptions;
   buildDemo: (demo: Demo, res) => void;
 }
+
+type ChangedFile = {
+  path: string;
+  originalContent: string;
+};
+
 export default class AngularBundler implements Bundler {
   framework: Framework;
 
@@ -19,6 +34,55 @@ export default class AngularBundler implements Bundler {
 
   getBuildOptions = (): BuildOptions => ({});
 
+  private updateAntiForgeryImport = (sourceDemoPath: string): ChangedFile[] => {
+    const angularAppPath = join(sourceDemoPath, 'app');
+    if (!existsSync(angularAppPath)) {
+      return [];
+    }
+
+    const changedFiles: ChangedFile[] = [];
+    const oldImport = "import 'anti-forgery';";
+    const antiForgeryFilePath = join(__dirname, '..', '..', '..', 'shared', 'anti-forgery', 'fetch-override.js');
+
+    const replaceRecursively = (directoryPath: string) => {
+      const entries = readdirSync(directoryPath);
+      entries.forEach((entryName) => {
+        const entryPath = join(directoryPath, entryName);
+        const isDirectory = statSync(entryPath).isDirectory();
+        if (isDirectory) {
+          replaceRecursively(entryPath);
+          return;
+        }
+
+        if (!entryPath.endsWith('.ts')) {
+          return;
+        }
+
+        const content = readFileSync(entryPath, 'utf8');
+        if (!content.includes(oldImport)) {
+          return;
+        }
+
+        const relativeImportPath = relative(dirname(entryPath), antiForgeryFilePath).split('\\').join('/');
+        const normalizedImportPath = relativeImportPath.startsWith('.') ? relativeImportPath : `./${relativeImportPath}`;
+        const newImport = `import '${normalizedImportPath}';`;
+        changedFiles.push({ path: entryPath, originalContent: content });
+        writeFileSync(entryPath, content.split(oldImport).join(newImport), 'utf8');
+      });
+    };
+
+    replaceRecursively(angularAppPath);
+    return changedFiles;
+  };
+
+  private restoreChangedFiles = (changedFiles: ChangedFile[]) => {
+    changedFiles.forEach(({ path, originalContent }) => {
+      if (existsSync(path)) {
+        writeFileSync(path, originalContent, 'utf8');
+      }
+    });
+  };
+
   buildDemo = (demo: Demo, res): Promise<void> => {
     const sourceDemoPath = getSourcePathByDemo(demo, this.framework);
     if (!existsSync(sourceDemoPath)) {
@@ -41,6 +105,7 @@ export default class AngularBundler implements Bundler {
     mkdirSync(indexHtmlPath, { recursive: true });
 
     createDemoLayout(demo, this.framework);
+    const changedFiles = this.updateAntiForgeryImport(sourceDemoPath);
 
     const ngBuildCommand = `npm run build-angular -- ${getProjectNameByDemo(demo)}`;
     const ngBuildProcess = exec(ngBuildCommand);
@@ -51,6 +116,7 @@ export default class AngularBundler implements Bundler {
       console.error(`stderr: ${data}`);
     });
     ngBuildProcess.on('close', (code) => {
+      this.restoreChangedFiles(changedFiles);
       console.log(`child process exited with code ${code}`);
       res();
     });

apps/demos/utils/create-bundles/Angular/update-angular-json.ts

@@ -34,6 +34,11 @@ const createConfigForDemo = (Demo: Demo) => {
           main: `${demoSourcePathRelative}/app/app.component.ts`,
           polyfills: join(__dirname, 'polyfill.ts').split('\\').join('/'),
           tsConfig: `${demoSourcePathRelative}/tsconfig.json`,
+          aot: true,
+          buildOptimizer: false,
+          optimization: false,
+          vendorChunk: true,
+          namedChunks: true,
           scripts: [],
           allowedCommonJsDependencies: [
             'jszip',
@@ -43,24 +48,7 @@ const createConfigForDemo = (Demo: Demo) => {
             'devextreme-aspnet-data-nojquery',
           ],
         },
-        configurations: {
-          production: {
-            budgets: [
-              {
-                type: 'initial',
-                maximumWarning: '2mb',
-                maximumError: '4mb',
-              },
-              {
-                type: 'anyComponentStyle',
-                maximumWarning: '2kb',
-                maximumError: '4kb',
-              },
-            ],
-            outputHashing: 'all',
-          },
-        },
-        defaultConfiguration: 'production',
+        configurations: {},
       },
     },
   };
@@ -74,8 +62,8 @@ const createAngularJson = () => {
   };
   const menu: Item[] = (menuMeta as any).default;
 
-  for (const meta of menu) {
-    for (const group of meta.Groups) {
+  const collectProjectsFromGroups = (groups: Item['Groups']) => {
+    for (const group of groups) {
       const demos = group.Demos || [];
       for (const demo of demos) {
         if (!isSkipDemo(demo)) {
@@ -88,7 +76,16 @@ const createAngularJson = () => {
           }
         }
       }
+
+      const subGroups = (group as unknown as { Groups?: Item['Groups'] }).Groups || [];
+      if (subGroups.length) {
+        collectProjectsFromGroups(subGroups);
+      }
     }
+  };
+
+  for (const meta of menu) {
+    collectProjectsFromGroups(meta.Groups || []);
   }
 
   const jsonString = JSON.stringify(angularJsonObject);

apps/demos/utils/create-bundles/React/bundler.ts

@@ -27,6 +27,7 @@ export default class ReactBundler extends ESBundler {
       entryNames: '[dir]/bundle.[hash]',
       outdir: destinationDemoPath,
       alias: {
+        'anti-forgery': resolve(__dirname, '../../../shared/anti-forgery/fetch-override.js'),
         react: resolve(__dirname, '../../../node_modules/react'),
         'react-dom': resolve(__dirname, '../../../node_modules/react-dom'),
       },

apps/demos/utils/create-bundles/Vue/bundler.ts

@@ -1,7 +1,7 @@
 import { BuildOptions } from 'esbuild';
 
 import vuePlugin from 'esbuild-plugin-vue3';
-import { join } from 'path';
+import { join, resolve } from 'path';
 import {
   getDestinationPathByDemo, getSourcePathByDemo,
 } from '../helper';
@@ -26,6 +26,9 @@ export default class VueBundler extends ESBundler {
       },
       entryNames: '[dir]/bundle.[hash]',
       outdir: destinationDemoPath,
+      alias: {
+        'anti-forgery': resolve(__dirname, '../../../shared/anti-forgery/fetch-override.js'),
+      },
       entryPoints: this.#getEntryPoints(sourceDemoPath),
       plugins: [vuePlugin() as any],
       define: {

apps/demos/utils/create-bundles/index.ts

@@ -35,15 +35,24 @@ const getBundler = (framework: Framework): ESBundler => {
 const menu: Item[] = (menuMeta as any).default;
 const allDemos: Demo[] = [];
 
-for (const meta of menu) {
-  for (const group of meta.Groups) {
+const collectDemosFromGroups = (groups: Item['Groups']) => {
+  for (const group of groups) {
     const demos = group.Demos || [];
     for (const demo of demos) {
       if (!isSkipDemo(demo)) {
         allDemos.push(demo);
       }
     }
+
+    const subGroups = (group as unknown as { Groups?: Item['Groups'] }).Groups || [];
+    if (subGroups.length) {
+      collectDemosFromGroups(subGroups);
+    }
   }
+};
+
+for (const meta of menu) {
+  collectDemosFromGroups(meta.Groups || []);
 }
 
 async function processDemosInBatches(bundler: ESBundler, demoList: Demo[], batchSize: number) {