feat: move utils to utils package and make @excalidraw/utils a workspace (#7432)

* feat: move utils to utils package and make @excalidraw/utils a workspace

* remove esm and update types path

* remove esm script

* fix package.json and yarn.lock

* update path

* fix

* fix lint and test

packages/excalidraw/components/App.tsx

@@ -5,7 +5,6 @@ import { RoughCanvas } from "roughjs/bin/canvas";
 import rough from "roughjs/bin/rough";
 import clsx from "clsx";
 import { nanoid } from "nanoid";
-
 import {
   actionAddToLibrary,
   actionBringForward,
@@ -392,7 +391,7 @@ import {
 import { Emitter } from "../emitter";
 import { ElementCanvasButtons } from "../element/ElementCanvasButtons";
 import { MagicCacheData, diagramToHTML } from "../data/magic";
-import { elementsOverlappingBBox, exportToBlob } from "../../utils";
+import { elementsOverlappingBBox, exportToBlob } from "../../utils/export";
 import { COLOR_PALETTE } from "../colors";
 import { ElementCanvasButton } from "./MagicButton";
 import { MagicIcon, copyIcon, fullscreenIcon } from "./icons";

packages/excalidraw/components/ImageExportDialog.tsx

@@ -23,7 +23,7 @@ import { nativeFileSystemSupported } from "../data/filesystem";
 import { NonDeletedExcalidrawElement } from "../element/types";
 import { t } from "../i18n";
 import { isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../../utils";
+import { exportToCanvas } from "../../utils/export";
 
 import { copyIcon, downloadIcon, helpIcon } from "./icons";
 import { Dialog } from "./Dialog";

packages/excalidraw/components/PublishLibrary.tsx

@@ -6,7 +6,7 @@ import { t } from "../i18n";
 import Trans from "./Trans";
 
 import { LibraryItems, LibraryItem, UIAppState } from "../types";
-import { exportToCanvas, exportToSvg } from "../../utils";
+import { exportToCanvas, exportToSvg } from "../../utils/export";
 import {
   EDITOR_LS_KEYS,
   EXPORT_DATA_TYPES,

packages/excalidraw/data/index.ts

@@ -11,7 +11,7 @@ import {
   NonDeletedExcalidrawElement,
 } from "../element/types";
 import { t } from "../i18n";
-import { elementsOverlappingBBox } from "../../withinBounds";
+import { elementsOverlappingBBox } from "../../utils/export";
 import { isSomeElementSelected, getSelectedElements } from "../scene";
 import { exportToCanvas, exportToSvg } from "../scene/export";
 import { ExportType } from "../scene/types";

packages/excalidraw/frame.ts

@@ -21,7 +21,7 @@ import { getElementsWithinSelection, getSelectedElements } from "./scene";
 import { getElementsInGroup, selectGroupsFromGivenElements } from "./groups";
 import Scene, { ExcalidrawElementsIncludingDeleted } from "./scene/Scene";
 import { getElementLineSegments } from "./element/bounds";
-import { doLineSegmentsIntersect } from "../utils";
+import { doLineSegmentsIntersect } from "../utils/export";
 import { isFrameElement, isFrameLikeElement } from "./element/typeChecks";
 
 // --------------------------- Frame State ------------------------------------

packages/excalidraw/hooks/useLibraryItemSvg.ts

@@ -2,7 +2,7 @@ import { atom, useAtom } from "jotai";
 import { useEffect, useState } from "react";
 import { COLOR_PALETTE } from "../colors";
 import { jotaiScope } from "../jotai";
-import { exportToSvg } from "../../utils";
+import { exportToSvg } from "../../utils/export";
 import { LibraryItem } from "../types";
 
 export type SvgCache = Map<LibraryItem["id"], SVGSVGElement>;

packages/excalidraw/index.tsx

@@ -216,7 +216,7 @@ export {
   getFreeDrawSvgPath,
   exportToClipboard,
   mergeLibraryItems,
-} from "../utils";
+} from "../utils/export";
 export { isLinearElement } from "./element/typeChecks";
 
 export { FONT_FAMILY, THEME, MIME_TYPES } from "./constants";
@@ -254,4 +254,4 @@ export {
   elementsOverlappingBBox,
   isElementInsideBBox,
   elementPartiallyOverlapsWithOrContainsBBox,
-} from "../withinBounds";
+} from "../utils/export";

packages/excalidraw/package.json

@@ -2,7 +2,7 @@
   "name": "@excalidraw/excalidraw",
   "version": "0.17.1",
   "main": "main.js",
-  "types": "types/packages/excalidraw/index.d.ts",
+  "types": "types/excalidraw/index.d.ts",
   "files": [
     "dist/*",
     "types/*"
@@ -77,9 +77,6 @@
     "tunnel-rat": "0.1.2"
   },
   "devDependencies": {
-    "@types/pako": "1.0.3",
-    "@types/pica": "5.1.3",
-    "@types/resize-observer-browser": "0.1.7",
     "@babel/core": "7.18.9",
     "@babel/plugin-transform-arrow-functions": "7.18.6",
     "@babel/plugin-transform-async-to-generator": "7.18.6",
@@ -89,6 +86,9 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "7.18.6",
     "@size-limit/preset-big-lib": "9.0.0",
+    "@types/pako": "1.0.3",
+    "@types/pica": "5.1.3",
+    "@types/resize-observer-browser": "0.1.7",
     "autoprefixer": "10.4.7",
     "babel-loader": "8.2.5",
     "babel-plugin-transform-class-properties": "6.24.1",

packages/excalidraw/scene/export.ts

@@ -26,7 +26,7 @@ import {
   getInitializedImageElements,
   updateImageCache,
 } from "../element/image";
-import { elementsOverlappingBBox } from "../../withinBounds";
+import { elementsOverlappingBBox } from "../../utils/export";
 import {
   getFrameLikeElements,
   getFrameLikeTitle,

packages/utils/__snapshots__/export.test.ts.snap

@@ -0,0 +1,100 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`exportToSvg > with default arguments 1`] = `
+{
+  "activeEmbeddable": null,
+  "activeTool": {
+    "customType": null,
+    "lastActiveTool": null,
+    "locked": false,
+    "type": "selection",
+  },
+  "collaborators": Map {},
+  "contextMenu": null,
+  "currentChartType": "bar",
+  "currentItemBackgroundColor": "transparent",
+  "currentItemEndArrowhead": "arrow",
+  "currentItemFillStyle": "solid",
+  "currentItemFontFamily": 1,
+  "currentItemFontSize": 20,
+  "currentItemOpacity": 100,
+  "currentItemRoughness": 1,
+  "currentItemRoundness": "round",
+  "currentItemStartArrowhead": null,
+  "currentItemStrokeColor": "#1e1e1e",
+  "currentItemStrokeStyle": "solid",
+  "currentItemStrokeWidth": 2,
+  "currentItemTextAlign": "left",
+  "cursorButton": "up",
+  "defaultSidebarDockedPreference": false,
+  "draggingElement": null,
+  "editingElement": null,
+  "editingFrame": null,
+  "editingGroupId": null,
+  "editingLinearElement": null,
+  "elementsToHighlight": null,
+  "errorMessage": null,
+  "exportBackground": true,
+  "exportEmbedScene": false,
+  "exportPadding": undefined,
+  "exportScale": 1,
+  "exportWithDarkMode": false,
+  "fileHandle": null,
+  "frameRendering": {
+    "clip": true,
+    "enabled": true,
+    "name": true,
+    "outline": true,
+  },
+  "frameToHighlight": null,
+  "gridSize": null,
+  "isBindingEnabled": true,
+  "isLoading": false,
+  "isResizing": false,
+  "isRotating": false,
+  "lastPointerDownWith": "mouse",
+  "multiElement": null,
+  "name": "name",
+  "objectsSnapModeEnabled": false,
+  "openDialog": null,
+  "openMenu": null,
+  "openPopup": null,
+  "openSidebar": null,
+  "originSnapOffset": {
+    "x": 0,
+    "y": 0,
+  },
+  "pasteDialog": {
+    "data": null,
+    "shown": false,
+  },
+  "penDetected": false,
+  "penMode": false,
+  "pendingImageElementId": null,
+  "previousSelectedElementIds": {},
+  "resizingElement": null,
+  "scrollX": 0,
+  "scrollY": 0,
+  "scrolledOutside": false,
+  "selectedElementIds": {},
+  "selectedElementsAreBeingDragged": false,
+  "selectedGroupIds": {},
+  "selectedLinearElement": null,
+  "selectionElement": null,
+  "shouldCacheIgnoreZoom": false,
+  "showHyperlinkPopup": false,
+  "showStats": false,
+  "showWelcomeScreen": false,
+  "snapLines": [],
+  "startBoundElement": null,
+  "suggestedBindings": [],
+  "theme": "light",
+  "toast": null,
+  "viewBackgroundColor": "#ffffff",
+  "viewModeEnabled": false,
+  "zenModeEnabled": false,
+  "zoom": {
+    "value": 1,
+  },
+}
+`;

packages/utils/bbox.ts

@@ -1,5 +1,5 @@
-import { Bounds } from "./excalidraw/element/bounds";
-import { Point } from "./excalidraw/types";
+import { Bounds } from "../excalidraw/element/bounds";
+import { Point } from "../excalidraw/types";
 
 export type LineSegment = [Point, Point];
 

packages/utils/export.test.ts

@@ -1,4 +1,4 @@
-import * as utils from "../utils";
+import * as utils from ".";
 import { diagramFactory } from "../excalidraw/tests/fixtures/diagramFixture";
 import { vi } from "vitest";
 import * as mockedSceneExportUtils from "../excalidraw/scene/export";

packages/utils/export.ts

@@ -1,23 +1,23 @@
 import {
   exportToCanvas as _exportToCanvas,
   exportToSvg as _exportToSvg,
-} from "./excalidraw/scene/export";
-import { getDefaultAppState } from "./excalidraw/appState";
-import { AppState, BinaryFiles } from "./excalidraw/types";
+} from "../excalidraw/scene/export";
+import { getDefaultAppState } from "../excalidraw/appState";
+import { AppState, BinaryFiles } from "../excalidraw/types";
 import {
   ExcalidrawElement,
   ExcalidrawFrameLikeElement,
   NonDeleted,
-} from "./excalidraw/element/types";
-import { restore } from "./excalidraw/data/restore";
-import { MIME_TYPES } from "./excalidraw/constants";
-import { encodePngMetadata } from "./excalidraw/data/image";
-import { serializeAsJSON } from "./excalidraw/data/json";
+} from "../excalidraw/element/types";
+import { restore } from "../excalidraw/data/restore";
+import { MIME_TYPES } from "../excalidraw/constants";
+import { encodePngMetadata } from "../excalidraw/data/image";
+import { serializeAsJSON } from "../excalidraw/data/json";
 import {
   copyBlobToClipboardAsPng,
   copyTextToSystemClipboard,
   copyToClipboard,
-} from "./excalidraw/clipboard";
+} from "../excalidraw/clipboard";
 
 export { MIME_TYPES };
 
@@ -215,11 +215,11 @@ export {
 export {
   serializeAsJSON,
   serializeLibraryAsJSON,
-} from "./excalidraw/data/json";
+} from "../excalidraw/data/json";
 export {
   loadFromBlob,
   loadSceneOrLibraryFromBlob,
   loadLibraryFromBlob,
-} from "./excalidraw/data/blob";
-export { getFreeDrawSvgPath } from "./excalidraw/renderer/renderElement";
-export { mergeLibraryItems } from "./excalidraw/data/library";
+} from "../excalidraw/data/blob";
+export { getFreeDrawSvgPath } from "../excalidraw/renderer/renderElement";
+export { mergeLibraryItems } from "../excalidraw/data/library";

