build(libs/form-builder): lazy load devtools (#60)

libs/form-builder/package.json

@@ -2,7 +2,6 @@
   "name": "@bedrockstreaming/form-builder",
   "version": "0.8.2",
   "dependencies": {
-    "@hookform/devtools": "4.0.2",
     "react-hook-form": "7.27.0"
   },
   "peerDependencies": {
@@ -11,5 +10,8 @@
   "devDependencies": {
     "@testing-library/react": "11.2.6",
     "@testing-library/react-hooks": "7.0.2"
+  },
+  "optionalDependencies": {
+    "@hookform/devtools": "4.0.2"
   }
 }

libs/form-builder/src/lib/formBuilder.tsx

@@ -9,7 +9,6 @@ import {
   useForm,
   ValidationMode,
 } from 'react-hook-form';
-import { DevTool } from '@hookform/devtools';
 
 import { Dictionary, ExtraValidation, FormSchema } from './types';
 import { useAutoFocus } from './hooks/useAutoFocus.hook';
@@ -24,6 +23,7 @@ import { SubmitField } from './components/submitField.component';
 import { getFieldRules, FieldRules } from './utils/validation.utils';
 import { filterDependentsFieldsById } from './utils/conditionalFields.utils';
 import { isEmpty } from './utils/object.utils';
+import { useDevtools } from './hooks/useDevtools.hook';
 
 const EMPTY_OBJECT = {} as const;
 const NOOP = () => null;
@@ -39,7 +39,7 @@ export interface FormBuilderProps {
   extraValidation?: ExtraValidation;
   isLastStep?: boolean;
   currentStepIndex?: number;
-  formProps?: { [key: string]: any };
+  formProps?: { [key: string]: unknown };
   debug?: boolean;
 }
 
@@ -71,6 +71,8 @@ export function FormBuilder({
     defaultValues,
   });
 
+  const Debug = useDevtools(debug);
+
   const isPreFilled = defaultValues && typeof defaultValues === 'object' && Object.keys(defaultValues).length > 0;
 
   const typesAllowed = React.useMemo(() => Object.keys(dictionary || EMPTY_OBJECT), [dictionary]);
@@ -181,7 +183,7 @@ export function FormBuilder({
           onNextStep={onNextStep}
         />
       </form>
-      {debug && <DevTool control={control} />}
+      {debug && <Debug control={control} />}
     </>
   );
 }

libs/form-builder/src/lib/hooks/__tests__/useDevtools.hook.spec.ts

@@ -0,0 +1,18 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useDevtools, BaseDebug } from '../useDevtools.hook';
+
+describe('useDebug', () => {
+  it('should load Devtools', async () => {
+    const { result, waitForNextUpdate } = renderHook(() => useDevtools(true));
+
+    await waitForNextUpdate();
+
+    expect(result.current).not.toBe(BaseDebug);
+  });
+
+  it('should not load Devtools', async () => {
+    const { result } = renderHook(() => useDevtools(false));
+
+    expect(result.current).toBe(BaseDebug);
+  });
+});

libs/form-builder/src/lib/hooks/useDevtools.hook.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+export const BaseDebug = (): JSX.Element | null => null;
+
+export const useDevtools = (debug: boolean) => {
+  const [, setLoaded] = React.useState(false);
+  const Component = React.useRef<React.ElementType>(BaseDebug);
+
+  React.useEffect(() => {
+    if (debug && Component.current === BaseDebug) {
+      // eslint-disable-next-line import/no-extraneous-dependencies
+      import('@hookform/devtools')
+        .then(({ DevTool }) => {
+          Component.current = DevTool as React.ElementType;
+          setLoaded(true);
+        })
+        .catch();
+    }
+  }, [debug, setLoaded]);
+
+  return Component.current;
+};

libs/form-context/package.json

@@ -4,7 +4,6 @@
   "peerDependencies": {
     "react": "17.0.2",
     "@bedrockstreaming/form-builder": "0.8.1",
-    "@hookform/devtools": "4.0.2",
     "react-hook-form": "7.27.0"
   },
   "devDependencies": {

libs/form-validation-rule-list/package.json

@@ -5,7 +5,6 @@
   "peerDependencies": {
     "react": "17.0.2",
     "@bedrockstreaming/form-builder": "0.8.1",
-    "react-hook-form": "7.27.0",
-    "@hookform/devtools": "4.0.2"
+    "react-hook-form": "7.27.0"
   }
 }