feat: make prettier an optional dependency (#307)

packages/codegen-ui-react/lib/__tests__/__snapshots__/react-studio-template-renderer-helper.test.ts.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`react-studio-template-renderer-helper formatCode formats code when prettier is installed 1`] = `
+"const foo = 1;
+const bar = false;
+"
+`;
+
 exports[`react-studio-template-renderer-helper transpile fails to transpile with ScriptTarget ESNext 1`] = `"ScriptTarget 99 not supported with type declarations enabled, expected one of [0,1,2,3,4,5,6,7,8]"`;
 
 exports[`react-studio-template-renderer-helper transpile fails to transpile with ScriptTarget Latest 1`] = `"ScriptTarget 99 not supported with type declarations enabled, expected one of [0,1,2,3,4,5,6,7,8]"`;

packages/codegen-ui-react/lib/__tests__/react-studio-template-renderer-helper.test.ts

@@ -18,6 +18,7 @@ import fs from 'fs';
 import { join } from 'path';
 import { ScriptTarget, ScriptKind } from '..';
 import { AmplifyRenderer } from '../amplify-ui-renderers/amplify-renderer';
+import { formatCode } from '../react-studio-template-renderer-helper';
 
 function loadSchemaFromJSONFile(jsonSchemaFile: string): StudioComponent {
   return JSON.parse(
@@ -98,4 +99,20 @@ describe('react-studio-template-renderer-helper', () => {
       }).toThrowErrorMatchingSnapshot();
     });
   });
+
+  describe('formatCode', () => {
+    const code = 'const foo = 1;     const bar    =  false;';
+
+    it('formats code when prettier is installed', () => {
+      expect(formatCode(code)).toMatchSnapshot();
+    });
+
+    it('does not format code when prettier is not installed', () => {
+      jest.mock('prettier', () => {
+        throw new Error('Mock module not installed.');
+      });
+
+      expect(formatCode(code)).toEqual(code);
+    });
+  });
 });

packages/codegen-ui-react/lib/react-studio-template-renderer-helper.ts

@@ -35,8 +35,6 @@ import ts, {
   createProgram,
 } from 'typescript';
 import { createDefaultMapFromNodeModules, createSystem, createVirtualCompilerHost } from '@typescript/vfs';
-import prettier from 'prettier';
-import parserTypescript from 'prettier/parser-typescript';
 import path from 'path';
 import { ReactRenderConfig, ScriptKind, ScriptTarget, ModuleKind } from './react-render-config';
 
@@ -73,7 +71,7 @@ export function transpile(
       },
     }).outputText;
 
-    const componentText = prettier.format(transpiledCode, { parser: 'typescript', plugins: [parserTypescript] });
+    const componentText = formatCode(transpiledCode);
 
     /*
      * createProgram is less performant than traspileModule and should only be used when necessary.
@@ -121,7 +119,7 @@ export function transpile(
     };
   }
 
-  return { componentText: prettier.format(code, { parser: 'typescript', plugins: [parserTypescript] }) };
+  return { componentText: formatCode(code) };
 }
 
 export function buildPrinter(fileName: string, renderConfig: ReactRenderConfig) {
@@ -186,3 +184,19 @@ export function bindingPropertyUsesHook(
 ): boolean {
   return isDataPropertyBinding(binding) && 'predicate' in binding.bindingProperties;
 }
+
+// optional import prettier
+export function formatCode(code: string): string {
+  try {
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
+    const prettier = require('prettier');
+    // eslint-disable-next-line global-require, import/no-extraneous-dependencies, @typescript-eslint/no-var-requires
+    const parserTypescript = require('prettier/parser-typescript');
+
+    if (prettier && parserTypescript) {
+      return prettier.format(code, { parser: 'typescript', plugins: [parserTypescript] });
+    }
+  } catch {} // eslint-disable-line no-empty
+
+  return code;
+}

packages/codegen-ui-react/package.json

@@ -29,13 +29,15 @@
   "dependencies": {
     "@aws-amplify/codegen-ui": "1.2.0",
     "@typescript/vfs": "~1.3.5",
-    "prettier": "2.3.2",
     "typescript": "~4.4.4"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
+  "optionalDependencies": {
+    "prettier": "2.3.2"
+  },
   "jest": {
     "verbose": false,
     "preset": "ts-jest",