wip

Author: jalal246

package.json

@@ -10,7 +10,7 @@
   "repository": "https://github.com/dflex-js/dflex",
   "author": "Jalal Maskoun",
   "scripts": {
-    "start": "cross-env NODE_ENV=development pnpm -F dflex-dnd-playground dev",
+    "start": "cross-env NODE_ENV=production pnpm -F dflex-dnd-playground dev",
     "serve:dnd": "pnpm -F dflex-dnd-playground preview",
     "build-app": "pnpm -F dflex-dnd-playground build",
     "start:cy": "cross-env NODE_ENV=development && pnpm start-server-and-test 'pnpm run start' http-get://localhost:3001 'cypress open --env extended=true --project packages/dflex-dnd-playground'",
@@ -88,5 +88,8 @@
     {
       "path": "packages/dflex-draggable/dist/dflex-draggable.mjs"
     }
-  ]
+  ],
+  "dependencies": {
+    "@babel/preset-typescript": "^7.22.5"
+  }
 }

packages/dflex-dnd-playground/tests/features/grid.spec.ts

@@ -17,8 +17,9 @@ import {
   moveDragged,
 } from "../utils";
 
-const { PACKAGE_BUNDLE } = process.env;
-const isProd = PACKAGE_BUNDLE === "production";
+const { NODE_ENV } = process.env;
+
+const isProd = NODE_ENV === "production";
 
 const SKIP_REASON = "This assertion works with development bundle only";
 

packages/dflex-dnd-playground/vite.config.ts

@@ -40,13 +40,26 @@ const moduleResolutionProd = [
   },
 ];
 
-const { PACKAGE_BUNDLE } = process.env;
+const { NODE_ENV } = process.env;
 
-const shouldUsePackageBundle = PACKAGE_BUNDLE === "production";
+const shouldUsePackageBundle = NODE_ENV === "production";
 
+const green = "\x1b[32m";
+const cyan = "\x1b[36m";
+const red = "\x1b[31m";
+const magenta = "\x1b[35m";
+const resetColor = "\x1b[0m";
+const yellow = "\x1b[33m";
+
+// eslint-disable-next-line no-console
+console.clear();
 // eslint-disable-next-line no-console
 console.info(
-  `Using ${shouldUsePackageBundle ? "package" : "self-built"} bundle.`
+  `${yellow}🚀 Using ${
+    shouldUsePackageBundle ? `${green}package` : `${cyan}self-built`
+  } bundle. Running in ${
+    NODE_ENV === "production" ? `${red}production` : `${magenta}development`
+  } mode. 🎉${resetColor}`
 );
 
 const config: UserConfigExport = {