feat: format generated code using Prettier (#259)

dunglas · web-flow · commit b8829e079317 · 2021-01-22T19:04:44.000+01:00
diff --git a/.travis.yml b/.travis.yml
@@ -12,7 +12,6 @@ script:
 - yarn test
 - yarn lint
 - yarn test-gen
-#- yarn test-gen-cs
 - yarn test-gen-env
 - yarn check
 
diff --git a/package.json b/package.json
@@ -32,7 +32,6 @@
     "husky": "^4.3.6",
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
     "tmp": "^0.2.1"
   },
   "dependencies": {
@@ -44,6 +43,7 @@
     "handlebars-helpers": "^0.10.0",
     "isomorphic-fetch": "^3.0.0",
     "mkdirp": "^1.0.4",
+    "prettier": "^2.2.1",
     "sprintf-js": "^1.1.1"
   },
   "scripts": {
@@ -54,7 +54,6 @@
     "build": "babel src -d lib --ignore '*.test.js'",
     "watch": "babel --watch src -d lib --ignore '*.test.js'",
     "test-gen": "rm -rf ./tmp && yarn build && ./lib/index.js https://demo.api-platform.com ./tmp/react -g react && ./lib/index.js https://demo.api-platform.com ./tmp/react-native -g react-native && ./lib/index.js https://demo.api-platform.com ./tmp/vue -g vue",
-    "test-gen-cs": "./node_modules/.bin/prettier --single-quote -l \"./tmp/react/**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
     "test-gen-swagger": "rm -rf ./tmp && yarn build && ./lib/index.js  https://demo.api-platform.com/docs.json ./tmp/react -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/react-native -g react-native -f swagger && ./lib/index.js https://demo.api-platform.com/docs.json ./tmp/vue -g vue -f swagger",
     "test-gen-env": "rm -rf ./tmp && yarn build && API_PLATFORM_CLIENT_GENERATOR_ENTRYPOINT=https://demo.api-platform.com API_PLATFORM_CLIENT_GENERATOR_OUTPUT=./tmp ./lib/index.js"
   },
diff --git a/src/generators/BaseGenerator.js b/src/generators/BaseGenerator.js
@@ -3,6 +3,7 @@ import fs from "fs";
 import handlebars from "handlebars";
 import mkdirp from "mkdirp";
 import { sprintf } from "sprintf-js";
