@atlaskit/forge-react-types 0.1.1

package/scripts/codegen/codeGenerator.ts

@@ -0,0 +1,431 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import {
+  Symbol,
+  SourceFile,
+  TypeAliasDeclaration,
+  ImportDeclaration,
+} from 'ts-morph';
+
+const getNames = (symbol: Symbol) => {
+  const name = symbol.getName();
+  return [name, symbol.getAliasedSymbol()?.getName() ?? name];
+};
+
+const getDeclaration = (symbol: Symbol) => {
+  const declaration = symbol.getDeclarations()[0];
+  if (!declaration) {
+    throw new Error(
+      'Could not find declaration for symbol: ' + symbol.getName(),
+    );
+  }
+  return declaration;
+};
+
+/**
+ * @param {Symbol} componentSymbol is the component symbol declared in
+ *     the component index file. e.g.
+ *     export type { SimpleTagProps as TagProps } from './tag/__generated__/index.partial';
+ * @param {SourceFile} sourceFile is the source file of the component prop symbol
+ *     that was extracted from the component index file.
+ * @return {Symbol} the base component symbol that is defined in the source file.
+ */
+const getBaseComponentSymbol = (
+  componentSymbol: Symbol,
+  sourceFile: SourceFile,
+) => {
+  const symbol = sourceFile.getExportSymbols().find((symbol) => {
+    // The base component symbol can be aliased, so we need to check both the
+    // symbol name and the aliased symbol name.
+    return getNames(componentSymbol).includes(symbol.getName());
+  });
+  if (!symbol) {
+    throw new Error(
+      'Could not find base component symbol for component: ' +
+        componentSymbol.getName(),
+    );
+  }
+  return symbol;
+};
+
+/**
+ * from the base component prop symbol, extract other relevant type declarations.
+ * For example, the base component prop symbol declaration might look like:
+ *
+ * export type ButtonProps = Pick<
+ * PlatformButtonProps,
+ * 'onFocus' | 'spacing' | 'testId' | 'shouldFitContainer' | 'appearance' | 'type'>
+ *
+ * This function will extract the PlatformButtonProps type declaration.
+ */
+const getDependentTypeDeclarations = (
+  baseComponentPropSymbol: Symbol,
+  sourceFile: SourceFile,
+) => {
+  return sourceFile.getTypeAliases().reduce((declarations, typeAlias) => {
+    const typeAliasName = typeAlias.getName();
+    if (
+      typeAliasName !== baseComponentPropSymbol.getName() &&
+      getDeclaration(baseComponentPropSymbol).getText().includes(typeAliasName)
+    ) {
+      declarations.push(typeAlias);
+    }
+    return declarations;
+  }, [] as Array<TypeAliasDeclaration>);
+};
+
+/**
+ * if the import is:
+ *   import DefaultBox, { Box as PlatformBox } from '@atlaskit/primitives';
+ * extract:
+ *  {
+ *    default: 'DefaultBox',
+ *    named: ['PlatformBox']
+ *  }
+ */
+const getImportedNames = (importDeclaration: ImportDeclaration) => {
+  return {
+    default: importDeclaration.getDefaultImport()?.getText() ?? null,
+    named: importDeclaration
+      .getNamedImports()
+      .map((specifier) => {
+        return specifier.getAliasNode()?.getText() ?? specifier.getName();
+      })
+      .filter((name) => !!name) as string[],
+  };
+};
+
+const isTokenUsed = (token: string, codes: string[]) => {
+  const check = new RegExp(`\\b${token}\\b`);
+  return codes.some((code) => check.test(code));
+};
+
+/**
+ * implement a custom ImportDeclaration object that allows remove named import
+ * and re-generate the modified import statement.
+ * This is for solving the edge case raised from DynamicTableProps.
+ */
+class ImportDeclarationProxy {
+  private readonly base: ImportDeclaration;
+
+  private removedNamedImports = new Set<string>();
+
+  constructor(base: ImportDeclaration) {
+    this.base = base;
+  }
+
+  public removeNamedImport(namedImport: string) {
+    const target = this.base
+      .getNamedImports()
+      .find((tar) =>
+        [tar.getName(), tar.getAliasNode()?.getText()].includes(namedImport),
+      );
+    if (target) {
+      this.removedNamedImports.add(namedImport);
+    }
+  }
+
+  public getText() {
+    if (this.removedNamedImports.size > 0) {
+      const code = this.base.getText();
+      const matches = code.match(
+        /^(import |import type ){(.+)} from \'(.+)\';$/,
+      )!;
+      const importedNames = matches[2]!
+        .split(',')
+        .map((text) => text.trim())
+        .filter((text) => !this.removedNamedImports.has(text));
+
+      return `${matches[1]}{ ${importedNames.join(', ')} } from '${
+        matches[3]
+      }';`;
+    }
+    return this.base.getText();
+  }
+}
+
+const extractImportDeclarations = (
+  sourceFile: SourceFile,
+  componentPropSymbol: Symbol,
+  dependentTypeDeclarations: TypeAliasDeclaration[],
+) => {
+  const componentDeclarationCode =
+    getDeclaration(componentPropSymbol).getText();
+
+  const targetCodes = [
+    componentDeclarationCode,
+    ...dependentTypeDeclarations
+      .map((typeAlias) => typeAlias.getText())
+      .filter((code) => !!code),
+  ];
+  return sourceFile
+    .getImportDeclarations()
+    .filter((declaration) => {
+      const moduleSpecifier = declaration.getModuleSpecifierValue();
+      // only keep dependencies from @atlaskit and react
+      return (
+        moduleSpecifier.startsWith('@atlaskit/') || moduleSpecifier === 'react'
+      );
+    })
+    .reduce<ImportDeclarationProxy[]>((declarations, declaration) => {
+      // further filter out the the imports that are not used in the component specified.
+      const importedNames = getImportedNames(declaration);
+      const declarationProxy = new ImportDeclarationProxy(declaration);
+      let used = false;
+      if (
+        importedNames.default &&
+        isTokenUsed(importedNames.default, targetCodes)
+      ) {
+        used = true;
+      }
+      importedNames.named.forEach((namedImport) => {
+        if (isTokenUsed(namedImport, targetCodes)) {
+          used = true;
+        } else {
+          declarationProxy.removeNamedImport(namedImport);
+        }
+      });
+      if (used) {
+        declarations.push(declarationProxy);
+      }
+      return declarations;
+    }, []);
+};
+
+const getTypeDeclarationCodeFromImport = (
+  sourceFile: SourceFile,
+  packageName: string,
+  typeName: string,
+) => {
+  const importDeclaration = sourceFile.getImportDeclarationOrThrow(packageName);
+  const importSpecifier = importDeclaration
+    .getNamedImports()
+    .find(
+      (specifier) =>
+        specifier.getName() === typeName ||
+        specifier.getAliasNode()?.getText() === typeName,
+    );
+  const importTypeSymbol = importSpecifier?.getSymbol()?.getAliasedSymbol();
+  if (!importTypeSymbol) {
+    throw new Error(`Could not find type for ${typeName} in ${packageName}`);
+  }
+  const importSourcePath = importTypeSymbol
+    .getDeclarations()[0]
+    .getType()
+    .getText()
+    .match(/import\("(.+)"\)/)?.[1];
+  if (!importSourcePath) {
+    throw new Error(
+      `Could not find import source for ${typeName} in ${packageName}`,
+    );
+  }
+
+  const importSource = sourceFile
+    .getProject()
+    .addSourceFileAtPath(importSourcePath + '.ts');
+  try {
+    const typeDeclarationCode = importSource
+      .getExportSymbols()
+      .find(
+        (symbol) =>
+          symbol.getName() === typeName ||
+          symbol.getName() === importTypeSymbol.getName(),
+      )
+      ?.getDeclarations()[0]
+      ?.getText();
+    if (!typeDeclarationCode) {
+      return null;
+    }
+    if (importTypeSymbol.getName() !== typeName) {
+      return `${typeDeclarationCode}
+type ${typeName} = ${importTypeSymbol.getName()};
+`;
+    }
+    return typeDeclarationCode;
+  } finally {
+    sourceFile.getProject().removeSourceFile(importSource);
+  }
+};
+
+/**
+ * resolve types that are not part of the ADS components, and generate them
+ * locally. As we want to make sure that the package only depends on ADS
+ * types and not on any other package types.
+ */
+const resolveExternalTypesCode = (
+  sourceFile: SourceFile,
+  componentPropSymbol: Symbol,
+  dependentTypeDeclarations: TypeAliasDeclaration[],
+) => {
+  // resolve types from @atlassian/forge-ui-types
+  const forgeUITypesImports = sourceFile
+    .getImportDeclarations()
+    .filter((declaration) => {
+      const moduleSpecifier = declaration.getModuleSpecifierValue();
+      return moduleSpecifier === '@atlassian/forge-ui-types';
+    });
+  if (forgeUITypesImports.length === 0) {
+    return null;
+  }
+
+  // only the type name that are used in the component prop type should be
+  // resolved
+  const targetImportedTypeNames = forgeUITypesImports.reduce<string[]>(
+    (importedTypeNames, imports) => {
+      const names = getImportedNames(imports);
+      const targetCodes = [
+        getDeclaration(componentPropSymbol).getText(),
+        ...dependentTypeDeclarations.map((typeAlias) => typeAlias.getText()),
+      ];
+      [names.default, ...names.named].forEach((importName) => {
+        if (
+          importName &&
+          !importedTypeNames.includes(importName) &&
+          isTokenUsed(importName, targetCodes)
+        ) {
+          importedTypeNames.push(importName);
+        }
+      });
+      return importedTypeNames;
+    },
+    [],
+  );
+  const declarationCode = targetImportedTypeNames
+    .map((typeName) => {
+      return getTypeDeclarationCodeFromImport(
+        sourceFile,
+        '@atlassian/forge-ui-types',
+        typeName,
+      );
+    })
+    .filter((code) => !!code)
+    .join('\n');
+
+  return !!declarationCode ? declarationCode : null;
+};
+
+type CodeConsolidator = (context: {
+  sourceFile: SourceFile;
+  importCode?: string | null;
+  externalTypesCode?: string | null;
+  dependentTypeCode?: string | null;
+  componentPropCode?: string | null;
+}) => string;
+
+const consolidateCodeSections: CodeConsolidator = ({
+  importCode,
+  externalTypesCode,
+  dependentTypeCode,
+  componentPropCode,
+}) => {
+  return [importCode, externalTypesCode, dependentTypeCode, componentPropCode]
+    .filter((code) => !!code)
+    .join('\n\n');
+};
+
+const baseGenerateComponentPropTypeSourceCode = (
+  componentPropSymbol: Symbol,
+  sourceFile: SourceFile,
+  customConsolidator?: CodeConsolidator,
+) => {
+  // 1) extract the prop types from the source file
+  const baseComponentPropSymbol = getBaseComponentSymbol(
+    componentPropSymbol,
+    sourceFile,
+  );
+
+  // 2) from the prop type code further extract other relevant types in the source file
+  const dependentTypeDeclarations = getDependentTypeDeclarations(
+    baseComponentPropSymbol,
+    sourceFile,
+  );
+
+  // 3) extract the import statement
+  const importDeclarations = extractImportDeclarations(
+    sourceFile,
+    baseComponentPropSymbol,
+    dependentTypeDeclarations,
+  );
+
+  // 4) resolve other types definition (not part of the ADS components)
+  const externalTypesCode = resolveExternalTypesCode(
+    sourceFile,
+    baseComponentPropSymbol,
+    dependentTypeDeclarations,
+  );
+
+  // 5) generate the source file
+  const importCode = importDeclarations
+    .map((declaration) => declaration.getText())
+    .join('\n');
+  const dependentTypeCode = dependentTypeDeclarations
+    .map((typeAlias) => typeAlias.getText())
+    .join('\n');
+  const componentPropCode = getDeclaration(baseComponentPropSymbol).getText();
+
+  return (customConsolidator ?? consolidateCodeSections)({
+    sourceFile,
+    importCode,
+    externalTypesCode,
+    dependentTypeCode,
+    componentPropCode,
+  });
+};
+
+const boxPropsCodeConsolidator: CodeConsolidator = ({
+  sourceFile,
+  importCode,
+  externalTypesCode,
+  dependentTypeCode,
+  componentPropCode,
+}) => {
+  const xcssValidator = sourceFile
+    .getVariableDeclarationOrThrow('xcssValidator')
+    .getText();
+
+  const utilsFile = sourceFile
+    .getProject()
+    .addSourceFileAtPath(
+      require.resolve(
+        '@atlassian/forge-ui/src/components/utils/xcssValidate.ts',
+      ),
+    );
+  try {
+    const xcssValidatorDeclarationCode = utilsFile.getEmitOutput({
+      emitOnlyDtsFiles: true,
+    }).compilerObject.outputFiles[0].text;
+    const xcssValidatorVariableDeclarationCode = [
+      xcssValidatorDeclarationCode,
+      `const ${xcssValidator};`,
+    ].join('\n');
+
+    return [
+      '/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */',
+      importCode,
+      xcssValidatorVariableDeclarationCode,
+      externalTypesCode,
+      dependentTypeCode,
+      componentPropCode,
+    ]
+      .filter((code) => !!code)
+      .join('\n\n');
+  } finally {
+    sourceFile.getProject().removeSourceFile(utilsFile);
+  }
+};
+
+const codeConsolidators: Record<string, CodeConsolidator> = {
+  BoxProps: boxPropsCodeConsolidator,
+};
+
+const generateComponentPropTypeSourceCode = (
+  componentPropSymbol: Symbol,
+  sourceFile: SourceFile,
+) => {
+  return baseGenerateComponentPropTypeSourceCode(
+    componentPropSymbol,
+    sourceFile,
+    codeConsolidators[componentPropSymbol.getName()],
+  );
+};
+
+export { generateComponentPropTypeSourceCode };

