Fixing common package

packages/common/global.d.ts

@@ -0,0 +1,13 @@
+interface Window {
+  EXCALIDRAW_EXPORT_SOURCE: string;
+}
+
+interface ImportMetaEnv {
+  MODE: string;
+  DEV: string;
+  PROD: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

packages/common/index.ts

@@ -0,0 +1,7 @@
+export * from "./src/colors";
+export * from "./src/constants";
+export * from "./src/keys";
+export * from "./src/points";
+export * from "./src/random";
+export * from "./src/url";
+export * from "./src/utils";

packages/common/package.json

@@ -48,8 +48,13 @@
       ]
     },
     "dependencies": {
+      "es6-promise-pool": "2.5.0",
+      "nanoid": "3.3.3",
+      "open-color": "1.9.1",
+      "roughjs": "4.6.4"
     },
     "devDependencies": {
+      "typescript": "4.9.4"
     },
     "bugs": "https://github.com/excalidraw/excalidraw/issues",
     "repository": "https://github.com/excalidraw/excalidraw",

packages/common/src/colors.ts

@@ -1,6 +1,6 @@
 import oc from "open-color";
 
-import type { Merge } from "./utility-types";
+import type { Merge } from "@excalidraw/excalidraw/utility-types";
 
 // FIXME can't put to utils.ts rn because of circular dependency
 const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(

packages/common/src/constants.ts

@@ -1,7 +1,10 @@
-import { COLOR_PALETTE } from "./colors";
+import type {
+  ExcalidrawElement,
+  FontFamilyValues,
+} from "@excalidraw/element/types";
+import type { AppProps, AppState } from "@excalidraw/excalidraw/types";
 
-import type { ExcalidrawElement, FontFamilyValues } from "./element/types";
+import { COLOR_PALETTE } from "./colors";
-import type { AppProps, AppState } from "./types";
 
 export const isDarwin = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
 export const isWindows = /^Win/.test(navigator.platform);

packages/common/src/keys.ts

@@ -1,6 +1,6 @@
-import { isDarwin } from "./constants";
+import type { ValueOf } from "@excalidraw/excalidraw/utility-types";
 
-import type { ValueOf } from "../excalidraw/utility-types";
+import { isDarwin } from "./constants";
 
 export const CODES = {
   EQUAL: "Equal",

packages/common/src/promise-pool.ts

@@ -0,0 +1,50 @@
+import Pool from "es6-promise-pool";
+
+// extending the missing types
+// relying on the [Index, T] to keep a correct order
+type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
+  addEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => (event: { data: { result: [Index, T] } }) => void;
+  removeEventListener: (
+    type: "fulfilled",
+    listener: (event: { data: { result: [Index, T] } }) => void,
+  ) => void;
+};
+
+export class PromisePool<T> {
+  private readonly pool: TPromisePool<T>;
+  private readonly entries: Record<number, T> = {};
+
+  constructor(
+    source: IterableIterator<Promise<void | readonly [number, T]>>,
+    concurrency: number,
+  ) {
+    this.pool = new Pool(
+      source as unknown as () => void | PromiseLike<[number, T][]>,
+      concurrency,
+    ) as TPromisePool<T>;
+  }
+
+  public all() {
+    const listener = (event: { data: { result: void | [number, T] } }) => {
+      if (event.data.result) {
+        // by default pool does not return the results, so we are gathering them manually
+        // with the correct call order (represented by the index in the tuple)
+        const [index, value] = event.data.result;
+        this.entries[index] = value;
+      }
+    };
+
+    this.pool.addEventListener("fulfilled", listener);
+
+    return this.pool.start().then(() => {
+      setTimeout(() => {
+        this.pool.removeEventListener("fulfilled", listener);
+      });
+
+      return Object.values(this.entries);
+    });
+  }
+}

packages/common/src/utils.ts

@@ -1,6 +1,28 @@
-import Pool from "es6-promise-pool";
 import { average } from "@excalidraw/math";
 
+import type {
+  ExcalidrawBindableElement,
+  ExcalidrawElement,
+  FontFamilyValues,
+  FontString,
+  GroupId,
+  NonDeletedExcalidrawElement,
+} from "@excalidraw/element/types";
+
+import type {
+  ActiveTool,
+  AppState,
+  NullableGridSize,
+  ToolType,
+  UnsubscribeCallback,
+  Zoom,
+} from "@excalidraw/excalidraw/types";
+
+import type {
+  MaybePromise,
+  ResolutionType,
+} from "@excalidraw/excalidraw/utility-types";
+
 import { COLOR_PALETTE } from "./colors";
 import {
   DEFAULT_VERSION,
@@ -11,19 +33,6 @@ import {
 } from "./constants";
 
 import type { EVENT } from "./constants";
-import type {
-  ExcalidrawBindableElement,
-  FontFamilyValues,
-  FontString,
-} from "./element/types";
-import type {
-  ActiveTool,
-  AppState,
-  ToolType,
-  UnsubscribeCallback,
-  Zoom,
-} from "./types";
-import type { MaybePromise, ResolutionType } from "./utility-types";
 
 let mockDateTime: string | null = null;
 
@@ -1186,54 +1195,6 @@ export const safelyParseJSON = (json: string): Record<string, any> | null => {
     return null;
   }
 };
-// extending the missing types
-// relying on the [Index, T] to keep a correct order
-type TPromisePool<T, Index = number> = Pool<[Index, T][]> & {
-  addEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => (event: { data: { result: [Index, T] } }) => void;
-  removeEventListener: (
-    type: "fulfilled",
-    listener: (event: { data: { result: [Index, T] } }) => void,
-  ) => void;
-};
-
-export class PromisePool<T> {
-  private readonly pool: TPromisePool<T>;
-  private readonly entries: Record<number, T> = {};
-
-  constructor(
-    source: IterableIterator<Promise<void | readonly [number, T]>>,
-    concurrency: number,
-  ) {
-    this.pool = new Pool(
-      source as unknown as () => void | PromiseLike<[number, T][]>,
-      concurrency,
-    ) as TPromisePool<T>;
-  }
-
-  public all() {
-    const listener = (event: { data: { result: void | [number, T] } }) => {
-      if (event.data.result) {
-        // by default pool does not return the results, so we are gathering them manually
-        // with the correct call order (represented by the index in the tuple)
-        const [index, value] = event.data.result;
-        this.entries[index] = value;
-      }
-    };
-
-    this.pool.addEventListener("fulfilled", listener);
-
-    return this.pool.start().then(() => {
-      setTimeout(() => {
-        this.pool.removeEventListener("fulfilled", listener);
-      });
-
-      return Object.values(this.entries);
-    });
-  }
-}
 
 /**
  * use when you need to render unsafe string as HTML attribute, but MAKE SURE
@@ -1246,8 +1207,7 @@ export const escapeDoubleQuotes = (str: string) => {
 export const castArray = <T>(value: T | T[]): T[] =>
   Array.isArray(value) ? value : [value];
 
-
+// TODO_SEP: perhaps could be refactored away
-// TODO_SEP: perhaps could be refactored away?
 
 // TODO: Rounding this point causes some shake when free drawing
 export const getGridPoint = (

packages/common/tests/keys.test.ts

@@ -1,4 +1,4 @@
-import { KEYS, matchKey } from "./keys";
+import { KEYS, matchKey } from "../src/keys";
 
 describe("key matcher", async () => {
   it("should not match unexpected key", async () => {

packages/common/tests/url.test.tsx

@@ -1,4 +1,4 @@
-import { normalizeLink } from "./url";
+import { normalizeLink } from "../src/url";
 
 describe("normalizeLink", () => {
   // NOTE not an extensive XSS test suite, just to check if we're not

packages/common/yarn.lock

@@ -0,0 +1,56 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+es6-promise-pool@2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/es6-promise-pool/-/es6-promise-pool-2.5.0.tgz#147c612b36b47f105027f9d2bf54a598a99d9ccb"
+  integrity sha512-VHErXfzR/6r/+yyzPKeBvO0lgjfC5cbDCQWjWwMZWSb6YU39TGIl51OUmCfWCq4ylMdJSB8zkz2vIuIeIxXApA==
+
+hachure-fill@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/hachure-fill/-/hachure-fill-0.5.2.tgz#d19bc4cc8750a5962b47fb1300557a85fcf934cc"
+  integrity sha512-3GKBOn+m2LX9iq+JC1064cSFprJY4jL1jCXTcpnfER5HYE2l/4EfWSGzkPa/ZDBmYI0ZOEj5VHV/eKnPGkHuOg==
+
+nanoid@3.3.3:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
+  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
+
+open-color@1.9.1:
+  version "1.9.1"
+  resolved "https://registry.yarnpkg.com/open-color/-/open-color-1.9.1.tgz#a6e6328f60eff7aa60e3e8fcfa50f53ff3eece35"
+  integrity sha512-vCseG/EQ6/RcvxhUcGJiHViOgrtz4x0XbZepXvKik66TMGkvbmjeJrKFyBEx6daG5rNyyd14zYXhz0hZVwQFOw==
+
+path-data-parser@0.1.0, path-data-parser@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/path-data-parser/-/path-data-parser-0.1.0.tgz#8f5ba5cc70fc7becb3dcefaea08e2659aba60b8c"
+  integrity sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w==
+
+points-on-curve@0.2.0, points-on-curve@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/points-on-curve/-/points-on-curve-0.2.0.tgz#7dbb98c43791859434284761330fa893cb81b4d1"
+  integrity sha512-0mYKnYYe9ZcqMCWhUjItv/oHjvgEsfKvnUTg8sAtnHr3GVy7rGkXCb6d5cSyqrWqL4k81b9CPg3urd+T7aop3A==
+
+points-on-path@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/points-on-path/-/points-on-path-0.2.1.tgz#553202b5424c53bed37135b318858eacff85dd52"
+  integrity sha512-25ClnWWuw7JbWZcgqY/gJ4FQWadKxGWk+3kR/7kD0tCaDtPPMj7oHu2ToLaVhfpnHrZzYby2w6tUA0eOIuUg8g==
+  dependencies:
+    path-data-parser "0.1.0"
+    points-on-curve "0.2.0"
+
+roughjs@4.6.4:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/roughjs/-/roughjs-4.6.4.tgz#b6f39b44645854a6e0a4a28b078368701eb7f939"
+  integrity sha512-s6EZ0BntezkFYMf/9mGn7M8XGIoaav9QQBCnJROWB3brUWQ683Q2LbRD/hq0Z3bAJ/9NVpU/5LpiTWvQMyLDhw==
+  dependencies:
+    hachure-fill "^0.5.2"
+    path-data-parser "^0.1.0"
+    points-on-curve "^0.2.0"
+    points-on-path "^0.2.1"
+
+typescript@4.9.4:
+  version "4.9.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.4.tgz#a2a3d2756c079abda241d75f149df9d561091e78"
+  integrity sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==

packages/excalidraw/global.d.ts

@@ -2,7 +2,6 @@ interface Window {
   ClipboardItem: any;
   __EXCALIDRAW_SHA__: string | undefined;
   EXCALIDRAW_ASSET_PATH: string | string[] | undefined;
-  EXCALIDRAW_EXPORT_SOURCE: string;
   EXCALIDRAW_THROTTLE_RENDER: boolean | undefined;
   DEBUG_FRACTIONAL_INDICES: boolean | undefined;
   gtag: Function;

packages/excalidraw/package.json

@@ -69,7 +69,6 @@
     "canvas-roundrect-polyfill": "0.0.1",
     "clsx": "1.1.1",
     "cross-env": "7.0.3",
-    "es6-promise-pool": "2.5.0",
     "fractional-indexing": "3.2.0",
     "fuzzy": "0.1.3",
     "image-blob-reduce": "3.0.1",
@@ -78,7 +77,6 @@
     "lodash.throttle": "4.1.1",
     "lodash.debounce": "4.0.8",
     "nanoid": "3.3.3",
-    "open-color": "1.9.1",
     "pako": "2.0.3",
     "perfect-freehand": "1.2.0",
     "pica": "7.1.1",

packages/math/curve.ts

@@ -1,8 +1,9 @@
+import type { Bounds } from "@excalidraw/element/bounds";
+
 import { isPoint, pointDistance, pointFrom } from "./point";
 import { rectangle, rectangleIntersectLineSegment } from "./rectangle";
 
 import type { Curve, GlobalPoint, LineSegment, LocalPoint } from "./types";
-import type { Bounds } from "../excalidraw/element/bounds";
 
 /**
  *

packages/math/range.ts

@@ -1,4 +1,4 @@
-import { toBrandedType } from "@excalidraw/excalidraw/utils";
+import { toBrandedType } from "@excalidraw/common/utils";
 
 import type { InclusiveRange } from "./types";
 

packages/tsconfig.base.json

@@ -13,15 +13,15 @@
       "emitDeclarationOnly": true,
       "paths": {
         "@excalidraw/common": ["./common/index.ts"],
+        "@excalidraw/common/*": ["./common/src/*"],
         "@excalidraw/element": ["./element/index.ts"],
-        "@excalidraw/excalidraw": ["./excalidraw/index.tsx"],
-        "@excalidraw/utils": ["./utils/index.ts"],
-        "@excalidraw/math": ["./math/index.ts"],
-        "@excalidraw/common/*": ["./common/*"],
         "@excalidraw/element/*": ["./element/*"],
+        "@excalidraw/excalidraw": ["./excalidraw/index.tsx"],
         "@excalidraw/excalidraw/*": ["./excalidraw/*"],
-        "@excalidraw/utils/*": ["./utils/*"],
+        "@excalidraw/math": ["./math/index.ts"],
         "@excalidraw/math/*": ["./math/*"],
+        "@excalidraw/utils": ["./utils/index.ts"],
+        "@excalidraw/utils/*": ["./utils/*"],
       }
     },
     "exclude": ["**/*.test.*", "tests", "types", "examples", "dist"]

scripts/buildShared.js

@@ -14,7 +14,7 @@ const getConfig = (outdir) => ({
   entryNames: "[name]",
   assetNames: "[dir]/[name]",
   alias: {
-    "@excalidraw/common": path.resolve(__dirname, "../packages/common"),
+    "@excalidraw/common": path.resolve(__dirname, "../packages/common/src"),
     "@excalidraw/element": path.resolve(__dirname, "../packages/element"),
     "@excalidraw/excalidraw": path.resolve(__dirname, "../packages/excalidraw"),
     "@excalidraw/utils": path.resolve(__dirname, "../packages/utils"),

tsconfig.json

@@ -19,14 +19,16 @@
     "jsx": "react-jsx",
     "baseUrl": ".",
     "paths": {
+      "@excalidraw/common": ["./packages/common/index.ts"],
+      "@excalidraw/common/*": ["./packages/common/src/*"],
       "@excalidraw/excalidraw": ["./packages/excalidraw/index.tsx"],
-      "@excalidraw/utils": ["./packages/utils/index.ts"],
-      "@excalidraw/math": ["./packages/math/index.ts"],
-      "@excalidraw/element": ["./packages/element/index.ts"],
       "@excalidraw/excalidraw/*": ["./packages/excalidraw/*"],
-      "@excalidraw/utils/*": ["./packages/utils/*"],
+      "@excalidraw/element": ["./packages/element/index.ts"],
+      "@excalidraw/element/*": ["./packages/element/*"],
+      "@excalidraw/math": ["./packages/math/index.ts"],
       "@excalidraw/math/*": ["./packages/math/*"],
-      "@excalidraw/element/*": ["./packages/element/*"]
+      "@excalidraw/utils": ["./packages/utils/index.ts"],
+      "@excalidraw/utils/*": ["./packages/utils/*"],
     }
   },
   "include": ["packages", "excalidraw-app"],