refactor: overhaul nuxt type generation

Author: ElPrudi

package.json

@@ -32,6 +32,7 @@
     "lint:css": "stylelint \"(src|playground)/**/*.vue\"",
     "lint:report": "nuxt prepare playground && eslint -f json-relative -o ./eslint-report.json .",
     "test": "npm run vitest:run",
+    "test:unit": "vitest ./test/tests/utils",
     "test:dev": "npm run vitest:dev",
     "vitest:run": "nuxt generate test && vitest run",
     "vitest:dev": "nuxt generate test && vitest dev",

src/utils/types.ts

@@ -1,87 +1,63 @@
 import type FontConfig from '../classes/FontConfig';
+import type { FontOptionVariance } from '../types';
 
-export function getTypesContent(fontConfig: FontConfig) {
-  const family = unique(fontConfig.fonts.map(font => font.family));
-  const weight = unique(
-    fontConfig.fonts
-      .map(font => font.variances.map(variance => variance.weight))
-      .flat()
-  );
-  const style = unique(
-    fontConfig.fonts
-      .map(font => font.variances.map(variance => variance.style))
-      .flat()
-  );
-
-  return generateAliases({ family, weight, style });
-}
-
-function unique<T>(array: T[]) {
-  return Array.from(new Set(array));
-}
-
-function generateAliases({
-  family,
-  weight,
-  style
-}: {
+interface TextProperties {
+  [key: string]: (string | number)[]
   family: string[];
   weight: (string | number)[];
   style: string[];
-}) {
-  return `
-    export type FontFamily = ${family.map(family => `'${family}'`).join(' | ') || 'string'};
-    export type FontWeight = ${weight.map(v => (typeof v === 'number' ? Number(v) : `"${v}"`)).join(' | ') || 'string'};
-    export type FontStyle = ${style.map(style => `'${style}'`).join(' | ') || 'string'};
-  `;
 }
 
-// import ts from 'typescript';
-// function generateAliases({
-//   family,
-//   weight,
-//   style
-// }: {
-//   family: string[];
-//   weight: (string | number)[];
-//   style: string[];
-// }) {
-//   const sourceFile = ts.createSourceFile(
-//     'index.d.ts',
-//     '',
-//     ts.ScriptTarget.ESNext,
-//     false,
-//     ts.ScriptKind.TS
-//   );
+function getFromVariances<T>(fontConfig: FontConfig, key: keyof FontOptionVariance): T[] {
+  const uniqueStyles = new Set<T>()
+  const fontCount = fontConfig.fonts.length
 
-//   const updatedSourceFile = ts.factory.updateSourceFile(sourceFile, [
-//     createAliasDeclaration('FontFamily', family),
-//     createAliasDeclaration('FontWeigth', weight),
-//     createAliasDeclaration('FontStyle', style)
-//   ]);
+  for (let i = 0; i < fontCount; i++) {
+    const values = fontConfig.fonts[i].variances
+    for (let j = 0, valueCount = values.length; j < valueCount; j++) {
+      uniqueStyles.add(values[j][key] as T)
+    }
+  }
 
-//   const printer = ts.createPrinter();
-//   return printer.printFile(updatedSourceFile);
-// }
+  return Array.from(uniqueStyles).filter(Boolean)
+}
 
-// function createAliasDeclaration(name: string, values: (string | number)[]) {
-//   if (values.length === 0) {
-//     values = ['any'];
-//   }
-//   return ts.factory.createTypeAliasDeclaration(
-//     [ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)],
-//     name,
-//     undefined,
-//     ts.factory.createUnionTypeNode(
-//       values.map(value => {
-//         let literal;
-//         if (typeof value === 'number') {
-//           literal = ts.factory.createNumericLiteral(String(value));
-//         } else {
-//           literal = ts.factory.createStringLiteral(String(value));
-//         }
-//         return ts.factory.createLiteralTypeNode(literal);
-//       })
-//     )
-//   );
-// }
+function unique<T>(array: T[]): T[] {
+  return Array.from(new Set(array)).filter(Boolean);
+}
+
+function capitalize(text: string): string {
+  return text ? `${text.charAt(0).toUpperCase()}${text.slice(1)}` : text;
+}
+
+function generateAliases(textProperties: TextProperties): string {
+  const props = Object.keys(textProperties);
+  const len = props.length;
+  const output: string[] = new Array(len);
+  // Loop through each text property
+  for (let i = 0; i < len; i++) {
+    const prop = props[i];
+    const propValues: (string | number)[] = textProperties[props[i]];
+    const valueCount = propValues.length;
+    let line = `export type Font${capitalize(prop)} = `;
+    // Output generic type "string", if there are no values to parse
+    if (!valueCount) output[i] = `${line}'string';`;
+    else {
+      // Merge all values into a union (|) type value.
+      const values: string[] = new Array(valueCount);
+      for (let j = 0; j < valueCount; j++) {
+        values[j] = `'${propValues[j]}'`;
+      }
+      output[i] = `${line}${values.join(' | ')};`;
+    }
+  }
+  return output.join('\n');
+}
+
+export function getTypesContent(fontConfig: FontConfig): string {
+  return generateAliases({
+    family: unique(fontConfig.fonts.map(font => font.family)),
+    weight: getFromVariances(fontConfig, 'weight'),
+    style: getFromVariances(fontConfig, 'style')
+  });
+}

test/tests/utils/getTypesContent.test.ts

@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest';
+import { getTypesContent } from '../../../src/utils/types';
+
+describe('getTypesContent', () => {
+  it('generates generic types on empty font config', () => {
+    expect(getTypesContent({
+      fonts: [
+        {
+          family: '',
+          variances: [
+            {
+              style: '',
+              weight: 0,
+              sources: []
+            }
+          ]
+        }
+      ]
+    })).toBe("export type FontFamily = 'string';\nexport type FontWeight = 'string';\nexport type FontStyle = 'string';")
+  });
+
+  it('generates proper types on valid font config', () => {
+    expect(getTypesContent({
+      fonts: [
+        {
+          family: 'Roboto',
+          variances: [
+            {
+              style: 'italic',
+              weight: 400,
+              sources: []
+            },
+            {
+              style: 'normal',
+              weight: 'bold',
+              sources: []
+            },
+          ]
+        }
+      ]
+    })).toBe("export type FontFamily = 'Roboto';\nexport type FontWeight = '400' | 'bold';\nexport type FontStyle = 'italic' | 'normal';")
+  })
+});

vitest.config.ts

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitest/config';
 export default defineConfig({
   base: process.env.BASE_URL || '/',
   test: {
-    include: ['test/*.test.ts'],
+    include: ['test/**/*.test.ts'],
     testTimeout: 60_000,
     hookTimeout: 140_000
   },