diff --git a/packages/ast/src/state/react-query/react-query.ts b/packages/ast/src/state/react-query/react-query.ts index 50172ab5e5..f1e893b9fa 100644 --- a/packages/ast/src/state/react-query/react-query.ts +++ b/packages/ast/src/state/react-query/react-query.ts @@ -19,6 +19,15 @@ const makeHookKeyName = (name: string) => { return camel(name + 'Query'); }; +/** + * Create an AST of a specific hook method + * eg: __fixtures__/output1/akash/audit/v1beta2/query.rpc.Query.ts: + * const useAllProvidersAttributes = ... + * @param {Object=} context - context of generating the file + * @param {string} name - name of the hook + * @param {Object=} svc - method details + * @returns {ParseResult} created AST + */ const rpcHookMethod = ( context: GenericParseContext, name: string, @@ -39,6 +48,7 @@ const rpcHookMethod = ( optional = true; } + // add import context.addUtil('useQuery'); return t.variableDeclaration('const', [ @@ -115,6 +125,15 @@ const rpcHookMethod = ( } +/** + * Create an AST of a specific query interface of react-query + * eg: __fixtures__/output1/akash/audit/v1beta2/query.rpc.Query.ts: + * export interface UseAllProvidersAttributesQuery extends ReactQueryParams... + * @param {Object=} context - context of generating the file + * @param {string} name - name of the hook + * @param {Object=} svc - method details + * @returns {ParseResult} created AST + */ const rpcHookMethodInterface = ( context: GenericParseContext, name: string, @@ -135,6 +154,7 @@ const rpcHookMethodInterface = ( optional = true; } + // import ReactQueryParams in the generated file. context.addUtil('ReactQueryParams'); return t.exportNamedDeclaration(t.tsInterfaceDeclaration( @@ -165,16 +185,26 @@ const rpcHookMethodInterface = ( )); } +/** + * Create an ASTs for a function creating hooks + * eg: __fixtures__/output1/akash/audit/v1beta2/query.rpc.Query.ts + * export const createRpcQueryHooks = ... + * @param {Object=} context - context of generating the file + * @param {Object=} service - service details + * @returns {ParseResult} created AST + */ export const createRpcQueryHooks = ( context: GenericParseContext, service: ProtoService ) => { + // add imports context.addUtil('QueryClient'); context.addUtil('createProtobufRpcClient'); context.addUtil('ProtobufRpcClient'); const camelRpcMethods = context.pluginValue('rpcClients.camelCase'); + // TODO remove commented code. // const name = service.name + 'ClientImpl'; // const implementsName = service.name; // const methodNames = Object.keys(service.methods ?? {}) @@ -258,6 +288,12 @@ export const createRpcQueryHooks = ( +/** + * Create ASTs for all the methods of a proto service. + * @param {Object=} context - context of generating the file + * @param {Object=} service - service details + * @returns {ParseResult} created AST + */ export const createRpcQueryHookInterfaces = ( context: GenericParseContext, service: ProtoService @@ -279,11 +315,23 @@ export const createRpcQueryHookInterfaces = ( return methods.map(method => rpcHookMethodInterface(context, method.name, method.method)); }; +/** + * Create an ASTs for a map of query clients and a function of getting query service. + * eg: __fixtures__/output1/akash/audit/v1beta2/query.rpc.Query.ts + * const _queryClients: WeakMap... + * + * const getQueryService = (... + * @param {Object=} context - context of generating the file + * @param {Object=} service - service details + * @returns {ParseResult} created AST + */ export const createRpcQueryHookClientMap = ( context: GenericParseContext, service: ProtoService ) => { const name = service.name + 'ClientImpl'; + + // get ast based on a template. return createClientMap(name); } diff --git a/packages/ast/src/state/react-query/scoped-bundle.ts b/packages/ast/src/state/react-query/scoped-bundle.ts index 947bc57caa..6751bd3160 100644 --- a/packages/ast/src/state/react-query/scoped-bundle.ts +++ b/packages/ast/src/state/react-query/scoped-bundle.ts @@ -47,6 +47,15 @@ export const rpcHookClassArguments = (): t.ObjectExpression[] => { ]; }; +/** + * Create an AST for a certain key and hook. + * eg: __fixtures__/output1/hooks.ts + * v1beta2: _AkashAuditV1beta2Queryrpc.createRpcQueryHooks(rpc) + * @param {Object=} imports - imports array reference for generating imports. + * @param {Object=} path - filename of a package. + * @param {string} methodName - hook method name of packages + * @returns {ParseResult} created AST + */ export const rpcHookNewTmRequire = ( imports: HookImport[], path: string, @@ -91,18 +100,29 @@ export const rpcHookRecursiveObjectProps = ( ]) }; +/** + * Create an ASTs for hooks of packages recursively, and get imports of packages. + * eg: __fixtures__/output1/hooks.ts + * export const createRpcQueryHooks = ... + * @param {Object=} imports - imports array reference for generating imports. + * @param {Object=} obj - mapping of packages and rpc query filenames + * @param {string} methodName - hook method name of packages + * @returns {ParseResult} created AST + */ export const rpcHookTmNestedImportObject = ( imports: HookImport[], obj: object, methodName: string ) => { + //if obj is a path, end recursion and get the mapping. if (typeof obj === 'string') { return rpcHookNewTmRequire(imports, obj, methodName); } const keys = Object.keys(obj); + // get hooks for keys of the obj. return t.objectExpression(keys.map(name => { return t.objectProperty( t.identifier(name), @@ -116,12 +136,23 @@ interface HookImport { path: string; } +/** + * Create an ASTs for createRpcQueryHooks and imports of related packages. + * eg: __fixtures__/output1/hooks.ts + * import * as _AkashAuditV1beta2Queryrpc from ... + * export const createRpcQueryHooks = ... + * @param {Object=} context - context of generating the file + * @param {Object=} obj - mapping of packages and rpc query filenames + * @param {string} identifier - name of function creating hooks. eg: createRpcQueryHooks + * @returns {ParseResult} created AST + */ export const createScopedRpcHookFactory = ( context: GenericParseContext, obj: object, identifier: string ) => { + // add imports context.addUtil('ProtobufRpcClient'); const hookImports: HookImport[] = []; @@ -176,6 +207,7 @@ export const createScopedRpcHookFactory = ( ) ); + // generate imports for packages. const imports = hookImports.map(hookport => { return { "type": "ImportDeclaration", diff --git a/packages/telescope/src/generators/create-react-query-bundle.ts b/packages/telescope/src/generators/create-react-query-bundle.ts index d0d897b0b3..0cf11a575d 100644 --- a/packages/telescope/src/generators/create-react-query-bundle.ts +++ b/packages/telescope/src/generators/create-react-query-bundle.ts @@ -11,19 +11,23 @@ import * as dotty from 'dotty'; export const plugin = ( builder: TelescopeBuilder ) => { - + // if react query is enabled + // generate hooks.ts based on query hooks generated in each package. + // eg: __fixtures__/output1/hooks.ts if (!builder.options.reactQuery.enabled) { return; } const localname = 'hooks.ts'; + // get mapping of packages and rpc query filenames. const obj = {}; builder.rpcQueryClients.map(queryClient => { const path = `./${queryClient.localname.replace(/\.ts$/, '')}`; dotty.put(obj, queryClient.package, path); }); + // create proto ref for context const pkg = '@root'; const ref: ProtoRef = { absolute: '', @@ -47,28 +51,33 @@ export const plugin = ( } } + // create context const pCtx = new TelescopeParseContext( ref, builder.store, builder.options ); + // generate code for createRpcQueryHooks and imports of related packages. const ast = createScopedRpcHookFactory( pCtx.proto, obj, 'createRpcQueryHooks' ) + // generate imports added by context.addUtils const imports = fixlocalpaths(aggregateImports(pCtx, {}, localname)); const importStmts = getImportStatements( localname, imports ); + // construct the AST const prog = [] .concat(importStmts) .concat(ast); + // write the file. const filename = join(builder.outPath, localname); builder.files.push(localname); diff --git a/packages/telescope/src/generators/create-rpc-query-clients.ts b/packages/telescope/src/generators/create-rpc-query-clients.ts index 527a1c5363..fbfcd9382f 100644 --- a/packages/telescope/src/generators/create-rpc-query-clients.ts +++ b/packages/telescope/src/generators/create-rpc-query-clients.ts @@ -68,6 +68,7 @@ export const plugin = ( const filename = bundler.getFilename(localname); const asts = []; + switch (c.proto.pluginValue('rpcClients.type')) { case 'grpc-gateway': allowedRpcServices.forEach(svcKey => { @@ -98,13 +99,20 @@ export const plugin = ( if (c.proto.pluginValue('rpcClients.extensions')) { asts.push(createRpcQueryExtension(ctx.generic, svc)); } - + + // see if current file has been reactQuery enabled and included const includeReactQueryHooks = c.proto.pluginValue('reactQuery.enabled') && isRefIncluded( c.ref, c.proto.pluginValue('reactQuery.include') ) // react query + // generate react query parts if included. + // eg: __fixtures__/output1/akash/audit/v1beta2/query.rpc.Query.ts + // export interface UseAuditorAttributesQuery ... + // const _queryClients: WeakMap ... + // const getQueryService = ... + // export const createRpcQueryHooks = ... // TODO use the imports and make separate files if (includeReactQueryHooks) { [].push.apply(asts, createRpcQueryHookInterfaces(ctx.generic, svc)); @@ -114,7 +122,6 @@ export const plugin = ( } }); } - if (!asts.length) { return;