updating dependencies and resolving babel conflicts

.github/workflows/npm-publish.yml

@@ -14,7 +14,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
       - run: npm ci
       - run: npm run build
   publish-gpr:
@@ -24,7 +24,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
+          node-version: 18
           registry-url: https://npm.pkg.github.com/
       - run: npm ci
       - run: npm run build

babel.config.json

@@ -1,4 +1,8 @@
 {
   "presets": ["@babel/preset-react", "@babel/preset-env"],
-  "plugins": ["@babel/plugin-transform-react-jsx"]
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-syntax-jsx",
+    "@babel/plugin-transform-react-jsx"
+  ]
 }

package.json

@@ -4,23 +4,23 @@
   "description": "High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.",
   "main": "./lib/index.js",
   "dependencies": {
-    "@babel/preset-es2015": "^7.0.0-beta.53",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "babel-plugin-transform-react-jsx": "^6.24.1",
-    "gsap": "^3.5.1",
-    "jquery": "^3.5.1",
-    "node-sass": "^4.14.1",
-    "polished": "^4.0.5",
-    "react-responsive": "^8.2.0",
-    "react-scripts": "4.0.1",
-    "styled-components": "^5.2.1",
-    "three": "^0.124.0",
-    "web-vitals": "^0.2.4",
-    "zdog": "^1.1.2"
+    "gsap": "^3.12.5",
+    "jquery": "^3.7.1",
+    "node-sass": "^9.0.0",
+    "polished": "^4.3.1",
+    "react-responsive": "^10.0.0",
+    "react-scripts": "5.0.1",
+    "styled-components": "^6.1.11",
+    "three": "^0.166.1",
+    "web-vitals": "^4.2.1",
+    "zdog": "^1.1.3"
   },
   "scripts": {
+    "prebuild": "rimraf lib || rm -rf lib",
     "build": "webpack",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -29,32 +29,33 @@
     "url": "https://github.com/ashutosh1919/react-awesome-loaders.git"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
+    "@babel/core": "^7.24.7",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-syntax-jsx": "^7.12.1",
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "all-contributors-cli": "^6.20.0",
+    "@babel/plugin-syntax-jsx": "^7.24.7",
+    "@babel/plugin-transform-react-jsx": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "all-contributors-cli": "^6.26.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^7.1.4",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-react": "^6.16.0",
-    "babel-preset-stage-0": "^6.24.1",
-    "husky": "^5.0.9",
-    "lint-staged": "^10.5.4",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.7",
     "path": "^0.12.7",
-    "prettier": "^2.2.1",
-    "prop-types": "^15.6.0",
-    "regenerator-runtime": "^0.13.7",
-    "webpack": "^4.5.0",
-    "webpack-cli": "^3.2.1"
+    "prettier": "^3.3.2",
+    "prop-types": "^15.8.1",
+    "regenerator-runtime": "^0.14.1",
+    "webpack": "^5.92.1",
+    "webpack-cli": "^5.1.4"
   },
   "babel": {
     "presets": [
       "@babel/preset-react",
       "@babel/preset-env"
     ],
     "plugins": [
+      "@babel/plugin-proposal-class-properties",
+      "@babel/plugin-syntax-jsx",  
       "@babel/plugin-transform-react-jsx"
     ]
   },

src/circleLoader/circleloader.js

@@ -106,7 +106,7 @@ const CircleLoader = ({
 
     camera.position.z = 100;
     camera.position.y = -160;
-    camera.rotation.x = THREE.Math.degToRad(60);
+    camera.rotation.x = THREE.MathUtils.degToRad(60);
 
     let planeGeometry = new THREE.PlaneGeometry(200, 200),
       planeMaterial = new THREE.ShadowMaterial();

src/flipFlopLoader/flipfloploader.js

@@ -173,8 +173,8 @@ const FlipFlopLoader = ({
         1.6,
         {
           ease: Elastic.easeInOut.config(1.2, 0.5),
-          x: THREE.Math.degToRad(90),
-          y: THREE.Math.degToRad(90),
+          x: THREE.MathUtils.degToRad(90),
+          y: THREE.MathUtils.degToRad(90),
         },
         0
       );