@thinkwise/testwise 0.2.62 → 0.2.99

package/artifact-builder/SubjectGenerator.ts

@@ -1,32 +1,46 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { DataRetriever, NamingHandler } from '../index.js';
 import type { ISubject } from '../interfaces/ISubject.js';
-import {
-  coreComponents,
-  type ScreenComponents,
-  type SubjectAgnosticComponents,
-  screenComponents
-} from '../types/Components.js';
-import { type LocatorType, SelectorBuilder } from './SelectorBuilder.js';
-
+import type { ScreenComponents } from '../types/Components.js';
+import type { LocatorType } from '../types/LocatorType.js';
+import { DataRetriever, NamingHandler, PipelinePaths } from './helpers/index.js';
+import { SelectorBuilder } from './SelectorBuilder.js';
+import { type ComponentEntry, SubjectClassModelBuilder } from './SubjectClassModelBuilder.js';
+import { serializeTsFile } from './TsFileSerializer.js';
+
+/**
+ * **Pipeline Step 6** — Generates typed TypeScript subject class files under
+ * `test-artifacts/subjects/<SubjectName>/`.
+ *
+ * **What it does:**
+ * - Reads `seed-data/subjectsToBuild.json` to get the list of subjects to
+ *   generate.
+ * - For each subject, uses `SubjectClassModelBuilder` to produce an in-memory
+ *   model of the class, then hands it to `TsFileSerializer` to write the
+ *   TypeScript file to disk.
+ * - Each generated class extends `SubjectPageBase`, imports the matching
+ *   screen interface, and declares typed component properties.
+ * - After generating all class files, writes an `index.ts` barrel file for
+ *   each subject folder.
+ *
+ * **When it runs:** Step 6 of `testwise sync`, after `SubjectComponentGenerator`
+ * has written the component interface files.
+ */
 export class SubjectGenerator {
-  private static readonly SUBJECTS_RELATIVE_PATH = 'test-artifacts/subjects';
-
-  private readonly _currentFilename: string;
-  private readonly _currentDirname: string;
   private readonly _subjectsDirectory: string;
+  private readonly _screensDirectory: string;
   private readonly _namingHandler: NamingHandler;
   private readonly _selectorBuilder: SelectorBuilder;
+  private readonly _paths: PipelinePaths;
+  private readonly _modelBuilder: SubjectClassModelBuilder;
 
-  constructor() {
-    this._currentFilename = fileURLToPath(import.meta.url);
-    this._currentDirname = dirname(this._currentFilename);
-    this._subjectsDirectory = path.resolve(this._currentDirname, `../../${SubjectGenerator.SUBJECTS_RELATIVE_PATH}`);
+  constructor(paths?: PipelinePaths) {
+    this._paths = paths ?? new PipelinePaths();
+    this._subjectsDirectory = this._paths.subjects;
+    this._screensDirectory = this._paths.screens;
     this._namingHandler = new NamingHandler();
     this._selectorBuilder = new SelectorBuilder();
+    this._modelBuilder = new SubjectClassModelBuilder(this._namingHandler, this._selectorBuilder);
   }
 
   public run(): void {
@@ -35,7 +49,7 @@ export class SubjectGenerator {
   }
 
   private generateSubjectClasses(): void {
-    const subjects: ISubject[] = new DataRetriever().getSubjectsToBuild();
+    const subjects: ISubject[] = new DataRetriever(this._paths).getSubjectsToBuild();
 
     subjects.forEach((subject) => {
       this.createSubjectClass(subject);
@@ -78,38 +92,21 @@ export class SubjectGenerator {
     const screenInterfaceName = this._namingHandler.generateScreenInterfaceName(subject.screentype_id);
     const screenInterfacePath = this.getScreenInterfacePath(screenInterfaceName);
     const screenFileContent = fs.readFileSync(screenInterfacePath, 'utf-8');
-    const subjectFolderName = this._namingHandler.toPascalCase(subject.subject);
+    const subjectFolderName = this._namingHandler.toSubjectPascalCase(subject.subject);
     const subjectFolderPath = this.getSubjectFolderRelativePath(subjectFolderName);
 
-    const subjectClass = {
-      content: `import type { Page } from '@playwright/test';\nimport { SubjectPageBase } from '../../SubjectPageBase.js';\n`,
-      name: this._namingHandler.generateSubjectClassName(subject)
-    };
-    const componentDictionary: { name: string; type: SubjectAgnosticComponents; context: string }[] =
-      this.getAllComponentsFromInterface(screenFileContent, screenInterfaceName, subject) as {
-        name: string;
-        type: SubjectAgnosticComponents;
-        context: string;
-      }[];
-
-    this.addScreenInterfaceImport(subjectClass, screenInterfaceName);
-    this.removeComponentImports(subjectClass);
-    this.addCoreComponentImports(componentDictionary, subjectFolderName, subjectClass);
-    this.addClassExport(subjectClass, screenInterfaceName);
-    this.addComponentDeclarations(subjectClass, componentDictionary, subjectFolderName);
-    this.addConstructor(subjectClass, componentDictionary, subjectFolderName, subject);
-    this.addGoToMethod(subjectClass, subject);
-    this.addSubjectClassLineEndings(subjectClass);
-    this.verifyDirectoryExists(subjectFolderPath);
-    fs.writeFileSync(path.join(subjectFolderPath, `${subjectClass.name}.ts`), subjectClass.content, 'utf-8');
-  }
+    const componentDictionary = this.getAllComponentsFromInterface(
+      screenFileContent,
+      screenInterfaceName,
+      subject
+    ) as ComponentEntry[];
 
-  private addGoToMethod(subjectClass: { content: string }, subject: ISubject): void {
-    let url = `subject=${subject.subject}`;
+    const model = this._modelBuilder.build(subject, screenInterfaceName, componentDictionary, subjectFolderName);
+    const content = serializeTsFile(model);
 
-    if (subject.variant !== '') url = `${url}/subjectVariant=${subject.variant}`;
-
-    subjectClass.content += `\n  public async goTo() {\n    await this._subjectPage.goToDeepLink(\`${url}\`);\n    await this._subjectPage.waitForLoadState('networkidle');\n  }\n`;
+    this.verifyDirectoryExists(subjectFolderPath);
+    const className = this._namingHandler.generateSubjectClassName(subject);
+    fs.writeFileSync(path.join(subjectFolderPath, `${className}.ts`), content, 'utf-8');
   }
 
   private getAllComponentsFromInterface(
@@ -126,10 +123,17 @@ export class SubjectGenerator {
     if (interfaceMatches) {
       const propertyMatches = interfaceMatches[1].match(/^\s*([a-zA-Z0-9_]+)\s*:\s*([a-zA-Z0-9_]+);/gm);
       if (propertyMatches) {
+        const screenMeta = new DataRetriever(this._paths).getScreenComponentMeta(subject.screentype_id);
+
         componentDictionary = propertyMatches.map((line) => {
           // eslint-disable-next-line @typescript-eslint/no-unused-vars
           const [_, name, type] = line.match(/^\s*([a-zA-Z0-9_]+)\s*:\s*([a-zA-Z0-9_]+);/) || [];
-          const context = this.generateComponentContextLocatorString(type as ScreenComponents, name, subject);
+          const context = this.generateComponentContextLocatorString(
+            type as ScreenComponents,
+            name,
+            subject,
+            screenMeta
+          );
 
           return { name, type, context };
         });
@@ -139,44 +143,23 @@ export class SubjectGenerator {
     return componentDictionary;
   }
 
-  // ToDo: decide if this needs to move into a ContextGenerator class (depending on the complexity of context generation)
   private generateComponentContextLocatorString(
     componentType: ScreenComponents,
     componentName: string,
-    subject: ISubject
+    subject: ISubject,
+    screenMeta: Record<string, string>
   ): string {
-    const componentId = this._namingHandler.getComponentIdFromName(componentName, componentType);
-    const screentypeId = subject.screentype_id.replace(/_/g, '-');
-    const locatorString = {
-      prefix: '',
-      suffix: '',
-      locatorType: 'getByTestId' as LocatorType
-    };
-
-    switch (componentType) {
-      case 'Form':
-      case 'Grid':
-      case 'Splitter':
-      case 'FilterForm':
-      case 'Scheduler':
-        locatorString.prefix = `screen__${screentypeId}__`;
-        break;
-      case 'ActionBar':
-      case 'CustomActionBar':
-        locatorString.prefix = '.';
-        locatorString.locatorType = 'locator';
-        break;
-      case 'Tab':
-        locatorString.prefix = '.Tab.';
-        locatorString.locatorType = 'locator';
-        break;
-      case 'DetailTabPage':
-        return `this.context`;
-    }
-
-    return `this.context.${locatorString.locatorType}('${locatorString.prefix}${componentId}${locatorString.suffix}')`;
+    return generateComponentContextLocatorString(
+      componentType,
+      componentName,
+      subject,
+      screenMeta,
+      this._namingHandler
+    );
   }
 
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
   private verifyDirectoryExists(directoryPath: string): void {
     if (!fs.existsSync(directoryPath)) {
       fs.mkdirSync(directoryPath, { recursive: true });
@@ -184,10 +167,7 @@ export class SubjectGenerator {
   }
 
   private getScreenInterfacePath(screenInterfaceName: string): string {
-    const screenInterfacePath = path.resolve(
-      this._currentDirname,
-      `../../test-artifacts/screens/${screenInterfaceName}.ts`
-    );
+    const screenInterfacePath = path.join(this._screensDirectory, `${screenInterfaceName}.ts`);
 
     if (!fs.existsSync(screenInterfacePath)) {
       throw new Error(`Screen interface file not found: ${screenInterfacePath}`);
@@ -197,152 +177,59 @@ export class SubjectGenerator {
   }
 
   private getSubjectFolderRelativePath(subjectFolderName: string): string {
-    const subjectFolderPath = path.resolve(
-      this._currentDirname,
-      `../../${SubjectGenerator.SUBJECTS_RELATIVE_PATH}/${subjectFolderName}`
-    );
-    return subjectFolderPath;
-  }
-
-  private addCoreComponentImports(
-    componentDictionary: { name: string; type: SubjectAgnosticComponents }[],
-    subjectFolderName: string,
-    subjectClass: { content: string }
-  ): void {
-    const coreComponentImports = new Set<string>();
-
-    componentDictionary.forEach((component) => {
-      if (!screenComponents.includes(component.type)) return;
-
-      if (coreComponents.includes(component.type)) {
-        const importRegex = new RegExp(
-          `import \\{[^}]*\\b${component.type}\\b[^}]*\\} from '../../../components/index.js';`
-        );
-
-        if (importRegex.test(subjectClass.content)) {
-          return;
-        }
-
-        coreComponentImports.add(component.type);
-        return;
-      }
-
-      const componentName = component.type;
-      const componentImport = `import { type ${subjectFolderName}${componentName}, ${subjectFolderName}${componentName}Component } from './Components/${subjectFolderName}${componentName}.js';`;
-
-      if (!subjectClass.content.includes(componentImport)) {
-        subjectClass.content = `${componentImport}\n${subjectClass.content}`;
-      }
-    });
-
-    if (coreComponentImports.size > 0) {
-      subjectClass.content = `import { ${Array.from(coreComponentImports).join(', ')} } from '../../../components/index.js';\n${subjectClass.content}`;
-    }
-  }
-
-  private removeComponentImports(subjectClass: { content: string }): void {
-    subjectClass.content = subjectClass.content.replace(
-      /import \{[^}]+\} from '\.\.\/\.\.\/components\/index\.js';\n?/g,
-      ''
-    );
-  }
-
-  private addClassExport(subjectClass: { content: string; name: string }, screenInterfaceName: string): void {
-    subjectClass.content += `\nexport class ${subjectClass.name} extends SubjectPageBase implements ${screenInterfaceName} {\n`;
-  }
-
-  private addScreenInterfaceImport(subjectClass: { content: string }, screenInterfaceName: string): void {
-    if (subjectClass.content.includes(`import type { ${screenInterfaceName} }`)) {
-      return;
-    }
-
-    subjectClass.content = `import type { ${screenInterfaceName} } from '../../screens/index.js';\n${subjectClass.content}`;
-  }
-
-  private addComponentDeclarations(
-    subjectClass: { content: string },
-    componentDictionary: { name: string; type: SubjectAgnosticComponents }[],
-    subjectFolderName: string
-  ): void {
-    componentDictionary.forEach((component) => {
-      if (!screenComponents.includes(component.type)) return;
-
-      const propertyName = this._namingHandler.formatPropertyName(component.name);
-      if (coreComponents.includes(component.type)) {
-        subjectClass.content += `  ${propertyName}: ${component.type};\n`;
-        return;
-      }
-      const componentType = `${subjectFolderName}${component.type}`;
-      subjectClass.content += `  ${propertyName}: ${componentType};\n`;
-    });
-
-    subjectClass.content += `  private _subjectPage: Page;\n`;
-  }
-
-  private addConstructor(
-    subjectClass: { content: string },
-    componentDictionary: { name: string; type: SubjectAgnosticComponents; context: string }[],
-    subjectFolderName: string,
-    subject: ISubject
-  ): void {
-    const rootContextSelector = this._selectorBuilder.getPageContext(subject);
-
-    subjectClass.content += `\n  constructor(page: Page) {\n    super(page.locator('${rootContextSelector}'));\n`;
-
-    componentDictionary.forEach((component) => {
-      const propertyName = this._namingHandler.formatPropertyName(component.name);
-
-      if (!screenComponents.includes(component.type)) return;
-
-      if (coreComponents.includes(component.type)) {
-        const componentId = this._namingHandler.toPascalCase(propertyName);
-        subjectClass.content += `    this.${propertyName} = ${this.getComponentInitializer(component, componentId)};\n`;
-        return;
-      }
-
-      const componentName = component.type;
-      subjectClass.content += `    this.${propertyName} = new ${subjectFolderName}${componentName}Component(${component.context});\n`;
-    });
-
-    subjectClass.content += `    this._subjectPage = this.context.page();\n`;
-    subjectClass.content += `  }\n`;
+    return this._paths.subjectFolder(subjectFolderName);
   }
+}
 
-  private getComponentInitializer(component: { type: string; context: string }, componentId: string): string {
-    const componentNamePascal = this._namingHandler.toPascalCase(component.type);
-
-    switch (component.type) {
-      case 'Cardlist':
-      case 'TaskTiles':
-      case 'PrefilterList':
-      case 'Chart':
-      case 'CubeViewBar':
-      case 'PivotGrid':
-      case 'PivotGridFieldList':
-      case 'Maps':
-      case 'ReportBar':
-      case 'ReportTiles':
-      case 'Preview':
-        return `new ${component.type}(this.context.locator('.${component.type}.${componentNamePascal}'))`;
-      case 'CombinedFilter':
-      case 'CustomActionBar':
-      case 'ActionBar':
-      case 'Splitter':
-      case 'DetailTabPage':
-      case 'Tab':
-      case 'FilterForm':
-      case 'Scheduler':
-        return `new ${component.type}(${component.context})`;
-      case 'TreeView':
-        return `new ${component.type}(this.context.locator('.Tree.${componentNamePascal}'))`;
-      case 'TaskBar':
-        return `new ${component.type}(this.context.locator('.ActionBar.${componentId}'))`;
-      default:
-        throw new Error(`Unknown core component type: ${component.type}`);
+/**
+ * Builds the Playwright locator expression string for a given screen component.
+ *
+ * Exported as a standalone function so that it can be unit-tested independently
+ * of the file-I/O-coupled {@link SubjectGenerator} class.
+ */
+export function generateComponentContextLocatorString(
+  componentType: ScreenComponents,
+  componentName: string,
+  subject: ISubject,
+  screenMeta: Record<string, string>,
+  namingHandler: NamingHandler
+): string {
+  // Normalize the quicktype property name to the same form used as key in the meta map.
+  const normalizedName = componentName.toLowerCase().replace(/[^a-z0-9]/g, '');
+  const originalId = screenMeta[normalizedName];
+
+  const screentypeId = subject.screentype_id.replace(/_/g, '-');
+  const locatorString = {
+    prefix: '',
+    locatorType: 'getByTestId' as LocatorType
+  };
+
+  switch (componentType) {
+    case 'Form':
+    case 'Grid':
+    case 'Splitter':
+    case 'FilterForm':
+    case 'Scheduler': {
+      // data-testid uses lowercase with hyphens: e.g. Grid_QT3UL7F8 → grid-qt3ul7f8
+      const testId = originalId ? originalId.toLowerCase().replace(/_/g, '-') : componentName.toLowerCase();
+      locatorString.prefix = `screen__${screentypeId}__`;
+      return `this.context.getByTestId('${locatorString.prefix}${testId}')`;
     }
-  }
-
-  private addSubjectClassLineEndings(subjectClass: { content: string }): void {
-    subjectClass.content += `}\n`;
-  }
+    case 'ActionBar':
+    case 'CustomActionBar':
+      locatorString.prefix = '.';
+      locatorString.locatorType = 'locator';
+      break;
+    case 'Tab':
+      locatorString.prefix = '.Tab.';
+      locatorString.locatorType = 'locator';
+      break;
+    case 'DetailTabPage':
+      return `this.context`;
+  }
+
+  // For CSS class selectors (ActionBar, Tab): use the original ID as-is, fall back to
+  // capitalizing the first letter (handles consolidated 'tab' / 'detailTab' properties).
+  const cssId = originalId ?? namingHandler.capitalizeFirstLetter(componentName);
+  return `this.context.${locatorString.locatorType}('${locatorString.prefix}${cssId}')`;
 }

package/artifact-builder/SubjectRegistration.ts

@@ -1,20 +1,39 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import * as prettier from 'prettier';
-
+import type { ISubjectDetail, ScreenContext } from '../interfaces/ISubjectDetail.js';
+import { PipelinePaths } from './helpers/PipelinePaths.js';
+
+/**
+ * **Pipeline Step 7** — Registers all generated subject classes into
+ * `page-extensions/SubjectRegistry.ts` so they are available on
+ * `page.subject.<ClassName>` during tests.
+ *
+ * **What it does:**
+ * - Scans `test-artifacts/subjects/` to discover every generated class file.
+ * - Reads `templates/SubjectRegistry.template.ts` as the implementation skeleton.
+ * - Injects import statements and property declarations for every discovered
+ *   class into the template and writes the result to
+ *   `page-extensions/SubjectRegistry.ts`.
+ * - Runs `prettier` over the output so the generated file passes lint.
+ *
+ * **Important:** Never edit `SubjectRegistry.ts` directly — it is
+ * overwritten on every `testwise sync`. Edit the template instead.
+ *
+ * **When it runs:** The final step (step 7) of `testwise sync`.
+ */
 export class SubjectRegistration {
   private static readonly IMPORT_MATCH_REGEX = /import .*'\.\.\/test-artifacts\/subjects\/index\.js';\n?/g;
 
-  private readonly _currentFilename: string;
-  private readonly _currentDirname: string;
   private readonly _subjectTypePath: string;
-
-  constructor() {
-    this._currentFilename = fileURLToPath(import.meta.url);
-    this._currentDirname = dirname(this._currentFilename);
-    this._subjectTypePath = path.resolve(this._currentDirname, '../../page-extensions/SubjectRegistry.ts');
+  private readonly _subjectsDirectory: string;
+  private readonly _registryTemplatePath: string;
+
+  constructor(paths?: PipelinePaths) {
+    const p = paths ?? new PipelinePaths();
+    this._subjectTypePath = p.subjectRegistry;
+    this._subjectsDirectory = p.subjects;
+    this._registryTemplatePath = p.subjectRegistryTemplate;
   }
 
   public async run(): Promise<void> {
@@ -24,20 +43,16 @@ export class SubjectRegistration {
   }
 
   public resetSubjectRegistry(): void {
-    const root = path.resolve(this._currentDirname, '../../');
-    const registryPath = path.join(root, 'page-extensions', 'SubjectRegistry.ts');
-    const templatePath = path.join(root, 'templates', 'SubjectRegistry.template.ts');
-
-    if (fs.existsSync(registryPath)) {
-      fs.rmSync(registryPath, { force: true });
+    if (fs.existsSync(this._subjectTypePath)) {
+      fs.rmSync(this._subjectTypePath, { force: true });
     }
 
-    if (fs.existsSync(templatePath)) {
-      fs.copyFileSync(templatePath, registryPath);
+    if (fs.existsSync(this._registryTemplatePath)) {
+      fs.copyFileSync(this._registryTemplatePath, this._subjectTypePath);
     }
   }
 
-  private async registerGeneratedSubjectsAsSubjectTypes(subjectDetails: SubjectDetail[]): Promise<void> {
+  private async registerGeneratedSubjectsAsSubjectTypes(subjectDetails: ISubjectDetail[]): Promise<void> {
     const subjectTypeImportsAndExports = this.buildSubjectTypeExport(subjectDetails);
     const subject = { content: this.setSubjectTypeContent() };
 
@@ -75,7 +90,7 @@ export class SubjectRegistration {
     }
   }
 
-  private buildSubjectTypeExport(subjectDetails: SubjectDetail[]): string {
+  private buildSubjectTypeExport(subjectDetails: ISubjectDetail[]): string {
     const subjectTypeEntries = subjectDetails
       .map(
         (details) =>
@@ -91,13 +106,13 @@ export class SubjectRegistration {
     return newSubjectTypes;
   }
 
-  private addPathRecordsToContent(content: string, subjectDetails: SubjectDetail[]): string {
+  private addPathRecordsToContent(content: string, subjectDetails: ISubjectDetail[]): string {
     const pathRecordsString = this.buildPathRecordsString(subjectDetails);
     const stringToMatch = "none: ''";
     return content.replace(stringToMatch, `\n${pathRecordsString}\n    `);
   }
 
-  private buildPathRecordsString(subjectDetails: SubjectDetail[]): string {
+  private buildPathRecordsString(subjectDetails: ISubjectDetail[]): string {
     return subjectDetails
       .map(
         (details) =>
@@ -107,14 +122,14 @@ export class SubjectRegistration {
       .join('\n    ');
   }
 
-  private getAllSubjectDetails(): SubjectDetail[] {
-    const subjectsDir = path.resolve(this._currentDirname, '../../test-artifacts/subjects');
+  private getAllSubjectDetails(): ISubjectDetail[] {
+    const subjectsDir = this._subjectsDirectory;
 
     const subjectFolders = fs.readdirSync(subjectsDir).filter((file) => {
       return fs.statSync(path.join(subjectsDir, file)).isDirectory();
     });
 
-    const subjectDetails: SubjectDetail[] = [];
+    const subjectDetails: ISubjectDetail[] = [];
     const seenFullNames = new Set<string>();
 
     subjectFolders.forEach((folder) => {
@@ -134,7 +149,7 @@ export class SubjectRegistration {
             const fullName = variantMatch[0];
             if (!seenFullNames.has(fullName)) {
               const variant = variantMatch[2] || '';
-              const screen = variantMatch[3] as SubjectDetail['screen'];
+              const screen = variantMatch[3] as ScreenContext;
 
               subjectDetails.push({
                 subject: folder,
@@ -150,9 +165,3 @@ export class SubjectRegistration {
     return subjectDetails;
   }
 }
-
-export interface SubjectDetail {
-  subject: string;
-  variant?: string;
-  screen: 'Main' | 'Popup' | 'Zoom' | 'Detail';
-}

package/artifact-builder/TsFileModel.ts

@@ -0,0 +1,94 @@
+/**
+ * Represents a single named import member.
+ * Set `isTypeOnly` for inline `type` keyword, e.g. `import { type IFoo, Bar }`.
+ */
+export interface TsNamedImport {
+  name: string;
+  isTypeOnly?: boolean;
+}
+
+/**
+ * Represents a single import statement in a TypeScript file.
+ * Set `isTypeOnly` at the top level for `import type { ... }`.
+ */
+export interface TsImport {
+  namedImports: TsNamedImport[];
+  isTypeOnly: boolean;
+  from: string;
+}
+
+/** Represents a class property declaration. */
+export interface TsProperty {
+  access?: 'private';
+  name: string;
+  type: string;
+}
+
+/** Represents a `this.x = value;` assignment inside a constructor. */
+export interface TsConstructorAssignment {
+  property: string;
+  value: string;
+}
+
+/** Represents a class constructor. */
+export interface TsConstructor {
+  params: Array<{ name: string; type: string }>;
+  superCall: string;
+  assignments: TsConstructorAssignment[];
+  extraLines: string[];
+}
+
+/** Represents a class method. */
+export interface TsMethod {
+  isAsync: boolean;
+  name: string;
+  returnType: string;
+  bodyLines: string[];
+}
+
+/** Represents a TypeScript class declaration. */
+export interface TsClass {
+  name: string;
+  extendsClass: string;
+  implementsInterface: string;
+  properties: TsProperty[];
+  constructor: TsConstructor;
+  methods?: TsMethod[];
+}
+
+/** Top-level model for a generated TypeScript subject class file. */
+export interface TsFileModel {
+  imports: TsImport[];
+  classModel: TsClass;
+}
+
+/** Represents a typed property in a component class. */
+export interface ComponentPropertyModel {
+  name: string;
+  type: string;
+}
+
+/** Represents a `this.x = value;` assignment in a component class constructor. */
+export interface ComponentAssignmentModel {
+  property: string;
+  value: string;
+}
+
+/** Represents a getter in a Grid component class. */
+export interface ComponentGetterModel {
+  name: string;
+  returnType: string;
+  bodyLine: string;
+}
+
+/**
+ * Represents the class body to append to a component interface file.
+ * Properties and assignments apply to Form; getters apply to Grid.
+ */
+export interface ComponentClassModel {
+  interfaceName: string;
+  componentType: string;
+  properties: ComponentPropertyModel[];
+  assignments: ComponentAssignmentModel[];
+  getters: ComponentGetterModel[];
+}