DevExpress · aleksei-semikozov · Aug 28, 2025
diff --git a/packages/devextreme/eslint.config.mjs b/packages/devextreme/eslint.config.mjs
@@ -38,6 +38,7 @@ export default [
             'themebuilder-scss/src/data/metadata/*',
             'js/bundles/dx.custom.js',
             'testing/jest/utils/transformers/*',
+            'vite.config.ts',
             '**/ts/',
             'js/common/core/localization/cldr-data/*',
             'js/common/core/localization/default_messages.js',

diff --git a/packages/devextreme/package.json b/packages/devextreme/package.json
@@ -209,6 +209,8 @@
     "uuid": "9.0.1",
     "vinyl": "2.2.1",
     "vinyl-named": "1.1.0",
+    "vite": "^7.1.3",
+    "vite-plugin-inferno": "^0.0.1",
     "webpack": "5.94.0",
     "webpack-stream": "7.0.0",
     "yaml": "2.5.0",
@@ -247,6 +249,7 @@
     "validate-ts": "gulp validate-ts",
     "validate-declarations": "dx-tools validate-declarations --sources ./js --exclude \"js/(renovation|__internal|.eslintrc.js)\" --compiler-options \"{ \\\"typeRoots\\\": [] }\"",
     "testcafe-in-docker": "docker build -f ./testing/testcafe/docker/Dockerfile -t testcafe-testing . && docker run -it testcafe-testing",
+    "dev:playground": "vite",
     "test-jest": "cross-env NODE_OPTIONS='--expose-gc' jest --no-coverage --runInBand --selectProjects jsdom-tests",
     "test-jest:watch": "jest --watch",
     "test-jest:node": "jest --no-coverage --runInBand --selectProjects node-tests",

diff --git a/packages/devextreme/playground/index.html b/packages/devextreme/playground/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevExtreme HMR Playground</title>
+</head>
+<body>
+    <div id="app">
+        <select id="theme-selector" style="display: block;">
+        </select>
+        <div id="container"></div>
+    </div>
+    <script type="module" src="./scheduler-example.ts"></script>
+    <script type="module">
+        if (import.meta.hot) {
+            import.meta.hot.accept('./scheduler-example.ts', () => {
+                console.log('HMR: Scheduler example updated');
+                location.reload();
+            });
+            console.log('HMR enabled for playground');
+        }
+    </script>
+</body>
+</html>
diff --git a/packages/devextreme/playground/newThemeSelector.ts b/packages/devextreme/playground/newThemeSelector.ts
@@ -0,0 +1,87 @@
+const themeKey = 'currentThemeId';
+
+const themeLoaders = import.meta.glob('../artifacts/css/dx.*.css', { as: 'url' });
+
+const themeList = Object.keys(themeLoaders).map((path) => {
+  const match = path.match(/dx\.(.+)\.css$/);
+  return match ? match[1] : null;
+}).filter(Boolean) as string[];
+
+function groupThemes(themes: string[]) {
+  const groups: Record<string, string[]> = {};
+  themes.forEach((theme) => {
+    const [group] = theme.split('.');
+    const groupName = group.charAt(0).toUpperCase() + group.slice(1);
+    if (!groups[groupName]) groups[groupName] = [];
+    groups[groupName].push(theme);
+  });
+  return groups;
+}
+
+const groupedThemes = groupThemes(themeList);
+
+function initThemes(dropDownList: HTMLSelectElement) {
+  Object.entries(groupedThemes).forEach(([group, themes]) => {
+    const parent = document.createElement('optgroup');
+    parent.label = group;
+
+    themes.forEach((theme) => {
+      const child = document.createElement('option');
+      child.value = theme;
+      child.text = theme.replaceAll('.', ' ');
+      parent.appendChild(child);
+    });
+
+    dropDownList.appendChild(parent);
+  });
+}
+
+function loadThemeCss(themeId: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const oldLink = document.getElementById('theme-stylesheet');
+    if (oldLink) oldLink.remove();
+
+    const key = Object.keys(themeLoaders).find((p) => p.includes(`dx.${themeId}.css`));
+    if (!key) {
+      reject(new Error(`Theme not found: ${themeId}`));
+      return;
+    }
+
+    themeLoaders[key]().then((cssUrl: string) => {
+      const link = document.createElement('link');
+      link.id = 'theme-stylesheet';
+      link.rel = 'stylesheet';
+      link.href = cssUrl;
+
+      link.onload = () => resolve();
+      link.onerror = () => reject(new Error(`Failed to load theme: ${themeId}`));
+
+      document.head.appendChild(link);
+    });
+  });
+}
+
+export function setupThemeSelector(selectorId: string): Promise<void> {
+  return new Promise((resolve) => {
+    const dropDownList = document.querySelector<HTMLSelectElement>(`#${selectorId}`);
+    if (!dropDownList) {
+      resolve();
+      return;
+    }
+
+    initThemes(dropDownList);
+
+    const savedTheme = window.localStorage.getItem(themeKey) || themeList[0];
+    dropDownList.value = savedTheme;
+
+    loadThemeCss(savedTheme).then(() => {
+      dropDownList.addEventListener('change', () => {
+        const newTheme = dropDownList.value;
+        window.localStorage.setItem(themeKey, newTheme);
+        loadThemeCss(newTheme);
+      });
+
+      resolve();
+    });
+  });
+}
diff --git a/packages/devextreme/playground/scheduler-example.ts b/packages/devextreme/playground/scheduler-example.ts
@@ -0,0 +1,55 @@
+import $ from 'jquery';
+import { setupThemeSelector } from './newthemeSelector';
+import Scheduler from '../js/__internal/scheduler/m_scheduler';
+
+const dataSource = [
+    {
+        text: "Meeting with John",
+        startDate: new Date(2024, 0, 10, 9, 0),
+        endDate: new Date(2024, 0, 10, 10, 30),
+        allDay: false
+    },
+    {
+        text: "Conference Call", 
+        startDate: new Date(2024, 0, 10, 14, 0),
+        endDate: new Date(2024, 0, 10, 15, 0),
+        allDay: false
+    },
+    {
+        text: "Team Building Event",
+        startDate: new Date(2024, 0, 11, 10, 0),
+        endDate: new Date(2024, 0, 11, 17, 0),
+        allDay: false
+    }
+];
+
+window.addEventListener('load', () => 
+  setupThemeSelector('theme-selector').then(() => {
+
+
+    new (Scheduler as any)($('#container'), {
+        dataSource,
+        views: ['day', 'week', 'workWeek', 'month'],
+        currentView: 'week',
+        currentDate: new Date(2024, 0, 10),
+        startDayHour: 8,
+        endDayHour: 18,
+        height: 600,
+        editing: {
+            allowAdding: true,
+            allowDeleting: true,
+            allowUpdating: true,
+            allowResizing: true,
+            allowDragging: true
+        },
+        onAppointmentAdded: (e) => {
+            console.log('Appointment added:', e.appointmentData);
+        },
+        onAppointmentUpdated: (e) => {
+            console.log('Appointment updated:', e.appointmentData);
+        },
+        onAppointmentDeleted: (e) => {
+            console.log('Appointment deleted:', e.appointmentData);
+        }
+    });
+}));
diff --git a/packages/devextreme/vite.config.ts b/packages/devextreme/vite.config.ts
@@ -0,0 +1,32 @@
+import path from 'path';
+import { defineConfig } from 'vite';
+import inferno from 'vite-plugin-inferno'
+
+export default defineConfig(() => {
+  return {
+    root: './playground',
+    plugins: [inferno()],
+    server: {
+      port: 3000,
+      fs: {
+        allow: ['..', '.', './testing', '../..']
+      },
+      hmr: true
+    },
+    resolve: {
+      alias: {
+        'core': path.resolve(__dirname, './js/core'),
+        'common': path.resolve(__dirname, './js/common'),
+        'data': path.resolve(__dirname, './js/data'),
+        'ui': path.resolve(__dirname, './js/ui'),
+        '@js': path.resolve(__dirname, './js'),
+        '@ts': path.resolve(__dirname, './js/__internal'),
+        '__internal': path.resolve(__dirname, './js/__internal'),
+      }
+    },
+    esbuild: {
+    jsxFactory: 'Inferno.createVNode',
+    jsxFragment: 'Inferno.Fragment',
+  }
+  };
+});