packages/utils/index.js

@@ -1,5 +1 @@
-export {
-  exportToBlob,
-  exportToSvg,
-  exportToCanvas,
-} from "../excalidraw/packages/utils.ts";
+export * from "./export";

packages/utils/withinBounds.test.ts

@@ -1,5 +1,5 @@
-import { Bounds } from "./excalidraw/element/bounds";
-import { API } from "./excalidraw/tests/helpers/api";
+import { Bounds } from "../excalidraw/element/bounds";
+import { API } from "../excalidraw/tests/helpers/api";
 import {
   elementPartiallyOverlapsWithOrContainsBBox,
   elementsOverlappingBBox,

packages/utils/withinBounds.ts

@@ -3,17 +3,17 @@ import type {
   ExcalidrawFreeDrawElement,
   ExcalidrawLinearElement,
   NonDeletedExcalidrawElement,
-} from "./excalidraw/element/types";
+} from "../excalidraw/element/types";
 import {
   isArrowElement,
   isExcalidrawElement,
   isFreeDrawElement,
   isLinearElement,
   isTextElement,
-} from "./excalidraw/element/typeChecks";
-import { isValueInRange, rotatePoint } from "./excalidraw/math";
-import type { Point } from "./excalidraw/types";
-import { Bounds, getElementBounds } from "./excalidraw/element/bounds";
+} from "../excalidraw/element/typeChecks";
+import { isValueInRange, rotatePoint } from "../excalidraw/math";
+import type { Point } from "../excalidraw/types";
+import { Bounds, getElementBounds } from "../excalidraw/element/bounds";
 
 type Element = NonDeletedExcalidrawElement;
 type Elements = readonly NonDeletedExcalidrawElement[];