Skip to content

Commit 9a67c9f

Browse files
aleksei-semikozovaleksei-semikozov
committed
Init vite playground server
1 parent fd826c9 commit 9a67c9f

File tree

6 files changed

+554
-79
lines changed

6 files changed

+554
-79
lines changed

‎packages/devextreme/eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default [
3838
'themebuilder-scss/src/data/metadata/*',
3939
'js/bundles/dx.custom.js',
4040
'testing/jest/utils/transformers/*',
41+
'vite.config.ts',
4142
'**/ts/',
4243
'js/common/core/localization/cldr-data/*',
4344
'js/common/core/localization/default_messages.js',

‎packages/devextreme/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,8 @@
209209
"uuid": "9.0.1",
210210
"vinyl": "2.2.1",
211211
"vinyl-named": "1.1.0",
212+
"vite": "^7.1.3",
213+
"vite-plugin-inferno": "^0.0.1",
212214
"webpack": "5.94.0",
213215
"webpack-stream": "7.0.0",
214216
"yaml": "2.5.0",
@@ -247,6 +249,7 @@
247249
"validate-ts": "gulp validate-ts",
248250
"validate-declarations": "dx-tools validate-declarations --sources ./js --exclude \"js/(renovation|__internal|.eslintrc.js)\" --compiler-options \"{ \\\"typeRoots\\\": [] }\"",
249251
"testcafe-in-docker": "docker build -f ./testing/testcafe/docker/Dockerfile -t testcafe-testing . && docker run -it testcafe-testing",
252+
"dev:playground": "vite",
250253
"test-jest": "cross-env NODE_OPTIONS='--expose-gc' jest --no-coverage --runInBand --selectProjects jsdom-tests",
251254
"test-jest:watch": "jest --watch",
252255
"test-jest:node": "jest --no-coverage --runInBand --selectProjects node-tests",

‎packages/devextreme/playground/index.html‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>DevExtreme HMR Playground</title>
7+
<link rel="stylesheet" href="../artifacts/css/dx.light.css">
8+
</head>
9+
<body>
10+
<div id="app">
11+
<div id="container"></div>
12+
</div>
13+
<script type="module" src="./scheduler-example.ts"></script>
14+
<script type="module">
15+
if (import.meta.hot) {
16+
import.meta.hot.accept('./scheduler-example.ts', () => {
17+
console.log('HMR: Scheduler example updated');
18+
location.reload();
19+
});
20+
console.log('HMR enabled for playground');
21+
}
22+
</script>
23+
</body>
24+
</html>

‎packages/devextreme/playground/scheduler-example.ts‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import $ from 'jquery';
2+
import Scheduler from '../js/__internal/scheduler/m_scheduler';
3+
import 'devextreme/dist/css/dx.light.css';
4+
5+
const dataSource = [
6+
{
7+
text: "Meeting with John",
8+
startDate: new Date(2024, 0, 10, 9, 0),
9+
endDate: new Date(2024, 0, 10, 10, 30),
10+
allDay: false
11+
},
12+
{
13+
text: "Conference Call",
14+
startDate: new Date(2024, 0, 10, 14, 0),
15+
endDate: new Date(2024, 0, 10, 15, 0),
16+
allDay: false
17+
},
18+
{
19+
text: "Team Building Event",
20+
startDate: new Date(2024, 0, 11, 10, 0),
21+
endDate: new Date(2024, 0, 11, 17, 0),
22+
allDay: false
23+
}
24+
];
25+
26+
$(document).ready(() => {
27+
new (Scheduler as any)($('#container'), {
28+
dataSource,
29+
views: ['day', 'week', 'workWeek', 'month'],
30+
currentView: 'week',
31+
currentDate: new Date(2024, 0, 10),
32+
startDayHour: 8,
33+
endDayHour: 18,
34+
height: 600,
35+
editing: {
36+
allowAdding: true,
37+
allowDeleting: true,
38+
allowUpdating: true,
39+
allowResizing: true,
40+
allowDragging: true
41+
},
42+
onAppointmentAdded: (e) => {
43+
console.log('Appointment added:', e.appointmentData);
44+
},
45+
onAppointmentUpdated: (e) => {
46+
console.log('Appointment updated:', e.appointmentData);
47+
},
48+
onAppointmentDeleted: (e) => {
49+
console.log('Appointment deleted:', e.appointmentData);
50+
}
51+
});
52+
53+
console.log('Scheduler initialized with HMR support');
54+
});

‎packages/devextreme/vite.config.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import path from 'path';
2+
import { defineConfig } from 'vite';
3+
import inferno from 'vite-plugin-inferno'
4+
5+
export default defineConfig(() => {
6+
return {
7+
root: './playground',
8+
plugins: [inferno()],
9+
server: {
10+
port: 3000,
11+
fs: {
12+
allow: ['..', '.', './testing', '../..']
13+
},
14+
hmr: true
15+
},
16+
resolve: {
17+
alias: {
18+
'core': path.resolve(__dirname, './js/core'),
19+
'common': path.resolve(__dirname, './js/common'),
20+
'data': path.resolve(__dirname, './js/data'),
21+
'ui': path.resolve(__dirname, './js/ui'),
22+
'@js': path.resolve(__dirname, './js'),
23+
'@ts': path.resolve(__dirname, './js/__internal'),
24+
'__internal': path.resolve(__dirname, './js/__internal'),
25+
}
26+
},
27+
esbuild: {
28+
jsxFactory: 'Inferno.createVNode',
29+
jsxFragment: 'Inferno.Fragment',
30+
}
31+
};
32+
});

0 commit comments

Comments
 (0)