Code generator 개발기 (Part 2)

loader: fetch | file [required]
schema: string [required]
output-dir: string [required]
react-query: [optional]
  output: string [required]
  fetcher: string [required]
  version: 3 | 4 [optional] default: 3
validator: [optional]
  output: string [required]
typeguard: [optional]
  output: string [required]
preprocess: [optional]
  filterDeprecated: boolean [optional] default: false
  extractEnum: boolean [optional] default: false
  apiPaths:
    - path:
        string [required]
      exact:
        boolean [optional]
  tags:
    - string [required]

import Ajv from 'ajv';

import type ConfigLoader from './ConfigLoader';

import type { JSONSchemaType } from 'ajv';
import { isNil } from 'lodash';
import { InvalidConfigException } from '../utils/exception';

type ReactQueryConfigOptions = {
  output: string;
  fetcher: string;
  version?: number;
  removeApiEndpointPrefix?: boolean;
};

type YamlReactQueryConfig = {
  reactQuery?: ReactQueryConfigOptions;
};
/**
 * 1. react-query 옵션에 대한 json validation 로직
 */
const schema: JSONSchemaType<YamlReactQueryConfig> = {
  type: 'object',
  properties: {
    reactQuery: {
      type: 'object',
      nullable: true,
      properties: {
        output: { type: 'string' },
        fetcher: { type: 'string' },
        version: { type: 'number', nullable: true, default: 4, minimum: 3, maximum: 4 },
        removeApiEndpointPrefix: { type: 'boolean', nullable: true },
      },
      required: ['output', 'fetcher'],
    },
  },
  additionalProperties: true,
};

const validate = new Ajv({ useDefaults: true }).compile(schema);

export type ReactQueryConfig = ReactQueryConfigOptions | false;

export default class ReactQueryConfigLoader implements ConfigLoader<ReactQueryConfig> {
  /**
   * 2. react-query에 대한 옵션 검증
   */
  load(optionCandidate: unknown) {
    if (!validate(optionCandidate)) {
      throw new InvalidConfigException('ReactQueryConfigLoader: not a react query config');
    }

    /**
     * 3. react-query에 대한 옵션 반환
     * 반환타입은 ReactQueryConfigOptions | false
     */
    if (isNil(optionCandidate.reactQuery)) {
      return false;
    }

    return optionCandidate.reactQuery;
  }
}

export class ConfigProviderImpl implements ConfigProvider {
  private loader: Loader;
  private options: Options;

  constructor() {
    /**
     * 1. yaml file 로드
     */
    const yamlCandidate = this.loadConfig();
    const reactQueryConfigLoader = new ReactQueryConfigLoader();
    /**
     * 2. react-query에 대한 옵션 파싱 요청
     */
    const reactQueryConfig = reactQueryConfigLoader.load(yamlCandidate);

    this.options = {
      reactQuery: reactQueryConfig,
    };
  }

  private loadConfig() {
    const flags = args.parse(process.argv);
    const yamlPath = resolve(process.cwd(), flags.config);

    if (typeof yamlPath !== 'string') {
      throw new InvalidPathException('ConfigProvider: failed to open yaml config file');
    }

    const yamlConfig = camelizeKeys(yaml.load(readFileSync(resolve(__dirname, yamlPath), 'utf-8')));
    return yamlConfig;
  }

  getOptions(): Options {
    return this.options;
  }

  /**
   * 3. 옵션이 필요한 객체에 옵션 제공
   */
  taskOption(): TaskOption {
    return pick(this.options, ['reactQuery']);
  }
}

// inversify.config.ts
const container = new Container();

/**
 * 1. IoC 컨테이너에 객체 등록
 */
container.bind<Loader>(TYPES.Loader).to(FetchLoader).whenTargetNamed('fetch');
container.bind<Loader>(TYPES.Loader).to(FileLoader).whenTargetNamed('file');
/**
 * 2. 팩토리 함수 설정
 */
const loaderFactory = container
  .bind<interfaces.Factory<Loader>>(TYPES.LoaderFactory)
  .toFactory<Loader, ['file' | 'fetch']>((context) => {
    return (named) => {
      /**
       * 3. 어떤 객체를 어떻게 로드할 것인지 명시
       */
      return context.container.getNamed<Loader>(TYPES.Loader, named);
    };
  });

// loader.ts
const selectedLoader = container.getNamed(TYPES.LoaderFactory, options.loader);

class DatabaseLoader implements Loader {
  // ...
}

container.bind<Loader>(TYPES.Loader).to(DatabaseLoader).whenTargetNamed('db');

const databaseLoader = container.getNamed(TYPES.LoaderFactory, 'db');

import { flow } from 'lodash';

class PreprocessPipe {
  private readonly preprocessOptions: PreprocessConfig;
  private readonly initialPreprocess: Preprocess[];

  constructor(
    @inject(TYPES.PreprocessFactory)
    private readonly preprocessFactory: (name: string) => Preprocess,
  ) {}

  exec(swaggerSpecJSON: SwaggerSpecJSON | undefined): SwaggerSpecJSON | undefined {
    /**
     * 1. 옵션에서 선택한 preprocess 구현체만 선택하여 배열에 넣음.
     */
    const preprocess = this.scheduledPreprocess();
    const preprocessorFunctions = preprocess.map((preprocess) => preprocess.exec.bind(preprocess));
    /**
     * 2. preprocess 구현체를 차례대로 실행
     */
    const result = flow(preprocessorFunctions)(swaggerSpecJSON);

    return result;
  }

