FileContentGenerator.ts

import _ from 'lodash';
import {TAllClassnames} from '../types/classes';
import {TailwindConfigParser} from './TailwindConfigParser';

export class FileContentGenerator {
  private _configParser: TailwindConfigParser;
  private readonly _generatedClassNames: TAllClassnames;

  /**
   * Initializes a new instance of the `FileContentGenerator` class.
   * @param generatedClassnames The generated classnames to put in the template.
   */
  constructor(generatedClassnames: TAllClassnames, configParser: TailwindConfigParser) {
    this._configParser = configParser;
    this._generatedClassNames = generatedClassnames;
  }

  public generateFileContent = (): string => {
    return (
      this.fileHeaderTemplate() +
      '\n\n' +
      this.importStatementsTemplate() +
      '\n\n' +
      this.regularClassnamesTypesTemplate() +
      '\n\n' +
      this.variantsTypeTemplate() +
      '\n\n' +
      this.utilityFunctionsTemplate() +
      '\n\n' +
      this.mainExportStatementsTemplate()
    );
  };

  private fileHeaderTemplate = (): string => {
    return (
      '/* eslint-disable */\n' +
      '/* tslint:disable */\n' +
      '\n' +
      '//////////////////////////////////////////////////////////////////////////////\n' +
      '/// Autogenerated by tailwindcss-classnames CLI. https://git.io/JtsPU\n' +
      '/// DO NOT EDIT THIS FILE DIRECTLY!\n' +
      '//////////////////////////////////////////////////////////////////////////////\n'
    );
  };

  private importStatementsTemplate = (): string => {
    return "import classnamesLib from 'clsx';" + '\n' + `T_CUSTOM_CLASSES_IMPORT_STATEMENT`;
  };

  private variantsTypeTemplate = (): string => {
    const variants = this._configParser.getVariants();

    return this.generateTypesTemplate(
      'PseudoClassVariants',
      variants.map(variant => variant + this._configParser.getSeparator()), // 'hover:', 'focus:'
      undefined,
      true,
    );
  };

  private regularClassnamesTypesTemplate = (): string => {
    return Object.keys(this._generatedClassNames)
      .map(classGroupKey => {
        return this.generateTypesGroupTemplate(
          this._generatedClassNames[classGroupKey as keyof TAllClassnames] as TAllClassnames,
          classGroupKey,
        );
      })
      .join('\n');
  };

  private utilityFunctionsTemplate = (): string => {
    let template =
      '//////////// Utility Function generic type\n\n' +
      'type TUtilityFunction<T extends string> = (\n' +
      '  ...args: Array<\n' +
      '    | T\n' +
      '    | `!${T}`\n' +
      '    | `${TPseudoClassVariants}${T}`\n' +
      '    | `${TPseudoClassVariants}!${T}`\n' +
      '    | null\n' +
      '    | undefined\n' +
      '    | {[key in T | `${TPseudoClassVariants}${T}` | `!${T}` | `${TPseudoClassVariants}!${T}` | TTailwindString]?: boolean}\n' +
      '    | TTailwindString\n' +
      '  >\n' +
      ') => TTailwindString;';

    /**
     * Specific subcategory utility functions
     */
    for (const [categoryKey, value] of Object.entries(this._generatedClassNames)) {
      const subCategoriesTemplate = Object.keys(value) // sub-ctegories keys
        .map(SubCategory => {
          const fnName = _.camelCase(SubCategory);
          const fnType = `TUtilityFunction<T${_.upperFirst(SubCategory)}>`;

          return `export const ${fnName}: ${fnType} = classnamesLib as any`;
        })
        .join('\n');

      template =
        template +
        '\n' +
        `\n//////////// ${categoryKey} Utility functions\n` +
        '\n' +
        subCategoriesTemplate;
    }

    /**
     * general category utility functions
     */
    const generalCategoriesTemplate = Object.keys(this._generatedClassNames)
      .map(categorykey => {
        const comment = '\n' + `\n//////////// ${categorykey} Utility functions\n` + '\n';

        const fnName = _.camelCase(categorykey);
        const fnType = `TUtilityFunction<T${_.upperFirst(categorykey)}>`;

        return comment + `export const ${fnName}: ${fnType} = classnamesLib as any`;
      })
      .join('\n');

    template = template + generalCategoriesTemplate;

    return template;
  };

