Publish bundled demos to GH pages

.github/workflows/publish-demos.yml

@@ -7,16 +7,16 @@ on:
       - 'release-*'
 
 jobs:
-  publish:
+  publish-ES:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
-      - name: Setup Node.js
+      - name: Setup Node.js v20
         uses: actions/setup-node@v3
         with:
-          node-version: '20'
+          node-version: 20
 
       - name: Install jq
         run: sudo apt-get install -y jq
@@ -39,8 +39,91 @@ jobs:
       - name: Prepare Vue demo bundles
         run: npm run make-demos-bundle -- --framework Vue
 
+      - name: Save publish-demos directory for ES as an artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: publish-demos
+          path: ./publish-demos
+
+  publish-angular:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        include:
+          - name: Check generated demos (1/10)
+            command: CONSTEL=1/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (2/10)
+            command: CONSTEL=2/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (3/10)
+            command: CONSTEL=3/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (4/10)
+            command: CONSTEL=4/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (5/10)
+            command: CONSTEL=5/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (6/10)
+            command: CONSTEL=6/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (7/10)
+            command: CONSTEL=7/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (8/10)
+            command: CONSTEL=8/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (9/10)
+            command: CONSTEL=9/10 npm run make-demos-bundle -- --framework Angular
+          - name: Check generated demos (10/10)
+            command: CONSTEL=10/10 npm run make-demos-bundle -- --framework Angular
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js v14
+        uses: actions/setup-node@v3
+        with:
+          node-version: 14
+
+      - name: Install jq
+        run: sudo apt-get install -y jq
+
+      - name: Read version from package.json and append "-stable"
+        run: echo echo "STABLE_VERSION=$(jq -r '.version' package.json | awk -F. '{print $1 "." $2}')-stable" >> $GITHUB_ENV
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Install stable devextreme pacakges
+        run: npm install devextreme@${{ env.STABLE_VERSION }} devextreme-angular@${{ env.STABLE_VERSION }} devextreme-react@${{ env.STABLE_VERSION }} devextreme-vue@${{ env.STABLE_VERSION }}
+
+      - name: Copy metadata
+        run: npm run make-demos-bundle -- --copy-metadata
+
+      - name: Update angular.json
+        run: npm run update-angular-json
+
+      - name: Create angular entryPoints to compile faster
+        run: npm run launch-ngcc
+
+      - name: Prepare Angular demo bundles
+        run: |
+          ${{ matrix.command }}
+
+      - name: Save publish-demos directory for Angular as an artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: publish-demos
+          path: ./publish-demos
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: [publish-ES, publish-angular]
+    steps: 
+      - name: Download publish-demos artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: publish-demos
+          path: ./publish-demos
+      - name: List files in publish-demos
+        run: ls -R ./publish-demos
       - name: Deploy to gh-pages
         uses: peaceiris/actions-gh-pages@v3
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./publish-demos
+          publish_dir: ./publish-demos

.prettierignore

@@ -9,4 +9,5 @@
 MVCDemos
 NetCoreDemos
 .github
-publish-demos
+publish-demos
+utils

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
 	"editor.tabSize": 2,
 	"editor.codeActionsOnSave": {
-		"source.fixAll.eslint": true
+		"source.fixAll.eslint": "explicit"
 	}
 }

JSDemos/Demos/Accordion/Overview/Angular/app/app.component.ts

@@ -11,11 +11,13 @@ import { Company, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  moduleId: __moduleName,
   providers: [Service],
   preserveWhitespaces: true,
 })

JSDemos/Demos/ActionSheet/Basics/Angular/app/app.component.ts

@@ -8,11 +8,13 @@ import notify from 'devextreme/ui/notify';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  moduleId: __moduleName,
+  styleUrls: ['app.component.css'],
 })
 export class AppComponent {
   commands: { text: string }[] = [

JSDemos/Demos/ActionSheet/PopoverMode/Angular/app/app.component.ts

@@ -9,11 +9,13 @@ import { Contact, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   providers: [Service],
 })
 export class AppComponent {

JSDemos/Demos/Autocomplete/Overview/Angular/app/app.component.ts

@@ -11,6 +11,7 @@ import { Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 function isNotEmpty(value: unknown): boolean {
   return value !== undefined && value !== null && value !== '';
@@ -19,8 +20,9 @@ function isNotEmpty(value: unknown): boolean {
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 
 export class AppComponent {

JSDemos/Demos/Box/Overview/Angular/app/app.component.ts

@@ -8,11 +8,13 @@ import { DxBoxModule } from 'devextreme-angular';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 export class AppComponent {
 }

JSDemos/Demos/Button/Icons/Angular/app/app.component.ts

@@ -7,11 +7,13 @@ import notify from 'devextreme/ui/notify';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   preserveWhitespaces: true,
 })
 

JSDemos/Demos/Button/PredefinedTypes/Angular/app/app.component.ts

@@ -7,11 +7,13 @@ import notify from 'devextreme/ui/notify';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 
 export class AppComponent {

JSDemos/Demos/ButtonGroup/Overview/Angular/app/app.component.ts

@@ -9,12 +9,14 @@ import { Alignment, FontStyle, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   preserveWhitespaces: true,
 })
 

JSDemos/Demos/Calendar/MultipleSelection/Angular/app/app.component.ts

@@ -9,11 +9,13 @@ import { DxCalendarComponent, DxCalendarModule, DxCalendarTypes } from 'devextre
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 
 export class AppComponent {

JSDemos/Demos/Calendar/Overview/Angular/app/app.component.ts

@@ -9,11 +9,13 @@ import { DxCalendarModule, DxCalendarTypes } from 'devextreme-angular/ui/calenda
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 
 export class AppComponent {

JSDemos/Demos/Charts/APIDisplayATooltip/Angular/app/app.component.ts

@@ -10,12 +10,14 @@ import { Service, Population } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 export class AppComponent {
   @ViewChild(DxPieChartComponent, { static: false }) chart: DxPieChartComponent;

JSDemos/Demos/Charts/APISelectAPoint/Angular/app/app.component.ts

@@ -7,12 +7,14 @@ import { Service, CatBreed } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
   providers: [Service],
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 export class AppComponent {
   catBreedsData: CatBreed[];

JSDemos/Demos/Charts/AjaxRequest/Angular/app/app.component.ts

@@ -7,11 +7,13 @@ import { DxChartModule } from 'devextreme-angular';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
 })
 export class AppComponent {
   customizeText(arg) {

JSDemos/Demos/Charts/Annotation/Angular/app/app.component.ts

@@ -9,11 +9,13 @@ import { Data, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   providers: [Service],
 })
 export class AppComponent {

JSDemos/Demos/Charts/Area/Angular/app/app.component.ts

@@ -8,11 +8,13 @@ import { Population, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   providers: [Service],
   preserveWhitespaces: true,
 })

JSDemos/Demos/Charts/AreaSparklines/Angular/app/app.component.ts

@@ -7,11 +7,13 @@ import { CostInfo, Service } from './app.service';
 if (!/localhost/.test(document.location.host)) {
   enableProdMode();
 }
+declare var __moduleName: string;
 
 @Component({
   selector: 'demo-app',
-  templateUrl: 'app/app.component.html',
-  styleUrls: ['app/app.component.css'],
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.css'],
+  moduleId: __moduleName,
   providers: [Service],
 })
 export class AppComponent {