  private scheduledPreprocess() {
    if (!this.preprocessOptions) {
      return [];
    }

    /**
     * enabled = true인 옵션의 객체만 로드
     */
    const selectedPreprocess = Object.entries(this.preprocessOptions)
      .filter(([, enabled]) => enabled)
      .map(([name]) => this.preprocessFactory(name));

    return this.initialPreprocess.concat(selectedPreprocess);
  }
}

import { compile } from 'json-schema-to-typescript';

const queryString = queryStringParser.generate(oasJson);
/**
 * {
 *   "title": "V1UserListQueryString",
 *   "type": "object",
 *   "properties": {
 *      "firstName": {
 *        "type": "string"
 *      },
 *      "lastName": {
 *        "type": "string"
 *      }
 *   }
 * }
 */

const result = await compile(queryString);
/**
 * export interface V1UserListQueryString {
 *   firstName?: string;
 *   lastName?: string;
 * }
 */

// template.ts
export default function useMutationTemplate(name: string, method: string) {
  const type = `${name}Response`;
  const optionType = `UseMutationOptions<${name}Response, unknown, ${name}Variables, TContext>`;

  return `export function use${name}Mutation<TContext>({
    url,
    options,
    requestOptions,
  }: {
    url: string;
    options?: ${optionType};
    requestOptions?: RequestOptions;
  }) {
    const result = useMutation<${type}, unknown, ${name}Variables, TContext>(
      (variables) => fetcher.${method}(url, variables, requestOptions),
      options,
    )

    return { ...result, data: result.data?.data };
  }`;
}

// ReactMutationGenerator.ts
const result = useMutationTemplate('V1UserList', 'POST');

// type guard
const isString = (value: unknown): value is string => typeof value === 'string';

const numOrStringDivide = (value: string | number) => {
  if (isString(value)) {
    return parseInt(value, 10) / 2; // value -> string
  }

  return value / 2; // value -> number
};

const isStudent = (value: Student | Teacher): value is Student => {
  return isPlainObject(value) && 'grade' in value && typeof value.grade === 'string';
};

export function Profile() {
  // Student | Teacher
  const { data } = useProfileQuery();

  return (
    <div>{isStudent(data) ? <StudentProfile data={data} /> : <TeacherProfile data={data} />}</div>
  );
}

import { draft7 } from 'json-schema-migrate';
import { unset } from 'lodash';

function convertSwaggerSpecToJSONSchema(swaggerSpec: SwaggerSpecJSON) {
  const componentSwaggerSpecs = swaggerSpec.components.schemas;

  /**
   * 1. OAS -> json schema 형태로 변경
   */
  draft7(
    toJsonSchema(swaggerSpec.components.schemas, {
      strictMode: true,
    }),
  );
  /**
   * 2. json schema에서 지원하지 않는 프로퍼티 삭제
   */
  removeUnSupportProperty(componentSwaggerSpecs);

  return componentSwaggerSpecs;
}

function removeUnSupportProperty(componentSwaggerSpecs: Record<string, JSONSchema4>) {
  const notSupportedType = ['default', 'deprecated', 'nullable', 'tsEnumNames', 'example'];

  traverse(componentSwaggerSpecs, ({ parent, key }) => {
    key ??= '';

    if (notSupportedType.includes(key)) {
      unset(parent, key);
    }
  });
}

const defaultTypeGuardTemplate = (jsonSchemas: Record<string, JSONSchema4>) => {
  return [
    importTemplate(Object.keys(jsonSchemas)).trim(),
    'const validator = new Validator();',
    Object.entries(jsonSchemas)
      .map(([key, schema]) => typeGuardTemplate(key, schema))
      .join('')
      .trim(),
  ].join('\n\n');
};

const importTemplate = (keys: string[]) => {
  return `
import { Validator } from 'jsonschema';
import type { ${keys.join(', ')} } from './schema';
  `;
};

const typeGuardTemplate = (type: string, jsonSchema: JSONSchema4) => {
  const stringifyJsonScheme = JSON.stringify(jsonSchema);
  return `
export const ${`is${type}`} = (value: unknown): value is ${type} => {
  return validator.validate(value, ${stringifyJsonScheme}).valid;
}
  `;
};

const schema = convertSwaggerSpecToJSONSchema(oasJson);
const result = defaultTypeGuardTemplate(schema);

import toJsonSchema from '@openapi-contrib/openapi-schema-to-json-schema';
import Ajv from 'ajv';
import standaloneCode from 'ajv/dist/standalone';

const schema = toJsonSchema(oasJson);

const ajv = new Ajv({
  schemas,
  code: {
    source: true,
    optimize: true,
  },
});

const result = standaloneCode(ajv);

import { useV1CategoryQuery, API_ENDPOINT } from './schema';
import { isJobGroupCodeName } from './guard';

const retrieveJobGroupCodeNameJobs = (value: unknown) => {
  if (isJobGroupCodeName(value)) {
    return value.jobs;
  }

  return [];
};

export function A() {
  const { data } = useV1CategoryQuery({
    url: API_ENDPOINT.V1_CATEGORY,
    queryKey: [API_ENDPOINT.V1_CATEGORY],
  });

  return <div>{data.jobSeekerStatus.map((status) => status.name)}</div>;
}

import validator from './validator';

describe('categoryAllResponse', () => {
  it('categoryAllResponse의 OAS와 실제 결과는 같아야 한다.', async () => {
    const response = await controller.categoryAllResponse();
    const result = validator.categoryAllResponse(result);
    expect(result).toBe(true);
  });
});