package/scripts/codegen/componentPropTypes.ts

@@ -0,0 +1,273 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import { createSignedArtifact } from '@atlassian/codegen';
+import { Project } from 'ts-morph';
+import type { Symbol, SourceFile, ExportSpecifier, Node } from 'ts-morph';
+import { resolve } from 'path';
+import fs from 'fs';
+import { generateComponentPropTypeSourceCode } from './codeGenerator';
+
+const forgeUIProject = new Project({
+  tsConfigFilePath: require.resolve('@atlassian/forge-ui/tsconfig.json'),
+  skipAddingFilesFromTsConfig: true,
+});
+
+const isExportSpecifier = (node: Node): node is ExportSpecifier =>
+  'getExportDeclaration' in node;
+
+const isSourceFile = (node: Node): node is SourceFile => 'getFilePath' in node;
+
+/**
+ * This function tries to resolve the source file of a component symbol on
+ * the component index file. e.g.
+ *   export { Badge } from './badge/__generated__/index.partial';
+ * in the index file will resolve to:
+ *   platform/packages/forge/forge-ui/src/components/UIKit2-codegen/badge/__generated__/index.partial.tsx
+ */
+const loadComponentSourceFile = (
+  componentSymbol: Symbol,
+  project: Project,
+): SourceFile | null => {
+  const declaration = componentSymbol.getDeclarations()[0];
+  if (!declaration || !isExportSpecifier(declaration)) {
+    return null;
+  }
+  const importSrcDeclaration = declaration
+    .getExportDeclaration()
+    .getModuleSpecifier()
+    ?.getSymbol()
+    ?.getValueDeclaration();
+  if (!importSrcDeclaration || !isSourceFile(importSrcDeclaration)) {
+    return null;
+  }
+  const importSrc = importSrcDeclaration.getFilePath();
+  const sourceFile = project.addSourceFileAtPath(importSrc);
+  const baseComponentSymbol = findBaseSymbolFromSourceFile(
+    sourceFile,
+    componentSymbol,
+  );
+  if (!baseComponentSymbol) {
+    return sourceFile;
+  }
+  // recursively resolve the source file of the base component symbol, it is
+  // needed for TagProps
+  let nestedSourceFile = loadComponentSourceFile(baseComponentSymbol!, project);
+  try {
+    return nestedSourceFile ?? sourceFile;
+  } finally {
+    if (nestedSourceFile) {
+      // unload the parent source file if nested source file is found
+      project.removeSourceFile(sourceFile);
+    }
+  }
+};
+
+const findBaseSymbolFromSourceFile = (
+  sourceFile: SourceFile,
+  symbol: Symbol,
+) => {
+  return sourceFile.getExportSymbols().find((exportSymbol) => {
+    return (
+      exportSymbol.getName() === symbol.getName() ||
+      exportSymbol.getName() === symbol.getAliasedSymbol()!.getName()
+    );
+  });
+};
+
+const makeComponentPropTypeSourceCode = (
+  componentSymbol: Symbol,
+  componentSourceFile: SourceFile,
+) => {
+  const baseComponentSymbol = findBaseSymbolFromSourceFile(
+    componentSourceFile,
+    componentSymbol,
+  );
+  if (!baseComponentSymbol) {
+    throw new Error(
+      'Could not find base component symbol for component: ' +
+        componentSymbol.getName(),
+    );
+  }
+
+  return generateComponentPropTypeSourceCode(
+    componentSymbol,
+    componentSourceFile,
+  );
+};
+
+const generateComponentPropTypeSourceFiles = (
+  componentOutputDir: string,
+  componentPropTypeSymbols: Symbol[],
+) => {
+  // eslint-disable-next-line no-console
+  console.log('Generating component prop type source files');
+
+  // iterate component prop declarations in the index file
+  componentPropTypeSymbols.forEach((componentSymbol) => {
+    const componentSourceFile = loadComponentSourceFile(
+      componentSymbol,
+      forgeUIProject,
+    );
+    if (componentSourceFile) {
+      try {
+        const sourceCode = makeComponentPropTypeSourceCode(
+          componentSymbol,
+          componentSourceFile,
+        );
+        const sourceFilePath = resolve(
+          componentOutputDir,
+          `${componentSymbol.getName()}.tsx`,
+        );
+
+        const signedSourceCode = createSignedArtifact(
+          sourceCode,
+          'yarn workspace @atlaskit/forge-react-types codegen',
+          {
+            description: `Extract component prop types from UIKit 2 components - ${componentSymbol.getName()}`,
+            dependencies: [componentSourceFile.getFilePath()],
+            outputFolder: componentOutputDir,
+          },
+        );
+        fs.writeFileSync(sourceFilePath, signedSourceCode);
+
+        // eslint-disable-next-line no-console
+        console.log(
+          `Generated component prop type file: ${componentSymbol.getName()}`,
+        );
+      } finally {
+        forgeUIProject.removeSourceFile(componentSourceFile);
+      }
+    } else {
+      // eslint-disable-next-line no-console
+      console.error(
+        `Could not find source file for component: ${componentSymbol.getName()}`,
+      );
+    }
+  });
+};
+
+const generateComponentIndexSourceFile = (
+  componentOutputDir: string,
+  componentPropTypeSymbols: Symbol[],
+) => {
+  // eslint-disable-next-line no-console
+  console.log('Generating index file for component prop types');
+
+  const indexFileContent = componentPropTypeSymbols
+    .map((symbol) => {
+      const componentName = symbol.getName();
+      const componentAliasedName = symbol.getAliasedSymbol()?.getName();
+      if (componentName !== componentAliasedName) {
+        return `export type { ${componentAliasedName} as ${componentName} } from './${componentName}';`;
+      } else {
+        return `export type { ${componentName} } from './${componentName}';`;
+      }
+    })
+    .join('\n');
+
+  const indexFilePath = resolve(componentOutputDir, 'index.ts');
+  const signedIndexFileContent = createSignedArtifact(
+    indexFileContent,
+    'yarn workspace @atlaskit/forge-react-types codegen',
+    {
+      description: 'Index file for component prop types',
+      dependencies: componentPropTypeSymbols.map(
+        (symbol) => `${componentOutputDir}/${symbol.getName()}.tsx`,
+      ),
+      outputFolder: componentOutputDir,
+    },
+  );
+  fs.writeFileSync(indexFilePath, signedIndexFileContent);
+};
+
+const updatePackageJsonWithADSComponentDependencies = (
+  componentOutputDir: string,
+) => {
+  // collect all @atlaskit dependencies from the generated code in the component output dir
+  const componentOutputProject = new Project({
+    tsConfigFilePath: require.resolve('../../tsconfig.json'),
+  });
+  const utilizedPackages = componentOutputProject
+    .getSourceFiles(`${componentOutputDir}/*.tsx`)
+    .reduce((packages, source) => {
+      source.getImportDeclarations().forEach((importDeclaration) => {
+        const importPath = importDeclaration.getModuleSpecifierValue();
+        // clean up import path so it contains only @atlaskit/package-name (without @atlaskit/package-name/further)
+        const packageMatch = importPath.match(/(@atlaskit\/[^/]+)/);
+        if (packageMatch) {
+          packages.add(packageMatch[1]);
+        }
+      });
+      return packages;
+    }, new Set<string>());
+
+  // eslint-disable-next-line no-console
+  console.log('Updating package.json with ADS component dependencies');
+
+  const forgeUIPackageJson = JSON.parse(
+    fs
+      .readFileSync(require.resolve('@atlassian/forge-ui/package.json'))
+      .toString(),
+  );
+  const packageJsonPath = resolve(__dirname, '..', '..', 'package.json');
+  const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+  // remove all existing @atlaskit dependencies from packageJson
+  const updatedDependencies = Object.entries<string>(packageJson.dependencies)
+    .filter(([key]) => !key.startsWith('@atlaskit/'))
+    .concat(
+      Object.entries<string>(forgeUIPackageJson.dependencies).filter(([key]) =>
+        utilizedPackages.has(key),
+      ),
+    )
+    .sort(([a], [b]) => a.localeCompare(b))
+    .reduce<Record<string, string>>((acc, [key, value]) => {
+      acc[key] = value;
+      return acc;
+    }, {});
+
+  packageJson.dependencies = updatedDependencies;
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+};
+
+const generateComponentPropTypes = (componentPropTypeFilter?: string) => {
+  const componentOutputDir = resolve(
+    __dirname,
+    '..',
+    '..',
+    'src',
+    'components',
+    '__generated__',
+  );
+  const componentIndexSourceFile = forgeUIProject.addSourceFileAtPath(
+    require.resolve('@atlassian/forge-ui/src/components/UIKit2-codegen'),
+  );
+  try {
+    const componentPropTypeSymbols = componentIndexSourceFile
+      .getExportSymbols()
+      .filter((symbol) =>
+        symbol.getName().endsWith(componentPropTypeFilter ?? 'Props'),
+      )
+      .sort((a, b) => a.getName().localeCompare(b.getName()));
+
+    generateComponentPropTypeSourceFiles(
+      componentOutputDir,
+      componentPropTypeSymbols,
+    );
+
+    // only generate index file if componentPropTypeFilter is not provided
+    // this is to avoid overwriting the index file when generating a single
+    // component.
+    if (!componentPropTypeFilter) {
+      generateComponentIndexSourceFile(
+        componentOutputDir,
+        componentPropTypeSymbols,
+      );
+    }
+
+    updatePackageJsonWithADSComponentDependencies(componentOutputDir);
+  } finally {
+    forgeUIProject.removeSourceFile(componentIndexSourceFile);
+  }
+};
+
+export { generateComponentPropTypes };

package/scripts/codegen/index.tsx

@@ -0,0 +1 @@
+export { generateComponentPropTypes } from './componentPropTypes';

package/scripts/codegen-runner.ts

@@ -0,0 +1,9 @@
+import { generateComponentPropTypes } from './codegen';
+
+if (process.argv.length < 3) {
+  generateComponentPropTypes();
+} else {
+  // e.g yarn workspace @atlaskit/forge-react-types codegen ButtonProp
+  const componentPropTypeFilter = process.argv[2];
+  generateComponentPropTypes(componentPropTypeFilter);
+}