chore(deps): Update Dependencies. Fix issues related to using with CRA (

#88)
excalidraw · Sep 9, 2021 · 6f6e4b7 · 6f6e4b7
1 parent 62646f9
commit 6f6e4b7
Show file tree

Hide file tree

Showing 9 changed files with 1,302 additions and 1,086 deletions.
diff --git a/.husky/.gitignore b/.husky/.gitignore
diff --git a/.husky/pre-commit b/.husky/pre-commit
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
   "name": "svg-to-excalidraw",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Convert SVG to Excalidraw’s file format",
   "main": "dist/bundle.js",
   "files": [
     "dist/bundle.js",
     "svg-to-excalidraw.d.ts"
   ],
+  "types": "svg-to-excalidraw.d.ts",
   "scripts": {
     "build": "yarn clean && webpack --config webpack.config.js",
     "build:watch": "yarn clean && webpack --config webpack.config.js --watch",
@@ -16,50 +17,51 @@
     "fix:other": "yarn prettier -- --write",
     "lint:check": "eslint .",
     "lint:write": "eslint . --fix",
-    "postinstall": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
     "test": "yarn test:typecheck && yarn test:code && yarn test:other",
     "test:code": "eslint --max-warnings=0 --ignore-path .gitignore --ext .js,.ts,.tsx .",
     "test:other": "yarn prettier -- --list-different",
     "test:typecheck": "tsc"
   },
   "prettier": "@excalidraw/prettier-config",
-  "author": "Nicolas Goudry <[email protected]>",
+  "contributors": [
+    "Nicolas Goudry <[email protected]>",
+    "Broch Stilley <[email protected]>"
+  ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.13.10",
-    "@babel/plugin-proposal-class-properties": "7.13.0",
-    "@babel/plugin-proposal-object-rest-spread": "7.13.8",
+    "@babel/core": "7.15.5",
+    "@babel/plugin-proposal-class-properties": "7.14.5",
+    "@babel/plugin-proposal-object-rest-spread": "7.14.7",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/preset-env": "7.13.15",
-    "@babel/preset-typescript": "7.13.0",
+    "@babel/preset-env": "7.15.4",
+    "@babel/preset-typescript": "7.15.0",
     "@excalidraw/eslint-config": "1.0.1",
     "@excalidraw/prettier-config": "1.0.2",
     "@types/chroma-js": "^2.1.3",
-    "@typescript-eslint/eslint-plugin": "4.19.0",
-    "@typescript-eslint/parser": "4.18.0",
+    "@typescript-eslint/eslint-plugin": "4.31.0",
+    "@typescript-eslint/parser": "4.31.0",
     "babel-loader": "^8.2.2",
-    "eslint": "7.24.0",
-    "eslint-config-prettier": "8.1.0",
-    "eslint-plugin-prettier": "3.3.1",
-    "husky": "5.1.3",
-    "lint-staged": "10.5.4",
-    "prettier": "2.2.1",
-    "typescript": "4.2.3",
-    "webpack": "5.27.1",
-    "webpack-cli": "4.6.0"
+    "eslint": "7.32.0",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-plugin-prettier": "4.0.0",
+    "lint-staged": "11.1.2",
+    "prettier": "2.3.2",
+    "typescript": "4.4.2",
+    "webpack": "5.52.0",
+    "webpack-cli": "4.8.0"
   },
   "lint-staged": {
     "*.js": "eslint --cache --fix",
     "*.{js,css,md}": "prettier --write"
   },
   "dependencies": {
-    "chroma-js": "^2.1.1",
+    "chroma-js": "^2.1.2",
     "gl-matrix": "^3.3.0",
-    "nanoid": "^3.1.22",
+    "nanoid": "^3.1.25",
     "path-data-parser": "^0.1.0",
     "points-on-curve": "^0.2.0",
     "points-on-path": "^0.2.1",
-    "roughjs": "^4.3.1"
+    "roughjs": "^4.4.1"
   }
 }
