Adds cool react hooks generators

bcochranemax · bcochranemax · commit fe18f7654fa7 · 2022-01-12T13:51:37.000-05:00
diff --git a/.editorconfig b/.editorconfig
@@ -6,4 +6,4 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 indent_style = space
-indent_size = 4
+indent_size = 2
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -1,8 +1,8 @@
 {
     "semi": true,
     "singleQuote": true,
-    "trailingComma": "es5",
+    "trailingComma": "all",
     "arrowParens": "avoid",
     "printWidth": 120,
-    "tabWidth": 4
+    "tabWidth": 2
 }
diff --git a/package.json b/package.json
@@ -66,7 +66,9 @@
         "form-data": "^4.0.0",
         "handlebars": "^4.7.6",
         "json-schema-ref-parser": "^9.0.7",
-        "node-fetch": "^2.6.6"
+        "node-fetch": "^2.6.6",
+        "react": "^17.0.2",
+        "react-query": "^3.34.8"
     },
     "devDependencies": {
         "@babel/cli": "7.16.7",
@@ -81,6 +83,7 @@
         "@types/jest": "27.4.0",
         "@types/node": "17.0.8",
         "@types/qs": "6.9.7",
+        "@types/react": "^17.0.38",
         "@typescript-eslint/eslint-plugin": "5.9.0",
         "@typescript-eslint/parser": "5.9.0",
         "codecov": "3.8.3",
diff --git a/rollup.config.js b/rollup.config.js
@@ -28,6 +28,7 @@ const handlebarsPlugin = () => ({
                 preventIndent: true,
                 knownHelpersOnly: true,
                 knownHelpers: {
+                    capitalize: true,
                     equals: true,
                     notEquals: true,
                     containsSpaces: true,
diff --git a/samples/codegen.sh b/samples/codegen.sh
@@ -1,21 +1,21 @@
 #!/bin/sh
 
 rm -rf dist
-rm swagger-codegen-cli-v2.jar
-rm swagger-codegen-cli-v3.jar
+#rm swagger-codegen-cli-v2.jar
+#rm swagger-codegen-cli-v3.jar
+#
+#curl https://repo1.maven.org/maven2/io/swagger/swagger-codegen-cli/2.4.15/swagger-codegen-cli-2.4.15.jar -o swagger-codegen-cli-v2.jar
+#curl https://repo1.maven.org/maven2/io/swagger/codegen/v3/swagger-codegen-cli/3.0.21/swagger-codegen-cli-3.0.21.jar -o swagger-codegen-cli-v3.jar
+#
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-aurelia -o generated/v2/typescript-aurelia/
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-angular -o generated/v2/typescript-angular/
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-inversify -o generated/v2/typescript-inversify/
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-fetch -o generated/v2/typescript-fetch/
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-jquery -o generated/v2/typescript-jquery/
+#java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-node -o generated/v2/typescript-node/
+#
+#java -jar ./swagger-codegen-cli-v3.jar generate -i spec/v3.json -l typescript-angular -o generated/v3/typescript-angular/
+#java -jar ./swagger-codegen-cli-v3.jar generate -i spec/v3.json -l typescript-fetch -o generated/v3/typescript-fetch/
 
-curl https://repo1.maven.org/maven2/io/swagger/swagger-codegen-cli/2.4.15/swagger-codegen-cli-2.4.15.jar -o swagger-codegen-cli-v2.jar
-curl https://repo1.maven.org/maven2/io/swagger/codegen/v3/swagger-codegen-cli/3.0.21/swagger-codegen-cli-3.0.21.jar -o swagger-codegen-cli-v3.jar
-
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-aurelia -o generated/v2/typescript-aurelia/
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-angular -o generated/v2/typescript-angular/
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-inversify -o generated/v2/typescript-inversify/
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-fetch -o generated/v2/typescript-fetch/
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-jquery -o generated/v2/typescript-jquery/
-java -jar ./swagger-codegen-cli-v2.jar generate -i spec/v2.json -l typescript-node -o generated/v2/typescript-node/
-
-java -jar ./swagger-codegen-cli-v3.jar generate -i spec/v3.json -l typescript-angular -o generated/v3/typescript-angular/
-java -jar ./swagger-codegen-cli-v3.jar generate -i spec/v3.json -l typescript-fetch -o generated/v3/typescript-fetch/
-
-node ../bin/index.js --input spec/v2.json --output generated/v2/openapi-typescript-codegen/
-node ../bin/index.js --input spec/v3.json --output generated/v3/openapi-typescript-codegen/
+#node ../bin/index.js --input spec/v2.json --output generated/v2/openapi-typescript-codegen/
+node ../bin/index.js --input spec/v3.json --output generated/v3/openapi-typescript-codegen/ -c axios --exportClient true --name TestClient --useOptions --exportModels true --exportSchemas true
diff --git a/src/index.ts b/src/index.ts
@@ -17,6 +17,7 @@ export type Options = {
     useOptions?: boolean;
     useUnionTypes?: boolean;
     exportCore?: boolean;
+    exportHooks?: boolean;
     exportServices?: boolean;
     exportModels?: boolean;
     exportSchemas?: boolean;
@@ -56,6 +57,7 @@ export async function generate({
     exportServices = true,
     exportModels = true,
     exportSchemas = false,
+    exportHooks = false,
     postfix = 'Service',
     exportClient = false,
     clientName = 'AppClient',
@@ -83,6 +85,7 @@ export async function generate({
                 useOptions,
                 useUnionTypes,
                 exportCore,
+                exportHooks,
                 exportServices,
                 exportModels,
                 exportSchemas,
@@ -109,6 +112,7 @@ export async function generate({
                 exportServices,
                 exportModels,
                 exportSchemas,
+                exportHooks,
                 postfix,
                 exportClient,
                 clientName,
diff --git a/src/openApi/v3/parser/getContent.ts b/src/openApi/v3/parser/getContent.ts
@@ -12,6 +12,7 @@ export interface Content {
 const BASIC_MEDIA_TYPES = [
     'application/json-patch+json',
     'application/json',
+    'application/octet-stream',
     'application/x-www-form-urlencoded',
     'text/json',
     'text/plain',
diff --git a/src/templates/exportContext.hbs b/src/templates/exportContext.hbs
@@ -0,0 +1,22 @@
+{{>header}}
+
+import {
+  createContext,
+  useContext,
+  createElement,
+  ReactElement,
+} from 'react';
+import { {{{clientName}}} } from '../client';
+
+type ProviderProps<T> = {
+  children: ReactElement;
+  client: T;
+};
+
+const {{{clientName}}}Context = createContext<{{{clientName}}} | null>(null);
+{{{clientName}}}Context.displayName = '{{{clientName}}}Context';
+
+export const {{{clientName}}}Provider = ({ children, client }: ProviderProps<{{{clientName}}} | null>) =>
+        createElement({{{clientName}}}Context.Provider, { children, value: client });
+
+export const use{{{clientName}}} = () => useContext({{{clientName}}}Context);
diff --git a/src/templates/exportHooks.hbs b/src/templates/exportHooks.hbs
@@ -0,0 +1,31 @@
+{{>header}}
+
+
+import { ApiError } from '../core/ApiError';
+{{#if imports}}
+  {{#each imports}}
+    import type { {{{this}}} } from '../models/{{{this}}}';
+  {{/each}}
+{{/if}}
+import { {{{@root.clientName}}} } from '../client';
+import { use{{{clientName}}} } from './context';
+import { useQuery } from 'react-query';
+{{#each operations}}
+{{~#equals method "GET"}}
+
+export function use{{{capitalize name}}}({{>parameters}}): {{>result}} {
+const client = use{{{../clientName}}}() as {{{@root.clientName}}};
+return useQuery<{{>result}}, ApiError>([
+{{#each ../imports}}
+'{{{this}}}',
+{{/each}}
+'{{{name}}}', {{>passParameters}}],
+async () => await client?.{{{../shortName}}}.{{{name}}}({{>passParameters}}) ?? null,
+{ suspense: true, useErrorBoundary: true }
+).data as {{>result}};
+}
+{{~#equals 1 1}}
+
+{{/equals}}
+{{~/equals~}}
+{{/each}}
diff --git a/src/templates/index.hbs b/src/templates/index.hbs
@@ -46,6 +46,19 @@ export { {{{name}}}{{{@root.postfix}}} } from './services/{{{name}}}{{{@root.pos
 {{/if}}
 {{/if}}
 
+{{#if @root.exportHooks}}
+export { {{{clientName}}}Provider, use{{{clientName}}} } from './react/context';
+{{#each services}}
+export {
+{{#each operations}}
+{{~#equals method 'GET'}}
+  use{{{capitalize name}}},
+{{/equals}}
+{{/each}}
+} from './react/use{{{capitalize name}}}{{{@root.postfix}}}';
+{{/each}}
+{{/if}}
+
 {{#if @root.exportClient}}
 export { {{{clientName}}} } from './client';
 {{/if}}
diff --git a/src/templates/partials/passParameters.hbs b/src/templates/partials/passParameters.hbs
@@ -0,0 +1,9 @@
+{{#if parameters}}
+{{#if @root.useOptions~}}
+{
+{{#each parameters}}
+  {{{name}}},
+{{/each}}
+}{{~else}}
+  {{#each parameters}}{{{name}}}, {{/each}}
+{{/if}}{{else}}{{/if}}
diff --git a/src/templates/partials/reactContext.hbs b/src/templates/partials/reactContext.hbs
@@ -0,0 +1,7 @@
+const {{{contextName}}}Context = createContext<{{{contextName}}}>(null);
+{{{contextName}}}Context.displayName = '{{{contextName}}}Context';
+
+export const {{{contextName}}}Provider = ({ children, client }: ProviderProps<{{{contextName}}}>) =>
+createElement({{{contextName}}}Context.Provider, { children, value: client });
+
+export const use{{{contextName}}} = () => useContext({{{contextName}}}Context);
diff --git a/src/templates/partials/result.hbs b/src/templates/partials/result.hbs
@@ -1,5 +1,5 @@
 {{~#if results~}}
-{{#each results}}{{>type}}{{#unless @last}} | {{/unless}}{{/each}}
+{{#each results}}{{~#if type~}}{{>type}}{{~else~}}never{{~/if}}{{#unless @last}} | {{/unless}}{{/each}}
 {{~else~}}
 void
 {{~/if~}}
diff --git a/src/utils/registerHandlebarHelpers.ts b/src/utils/registerHandlebarHelpers.ts
@@ -10,6 +10,10 @@ export function registerHandlebarHelpers(root: {
     useOptions: boolean;
     useUnionTypes: boolean;
 }): void {
+    Handlebars.registerHelper('capitalize', function (value: string) {
+        return value[0].toUpperCase() + value.substring(1);
+    });
+
     Handlebars.registerHelper(
         'equals',
         function (this: any, a: string, b: string, options: Handlebars.HelperOptions): string {
diff --git a/src/utils/registerHandlebarTemplates.ts b/src/utils/registerHandlebarTemplates.ts
@@ -45,6 +45,8 @@ import xhrGetResponseHeader from '../templates/core/xhr/getResponseHeader.hbs';
 import xhrRequest from '../templates/core/xhr/request.hbs';
 import xhrSendRequest from '../templates/core/xhr/sendRequest.hbs';
 import templateAppClient from '../templates/exportAppClient.hbs';
+import templateExportContext from '../templates/exportContext.hbs';
+import templateExportHooks from '../templates/exportHooks.hbs';
 import templateExportModel from '../templates/exportModel.hbs';
 import templateExportSchema from '../templates/exportSchema.hbs';
 import templateExportService from '../templates/exportService.hbs';
@@ -59,6 +61,8 @@ import partialIsNullable from '../templates/partials/isNullable.hbs';
 import partialIsReadOnly from '../templates/partials/isReadOnly.hbs';
 import partialIsRequired from '../templates/partials/isRequired.hbs';
 import partialParameters from '../templates/partials/parameters.hbs';
+import partialPassParameters from '../templates/partials/passParameters.hbs';
+import partialReactContext from '../templates/partials/reactContext.hbs';
 import partialResult from '../templates/partials/result.hbs';
 import partialSchema from '../templates/partials/schema.hbs';
 import partialSchemaArray from '../templates/partials/schemaArray.hbs';
@@ -82,6 +86,8 @@ export interface Templates {
     index: Handlebars.TemplateDelegate;
     client: Handlebars.TemplateDelegate;
     exports: {
+        context: Handlebars.TemplateDelegate;
+        hooks: Handlebars.TemplateDelegate;
         model: Handlebars.TemplateDelegate;
         schema: Handlebars.TemplateDelegate;
         service: Handlebars.TemplateDelegate;
@@ -113,6 +119,8 @@ export function registerHandlebarTemplates(root: {
         index: Handlebars.template(templateIndex),
         client: Handlebars.template(templateAppClient),
         exports: {
+            context: Handlebars.template(templateExportContext),
+            hooks: Handlebars.template(templateExportHooks),
             model: Handlebars.template(templateExportModel),
             schema: Handlebars.template(templateExportSchema),
             service: Handlebars.template(templateExportService),
@@ -138,6 +146,8 @@ export function registerHandlebarTemplates(root: {
     Handlebars.registerPartial('isReadOnly', Handlebars.template(partialIsReadOnly));
     Handlebars.registerPartial('isRequired', Handlebars.template(partialIsRequired));
     Handlebars.registerPartial('parameters', Handlebars.template(partialParameters));
+    Handlebars.registerPartial('passParameters', Handlebars.template(partialPassParameters));
+    Handlebars.registerPartial('reactContext', Handlebars.template(partialReactContext));
     Handlebars.registerPartial('result', Handlebars.template(partialResult));
     Handlebars.registerPartial('schema', Handlebars.template(partialSchema));
     Handlebars.registerPartial('schemaArray', Handlebars.template(partialSchemaArray));
diff --git a/src/utils/writeAppClient.ts b/src/utils/writeAppClient.ts
@@ -1,11 +1,12 @@
-import { resolve } from 'path';
+import {resolve} from 'path';
 
-import { Client } from '../client/interfaces/Client';
-import { HttpClient } from '../HttpClient';
-import { writeFile } from './fileSystem';
-import { getHttpRequestName } from './getHttpRequestName';
-import { Templates } from './registerHandlebarTemplates';
-import { sortServicesByName } from './sortServicesByName';
+import {Client} from '../client/interfaces/Client';
+import {HttpClient} from '../HttpClient';
+import {writeFile} from './fileSystem';
+import {getHttpRequestName} from './getHttpRequestName';
+import {Templates} from './registerHandlebarTemplates';
+import {sortServicesByName} from './sortServicesByName';
+import camelcase from "camelcase";
 
 /**
  * Generate App Client class using the Handlebar template and write to disk.
@@ -31,7 +32,7 @@ export async function writeAppClient(
                 .filter(s => s.name !== 'Service')
                 .map(s => ({
                     name: s.name + postfix,
-                    shortName: s.name.replace('Service', '').toLowerCase(),
+                    shortName: camelcase(s.name.replace('Service', '')),
                 })),
             service: client.services.find(s => s.name === 'Service'),
             clientName,
diff --git a/src/utils/writeClient.ts b/src/utils/writeClient.ts
@@ -11,6 +11,7 @@ import { writeClientIndex } from './writeClientIndex';
 import { writeClientModels } from './writeClientModels';
 import { writeClientSchemas } from './writeClientSchemas';
 import { writeClientServices } from './writeClientServices';
+import { writeClientHooks } from './writeClientHooks';
 
 /**
  * Write our OpenAPI client, using the given templates at the given output
@@ -21,6 +22,7 @@ import { writeClientServices } from './writeClientServices';
  * @param useOptions Use options or arguments functions
  * @param useUnionTypes Use union types instead of enums
  * @param exportCore: Generate core client classes
+ * @param exportHooks: Generate services
  * @param exportServices: Generate services
  * @param exportModels: Generate models
  * @param exportSchemas: Generate schemas
@@ -38,6 +40,7 @@ export async function writeClient(
     useOptions: boolean,
     useUnionTypes: boolean,
     exportCore: boolean,
+    exportHooks: boolean,
     exportServices: boolean,
     exportModels: boolean,
     exportSchemas: boolean,
@@ -47,6 +50,7 @@ export async function writeClient(
     request?: string
 ): Promise<void> {
     const outputPath = resolve(process.cwd(), output);
+    const outputPathHooks = resolve(outputPath, 'react');
     const outputPathCore = resolve(outputPath, 'core');
     const outputPathModels = resolve(outputPath, 'models');
     const outputPathSchemas = resolve(outputPath, 'schemas');
@@ -77,6 +81,22 @@ export async function writeClient(
         );
     }
 
+    if (exportHooks) {
+        await rmdir(outputPathHooks);
+        await mkdir(outputPathHooks);
+        await writeClientHooks(
+            client.services,
+            templates,
+            outputPathHooks,
+            httpClient,
+            useUnionTypes,
+            useOptions,
+            postfix,
+            exportClient,
+            clientName
+        );
+    }
+
     if (exportSchemas) {
         await rmdir(outputPathSchemas);
         await mkdir(outputPathSchemas);
@@ -93,7 +113,7 @@ export async function writeClient(
         await writeAppClient(client, templates, outputPath, httpClient, clientName, postfix);
     }
 
-    if (exportCore || exportServices || exportSchemas || exportModels || exportClient) {
+    if (exportCore || exportServices || exportSchemas || exportModels || exportClient || exportHooks) {
         await mkdir(outputPath);
         await writeClientIndex(
             client,
@@ -102,6 +122,7 @@ export async function writeClient(
             clientName,
             useUnionTypes,
             exportCore,
+            exportHooks,
             exportServices,
             exportModels,
             exportSchemas,
diff --git a/src/utils/writeClientHooks.ts b/src/utils/writeClientHooks.ts
diff --git a/src/utils/writeClientIndex.ts b/src/utils/writeClientIndex.ts
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,8 +1,8 @@`
`1`	`1`	`{`
`2`	`2`	`"semi": true,`
`3`	`3`	`"singleQuote": true,`
`4`		`- "trailingComma": "es5",`
	`4`	`+ "trailingComma": "all",`
`5`	`5`	`"arrowParens": "avoid",`
`6`	`6`	`"printWidth": 120,`
`7`		`- "tabWidth": 4`
	`7`	`+ "tabWidth": 2`
`8`	`8`	`}`