Standardize on React invariant library (#683)

packages/toolpad-app/package.json

@@ -61,6 +61,7 @@
     "find-up": "^6.2.0",
     "fractional-indexing": "^3.0.1",
     "headers-polyfill": "^3.0.10",
+    "invariant": "^2.2.4",
     "isolated-vm": "^4.4.1",
     "json-to-ts": "^1.7.0",
     "json5": "^2.2.1",
@@ -97,6 +98,7 @@
     "@types/crypto-js": "^4.1.1",
     "@types/glob": "^7.2.0",
     "@types/har-format": "^1.2.8",
+    "@types/invariant": "^2.2.35",
     "@types/lodash-es": "^4.17.6",
     "@types/node-fetch": "^2.6.2",
     "@types/react": "^18.0.14",
@@ -108,7 +110,7 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.3",
     "glob": "^8.0.3",
-    "monaco-editor": "^0.33.0",
+    "monaco-editor": "^0.34.0-dev.20220722",
     "webpack": "^5.73.0"
   },
   "typings": "./index.d.ts",

packages/toolpad-app/src/api.ts

@@ -1,3 +1,4 @@
+import invariant from 'invariant';
 import {
   QueryClient,
   useMutation,
@@ -103,9 +104,7 @@ function createClient<D extends MethodsOf<any>>(endpoint: string): ApiClient<D>
         enabled: !!params,
         queryKey: [key, params],
         queryFn: () => {
-          if (!params) {
-            throw new Error(`Invariant: "enabled" prop of useQuery should prevent this call'`);
-          }
+          invariant(params, `"enabled" prop of useQuery should prevent this call'`);
           return query[key](...params);
         },
       });

packages/toolpad-app/src/appDom.ts

@@ -7,6 +7,7 @@ import {
   BindableAttrValues,
   SecretAttrValue,
 } from '@mui/toolpad-core';
+import invariant from 'invariant';
 import { ConnectionStatus, AppTheme } from './types';
 import { omit, update, updateOrCreate } from './utils/immutability';
 import { camelCase, generateUniqueString, removeDiacritics } from './utils/strings';