diff --git a/src/elements/path/utils/ellipse.ts b/src/elements/path/utils/ellipse.ts
@@ -73,7 +73,7 @@ export const getEllipsePoints = (
   radiusX: number,
   radiusY: number,
 ): number[][] => {
-  const points = [];
+  const points: number[][] = [];
 
   for (let i = 0; i < 360; i += 1) {
     const pointAtDegree = getPointAtDegree(

diff --git a/src/elements/path/utils/path-to-points.ts b/src/elements/path/utils/path-to-points.ts
@@ -3,7 +3,8 @@ import { safeNumber } from "../../../utils";
 import { curveToPoints } from "./bezier";
 import { findArc, getEllipsePoints, getEllipsesCenter } from "./ellipse";
 
-const PATH_COMMANDS_REGEX = /(?:([HhVv] *-?\d*(?:\.\d+)?)|([MmLlTt](?: *-?\d*(?:\.\d+)?(?:,| *)?){2})|([Cc](?: *-?\d*(?:\.\d+)?(?:,| *)?){6})|([QqSs](?: *-?\d*(?:\.\d+)?(?:,| *)?){4})|([Aa](?: *-?\d*(?:\.\d+)?(?:,| *)?){7})|(z|Z))/g;
+const PATH_COMMANDS_REGEX =
+  /(?:([HhVv] *-?\d*(?:\.\d+)?)|([MmLlTt](?: *-?\d*(?:\.\d+)?(?:,| *)?){2})|([Cc](?: *-?\d*(?:\.\d+)?(?:,| *)?){6})|([QqSs](?: *-?\d*(?:\.\d+)?(?:,| *)?){4})|([Aa](?: *-?\d*(?:\.\d+)?(?:,| *)?){7})|(z|Z))/g;
 const COMMAND_REGEX = /(?:[MmLlHhVvCcSsQqTtAaZz]|(-?\d+(?:\.\d+)?))/g;
 
 const handleMoveToAndLineTo = (

diff --git a/src/transform.ts b/src/transform.ts
@@ -79,45 +79,41 @@ const svgTransformToCSSTransform = (svgTransformStr: string): string => {
     return "";
   }
 
-  const tFuncValues: TransformFunc[] = tFuncs.map(
-    (tFuncStr): TransformFunc => {
-      const type = tFuncStr.split("(")[0] as keyof typeof transformFunctions;
-      if (!type) {
-        throw new Error("Unable to find transform name");
-      }
-      if (!transformFunctionsArr.includes(type)) {
-        throw new Error(`transform function name "${type}" is not valid`);
-      }
-
-      // get the arg/props of the transform function, e.g "90deg".
-      const tFuncParts = tFuncStr.match(/([-+]?[0-9]*\.?[0-9]+)([a-z])*/g);
-      if (!tFuncParts) {
-        return { type, values: [] };
-      }
-
-      let values = tFuncParts.map(
-        (a): TransformFuncValue => {
-          // Separate the arg value and unit. e.g ["90", "deg"]
-          const [value, unit] = a.matchAll(/([-+]?[0-9]*\.?[0-9]+)|([a-z])*/g);
-
-          return {
-            unit: unit[0] || defaultUnits[type],
-            value: value[0],
-          };
-        },
-      );
-
-      // Not supporting x, y args of svg rotate transform yet...
-      if (values && type === "rotate" && values?.length > 1) {
-        values = [values[0]];
-      }
+  const tFuncValues: TransformFunc[] = tFuncs.map((tFuncStr): TransformFunc => {
+    const type = tFuncStr.split("(")[0] as keyof typeof transformFunctions;
+    if (!type) {
+      throw new Error("Unable to find transform name");
+    }
+    if (!transformFunctionsArr.includes(type)) {
+      throw new Error(`transform function name "${type}" is not valid`);
+    }
+
+    // get the arg/props of the transform function, e.g "90deg".
+    const tFuncParts = tFuncStr.match(/([-+]?[0-9]*\.?[0-9]+)([a-z])*/g);
+    if (!tFuncParts) {
+      return { type, values: [] };
+    }
+
+    let values = tFuncParts.map((a): TransformFuncValue => {
+      // Separate the arg value and unit. e.g ["90", "deg"]
+      const [value, unit] = a.matchAll(/([-+]?[0-9]*\.?[0-9]+)|([a-z])*/g);
 
       return {
-        type,
-        values,
+        unit: unit[0] || defaultUnits[type],
+        value: value[0],
       };
-    },
-  );
+    });
+
+    // Not supporting x, y args of svg rotate transform yet...
+    if (values && type === "rotate" && values?.length > 1) {
+      values = [values[0]];
+    }
+
+    return {
+      type,
+      values,
+    };
+  });
 
   // Generate a string of transform functions that can be set as a CSS Transform.
   const csstransformStr = tFuncValues

diff --git a/src/walker.ts b/src/walker.ts
@@ -377,73 +377,69 @@ const walkers = {
       case "nonzero":
         let initialWindingOrder = "clockwise";
 
-        elements = points.map(
-          (pointArr, idx): ExcalidrawDraw => {
-            const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
-            const x = tPoints[0][0];
-            const y = tPoints[0][1];
-
-            const [width, height] = dimensionsFromPoints(tPoints);
-
-            const relativePoints = tPoints.map(
-              ([_x, _y]): Point => [_x - x, _y - y],
-            );
-
-            const windingOrder = getWindingOrder(relativePoints);
-            if (idx === 0) {
-              initialWindingOrder = windingOrder;
-              localGroup = randomId();
-            }
-
-            let backgroundColor = fillColor;
-            if (initialWindingOrder !== windingOrder) {
-              backgroundColor = "#FFFFFF";
-            }
-
-            return {
-              ...createExDraw(),
-              strokeWidth: 0,
-              strokeColor: "#00000000",
-              ...presAttrs(el, groups),
-              points: relativePoints,
-              backgroundColor,
-              width,
-              height,
-              x: x + getNum(el, "x", 0),
-              y: y + getNum(el, "y", 0),
-              groupIds: [localGroup],
-            };
-          },
-        );
+        elements = points.map((pointArr, idx): ExcalidrawDraw => {
+          const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
+          const x = tPoints[0][0];
+          const y = tPoints[0][1];
+
+          const [width, height] = dimensionsFromPoints(tPoints);
+
+          const relativePoints = tPoints.map(
+            ([_x, _y]): Point => [_x - x, _y - y],
+          );
+
+          const windingOrder = getWindingOrder(relativePoints);
+          if (idx === 0) {
+            initialWindingOrder = windingOrder;
+            localGroup = randomId();
+          }
+
+          let backgroundColor = fillColor;
+          if (initialWindingOrder !== windingOrder) {
+            backgroundColor = "#FFFFFF";
+          }
+
+          return {
+            ...createExDraw(),
+            strokeWidth: 0,
+            strokeColor: "#00000000",
+            ...presAttrs(el, groups),
+            points: relativePoints,
+            backgroundColor,
+            width,
+            height,
+            x: x + getNum(el, "x", 0),
+            y: y + getNum(el, "y", 0),
+            groupIds: [localGroup],
+          };
+        });
         break;
       case "evenodd":
-        elements = points.map(
-          (pointArr, idx): ExcalidrawDraw => {
-            const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
-            const x = tPoints[0][0];
-            const y = tPoints[0][1];
-
-            const [width, height] = dimensionsFromPoints(tPoints);
-
-            const relativePoints = tPoints.map(
-              ([_x, _y]): Point => [_x - x, _y - y],
-            );
-
-            if (idx === 0) {
-              localGroup = randomId();
-            }
-
-            return {
-              ...createExDraw(),
-              ...presAttrs(el, groups),
-              points: relativePoints,
-              width,
-              height,
-              x: x + getNum(el, "x", 0),
-              y: y + getNum(el, "y", 0),
-            };
-          },
-        );
+        elements = points.map((pointArr, idx): ExcalidrawDraw => {
+          const tPoints: Point[] = transformPoints(pointArr, mat4.clone(mat));
+          const x = tPoints[0][0];
+          const y = tPoints[0][1];
+
+          const [width, height] = dimensionsFromPoints(tPoints);
+
+          const relativePoints = tPoints.map(
+            ([_x, _y]): Point => [_x - x, _y - y],
+          );
+
+          if (idx === 0) {
+            localGroup = randomId();
+          }
+
+          return {
+            ...createExDraw(),
+            ...presAttrs(el, groups),
+            points: relativePoints,
+            width,
+            height,
+            x: x + getNum(el, "x", 0),
+            y: y + getNum(el, "y", 0),
+          };
+        });
         break;
       default:
     }

diff --git a/webpack.config.js b/webpack.config.js
@@ -10,7 +10,7 @@ const babelLoaderConfig = {
       "@babel/plugin-proposal-class-properties",
       "@babel/plugin-proposal-object-rest-spread",
     ],
-    presets: ["@babel/typescript"],
+    presets: ["@babel/preset-env", "@babel/typescript"],
   },
 };