fix(CI): Update reactjs demos, remove system js remains, and other optimizations

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

@@ -425,7 +425,7 @@ jobs:
       - name: Pack demo bundles
         working-directory: apps/demos
         run: |
-          find Demos \( -name 'bundle.js' -o -name 'bundle.css' -o -path '*/_chunks/*.js' \) -print0 \
+          find Demos \( -name 'bundle.js' -o -name 'bundle.css' -o -path '*/_chunks/*.js' -o -path '*/media/*' \) -print0 \
             | tar -czf demo-bundles.tgz --null --files-from -
           tar -tzf demo-bundles.tgz | head -3
 

apps/demos/.gitignore

@@ -27,6 +27,7 @@ Demos/**/tsconfig.json
 
 Demos/**/bundle.js
 Demos/**/bundle.css
+Demos/**/media
 Demos/**/demo.manifest.json
 Demos/_chunks
 Demos/**/_chunks

apps/demos/Demos/Accordion/Overview/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Accordion/Overview/Vue/App.vue

@@ -90,7 +90,7 @@ const selectedCompanies = computed({
 });
 
 </script>
-<style scoped>
+<style>
 #accordion {
   height: 700px;
 }

apps/demos/Demos/ActionSheet/Basics/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/ActionSheet/PopoverMode/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Autocomplete/Overview/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Box/Overview/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Button/Icons/ReactJs/index.html

@@ -13,6 +13,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Button/Icons/Vue/App.vue

@@ -119,7 +119,7 @@ function backClick() {
   notify('The button was clicked');
 }
 </script>
-<style scoped>
+<style>
 #back,
 #back-disabled {
   margin-left: 4px;

apps/demos/Demos/Button/PredefinedTypes/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Button/PredefinedTypes/Vue/App.vue

@@ -146,7 +146,7 @@ function onClick(e: DxButtonTypes.ClickEvent) {
   notify(`The ${capitalize(buttonText)} button was clicked`);
 }
 </script>
-<style scoped>
+<style>
 #app {
   align-self: center;
 }

apps/demos/Demos/ButtonGroup/Overview/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/ButtonGroup/Overview/Vue/App.vue

@@ -44,7 +44,7 @@ function itemClick(e: DxButtonGroupTypes.ItemClickEvent) {
   notify({ message: `The "${e.itemData.hint}" button was clicked`, width: 320 }, 'success', 1000);
 }
 </script>
-<style scoped>
+<style>
   .buttongroups-container {
     display: flex;
     justify-content: center;

apps/demos/Demos/Calendar/MultipleSelection/ReactJs/index.html

@@ -13,6 +13,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Calendar/MultipleSelection/Vue/App.vue

@@ -105,7 +105,7 @@ function clearValue() {
 }
 
 </script>
-<style scoped>
+<style>
 #calendar-demo {
   display: flex;
 }

apps/demos/Demos/Calendar/Overview/ReactJs/index.html

@@ -13,6 +13,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Calendar/Overview/Vue/App.vue

@@ -132,7 +132,7 @@ function getCellCssClass({ date, view }: { date: Date, view: string }) {
   return cssClass;
 }
 </script>
-<style scoped>
+<style>
 #calendar-demo {
   display: flex;
 }

apps/demos/Demos/CardView/CardTemplate/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/ColumnChooser/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/ColumnHeaderFilter/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/ColumnReordering/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/DataValidation/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/FieldTemplate/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/FilterPanel/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/Overview/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/PopupEditing/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/SearchPanel/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/Selection/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/SimpleArray/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/Sorting/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/CardView/WebAPIService/ReactJs/index.html

@@ -11,6 +11,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AjaxRequest/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/Annotation/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/Annotation/Vue/App.vue

@@ -64,7 +64,7 @@ import { dataSource, annotationSources } from './data.ts';
 
 const customizeTooltip = ({ description }: Record<string, any>) => ({ html: `<div class='tooltip'>${description}</div>` });
 </script>
-<style scoped>
+<style>
 #chart {
   height: 440px;
 }

apps/demos/Demos/Charts/Area/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AreaSelectionZooming/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AreaSparklines/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AutoCalculatedBarWidth/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AxisCustomPosition/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/AxisLabelCustomization/ReactJs/index.html

@@ -23,6 +23,7 @@
         </defs>
       </svg>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/BarColorCustomization/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/BarDrillDown/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/BarSparklines/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/BiDirectionalBarChart/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/Bubble/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/Candlestick/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>

apps/demos/Demos/Charts/CenterLabelCustomization/ReactJs/index.html

@@ -12,6 +12,7 @@
     <div class="demo-container">
       <div id="app"></div>
     </div>
+    <script src="../../../../bundles/vendor/react.vendor.js"></script>
     <script src="./bundle.js"></script>
   </body>
 </html>