@@ -184,9 +185,7 @@ function isType<T extends AppDomNode>(node: AppDomNode, type: T['type']): node i
 }
 
 function assertIsType<T extends AppDomNode>(node: AppDomNode, type: T['type']): asserts node is T {
-  if (!isType(node, type)) {
-    throw new Error(`Invariant: expected node type "${type}" but got "${node.type}"`);
-  }
+  invariant(isType(node, type), `Expected node type "${type}" but got "${node.type}"`);
 }
 
 export function createConst<V>(value: V): ConstantAttrValue<V> {
@@ -338,11 +337,10 @@ export function getChildNodes<N extends AppDomNode>(dom: AppDom, parent: N): Nod
 
     for (const childArray of Object.values(result)) {
       childArray?.sort((node1: AppDomNode, node2: AppDomNode) => {
-        if (!node1.parentIndex || !node2.parentIndex) {
-          throw new Error(
-            `Invariant: nodes inside the dom should have a parentIndex if they have a parent`,
-          );
-        }
+        invariant(
+          node1.parentIndex && node2.parentIndex,
+          `Nodes inside the dom should have a parentIndex if they have a parent`,
+        );
         return compareFractionalIndex(node1.parentIndex, node2.parentIndex);
       });
     }
@@ -649,9 +647,7 @@ export function removeNode(dom: AppDom, nodeId: NodeId) {
   const node = getNode(dom, nodeId);
   const parent = getParent(dom, node);
 
-  if (!parent) {
-    throw new Error(`Invariant: Node: "${node.id}" can't be removed`);
-  }
+  invariant(parent, `Node: "${node.id}" can't be removed`);
 
   const descendantIds = getDescendants(dom, node).map(({ id }) => id);
 
@@ -731,9 +727,7 @@ export function getNewParentIndexBeforeNode(
 ) {
   const parent = getParent(dom, node);
 
-  if (!parent) {
-    throw new Error(`Invariant: Node: "${node.id}" has no parent`);
-  }
+  invariant(parent, `Node: "${node.id}" has no parent`);
 
   const parentChildren =
     ((isPage(parent) || isElement(parent)) &&
@@ -753,9 +747,7 @@ export function getNewParentIndexAfterNode(
 ) {
   const parent = getParent(dom, node);
 
-  if (!parent) {
-    throw new Error(`Invariant: Node: "${node.id}" has no parent`);
-  }
+  invariant(parent, `Node: "${node.id}" has no parent`);
 
   const parentChildren =
     ((isPage(parent) || isElement(parent)) &&

packages/toolpad-app/src/components/MonacoEditor.tsx

@@ -8,6 +8,7 @@ import * as monaco from 'monaco-editor';
 import { styled, SxProps } from '@mui/material';
 import clsx from 'clsx';
 import cuid from 'cuid';
+import invariant from 'invariant';
 import monacoEditorTheme from '../monacoEditorTheme';
 
 function getExtension(language: string): string {
@@ -145,9 +146,7 @@ export default React.forwardRef<MonacoEditorHandle, MonacoEditorProps>(function
   const instanceRef = React.useRef<monaco.editor.IStandaloneCodeEditor | null>(null);
 
   React.useEffect(() => {
-    if (!rootRef.current) {
-      return;
-    }
+    invariant(rootRef.current, 'Ref not attached');
 
     const extraOptions: EditorOptions = {
       readOnly: disabled,

packages/toolpad-app/src/server/evalExpression.ts

@@ -1,3 +1,4 @@
+import invariant from 'invariant';
 import { getQuickJS, QuickJSHandle, QuickJSContext } from 'quickjs-emscripten';
 
 export type Serializable =
@@ -47,7 +48,7 @@ export function newJson(ctx: QuickJSContext, json: Serializable): QuickJSHandle
       return result;
     }
     default:
-      throw new Error(`Invariant: invalid value: ${json}`);
+      return invariant(false, `invalid value: ${json}`);
   }
 }
 

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx

@@ -3,6 +3,7 @@ import { Box, Collapse, styled, Typography } from '@mui/material';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+import invariant from 'invariant';
 import * as appDom from '../../../appDom';
 import { useDom } from '../../DomLoader';
 import { usePageEditorApi } from './PageEditorProvider';
@@ -105,11 +106,8 @@ export default function ComponentCatalog({ className }: ComponentCatalogProps) {
                     ),
                 )
                 .map(([componentId, componentType]) => {
-                  if (!componentType) {
-                    throw new Error(
-                      `Invariant: Component definition for "${componentId}" is undefined`,
-                    );
-                  }
+                  invariant(componentType, `No component definition found for "${componentId}"`);
+
                   return (
                     <ComponentCatalogItem
                       key={componentId}

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/QueryEditor.tsx

@@ -24,6 +24,7 @@ import AddIcon from '@mui/icons-material/Add';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import { LoadingButton } from '@mui/lab';
 import { NodeId } from '@mui/toolpad-core';
+import invariant from 'invariant';
 import useLatest from '../../../utils/useLatest';
 import { usePageEditorState } from './PageEditorProvider';
 import * as appDom from '../../../appDom';
@@ -107,15 +108,11 @@ function ConnectionSelectorDialog<Q>({ open, onCreated, onClose }: DataSourceSel
     const connectionId = input;
     const connection = connectionId && appDom.getMaybeNode(dom, connectionId, 'connection');
 
-    if (!connection) {
-      throw new Error(`Invariant: Selected non-existing connection "${connectionId}"`);
-    }
+    invariant(connection, `Selected non-existing connection "${connectionId}"`);
 
     const dataSourceId = connection.attributes.dataSource.value;
     const dataSource = dataSources[dataSourceId];
-    if (!dataSource) {
-      throw new Error(`Invariant: Selected non-existing dataSource "${dataSourceId}"`);
-    }
+    invariant(dataSource, `Selected non-existing dataSource "${dataSourceId}"`);
 
     const queryNode = appDom.createNode(dom, 'query', {
       attributes: {

packages/toolpad-app/src/toolpad/DomLoader.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Alert, Snackbar } from '@mui/material';
 import { NodeId, BindableAttrValue, BindableAttrValues } from '@mui/toolpad-core';
+import invariant from 'invariant';
 import * as appDom from '../appDom';
 import { update } from '../utils/immutability';
 import client from '../api';
@@ -257,9 +258,7 @@ export interface DomContextProps {
 export default function DomProvider({ appId, children }: DomContextProps) {
   const { data: dom } = client.useQuery('loadDom', [appId], { suspense: true });
 
-  if (!dom) {
-    throw new Error(`Invariant: suspense should load the dom`);
-  }
+  invariant(dom, `Suspense should load the dom`);
 
   const [state, dispatch] = React.useReducer(domLoaderReducer, {
     saving: false,

packages/toolpad-app/src/utils/bindings.ts

@@ -1,4 +1,5 @@
 import { BindingAttrValueFormat } from '@mui/toolpad-core';
+import invariant from 'invariant';
 
 type ParsedBinding = string[];
 
@@ -30,7 +31,7 @@ export function formatExpression(
     case 'default':
       return expr.join('');
     default:
-      throw new Error(`Invariant: Unrecognized binding format "${bindingFormat}"`);
+      return invariant(false, `Unrecognized binding format "${bindingFormat}"`);
   }
 }
 

yarn.lock

@@ -2702,6 +2702,11 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
+"@types/invariant@^2.2.35":
+  version "2.2.35"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.35.tgz#cd3ebf581a6557452735688d8daba6cf0bd5a3be"
+  integrity sha512-DxX1V9P8zdJPYQat1gHyY0xj3efl8gnMVjiM9iCY6y27lj+PoQWkgjt8jDqmovPqULkKVpKRg8J36iQiA+EtEg==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.4.tgz#8467d4b3c087805d63580480890791277ce35c44"
@@ -7197,6 +7202,13 @@ interpret@^1.4.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.4.0.tgz#665ab8bc4da27a774a40584e812e3e0fa45b1a1e"
   integrity sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip@^1.1.5:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"
@@ -8485,7 +8497,7 @@ log-symbols@^5.1.0:
     chalk "^5.0.0"
     is-unicode-supported "^1.1.0"
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -8942,10 +8954,10 @@ modify-values@^1.0.0:
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
   integrity sha512-xV2bxeN6F7oYjZWTe/YPAy6MN2M+sL4u/Rlm2AHCIVGfo2p1yGmBHQ6vHehl4bRTZBdHu3TSkWdYgkwpYzAGSw==
 
-monaco-editor@^0.33.0:
-  version "0.33.0"
-  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.33.0.tgz#842e244f3750a2482f8a29c676b5684e75ff34af"
-  integrity sha512-VcRWPSLIUEgQJQIE0pVT8FcGBIgFoxz7jtqctE+IiCxWugD0DwgyQBcZBhdSrdMC84eumoqMZsGl2GTreOzwqw==
+monaco-editor@^0.34.0-dev.20220722:
+  version "0.34.0-dev.20220722"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.0-dev.20220722.tgz#58bbb9477c2790c346c156e80d74585b6691b2e3"
+  integrity sha512-6l2hFsHOJE+5TQFDoWBeoACKcissTeLD5+xJ2HrtvP86sHnpnZy7ffbcFQCKpInJKIBSP7+y/bpctYn8eSAYTQ==
 
 mrmime@^1.0.0:
   version "1.0.1"