chore: Use isDevEnv() and isTestEnv() (#9264)

Signed-off-by: Mark Tolmacs <[email protected]>
Co-authored-by: Mark Tolmacs <[email protected]>

excalidraw-app/App.tsx

@@ -36,6 +36,7 @@ import {
   preventUnload,
   resolvablePromise,
   isRunningInIframe,
+  isDevEnv,
 } from "@excalidraw/excalidraw/utils";
 import {
   GithubIcon,
@@ -383,7 +384,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,7 +6,7 @@ import {
   reconcileElements,
 } from "@excalidraw/excalidraw";
 import { ErrorDialog } from "@excalidraw/excalidraw/components/ErrorDialog";
-import { APP_NAME, ENV, EVENT } from "@excalidraw/excalidraw/constants";
+import { APP_NAME, EVENT } from "@excalidraw/excalidraw/constants";
 import {
   IDLE_THRESHOLD,
   ACTIVE_THRESHOLD,
@@ -24,6 +24,8 @@ import { t } from "@excalidraw/excalidraw/i18n";
 import { withBatchedUpdates } from "@excalidraw/excalidraw/reactUtils";
 import {
   assertNever,
+  isDevEnv,
+  isTestEnv,
   preventUnload,
   resolvablePromise,
   throttleRAF,
@@ -240,7 +242,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: {
@@ -1013,7 +1015,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/excalidraw/utils";
+
 import type { Theme } from "@excalidraw/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/excalidraw/analytics.ts

@@ -1,4 +1,7 @@
 // place here categories that you want to track. We want to track just a
+
+import { isDevEnv } from "./utils";
+
 // 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,4 +1,3 @@
-import { ENV } from "./constants";
 import {
   BoundElement,
   BindableElement,
@@ -25,7 +24,9 @@ import {
   arrayToMap,
   arrayToObject,
   assertNever,
+  isDevEnv,
   isShallowEqual,
+  isTestEnv,
   toBrandedType,
 } from "./utils";
 
@@ -514,7 +515,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;
       }
 
@@ -552,7 +553,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 {
@@ -842,7 +843,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);
@@ -1106,7 +1107,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;
       }
 
@@ -1137,7 +1138,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 {
@@ -1551,7 +1552,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

@@ -15,6 +15,8 @@ import {
 import { newElement, newLinearElement, newTextElement } from "./element";
 import { randomId } from "./random";
 
+import { isDevEnv } from "./utils";
+
 import type { NonDeletedExcalidrawElement } from "./element/types";
 
 export type ChartElements = readonly NonDeletedExcalidrawElement[];
@@ -373,7 +375,7 @@ const chartTypeBar = (
       y,
       groupId,
       backgroundColor,
-      import.meta.env.DEV,
+      isDevEnv(),
     ),
   ];
 };
@@ -455,7 +457,7 @@ const chartTypeLine = (
       y,
       groupId,
       backgroundColor,
-      import.meta.env.DEV,
+      isDevEnv(),
     ),
     line,
     ...lines,

packages/excalidraw/components/App.tsx

@@ -85,7 +85,6 @@ import {
   DRAGGING_THRESHOLD,
   ELEMENT_SHIFT_TRANSLATE_AMOUNT,
   ELEMENT_TRANSLATE_AMOUNT,
-  ENV,
   EVENT,
   FRAME_STYLE,
   IMAGE_MIME_TYPES,
@@ -258,6 +257,7 @@ import {
   getDateTime,
   isShallowEqual,
   arrayToMap,
+  isDevEnv,
 } from "../utils";
 import {
   createSrcDoc,
@@ -2434,7 +2434,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: {
@@ -11060,7 +11060,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

@@ -14,7 +14,7 @@ import { useUIAppState } from "../../context/ui-appState";
 import { atom, useSetAtom } from "../../editor-jotai";
 import { useOutsideClick } from "../../hooks/useOutsideClick";
 import { KEYS } from "../../keys";
-import { updateObject } from "../../utils";
+import { isDevEnv, updateObject } from "../../utils";
 import { useDevice, useExcalidrawSetAppState } from "../App";
 import { Island } from "../Island";
 
@@ -52,7 +52,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,12 +1,11 @@
 import throttle from "lodash.throttle";
 
-import { ENV } from "../constants";
 import {
   orderByFractionalIndex,
   syncInvalidIndices,
   validateFractionalIndices,
 } from "../fractionalIndex";
-import { arrayToMap } from "../utils";
+import { arrayToMap, isDevEnv, isTestEnv } from "../utils";
 
 import type { OrderedExcalidrawElement } from "../element/types";
 import type { AppState } from "../types";
@@ -47,11 +46,7 @@ const validateIndicesThrottled = throttle(
     localElements: readonly OrderedExcalidrawElement[],
     remoteElements: readonly RemoteExcalidrawElement[],
   ) => {
-    if (
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
       // create new instances due to the mutation
       const elements = syncInvalidIndices(
         orderedElements.map((x) => ({ ...x })),
@@ -59,7 +54,7 @@ const validateIndicesThrottled = throttle(
 
       validateFractionalIndices(elements, {
         // throw in dev & test only, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+        shouldThrow: isTestEnv() || isDevEnv(),
         includeBoundTextValidation: true,
         reconciliationContext: {
           localElements,

packages/excalidraw/element/elbowArrow.ts

@@ -16,7 +16,7 @@ import {
 import BinaryHeap from "../binaryheap";
 import { getSizeFromPoints } from "../points";
 import { aabbForElement, pointInsideBounds } from "../shapes";
-import { invariant, isAnyTrue, tupleToCoors } from "../utils";
+import { invariant, isAnyTrue, isDevEnv, tupleToCoors } from "../utils";
 
 import {
   bindPointToSnapToElementOutline,
@@ -248,7 +248,7 @@ const handleSegmentRenormalization = (
       );
     }
 
-    import.meta.env.DEV &&
+    isDevEnv() &&
       invariant(
         validateElbowPoints(nextPoints),
         "Invalid elbow points with fixed segments",

packages/excalidraw/element/newElement.ts

@@ -10,6 +10,7 @@ import {
 } from "../constants";
 import { getLineHeight } from "../fonts";
 import { randomInteger, randomId } from "../random";
+
 import { getFontString, getUpdatedTimestamp } from "../utils";
 
 import { getResizedElementAbsoluteCoords } from "./bounds";

packages/excalidraw/element/textWrapping.ts

@@ -1,4 +1,4 @@
-import { ENV } from "../constants";
+import { isDevEnv, isTestEnv } from "../utils";
 
 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/i18n.ts

@@ -2,6 +2,8 @@ import { useAtomValue, editorJotaiStore, atom } from "./editor-jotai";
 import fallbackLangData from "./locales/en.json";
 import percentages from "./locales/percentages.json";
 
+import { isDevEnv } from "./utils";
+
 import type { NestedKeyOf } from "./utility-types";
 
 const COMPLETION_THRESHOLD = 85;
@@ -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,6 +1,5 @@
 import throttle from "lodash.throttle";
 
-import { ENV } from "../constants";
 import { isNonDeletedElement } from "../element";
 import { isFrameLikeElement } from "../element/typeChecks";
 import {
@@ -10,7 +9,7 @@ import {
 } from "../fractionalIndex";
 import { getElementsInGroup } from "../groups";
 import { randomInteger } from "../random";
-import { arrayToMap } from "../utils";
+import { arrayToMap, isDevEnv, isTestEnv } from "../utils";
 import { toBrandedType } from "../utils";
 
 import { getSelectedElements } from "./selection";
@@ -57,14 +56,10 @@ const getNonDeletedElements = <T extends ExcalidrawElement>(
 
 const validateIndicesThrottled = throttle(
   (elements: readonly ExcalidrawElement[]) => {
-    if (
-      import.meta.env.DEV ||
-      import.meta.env.MODE === ENV.TEST ||
-      window?.DEBUG_FRACTIONAL_INDICES
-    ) {
+    if (isDevEnv() || isTestEnv() || window?.DEBUG_FRACTIONAL_INDICES) {
       validateFractionalIndices(elements, {
         // throw only in dev & test, to remain functional on `DEBUG_FRACTIONAL_INDICES`
-        shouldThrow: import.meta.env.DEV || import.meta.env.MODE === ENV.TEST,
+        shouldThrow: isDevEnv() || isTestEnv(),
         includeBoundTextValidation: true,
       });
     }

packages/excalidraw/store.ts

@@ -1,9 +1,8 @@
 import { getDefaultAppState } from "./appState";
 import { AppStateChange, ElementsChange } from "./change";
-import { ENV } from "./constants";
 import { newElementWith } from "./element/mutateElement";
 import { Emitter } from "./emitter";
-import { isShallowEqual } from "./utils";
+import { isDevEnv, isShallowEqual, isTestEnv } from "./utils";
 
 import { deepCopyElement } from "./element/duplicate";
 
@@ -257,7 +256,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);
       }
     }

packages/excalidraw/utils.ts

@@ -169,7 +169,7 @@ export const throttleRAF = <T extends any[]>(
   };
 
   const ret = (...args: T) => {
-    if (import.meta.env.MODE === "test") {
+    if (isTestEnv()) {
       fn(...args);
       return;
     }