@graphql-codegen/typescript-stencil-apollo
Version:
GraphQL Code Generator plugin for generating Stencil Components based on GraphQL operations
83 lines (82 loc) • 4.31 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.StencilApolloVisitor = void 0;
const tslib_1 = require("tslib");
const auto_bind_1 = tslib_1.__importDefault(require("auto-bind"));
const change_case_all_1 = require("change-case-all");
const visitor_plugin_common_1 = require("@graphql-codegen/visitor-plugin-common");
const config_js_1 = require("./config.js");
class StencilApolloVisitor extends visitor_plugin_common_1.ClientSideBaseVisitor {
constructor(schema, fragments, rawConfig) {
super(schema, fragments, rawConfig, {
componentType: (0, visitor_plugin_common_1.getConfigValue)(rawConfig.componentType, config_js_1.StencilComponentType.functional),
noExport: rawConfig.componentType === config_js_1.StencilComponentType.class,
});
(0, auto_bind_1.default)(this);
}
getImports() {
const baseImports = super.getImports();
const imports = [];
const hasOperations = this._collectedOperations.length > 0;
if (!hasOperations) {
return baseImports;
}
if (this.config.componentType === config_js_1.StencilComponentType.class) {
imports.push(`import 'stencil-apollo';`);
imports.push(`import { Component, Prop, h } from '@stencil/core';`);
}
else {
imports.push(`import * as StencilApollo from 'stencil-apollo';`);
imports.push(`import { h } from '@stencil/core';`);
}
return [...baseImports, ...imports];
}
_buildOperationFunctionalComponent(node, documentVariableName, operationType, operationResultType, operationVariablesTypes) {
const operationName = this.convertName(node.name.value);
const propsTypeName = this.convertName(operationName + 'Props');
const rendererSignature = (0, change_case_all_1.pascalCase)(`${operationType}Renderer`) +
`<${operationResultType}, ${operationVariablesTypes}>`;
const apolloStencilComponentTag = (0, change_case_all_1.paramCase)(`Apollo${operationType}`);
const componentName = this.convertName(`${operationName}Component`);
const propsVar = `
export type ${propsTypeName} = {
variables ?: ${operationVariablesTypes};
inlist ?: StencilApollo.${rendererSignature};
};
`;
const component = `
export const ${componentName} = (props: ${propsTypeName}, children: [StencilApollo.${rendererSignature}]) => (
<${apolloStencilComponentTag} ${operationType.toLowerCase()}={ ${documentVariableName} } { ...props } renderer={ children[0] } />
);
`;
return [propsVar, component].filter(a => a).join('\n');
}
_buildClassComponent(node, documentVariableName, operationType, operationResultType, operationVariablesTypes) {
const componentName = this.convertName(node.name.value + 'Component');
const apolloStencilComponentTag = (0, change_case_all_1.paramCase)(`Apollo${operationType}`);
const rendererSignature = (0, change_case_all_1.pascalCase)(`${operationType}Renderer`);
return `
@Component({
tag: '${(0, change_case_all_1.paramCase)(`Apollo${(0, change_case_all_1.pascalCase)(node.name.value)}`)}'
})
export class ${componentName} {
@Prop() renderer: import('stencil-apollo').${rendererSignature}<${operationResultType}, ${operationVariablesTypes}>;
@Prop() variables: ${operationVariablesTypes};
render() {
return <${apolloStencilComponentTag} ${operationType.toLowerCase()}={ ${documentVariableName} } variables={ this.variables } renderer={ this.renderer } />;
}
}
`;
}
buildOperation(node, documentVariableName, operationType, operationResultType, operationVariablesTypes) {
switch (this.config.componentType) {
case config_js_1.StencilComponentType.class:
return this._buildClassComponent(node, documentVariableName, operationType, operationResultType, operationVariablesTypes);
case config_js_1.StencilComponentType.functional:
return this._buildOperationFunctionalComponent(node, documentVariableName, operationType, operationResultType, operationVariablesTypes);
default:
return '';
}
}
}
exports.StencilApolloVisitor = StencilApolloVisitor;