generator.ts

/**
 * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
import {
  addDependenciesToPackageJson,
  generateFiles,
  installPackagesTask,
  joinPathFragments,
  OverwriteStrategy,
  Tree,
} from '@nx/devkit';
import { ReactGeneratorSchema } from './schema';
import { runtimeConfigGenerator } from '../../ts/react-website/runtime-config/generator';
import { toScopeAlias } from '../../utils/npm-scope';
import { withVersions } from '../../utils/versions';
import { addSingleImport, applyGritQL } from '../../utils/ast';
import { toClassName } from '../../utils/names';
import { formatFilesInSubtree } from '../../utils/format';
import {
  NxGeneratorInfo,
  getGeneratorInfo,
  readProjectConfigurationUnqualified,
} from '../../utils/nx';
import { addGeneratorMetricsIfApplicable } from '../../utils/metrics';
import { addTargetToServeLocal } from '../../connection/serve-local';

export const TRPC_REACT_GENERATOR_INFO: NxGeneratorInfo =
  getGeneratorInfo(__filename);

export async function reactGenerator(
  tree: Tree,
  options: ReactGeneratorSchema,
) {
  const frontendProjectConfig = readProjectConfigurationUnqualified(
    tree,
    options.frontendProjectName,
  );
  const backendProjectConfig = readProjectConfigurationUnqualified(
    tree,
    options.backendProjectName,
  );
  /* eslint-disable @typescript-eslint/no-explicit-any */
  const metadata = backendProjectConfig.metadata as any;
  const apiName = metadata.apiName;
  const auth = metadata.auth ?? 'IAM';
  const port = metadata.port ?? metadata.ports?.[0] ?? 2022;
  const isRestApi = metadata.computeType === 'ServerlessApiGatewayRestApi';
  const apiNameClassName = toClassName(apiName);
  const backendProjectAlias = toScopeAlias(backendProjectConfig.name);

  generateFiles(
    tree,
    joinPathFragments(__dirname, 'files'),
    frontendProjectConfig.root,
    {
      apiName,
      apiNameClassName: toClassName(apiName),
      ...options,
      auth,
      isRestApi,
      backendProjectAlias,
    },
    {
      overwriteStrategy: OverwriteStrategy.KeepExisting,
    },
  );

  // Generate the tanstack query provider if it does not exist already
  generateFiles(
    tree,
    joinPathFragments(
      __dirname,
      '../../utils/files/website/components/tanstack-query',
    ),
    joinPathFragments(frontendProjectConfig.sourceRoot, 'components'),
    {},
    {
      overwriteStrategy: OverwriteStrategy.KeepExisting,
    },
  );

  if (auth === 'IAM') {
    generateFiles(
      tree,
      joinPathFragments(__dirname, '../../utils/files/website/hooks/sigv4'),
      joinPathFragments(frontendProjectConfig.sourceRoot, 'hooks'),
      {},
      {
        overwriteStrategy: OverwriteStrategy.KeepExisting,
      },
    );
  }

  await runtimeConfigGenerator(tree, {
    project: frontendProjectConfig.name,
  });

  // update main.tsx
  const mainTsxPath = joinPathFragments(
    frontendProjectConfig.sourceRoot,
    'main.tsx',
  );
  await addSingleImport(
    tree,
    mainTsxPath,
    'QueryClientProvider',
    './components/QueryClientProvider',
  );

  const clientProviderName = `${apiNameClassName}ClientProvider`;
  await addSingleImport(
    tree,
    mainTsxPath,
    clientProviderName,
    `./components/${clientProviderName}`,
  );

  // Wrap <App /> in QueryClientProvider if not already present
  await applyGritQL(
    tree,
    mainTsxPath,
    '`<App />` => `<QueryClientProvider><App /></QueryClientProvider>` where { $program <: not contains `<QueryClientProvider>$_</QueryClientProvider>` }',
  );

  // Wrap <App /> in the tRPC client provider if not already present
  await applyGritQL(
    tree,
    mainTsxPath,
    `\`<App />\` => \`<${clientProviderName}><App /></${clientProviderName}>\` where { $program <: not contains \`<${clientProviderName}>$_</${clientProviderName}>\` }`,
  );

  await addTargetToServeLocal(
    tree,
    frontendProjectConfig.name,
    backendProjectConfig.name,
    {
      url: `http://localhost:${port}/`,
      apiName,
    },
  );

  addDependenciesToPackageJson(
    tree,
    withVersions([
      '@trpc/client',
      '@trpc/tanstack-react-query',
      '@tanstack/react-query',
      '@tanstack/react-query-devtools',
      ...((isRestApi && auth !== 'None'
        ? ['event-source-polyfill']
        : []) as any),
      ...((auth === 'IAM'
        ? [
            'oidc-client-ts',
            'aws4fetch',
            '@aws-sdk/credential-providers',
            'react-oidc-context',
          ]
        : []) as any),
      ...((auth === 'Cognito' ? ['react-oidc-context'] : []) as any),
    ]),
    withVersions([
      '@smithy/types',
      ...((isRestApi && auth !== 'None'
        ? ['@types/event-source-polyfill']
        : []) as any),
    ]),
  );

  await addGeneratorMetricsIfApplicable(tree, [TRPC_REACT_GENERATOR_INFO]);

  await formatFilesInSubtree(tree);
  return () => {
    installPackagesTask(tree);
  };
}
export default reactGenerator;