Publish demo to github pages

.github/workflows/github-pages-publish.yml

@@ -0,0 +1,35 @@
+name: Deploy static content to Pages
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+            ref: gh-pages
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          # Upload entire repository
+          path: '.'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.github/workflows/publish-demos.yml

@@ -0,0 +1,218 @@
+name: Publish Demos to GH Pages
+
+on:
+  workflow_dispatch:
+
+jobs:
+  build-devextreme:
+    runs-on: ubuntu-latest
+    name: Build DevExtreme
+    timeout-minutes: 20
+
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Restore npm cache
+        uses: actions/cache@v4
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-node-modules-${{ hashFiles('package-lock.json') }}
+          restore-keys: ${{ runner.os }}-node-modules
+
+      - name: DevExtreme - Install packages
+        run: npm install --no-audit --no-fund
+
+      - name: DevExtreme - Build-all
+        env:
+          BUILD_TEST_INTERNAL_PACKAGE: true
+        run: npm run all:build
+
+      - name: Move packages
+        run: |
+          mv ./packages/devextreme/artifacts/npm/devextreme/*.tgz ./devextreme-installer.tgz
+          mv ./packages/devextreme/artifacts/npm/devextreme-dist/*.tgz ./devextreme-dist-installer.tgz
+          mv ./packages/devextreme-angular/npm/dist/*.tgz ./devextreme-angular-installer.tgz
+          mv ./packages/devextreme-react/npm/*.tgz ./devextreme-react-installer.tgz
+          mv ./packages/devextreme-vue/npm/*.tgz ./devextreme-vue-installer.tgz
+
+      - name: Copy build artifacts
+        uses: actions/upload-artifact@v4
+        with:
+          name: devextreme-sources
+          path: |
+            devextreme-installer.tgz
+            devextreme-dist-installer.tgz
+            devextreme-angular-installer.tgz
+            devextreme-react-installer.tgz
+            devextreme-vue-installer.tgz
+          retention-days: 1
+
+  publish-ES:
+    runs-on: ubuntu-latest
+    needs: [build-devextreme]
+    steps:
+      - name: Get sources
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Download devextreme sources
+        uses: actions/download-artifact@v4
+        with:
+          name: devextreme-sources
+
+        # NOTE: workaround due to wrappers are incorrect NPM packages now
+      - name: Install wrappers packages
+        run: |
+          rm -rf node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue
+          mkdir node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue
+          tar -xzf devextreme-installer.tgz -C node_modules/devextreme
+          mv node_modules/devextreme/package/* node_modules/devextreme
+          tar -xzf devextreme-dist-installer.tgz -C node_modules/devextreme-dist
+          mv node_modules/devextreme-dist/package/* node_modules/devextreme-dist
+          tar -xzf devextreme-angular-installer.tgz -C node_modules/devextreme-angular
+          mv node_modules/devextreme-angular/package/* node_modules/devextreme-angular
+          tar -xzf devextreme-react-installer.tgz -C node_modules/devextreme-react
+          mv node_modules/devextreme-react/package/* node_modules/devextreme-react
+          tar -xzf devextreme-vue-installer.tgz -C node_modules/devextreme-vue
+          mv node_modules/devextreme-vue/package/* node_modules/devextreme-vue
+
+      - name: Prepare configs
+        working-directory: apps/demos
+        run: npm run prepare-js
+
+      - name: Copy metadata
+        working-directory: apps/demos
+        run: npm run make-demos-bundle -- --copy-metadata
+
+      - name: Prepare React demo bundles
+        working-directory: apps/demos
+        run: npm run make-demos-bundle -- --framework React
+
+      - name: Prepare Vue demo bundles
+        working-directory: apps/demos
+        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: ./apps/demos/publish-demos
+
+  publish-angular:
+    runs-on: ubuntu-latest
+    needs: [build-devextreme]
+    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 v18
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Download devextreme sources
+        uses: actions/download-artifact@v4
+        with:
+          name: devextreme-sources
+
+        # NOTE: workaround due to wrappers are incorrect NPM packages now
+      - name: Install wrappers packages
+        run: |
+          rm -rf node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue
+          mkdir node_modules/devextreme node_modules/devextreme-dist node_modules/devextreme-angular node_modules/devextreme-react node_modules/devextreme-vue
+          tar -xzf devextreme-installer.tgz -C node_modules/devextreme
+          mv node_modules/devextreme/package/* node_modules/devextreme
+          tar -xzf devextreme-dist-installer.tgz -C node_modules/devextreme-dist
+          mv node_modules/devextreme-dist/package/* node_modules/devextreme-dist
+          tar -xzf devextreme-angular-installer.tgz -C node_modules/devextreme-angular
+          mv node_modules/devextreme-angular/package/* node_modules/devextreme-angular
+          tar -xzf devextreme-react-installer.tgz -C node_modules/devextreme-react
+          mv node_modules/devextreme-react/package/* node_modules/devextreme-react
+          tar -xzf devextreme-vue-installer.tgz -C node_modules/devextreme-vue
+          mv node_modules/devextreme-vue/package/* node_modules/devextreme-vue
+
+      - name: Prepare configs
+        working-directory: apps/demos
+        run: npm run prepare-js
+
+      - name: Copy metadata
+        working-directory: apps/demos
+        run: npm run make-demos-bundle -- --copy-metadata
+
+      - name: Update angular.json
+        working-directory: apps/demos
+        run: npm run update-angular-json
+
+      - name: Create angular entryPoints to compile faster
+        working-directory: apps/demos
+        run: npm run launch-ngcc
+
+      - name: Prepare Angular demo bundles
+        working-directory: apps/demos
+        run: |
+          ${{ matrix.command }}
+
+      - name: Angular post process index.html
+        working-directory: apps/demos
+        run: npm run post-process-angular
+
+      - name: Save publish-demos directory for Angular as an artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: publish-demos
+          path: ./apps/demos/publish-demos
+
+  deploy:
+    runs-on: ubuntu-latest
+    needs: [build-devextreme, publish-ES, publish-angular]
+    steps: 
+      - name: Download publish-demos artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: publish-demos
+          path: ./apps/demos/publish-demos
+      - name: Deploy to gh-pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./apps/demos/publish-demos

.github/workflows/run-testcafe-on-gh-pages.yml

@@ -0,0 +1,82 @@
+name: Test demos from gh-pages branch before publishing
+
+on:
+  workflow_dispatch:
+
+jobs: 
+    testcafe: 
+        strategy:
+            fail-fast: false
+            matrix:
+              CONSTEL: [react(1/4), react(2/4), react(3/4), react(4/4), vue(1/4), vue(2/4), vue(3/4), vue(4/4), angular(1/4), angular(2/4), angular(3/4), angular(4/4)]
+              THEME: ['generic.light', 'material.blue.light', 'fluent.blue.light']
+
+
+        runs-on: ubuntu-latest
+        name: testcafe-${{ matrix.CONSTEL }}-${{ matrix.THEME }}
+        timeout-minutes: 60
+        env:
+          TARGET_BRANCH: ${{ github.ref_name }}
+
+        steps:
+            - name: Use Node.js
+              uses: actions/setup-node@v4
+              with:
+                node-version: '20'
+
+            - name: Checkout gh-pages branch
+              uses: actions/checkout@v4
+              with:
+                ref: gh-pages
+                path: gh-pages
+
+            - name: Run Web Server
+              working-directory: gh-pages
+              run: |
+                python -m http.server 8080 &
+                python -m http.server 8081 &
+                python -m http.server 8082 &
+                python -m http.server 8083 &
+
+            - name: Checkout main branch
+              uses: actions/checkout@v2
+              with:
+                ref: ${{ env.TARGET_BRANCH }}
+                path: devextreme
+
+            - name: Console.log ls
+              run: ls -al & cd gh-pages & ls -al
+
+            - name: Setup Chrome
+              uses: ./devextreme/.github/actions/setup-chrome
+              with:
+                chrome-version: '121.0.6167.160'
+
+            - name: DevExtreme - Install packages
+              working-directory: devextreme
+              run: npm install --no-audit --no-fund
+
+            - name: Run TestCafe tests
+              working-directory: devextreme/apps/demos
+              env:
+                CHANGEDFILEINFOSPATH: changed-files.json
+                BROWSERS: chrome:headless --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
+                #DEBUG: hammerhead:*,testcafe:*
+                CONCURRENCY: 4
+                TCQUARANTINE: true
+                CONSTEL: ${{ matrix.CONSTEL }}
+                THEME: ${{ matrix.THEME }}
+                ISGITHUBDEMOS: true
+                # DISABLE_DEMO_TEST_SETTINGS: all # Uncomment to ignore all the visualtestrc.json settings
+                # DISABLE_DEMO_TEST_SETTINGS: ignore # Uncomment to ignore the `ignore` field
+                # DISABLE_DEMO_TEST_SETTINGS: comparison-options # Uncomment to ignore the `comparison-options` field
+                CI_ENV: true # The `ignore` field in the visualtestrc.json should be disabled when running test locally
+              run: npx nx test-testcafe
+
+            - name: Copy screenshots artifacts
+              if: ${{ failure() }}
+              uses: actions/upload-artifact@v3
+              with:
+                name: screenshots
+                path: ${{ github.workspace }}/devextreme/apps/demos/testing/artifacts/compared-screenshots/**/*
+                if-no-files-found: ignore