  private mainExportStatementsTemplate = (): string => {
    const specificUtilityFunctionsObjectTemplate = Object.keys(this._generatedClassNames)
      .map(cn => {
        const subCategoryObj = this._generatedClassNames[cn as keyof TAllClassnames];
        if (subCategoryObj !== undefined) {
          return Object.keys(subCategoryObj)
            .map(sc => '  ' + sc)
            .join(',\n');
        }
      })
      .join(',\n');

    const generalUtilityFunctionsObjectTemplate = Object.keys(this._generatedClassNames)
      .map(cn => '  ' + _.camelCase(cn))
      .join(',\n');

    return (
      `export const TW = {\n${specificUtilityFunctionsObjectTemplate}\n}\n` +
      '\n' +
      `export const CN = {\n${generalUtilityFunctionsObjectTemplate}\n}\n` +
      '\n' +
      'export const mainCategoriesUtilityFunctions = CN;\n' +
      '\n' +
      'export const subCategoriesUtilityFunctions = TW;\n' +
      '\n' +
      'export type TTailwindString = "TAILWIND_STRING"\n' +
      '\n' +
      'export type TArg =\n' +
      '| null\n' +
      '| undefined\n' +
      this.getDarkModeClassnameType() +
      '| TTailwindString\nIMPORTED_T_CUSTOM_CLASSES_ARG' +
      '\n' +
      'export type TTailwind = (...args: TArg[]) => TTailwindString\n' +
      '\n' +
      'export const classnames: TTailwind = classnamesLib as any\n' +
      '\n' +
      'export default classnames'
    );
  };

  /**
   * Get the dark mode config custom classname type
   * @returns the name of the classname for dark mode
   */
  private getDarkModeClassnameType = (): string => {
    const darkModeConfig = this._configParser.getDarkMode();
    if (_.isArray(darkModeConfig) && darkModeConfig[0] === 'class') {
      return `| '${darkModeConfig[1]}'\n`;
    } else if (_.isString(darkModeConfig) && darkModeConfig === 'class') {
      return `| 'dark'\n`;
    } else {
      return '';
    }
  };

  /**
   * Generates types group template for a utility classes group object.
   *
   *
   * ### example:
   *
   * A utility group object as:
   *
   * ```js
   * const FlexBox = {
   *   alignSelf: ['self-auto', 'self-start', 'self-center'],
   *   flexWrap: ['flex-nowrap', 'flex-wrap'],
   * }
   *```
   *
   * will produce a template which looks like this:
   *
   * ```ts
   * export type TFlexWrap =
   * | 'flex-nowrap'
   * | 'flex-wrap';
   *
   * export type TAlignSelf =
   * | 'self-auto'
   * | 'self-start'
   * | 'self-center';
   *
   * export type TFlexBox = TFlexWrap | TAlignSelf;
   * ```
   */
  private generateTypesGroupTemplate = (group: TAllClassnames, groupName: string): string => {
    const members = Object.keys(group);

    const generateMembersStatements = (): string[] => {
      return members.map(member => {
        return this.generateTypesTemplate(
          member,
          group[member as keyof TAllClassnames] as string[],
          this._configParser.getPrefix(),
        );
      });
    };

    const generateGroupStatement = (): string => {
      const getMembersStatementsReferences = (): string =>
        members.map(member => 'T' + _.upperFirst(member)).join('\n  | ');

      return (
        `export type T${_.upperFirst(groupName)} =` +
        '\n  | ' +
        getMembersStatementsReferences() +
        '\n'
      );
    };

    return generateMembersStatements().join('\n\n') + '\n\n' + generateGroupStatement();
  };

  /**
   * Generates TS types template from a list of strings.
   *
   * #### Example:
   *
   * Given typeName: 'baz' and items:
   * ```js
   * ['foo', 'bar']
   * ```
   *
   * generates:
   *
   * ```
   * export type TBaz
   *   | foo
   *   | bar;
   * ```
   * or with quoutes:
   * ```
   * export type TBaz
   *   | 'foo'
   *   | 'bar';
   * ```
   * @param typeName The name of the type (without T prefix).
   * @param items The list of the strings of items to add to the type name.
   * @param prefix The prefix to add to the beginning of each item of the string array.
   * @param surroundWithQuotes Whether to quote the types or not (make it a string or an actual type)
   */
  private generateTypesTemplate = (
    typeName: string,
    items: string[],
    prefix?: string,
    surroundWithQuotes: boolean = true,
  ): string => {
    return (
      `export type T${_.upperFirst(typeName)} =` +
      '\n  | ' +
      items
        .flatMap(item => {
          const classnamesThatShouldKeepTheDefaultSuffix = ['cursor'];

          return classnamesThatShouldKeepTheDefaultSuffix.map(x => {
            const shouldKeepDefaultSuffix: boolean = item.includes(x);
            const name = shouldKeepDefaultSuffix ? item : item.replace('-DEFAULT', '');

            const nameWithOrWithoutPrefix = `${prefix ? prefix : ''}${name}`;

            return surroundWithQuotes ? `'${nameWithOrWithoutPrefix}'` : nameWithOrWithoutPrefix;
          });
        })
        .join('\n  | ')
    );
  };
}