Merge branch 'master' into mrazator/separate-element-into-standalone-package

excalidraw-app/App.tsx

@@ -29,6 +29,7 @@ import {
   preventUnload,
   resolvablePromise,
   isRunningInIframe,
+  isDevEnv,
 } from "@excalidraw/common";
 import polyfill from "@excalidraw/excalidraw/polyfill";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -382,7 +383,7 @@ const ExcalidrawWrapper = () => {
   const [, forceRefresh] = useState(false);
 
   useEffect(() => {
-    if (import.meta.env.DEV) {
+    if (isDevEnv()) {
       const debugState = loadSavedDebugState();
 
       if (debugState.enabled && !window.visualDebug) {

excalidraw-app/collab/Collab.tsx

@@ -6,12 +6,14 @@ import {
   reconcileElements,
 } from "@excalidraw/excalidraw";
 import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, ENV, EVENT } from "@excalidraw/common";
+import { APP_NAME, EVENT } from "@excalidraw/common";
 import {
   IDLE_THRESHOLD,
   ACTIVE_THRESHOLD,
   UserIdleState,
   assertNever,
+  isDevEnv,
+  isTestEnv,
   preventUnload,
   resolvablePromise,
   throttleRAF,
@@ -239,7 +241,7 @@ class Collab extends PureComponent<CollabProps, CollabState> {
 
     appJotaiStore.set(collabAPIAtom, collabAPI);
 
-    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    if (isTestEnv() || isDevEnv()) {
       window.collab = window.collab || ({} as Window["collab"]);
       Object.defineProperties(window, {
         collab: {
@@ -1012,7 +1014,7 @@ declare global {
   }
 }
 
-if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+if (isTestEnv() || isDevEnv()) {
   window.collab = window.collab || ({} as Window["collab"]);
 }
 

excalidraw-app/components/AppMainMenu.tsx

@@ -6,6 +6,8 @@ import {
 import { MainMenu } from "@excalidraw/excalidraw/index";
 import React from "react";
 
+import { isDevEnv } from "@excalidraw/common";
+
 import type { Theme } from "@excalidraw/element/types";
 
 import { LanguageList } from "../app-language/LanguageList";
@@ -57,7 +59,7 @@ export const AppMainMenu: React.FC<{
       >
         {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
       </MainMenu.ItemLink>
-      {import.meta.env.DEV && (
+      {isDevEnv() && (
         <MainMenu.Item
           icon={eyeIcon}
           onClick={() => {

packages/common/src/utils.ts

@@ -17,6 +17,7 @@ import type {
 import { COLOR_PALETTE } from "./colors";
 import {
   DEFAULT_VERSION,
+  ENV,
   FONT_FAMILY,
   getFontFamilyFallbacks,
   isDarwin,
@@ -171,7 +172,7 @@ export const throttleRAF = <T extends any[]>(
   };
 
   const ret = (...args: T) => {
-    if (import.meta.env.MODE === "test") {
+    if (isTestEnv()) {
       fn(...args);
       return;
     }
@@ -732,9 +733,9 @@ export const arrayToList = <T>(array: readonly T[]): Node<T>[] =>
     return acc;
   }, [] as Node<T>[]);
 
-export const isTestEnv = () => import.meta.env.MODE === "test";
+export const isTestEnv = () => import.meta.env.MODE === ENV.TEST;
 
-export const isDevEnv = () => import.meta.env.MODE === "development";
+export const isDevEnv = () => import.meta.env.MODE === ENV.DEVELOPMENT;
 
 export const isServerEnv = () =>
   typeof process !== "undefined" && !!process?.env?.NODE_ENV;

packages/element/src/elbowArrow.ts

@@ -19,6 +19,7 @@ import {
   isAnyTrue,
   tupleToCoors,
   getSizeFromPoints,
+  isDevEnv,
 } from "@excalidraw/common";
 
 import type { AppState } from "@excalidraw/excalidraw/types";
@@ -254,7 +255,7 @@ const handleSegmentRenormalization = (
       );
     }
 
-    import.meta.env.DEV &&
+    isDevEnv() &&
       invariant(
         validateElbowPoints(nextPoints),
         "Invalid elbow points with fixed segments",

packages/element/src/textWrapping.ts

@@ -1,4 +1,4 @@
-import { ENV } from "@excalidraw/common";
+import { isDevEnv, isTestEnv } from "@excalidraw/common";
 
 import { charWidth, getLineWidth } from "./textMeasurements";
 
@@ -562,7 +562,7 @@ const isSingleCharacter = (maybeSingleCharacter: string) => {
  * Invariant for the word wrapping algorithm.
  */
 const satisfiesWordInvariant = (word: string) => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+  if (isTestEnv() || isDevEnv()) {
     if (/\s/.test(word)) {
       throw new Error("Word should not contain any whitespaces!");
     }

packages/excalidraw/analytics.ts

@@ -1,4 +1,7 @@
 // place here categories that you want to track. We want to track just a
+
+import { isDevEnv } from "@excalidraw/common";
+
 // small subset of categories at a given time.
 const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);
 
@@ -21,7 +24,7 @@ export const trackEvent = (
       return;
     }
 
-    if (import.meta.env.DEV) {
+    if (isDevEnv()) {
       // comment out to debug in dev
       return;
     }

packages/excalidraw/change.ts

@@ -1,9 +1,10 @@
 import {
-  ENV,
   arrayToMap,
   arrayToObject,
   assertNever,
+  isDevEnv,
   isShallowEqual,
+  isTestEnv,
   toBrandedType,
 } from "@excalidraw/common";
 import {
@@ -527,7 +528,7 @@ export class AppStateChange implements Change<AppState> {
       // shouldn't really happen, but just in case
       console.error(`Couldn't apply appstate change`, e);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
 
@@ -565,7 +566,7 @@ export class AppStateChange implements Change<AppState> {
       // if postprocessing fails it does not make sense to bubble up, but let's make sure we know about it
       console.error(`Couldn't postprocess appstate change deltas.`);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {
@@ -855,7 +856,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
       change = new ElementsChange(added, removed, updated);
     }
 
-    if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+    if (isTestEnv() || isDevEnv()) {
       ElementsChange.validate(change, "added", this.satisfiesAddition);
       ElementsChange.validate(change, "removed", this.satisfiesRemoval);
       ElementsChange.validate(change, "updated", this.satisfiesUpdate);
@@ -1119,7 +1120,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
     } catch (e) {
       console.error(`Couldn't apply elements change`, e);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
 
@@ -1150,7 +1151,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
         e,
       );
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {
@@ -1564,7 +1565,7 @@ export class ElementsChange implements Change<SceneElementsMap> {
       // if postprocessing fails, it does not make sense to bubble up, but let's make sure we know about it
       console.error(`Couldn't postprocess elements change deltas.`);
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw e;
       }
     } finally {

packages/excalidraw/charts.ts

@@ -8,6 +8,7 @@ import {
   DEFAULT_FONT_SIZE,
   VERTICAL_ALIGN,
   randomId,
+  isDevEnv,
 } from "@excalidraw/common";
 
 import {
@@ -376,7 +377,7 @@ const chartTypeBar = (
       y,
       groupId,
       backgroundColor,
-      !!import.meta.env.DEV,
+      isDevEnv(),
     ),
   ];
 };
@@ -458,7 +459,7 @@ const chartTypeLine = (
       y,
       groupId,
       backgroundColor,
-      !!import.meta.env.DEV,
+      isDevEnv(),
     ),
     line,
     ...lines,

packages/excalidraw/components/App.tsx

@@ -35,7 +35,6 @@ import {
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
-  ENV,
   EVENT,
   FRAME_STYLE,
   IMAGE_MIME_TYPES,
@@ -91,6 +90,7 @@ import {
   easeToValuesRAF,
   muteFSAbortError,
   isTestEnv,
+  isDevEnv,
   easeOut,
   updateStable,
   addEventListener,
@@ -403,7 +403,6 @@ import {
 } from "../scene";
 import Scene from "../scene/Scene";
 import { getStateForZoom } from "../scene/zoom";
-
 import {
   dataURLToFile,
   dataURLToString,
@@ -2493,7 +2492,7 @@ class App extends React.Component<AppProps, AppState> {
     this.excalidrawContainerValue.container =
       this.excalidrawContainerRef.current;
 
-    if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+    if (isTestEnv() || isDevEnv()) {
       const setState = this.setState.bind(this);
       Object.defineProperties(window.h, {
         state: {
@@ -11119,7 +11118,7 @@ declare global {
 }
 
 export const createTestHook = () => {
-  if (import.meta.env.MODE === ENV.TEST || import.meta.env.DEV) {
+  if (isTestEnv() || isDevEnv()) {
     window.h = window.h || ({} as Window["h"]);
 
     Object.defineProperties(window.h, {

packages/excalidraw/components/Sidebar/Sidebar.tsx

@@ -9,7 +9,7 @@ import React, {
   useCallback,
 } from "react";
 
-import { EVENT, KEYS, updateObject } from "@excalidraw/common";
+import { EVENT, isDevEnv, KEYS, updateObject } from "@excalidraw/common";
 
 import { useUIAppState } from "../../context/ui-appState";
 import { atom, useSetAtom } from "../../editor-jotai";
@@ -51,7 +51,7 @@ export const SidebarInner = forwardRef(
     }: SidebarProps & Omit<React.RefAttributes<HTMLDivElement>, "onSelect">,
     ref: React.ForwardedRef<HTMLDivElement>,
   ) => {
-    if (import.meta.env.DEV && onDock && docked == null) {
+    if (isDevEnv() && onDock && docked == null) {
       console.warn(
         "Sidebar: `docked` must be set when `onDock` is supplied for the sidebar to be user-dockable. To hide this message, either pass `docked` or remove `onDock`",
       );

packages/excalidraw/data/reconcile.ts

@@ -1,6 +1,6 @@
 import throttle from "lodash.throttle";
 
-import { ENV, arrayToMap } from "@excalidraw/common";
+import { arrayToMap, isDevEnv, isTestEnv } from "@excalidraw/common";
 
 import {
   orderByFractionalIndex,
@@ -49,11 +49,7 @@ const validateIndicesThrottled = throttle(
     localElements: readonly OrderedExcalidrawElement[],
     remoteElements: readonly RemoteExcalidrawElement[],
   ) => {
-    if (
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
       // create new instances due to the mutation
       const elements = syncInvalidIndices(
         orderedElements.map((x) => ({ ...x })),
@@ -61,9 +57,7 @@ const validateIndicesThrottled = throttle(
 
       validateFractionalIndices(elements, {
         // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: Boolean(
+        shouldThrow: isTestEnv() || isDevEnv(),
-          import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
-        ),
         includeBoundTextValidation: true,
         reconciliationContext: {
           localElements,

packages/excalidraw/i18n.ts

@@ -1,3 +1,5 @@
+import { isDevEnv } from "@excalidraw/common";
+
 import type { NestedKeyOf } from "@excalidraw/common/utility-types";
 
 import { useAtomValue, editorJotaiStore, atom } from "./editor-jotai";
@@ -73,7 +75,7 @@ export const languages: Language[] = [
 ];
 
 const TEST_LANG_CODE = "__test__";
-if (import.meta.env.DEV) {
+if (isDevEnv()) {
   languages.unshift(
     { code: TEST_LANG_CODE, label: "test language" },
     {

packages/excalidraw/scene/Scene.ts

@@ -1,10 +1,11 @@
 import throttle from "lodash.throttle";
 
 import {
-  ENV,
   randomInteger,
   arrayToMap,
   toBrandedType,
+  isDevEnv,
+  isTestEnv,
 } from "@excalidraw/common";
 import { isNonDeletedElement } from "@excalidraw/element";
 import { isFrameLikeElement } from "@excalidraw/element/typeChecks";
@@ -62,16 +63,10 @@ const getNonDeletedElements = <T extends ExcalidrawElement>(
 
 const validateIndicesThrottled = throttle(
   (elements: readonly ExcalidrawElement[]) => {
-    if (
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
       validateFractionalIndices(elements, {
         // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: Boolean(
+        shouldThrow: isDevEnv() || isTestEnv(),
-          import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
-        ),
         includeBoundTextValidation: true,
       });
     }

packages/excalidraw/store.ts

@@ -1,4 +1,4 @@
-import { ENV, isShallowEqual } from "@excalidraw/common";
+import { isDevEnv, isShallowEqual, isTestEnv } from "@excalidraw/common";
 
 import { deepCopyElement } from "@excalidraw/element/duplicate";
 
@@ -261,7 +261,7 @@ export class Store implements IStore {
       const message = `There can be at most three store actions scheduled at the same time, but there are "${this.scheduledActions.size}".`;
       console.error(message, this.scheduledActions.values());
 
-      if (import.meta.env.DEV || import.meta.env.MODE === ENV.TEST) {
+      if (isTestEnv() || isDevEnv()) {
         throw new Error(message);
       }
     }