+import prettier from "prettier";
 
 export default class {
   templates = {};
@@ -53,8 +54,16 @@ export default class {
       return;
     }
 
+    // Format the generated code using Prettier
+    let content = this.templates[template](context);
+    if (template.endsWith(".js")) {
+      content = prettier.format(content, { parser: "babel" });
+    } else if (template.endsWith(".ts") || template.endsWith(".tsx")) {
+      content = prettier.format(content, { parser: "babel-ts" });
+    }
+
     if (!fs.existsSync(dest)) {
-      fs.writeFileSync(dest, this.templates[template](context));
+      fs.writeFileSync(dest, content);
 
       return;
     }
diff --git a/src/generators/NextGenerator.js b/src/generators/NextGenerator.js
@@ -62,12 +62,11 @@ export default class NextGenerator extends BaseGenerator {
       `${dir}/config`,
       `${dir}/error`,
       `${dir}/types`,
-      `${dir}/pages`,
       `${dir}/pages/${context.lc}s/[id]`,
       `${dir}/utils`,
     ].forEach((dir) => this.createDir(dir, false));
 
-    // copy with patterned name
+    // Copy with patterned name
     this.createDir(`${dir}/components/${context.lc}`);
     this.createDir(`${dir}/pages/${context.lc}s`);
     this.createDir(`${dir}/pages/${context.lc}s/[id]`);
diff --git a/src/generators/TypescriptInterfaceGenerator.test.js b/src/generators/TypescriptInterfaceGenerator.test.js
@@ -49,7 +49,7 @@ test("Generate a typescript interface", () => {
   expect(fs.existsSync(tmpobj.name + "/interfaces/foo.ts")).toBe(true);
 
   const res = `export interface Foo {
-  '@id'?: string;
+  "@id"?: string;
   foo: any;
   foobar?: string[];
   readonly bar: string;
@@ -100,7 +100,7 @@ test("Generate a typescript interface without references to other interfaces", (
   expect(fs.existsSync(tmpobj.name + "/interfaces/foo.ts")).toBe(true);
 
   const res = `export interface Foo {
-  '@id'?: string;
+  "@id"?: string;
   foo: any;
   readonly bar: string;
 }
@@ -157,7 +157,7 @@ test("Generate a typescript interface with an explicit id field in the readableF
   expect(fs.existsSync(tmpobj.name + "/interfaces/foo.ts")).toBe(true);
 
   const res = `export interface Foo {
-  '@id'?: string;
+  "@id"?: string;
   foo: any;
   readonly bar: string;
   readonly id?: string;
diff --git a/templates/next/components/common/ReferenceLinks.tsx b/templates/next/components/common/ReferenceLinks.tsx
@@ -1,30 +1,40 @@
-import Link from 'next/link';
-import { Fragment, FunctionComponent } from 'react';
+import Link from "next/link";
+import { Fragment, FunctionComponent } from "react";
 
 interface Props {
-  items: string|string[];
+  items: string | string[];
   type: string;
-  useIcon?: boolean
+  useIcon?: boolean;
 }
-export const ReferenceLinks: FunctionComponent<Props> = ({items, type, useIcon = false}) => {
+export const ReferenceLinks: FunctionComponent<Props> = ({
+  items,
+  type,
+  useIcon = false,
+}) => {
   if (Array.isArray(items)) {
     return (
       <Fragment>
         {items.map((item, index) => (
-          <div key={index}><ReferenceLinks items={item} type={type}/></div>
+          <div key={index}>
+            <ReferenceLinks items={item} type={type} />
+          </div>
         ))}
       </Fragment>
     );
   }
 
   return (
-    <Link href={items}><a>
-      {useIcon ? (
-        <Fragment>
-          <span className="fa fa-search" aria-hidden="true" />
-          <span className="sr-only">Show</span>
-        </Fragment>
-      ) : items}
-    </a></Link>
-  )
+    <Link href={items}>
+      <a>
+        {useIcon ? (
+          <Fragment>
+            <span className="fa fa-search" aria-hidden="true" />
+            <span className="sr-only">Show</span>
+          </Fragment>
+        ) : (
+          items
+        )}
+      </a>
+    </Link>
+  );
 };
diff --git a/templates/next/components/foo/Form.tsx b/templates/next/components/foo/Form.tsx
@@ -15,7 +15,7 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 	const handleDelete = () => {
 		if (window.confirm("Are you sure you want to delete this item?")) {
 			try {
-        fetch({ {{{lc}}}['@id'] }, { method: "DELETE" });
+        fetch({{{lc}}}['@id'], { method: "DELETE" });
         router.push("/{{{name}}}");
 			} catch (error) {
 				setError("Error when deleting the resource.");
@@ -31,22 +31,20 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 				initialValues={ {{{lc}}} ?? new{{{lc}}}() }
 				validate={(values) => {
 					const errors = {};
-					//set your validation logic here
+					// add your validation logic here
           return errors;
 				}}
 				onSubmit={(values, { setSubmitting, setStatus }) => {
           const isCreation = !{{{lc}}}["@id"];
             try {
-              fetch(isCreation ? "/{{{name}}}" : {{{lc}}}["@id"],
-            {
-            method: isCreation ? "POST" : "PATCH",
-            body: JSON.stringify(values),
-            }
-           );
+              fetch(isCreation ? "/{{{name}}}" : {{{lc}}}["@id"], {
+                method: isCreation ? "POST" : "PATCH",
+                body: JSON.stringify(values),
+              });
               setStatus({
-              isValid: true,
-              msg: `Element ${isCreation ? 'created': 'updated'}.`,
-            });
+                isValid: true,
+                msg: `Element ${isCreation ? 'created': 'updated'}.`,
+              });
               router.push("/{{{name}}}");
           } catch (error) {
             setStatus({
@@ -67,40 +65,40 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 				}) => (
 					<form onSubmit={handleSubmit}>
 {{#each fields}}
-						<div className='form-group'>
+						<div className="form-group">
 							<label>{{name}}</label>
 							<input
-								className='form-control'
-								type='text'
-								name='isbn'
+								className="form-control"
+								type="text"
+								name="isbn"
 								onChange={handleChange}
 								onBlur={handleBlur}
 								value={ values.{{name}} }
 								required
 							/>
 						</div>
-						{/* {errors.{{name}} && touched.{{name}} && errors.{{name}} */}
+						{ errors.{{name}} && touched.{{name}} && errors.{{name}} }
 {{/each}}
 						{status && status.msg && (
 							<div
 								className={`alert ${
 									status.isValid ? "alert-success" : "alert-danger"
 								}`}
-								role='alert'
+								role="alert"
 							>
 								{status.msg}
 							</div>
 						)}
 
 						{error && (
-							<div className='alert alert-danger' role='alert'>
+							<div className="alert alert-danger" role="alert">
 								{error}
 							</div>
 						)}
 
 						<button
-							type='submit'
-							className='btn btn-success'
+							type="submit"
+							className="btn btn-success"
 							disabled={isSubmitting}
 						>
 							Submit
@@ -109,10 +107,10 @@ export const Form: FunctionComponent<Props> = ({ {{{lc}}} }) => {
 				)}
 			</Formik>
 			<Link href="/{{{name}}}">
-				<a className='btn btn-primary'>Back to list</a>
+				<a className="btn btn-primary">Back to list</a>
 			</Link>
 			{ {{{lc}}} && (
-				<button className='btn btn-danger' onClick={handleDelete}>
+				<button className="btn btn-danger" onClick={handleDelete}>
 					<a>Delete</a>
 				</button>
 			)}
diff --git a/templates/next/components/foo/List.tsx b/templates/next/components/foo/List.tsx
@@ -26,11 +26,11 @@ export const List: FunctionComponent<Props> = ({ {{{name}}} }) => (
         { {{{name}}} && ({{{name}}}.length !== 0) && {{{name}}}.map( ( {{{lc}}} ) => (
           <tr key={ {{{lc}}}['@id'] }>
             <th scope="row"><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" /></th>
-{{#each fields}}
-    <td>{{#if reference}}<ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}}</td>
-{{/each}}
-    <td><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" useIcon={true} /></td>
-  </tr>
+            {{#each fields}}
+              <td>{{#if reference}}<ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}}</td>
+            {{/each}}
+            <td><ReferenceLinks items={ {{{lc}}}['@id'] } type="{{{lc}}}" useIcon={true} /></td>
+          </tr>
         ))}
       </tbody>
     </table>
diff --git a/templates/next/components/foo/Show.tsx b/templates/next/components/foo/Show.tsx
@@ -15,46 +15,48 @@ export const Show: FunctionComponent<Props> = ({ {{{lc}}} }) => {
   const handleDelete = () => {
 		if (window.confirm("Are you sure you want to delete this item?")) {
 			try {
-        fetch({ {{{lc}}}["@id"] }, { method: "DELETE" });
+        fetch({{{lc}}}["@id"], { method: "DELETE" });
         router.push("/{{{name}}}");
 			} catch (error) {
         setError("Error when deleting the resource.");
 				console.error(error);
 			}
 		}
-	};
-return(
-  <div>
-    <h1>Show { {{{lc}}}['@id'] }</h1>
-    <table className="table table-responsive table-striped table-hover">
-      <thead>
-      <tr>
-        <th>Field</th>
-        <th>Value</th>
-      </tr>
-      </thead>
-      <tbody>
-{{#each fields}}
+  };
+
+  return (
+    <div>
+      <h1>Show { {{{lc}}}['@id'] }</h1>
+      <table className="table table-responsive table-striped table-hover">
+        <thead>
         <tr>
-          <th scope="row">{{name}}</th>
-          <td>{{#if reference}}<ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}}</td>
+          <th>Field</th>
+          <th>Value</th>
         </tr>
-{{/each}}
-      </tbody>
-    </table>
-    {error && (
-							<div className='alert alert-danger' role='alert'>
-								{error}
-							</div>
-						)}
-    <Link href="/{{{name}}}"><a className="btn btn-primary">
-      Back to list
-    </a></Link>
-    <Link href="/{{{name}}}/edit"><a className="btn btn-warning">
-      Edit
-    </a></Link>
-    <button className='btn btn-danger' onClick={handleDelete}>
-				<a>Delete</a>
-			</button>
-  </div>
-)};
+        </thead>
+        <tbody>
+        {{#each fields}}
+          <tr>
+            <th scope="row">{{name}}</th>
+            <td>{{#if reference}}<ReferenceLinks items={ {{{../lc}}}['{{{name}}}'] } type="{{{reference.title}}}" />{{else}}{ {{{../lc}}}['{{{name}}}'] }{{/if}}</td>
+          </tr>
+        {{/each}}
+        </tbody>
+      </table>
+      {error && (
+        <div className="alert alert-danger" role="alert">
+          {error}
+        </div>
+      )}
+      <Link href="/{{{name}}}">
+        <a className="btn btn-primary">Back to list</a>
+      </Link>
+      <Link href="/{{{name}}}/edit">
+        <a className="btn btn-warning">Edit</a>
+      </Link>
+      <button className="btn btn-danger" onClick={handleDelete}>
+        <a>Delete</a>
+      </button>
+    </div>
+  );
+};
diff --git a/templates/next/error/SubmissionError.ts b/templates/next/error/SubmissionError.ts
@@ -5,8 +5,8 @@ export interface SubmissionErrorList {
 export class SubmissionError extends Error {
   public errors: SubmissionErrorList;
 
-  constructor (errors: SubmissionErrorList) {
-    super('Submit Validation Failed');
+  constructor(errors: SubmissionErrorList) {
+    super("Submit Validation Failed");
     this.errors = errors;
     Error.captureStackTrace(this, this.constructor);
     this.name = this.constructor.name;
diff --git a/templates/next/types/Collection.ts b/templates/next/types/Collection.ts
@@ -1,12 +1,12 @@
 export interface PagedCollection<T> {
-  '@context'?: string;
-  '@id'?: string;
-  '@type'?: string;
-  '{{{hydraPrefix}}}firstPage'?: string;
-  '{{{hydraPrefix}}}itemsPerPage'?: number;
-  '{{{hydraPrefix}}}lastPage'?: string;
-  '{{{hydraPrefix}}}member'?: T[];
-  '{{{hydraPrefix}}}nextPage'?: string;
-  '{{{hydraPrefix}}}search'?: object;
-  '{{{hydraPrefix}}}totalItems'?: number;
+  "@context"?: string;
+  "@id"?: string;
+  "@type"?: string;
+  "{{{hydraPrefix}}}firstPage"?: string;
+  "{{{hydraPrefix}}}itemsPerPage"?: number;
+  "{{{hydraPrefix}}}lastPage"?: string;
+  "{{{hydraPrefix}}}member"?: T[];
+  "{{{hydraPrefix}}}nextPage"?: string;
+  "{{{hydraPrefix}}}search"?: object;
+  "{{{hydraPrefix}}}totalItems"?: number;
 }
diff --git a/templates/next/types/foo.ts b/templates/next/types/foo.ts
diff --git a/templates/next/utils/dataAccess.ts b/templates/next/utils/dataAccess.ts
