Updated Build Script to convert Common JS to Module JS

.babelrc

@@ -1,3 +1,6 @@
 {
-  "presets": ["@babel/preset-env", "@babel/preset-react"]
+  "presets": [
+    ["@babel/preset-env", { "modules": false }],
+    "@babel/preset-react"
+  ]
 }

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Change Logs:
 
+## [4.4.3](https://github.com/react-scheduler/react-big-schedule/compare/4.4.2...4.4.3)
+`2024-10-28`
+
+- Change the build type from `common.js` to `module.js` by  [@ansulagrawal](https://github.com/ansulagrawal) in [#174](https://github.com/react-scheduler/react-big-schedule/pull/174).
+
 ## [4.4.2](https://github.com/react-scheduler/react-big-schedule/compare/4.4.1...4.4.2)
 `2024-10-25`
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-big-schedule",
-  "version": "4.4.2",
+  "version": "4.4.3",
   "description": "React Big Schedule  is a powerful and intuitive scheduler and resource planning solution built with React. Seamlessly integrate this modern browser-compatible component into your applications to effectively manage time, appointments, and resources. With drag-and-drop functionality, interactive UI, and granular views, react-big-schedule empowers users to effortlessly schedule and allocate resources with precision. Enhance productivity and streamline your workflow with this React-based solution, designed to optimize time management and simplify calendar-based operations. Perfect for applications requiring advanced scheduling capabilities, react-big-schedule offers a seamless and intuitive experience for managing appointments, resource allocation, and time slots. Unlock the potential of your React projects with react-big-schedule and revolutionize the way you handle scheduling and resource planning. It is the updated version of react-big-scheduler",
   "keywords": [
     "react-big-schedule",
@@ -55,7 +55,7 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "build-lib": "node scripts/build.cjs",
+    "build-lib": "node scripts/build.js",
     "clean": "rimraf ./dist && mkdir dist",
     "lint": "eslint ./src"
   },

scripts/build.js

@@ -0,0 +1,53 @@
+// Do this as the first thing so that any code reading it knows the right env.
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { exec } from 'child_process';
+import fs from 'fs-extra';
+import { promisify } from 'util';
+
+process.env.BABEL_ENV = 'production';
+process.env.NODE_ENV = 'production';
+
+const execPromise = promisify(exec);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+async function build() {
+  const root = path.resolve(__dirname, '..');
+  const sourceDir = path.resolve(root, 'src');
+  const targetDir = path.resolve(root, 'dist');
+  const typingDir = path.resolve(root, 'typing');
+  const jsTarget = targetDir;
+  const cssTarget = path.resolve(targetDir, 'css');
+  const excludedFolders = ['examples', 'main.jsx'];
+
+  try {
+    // Validate source and target directories
+    await fs.ensureDir(sourceDir);
+    await fs.ensureDir(targetDir);
+
+    // Clean previous build
+    console.log('Cleaning...');
+    await execPromise('npm run clean');
+
+    // Transpile JS files using Babel, excluding specific folders
+    console.log('Transpiling JavaScript files with Babel... \n');
+    await execPromise(`babel ${sourceDir} --out-dir ${jsTarget} --ignore "${excludedFolders.map(folder => path.join(sourceDir, folder)).join(',')}"`);
+
+    // Copy CSS files
+    console.log('Copying CSS Files...');
+    await fs.copy(`${sourceDir}/css/`, cssTarget);
+
+    // Copy TypeScript declaration files
+    console.log('Copying TypeScript Files...');
+    await fs.copy(`${typingDir}/`, targetDir);
+
+    console.log('Build process completed successfully!');
+  } catch (e) {
+    console.error('Build process failed:', e.message);
+    console.error('Stack trace:', e.stack);
+    process.exit(1);
+  }
+}
+
+build();