apps/demos/.gitignore

@@ -32,3 +32,6 @@ Demos/**/tsconfig.json
 
 .DS_Store
 publish-demos
+
+.angular
+angular.json

apps/demos/.prettierignore

@@ -9,3 +9,4 @@
 .github
 publish-demos
 coverage
+utils/**/template.html

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/detail-view/detail-view.component.ts

@@ -12,8 +12,8 @@ if (window && window.config.packageConfigPaths) {
 
 @Component({
   selector: 'detail-view',
-  templateUrl: `.${modulePrefix}/detail-view/detail-view.component.html`,
-  styleUrls: [`.${modulePrefix}/detail-view/detail-view.component.css`],
+  templateUrl: `.${modulePrefix && (modulePrefix + '/detail-view')}/detail-view.component.html`,
+  styleUrls: [`.${modulePrefix && (modulePrefix + '/detail-view')}/detail-view.component.css`],
   providers: [],
 })
 export class DetailViewComponent implements AfterViewInit {

apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.css

@@ -4,7 +4,7 @@
   line-height: 0;
 }
 
-::ng-deep .long-title h3 {
+::ng-deep #long-title h3 {
   font-family: 'Segoe UI Light', 'Helvetica Neue Light', 'Segoe UI', 'Helvetica Neue', 'Trebuchet MS', Verdana;
   font-weight: 200;
   font-size: 28px;

apps/demos/Demos/DataGrid/ExcelJSHeaderAndFooter/Angular/app/app.component.html

@@ -1,4 +1,4 @@
-<div class="long-title">
+<div id="long-title">
   <h3>Country Area, Population, and GDP Structure</h3>
 </div>
 <dx-data-grid