Demos: enable check all generated demos (#32061)

Author: anna-shakhova

.github/workflows/demos_visual_tests.yml

@@ -416,19 +416,23 @@ jobs:
           pnpm run lint-demos
         fi
 
-  check-generated-demos:
-    name: Check generated demos
+  check-generated-demos-changed:
+    name: Check generated demos (changed only)
     runs-on: devextreme-shr2
     timeout-minutes: 10
     needs: [check-should-run, get-changes, build-devextreme, determine-framework-tests-scope]
-    if: needs.check-should-run.outputs.should-run == 'true' && needs.determine-framework-tests-scope.outputs.framework-tests-scope != 'none'
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'changed' &&
+      needs.build-devextreme.result == 'success'
 
     steps:
     - name: Get sources
       uses: actions/checkout@v4
 
-    - name: Download artifacts
-      if: github.event_name == 'pull_request'
+    - name: Download changed demos
       uses: actions/download-artifact@v4
       with:
         name: changed-demos
@@ -506,6 +510,82 @@ jobs:
           exit 1
         fi
 
+  check-generated-demos-all:
+    name: Check generated demos (${{ matrix.CONSTEL }})
+    runs-on: devextreme-shr2
+    timeout-minutes: 15
+    needs: [check-should-run, build-devextreme, determine-framework-tests-scope]
+    if: |
+      always() &&
+      needs.check-should-run.outputs.should-run == 'true' &&
+      needs.determine-framework-tests-scope.result == 'success' &&
+      needs.determine-framework-tests-scope.outputs.framework-tests-scope == 'all' &&
+      needs.build-devextreme.result == 'success'
+    strategy:
+      fail-fast: false
+      matrix:
+        CONSTEL: ['1/5', '2/5', '3/5', '4/5', '5/5']
+
+    steps:
+    - name: Get sources
+      uses: actions/checkout@v4
+
+    - uses: pnpm/action-setup@v4
+      with:
+        run_install: false
+
+    - name: Use Node.js
+      uses: actions/setup-node@v4
+      with:
+        node-version: '20'
+
+    - name: Download devextreme sources
+      uses: actions/download-artifact@v4
+      with:
+        name: devextreme-sources
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - uses: actions/cache/restore@v4
+      name: Restore pnpm cache
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
+    - name: Install tgz
+      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 JS
+      working-directory: apps/demos
+      run: pnpm run prepare-js
+
+    - name: Check generated JS demos
+      working-directory: apps/demos
+      env:
+        CONSTEL: ${{ matrix.CONSTEL }}
+      run: |
+        echo "Running convert-to-js for split $CONSTEL"
+        pnpm run convert-to-js
+
+        git add ./Demos -N
+
+        if git diff --exit-code . ':!package.json' ; then
+          echo "Generated JS demos are up-to-date for split $CONSTEL"
+        else
+          echo "Generated JS demos are outdated for split $CONSTEL. Execute 'pnpm run convert-to-js split' and commit changes."
+          echo "If you see another diff, ensure that extra listed files have LF endings."
+          exit 1
+        fi
+
   testcafe-jquery:
     needs: [check-should-run, build-devextreme]
     if: |

apps/demos/Demos/Charts/AreaSparklines/React/App.tsx

@@ -5,7 +5,7 @@ const years = ['2010', '2011', '2012'];
 
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Copper, Nickel and Palladium</h3></div>
       <div id="chart-demo">
         <table className="demo-table" style={{ border: 1 }}>
@@ -22,7 +22,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 

apps/demos/Demos/Charts/AreaSparklines/ReactJs/App.js

@@ -4,7 +4,7 @@ import RowTemplate from './RowTemplate.js';
 const years = ['2010', '2011', '2012'];
 function App() {
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Copper, Nickel and Palladium</h3>
       </div>
@@ -29,7 +29,7 @@ function App() {
           </tbody>
         </table>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;

apps/demos/Demos/Charts/BarSparklines/React/App.tsx

@@ -25,7 +25,7 @@ function App() {
   }, []);
 
   return (
-    <React.Fragment>
+    <>
       <div className="long-title"><h3>Monthly Prices of Aluminium, Nickel and Copper</h3></div>
       <div id="chart-demo">
         <table
@@ -58,7 +58,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 

apps/demos/Demos/Charts/BarSparklines/ReactJs/App.js

@@ -25,7 +25,7 @@ function App() {
     dataSource.load();
   }, []);
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Monthly Prices of Aluminium, Nickel and Copper</h3>
       </div>
@@ -61,7 +61,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;

apps/demos/Demos/Charts/Colorization/React/App.tsx

@@ -20,7 +20,7 @@ function App() {
   }, [setTypeOptions]);
 
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={salesAmount}
@@ -49,7 +49,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 

apps/demos/Demos/Charts/Colorization/ReactJs/App.js

@@ -20,7 +20,7 @@ function App() {
     [setTypeOptions],
   );
   return (
-    <React.Fragment>
+    <>
       <TreeMap
         id="treemap"
         dataSource={salesAmount}
@@ -49,7 +49,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }
 export default App;

apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/React/App.tsx

@@ -43,7 +43,7 @@ function App() {
   }, [setVisualRange]);
 
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Soft"
@@ -79,7 +79,7 @@ function App() {
           <CommonSeriesSettingsOptions type="bar" ignoreEmptyPoints ={true} />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 

apps/demos/Demos/Charts/DiscreteAxisZoomingAndScrolling/ReactJs/App.js

@@ -48,7 +48,7 @@ function App() {
     [setVisualRange],
   );
   return (
-    <React.Fragment>
+    <>
       <Chart
         id="zoomedChart"
         palette="Soft"
@@ -95,7 +95,7 @@ function App() {
           />
         </ChartOptions>
       </RangeSelector>
-    </React.Fragment>
+    </>
   );
 }
 export default App;

apps/demos/Demos/Charts/DiscreteData/React/App.tsx

@@ -16,7 +16,7 @@ function App() {
   }, [setCurrentType]);
 
   return (
-    <React.Fragment>
+    <>
       <div className="long-title">
         <h3>Average temperature in London</h3>
       </div>
@@ -53,7 +53,7 @@ function App() {
           />
         </div>
       </div>
-    </React.Fragment>
+    </>
   );
 }