@aws/nx-plugin 0.0.0

package/src/trpc/react/README.md

@@ -0,0 +1,320 @@
+# tRPC React Generator
+
+## Overview
+This generator adds tRPC client integration to your React application, enabling type-safe API calls to your tRPC backend. It sets up all necessary configuration for connecting to your tRPC backend, including AWS IAM authentication support and proper error handling. The integration provides full end-to-end type safety between your frontend and backend.
+
+## Prerequisites
+
+Before using this generator, ensure your React application has:
+
+1. A `main.tsx` file that renders your application
+2. An `<App/>` JSX element where the tRPC provider will be automatically injected
+3. A working tRPC backend (generated using the tRPC backend generator)
+
+Example of required `main.tsx` structure:
+```tsx
+import { StrictMode } from 'react';
+import * as ReactDOM from 'react-dom/client';
+import App from './app/app';
+
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement
+);
+root.render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+```
+
+## Usage
+
+You can generate the tRPC React integration in two ways:
+
+### 1. Using VSCode IDE
+
+First, install the NX Console extension for VSCode:
+1. Open VSCode
+2. Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
+3. Search for "Nx Console"
+4. Install [Nx Console](https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console)
+
+Then add tRPC to your React application:
+1. Open the NX Console in VSCode
+2. Click on "Generate"
+3. Search for "trpc#react"
+4. Fill in the required parameters in the form
+5. Click "Run"
+
+### 2. Using CLI
+
+Add tRPC to your React application:
+```bash
+nx g @aws/nx-plugin:trpc#react --frontendProjectName=my-app --backendProjectName=my-api --auth=IAM
+```
+
+You can also perform a dry-run to see what files would be generated without actually creating them:
+```bash
+nx g @aws/nx-plugin:trpc#react --frontendProjectName=my-app --backendProjectName=my-api --auth=IAM --dry-run
+```
+
+Both methods will add tRPC client integration to your React application with all the necessary configuration.
+
+## Input Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| frontendProjectName* | string | - | The name of your React application project (required). |
+| backendProjectName* | string | - | The name of your tRPC backend project (required). |
+| auth* | string | "IAM" | Authentication strategy. Options: "IAM", "None" |
+
+*Required parameter
+
+## Expected Output
+
+The generator creates the following structure in your React application:
+
+```
+src/
+├── components/
+│   └── TRPCClientProvider/
+│       └── index.tsx      # tRPC client configuration and provider
+└── hooks/
+    └── useTrpc.tsx       # Custom hook for using tRPC client
+```
+
+Additionally, it:
+1. Installs required dependencies:
+   - @trpc/client
+   - @trpc/react-query
+   - @tanstack/react-query
+   - aws4fetch (if using IAM auth)
+
+## Using the Generated Code
+
+### Using the tRPC Hook
+
+The generator provides a `useTrpc` hook that gives you access to the type-safe tRPC client:
+
+```tsx
+import { useTrpc } from './hooks/useTrpc';
+
+function MyComponent() {
+  const trpc = useTrpc();
+
+  // Example query
+  const { data, isLoading } = trpc.users.list.useQuery();
+
+  // Example mutation
+  const mutation = trpc.users.create.useMutation();
+
+  const handleCreate = () => {
+    mutation.mutate({
+      name: 'John Doe',
+      email: 'john@example.com'
+    });
+  };
+
+  if (isLoading) return <div>Loading...</div>;
+
+  return (
+    <div>
+      {/* Your component JSX */}
+    </div>
+  );
+}
+```
+
+### Error Handling
+
+The integration includes built-in error handling that properly processes tRPC errors:
+
+```tsx
+function MyComponent() {
+  const trpc = useTrpc();
+
+  const { data, error } = trpc.users.list.useQuery();
+
+  if (error) {
+    return (
+      <div>
+        <h2>Error occurred:</h2>
+        <p>{error.message}</p>
+        {error.data?.code && <p>Code: {error.data.code}</p>}
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      {/* Your component JSX */}
+    </div>
+  );
+}
+```
+
+## Best Practices
+
+### 1. Handle Loading States
+
+Always handle loading states for better user experience:
+
+```tsx
+function UserList() {
+  const { users } = useUsers();
+
+  if (users.isLoading) {
+    return <LoadingSpinner />;
+  }
+
+  if (users.error) {
+    return <ErrorMessage error={users.error} />;
+  }
+
+  return (
+    <ul>
+      {users.data.map(user => (
+        <li key={user.id}>{user.name}</li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### 2. Optimistic Updates
+
+Use optimistic updates for better user experience:
+
+```tsx
+function UserList() {
+  const trpc = useTrpc();
+  const utils = trpc.useUtils();
+
+  const deleteMutation = trpc.users.delete.useMutation({
+    onMutate: async (userId) => {
+      // Cancel outgoing fetches
+      await utils.users.list.cancel();
+
+      // Get snapshot of current data
+      const previousUsers = utils.users.list.getData();
+
+      // Optimistically remove the user
+      utils.users.list.setData(undefined, (old) => 
+        old?.filter(user => user.id !== userId)
+      );
+
+      return { previousUsers };
+    },
+    onError: (err, userId, context) => {
+      // Restore previous data on error
+      utils.users.list.setData(undefined, context?.previousUsers);
+    }
+  });
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li key={user.id}>
+          {user.name}
+          <button onClick={() => deleteMutation.mutate(user.id)}>
+            Delete
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### 3. Prefetching Data
+
+Prefetch data for better performance:
+
+```tsx
+function UserList() {
+  const trpc = useTrpc();
+
+  // Prefetch user details on hover
+  const prefetchUser = async (userId: string) => {
+    await trpc.users.getById.usePrefetchQuery(userId);
+  };
+
+  return (
+    <ul>
+      {users.map(user => (
+        <li 
+          key={user.id}
+          onMouseEnter={() => prefetchUser(user.id)}
+        >
+          <Link to={`/users/${user.id}`}>
+            {user.name}
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
+### 4. Infinite Queries
+
+Handle pagination with infinite queries:
+
+```tsx
+function UserList() {
+  const trpc = useTrpc();
+
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage
+  } = trpc.users.list.useInfiniteQuery(
+    { limit: 10 },
+    {
+      getNextPageParam: (lastPage) => lastPage.nextCursor,
+    }
+  );
+
+  return (
+    <div>
+      {data?.pages.map((page) => (
+        page.users.map(user => (
+          <UserCard key={user.id} user={user} />
+        ))
+      ))}
+
+      {hasNextPage && (
+        <button
+          onClick={() => fetchNextPage()}
+          disabled={isFetchingNextPage}
+        >
+          {isFetchingNextPage ? 'Loading...' : 'Load More'}
+        </button>
+      )}
+    </div>
+  );
+}
+```
+
+## Type Safety
+
+The integration provides complete end-to-end type safety. Your IDE will provide full autocompletion and type checking for all your API calls:
+
+```tsx
+function UserForm() {
+  const trpc = useTrpc();
+  
+  // ✅ Input is fully typed
+  const createUser = trpc.users.create.useMutation();
+  
+  const handleSubmit = (data: CreateUserInput) => {
+    // ✅ Type error if input doesn't match schema
+    createUser.mutate(data);
+  };
+  
+  return <form onSubmit={handleSubmit}>{/* ... */}</form>;
+}
+```
+
+The types are automatically inferred from your backend's router and schema definitions, ensuring that any changes to your API are immediately reflected in your frontend code without the need to build.

package/src/trpc/react/__snapshots__/generator.spec.ts.snap

@@ -0,0 +1,98 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`trpc react generator > should generate trpc react files > TRPCClientProvider.tsx 1`] = `
+"import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/react-query';
+import { useContext, useState, FC } from 'react';
+import { useTrpc } from '../../hooks/useTrpc';
+import { RuntimeConfigContext } from '../RuntimeConfig';
+
+const TRPCClientProvider: FC<any> = ({ children }) => {
+  const trpc = useTrpc();
+  const runtimeContext = useContext(RuntimeConfigContext);
+  const [queryClient] = useState(() => new QueryClient());
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: runtimeContext?.trpcApis?.['TestApi']!,
+        }),
+      ],
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+};
+
+export default TRPCClientProvider;
+"
+`;
+
+exports[`trpc react generator > should generate trpc react files > useTrpc.tsx 1`] = `
+"import type { AppRouter } from 'backend';
+import { createTRPCReact } from '@trpc/react-query';
+
+const trpc = createTRPCReact<AppRouter>();
+export const useTrpc = () => trpc;
+"
+`;
+
+exports[`trpc react generator > should handle IAM auth option > TRPCClientProvider-IAM.tsx 1`] = `
+"import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/react-query';
+import { useContext, useState, FC } from 'react';
+import { useTrpc } from '../../hooks/useTrpc';
+import { RuntimeConfigContext } from '../RuntimeConfig';
+import useSigV4Client from '@aws-northstar/ui/components/CognitoAuth/hooks/useSigv4Client';
+
+const TRPCClientProvider: FC<any> = ({ children }) => {
+  const trpc = useTrpc();
+  const runtimeContext = useContext(RuntimeConfigContext);
+  const [queryClient] = useState(() => new QueryClient());
+  const sigv4Client = useSigV4Client();
+
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      links: [
+        httpBatchLink({
+          url: runtimeContext?.trpcApis?.['TestApi']!,
+          fetch: sigv4Client,
+        }),
+      ],
+    })
+  );
+
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </trpc.Provider>
+  );
+};
+
+export default TRPCClientProvider;
+"
+`;
+
+exports[`trpc react generator > should modify main.tsx correctly > main.tsx 1`] = `
+"import TRPCClientProvider from './components/TRPCClientProvider';
+import RuntimeConfigProvider from './components/RuntimeConfig';
+import { App } from './app';
+import { BrowserRouter } from 'react-router-dom';
+export function Main() {
+  return (
+    <RuntimeConfigProvider>
+      <BrowserRouter>
+        <TRPCClientProvider>
+          <App />
+        </TRPCClientProvider>
+      </BrowserRouter>
+    </RuntimeConfigProvider>
+  );
+}
+"
+`;

package/src/trpc/react/files/src/components/TRPCClientProvider/index.tsx.template

@@ -0,0 +1,34 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/react-query';
+import { useContext, useState, FC } from 'react';
+import { useTrpc } from '../../hooks/useTrpc';
+import { RuntimeConfigContext } from '../RuntimeConfig';
+<% if(auth === 'IAM') { %> import useSigV4Client from "@aws-northstar/ui/components/CognitoAuth/hooks/useSigv4Client"; <% } %>
+
+const TRPCClientProvider: FC<any> = ({ children }) => {
+    const trpc = useTrpc();
+    const runtimeContext = useContext(RuntimeConfigContext);
+    const [queryClient] = useState(() => new QueryClient());
+    <% if(auth === 'IAM') { %> const sigv4Client = useSigV4Client(); <% } %>
+
+    const [trpcClient] = useState(() =>
+        trpc.createClient({
+            links: [
+                httpBatchLink({
+                    url: runtimeContext?.trpcApis?.['<%= apiName %>']!,
+                     <% if(auth === 'IAM') { %> fetch: sigv4Client <% } %>
+                })
+            ],
+        }),
+    );
+
+    return (
+        <trpc.Provider client={trpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+                {children}
+            </QueryClientProvider>
+        </trpc.Provider>
+    );
+};
+
+export default TRPCClientProvider;

package/src/trpc/react/files/src/hooks/useTrpc.tsx.template

@@ -0,0 +1,5 @@
+import type { AppRouter } from '<%= backendProjectAlias %>';
+import { createTRPCReact } from '@trpc/react-query';
+
+const trpc = createTRPCReact<AppRouter>();
+export const useTrpc = () => trpc;

package/src/trpc/react/generator.d.ts

@@ -0,0 +1,4 @@
+import { Tree } from '@nx/devkit';
+import { ReactGeneratorSchema } from './schema';
+export declare function reactGenerator(tree: Tree, options: ReactGeneratorSchema): Promise<() => void>;
+export default reactGenerator;

package/src/trpc/react/generator.js

@@ -0,0 +1,81 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    default: function() {
+        return _default;
+    },
+    reactGenerator: function() {
+        return reactGenerator;
+    }
+});
+const _extends = require("@swc/helpers/_/_extends");
+const _devkit = require("@nx/devkit");
+const _typescript = require("typescript");
+const _tsquery = require("@phenomnomnominal/tsquery");
+const _generator = require("../../cloudscape-website/runtime-config/generator");
+const _npmscope = require("../../utils/npm-scope");
+const _versions = require("../../utils/versions");
+async function reactGenerator(tree, options) {
+    var _backendProjectConfig_metadata;
+    const frontendProjectConfig = (0, _devkit.readProjectConfiguration)(tree, options.frontendProjectName);
+    const backendProjectConfig = (0, _devkit.readProjectConfiguration)(tree, options.backendProjectName);
+    const apiName = (_backendProjectConfig_metadata = backendProjectConfig.metadata) == null ? void 0 : _backendProjectConfig_metadata.apiName;
+    (0, _devkit.generateFiles)(tree, (0, _devkit.joinPathFragments)(__dirname, 'files'), frontendProjectConfig.root, _extends._({
+        apiName
+    }, options, {
+        backendProjectAlias: (0, _npmscope.toScopeAlias)(options.backendProjectName)
+    }));
+    await (0, _generator.runtimeConfigGenerator)(tree, {
+        project: options.frontendProjectName
+    });
+    const mainTsxPath = (0, _devkit.joinPathFragments)(frontendProjectConfig.sourceRoot, 'main.tsx');
+    if (!tree.exists(mainTsxPath)) {
+        throw new Error(`Could not find main.tsx in ${frontendProjectConfig.sourceRoot}`);
+    }
+    const mainTsxContents = tree.read(mainTsxPath).toString();
+    const trpcProviderImport = _typescript.factory.createImportDeclaration(undefined, _typescript.factory.createImportClause(false, _typescript.factory.createIdentifier('TRPCClientProvider'), undefined), _typescript.factory.createStringLiteral('./components/TRPCClientProvider'));
+    const updatedImports = _tsquery.tsquery.map((0, _tsquery.ast)(mainTsxContents), 'SourceFile', (node)=>{
+        return _extends._({}, node, {
+            statements: [
+                trpcProviderImport,
+                ...node.statements
+            ]
+        });
+    }).getFullText();
+    let locatedNode = false;
+    const mainTsxUpdatedContents = _tsquery.tsquery.map((0, _tsquery.ast)(updatedImports), 'JsxSelfClosingElement', (node)=>{
+        if (node.tagName.getText() !== 'App') {
+            return node;
+        } else {
+            locatedNode = true;
+        }
+        return _typescript.factory.createJsxElement(_typescript.factory.createJsxOpeningElement(_typescript.factory.createIdentifier('TRPCClientProvider'), undefined, _typescript.factory.createJsxAttributes([])), [
+            node
+        ], _typescript.factory.createJsxClosingElement(_typescript.factory.createIdentifier('TRPCClientProvider')));
+    }).getFullText();
+    if (!locatedNode) {
+        throw new Error('Could not locate App component in main.tsx');
+    }
+    if (mainTsxContents !== mainTsxUpdatedContents) {
+        tree.write(mainTsxPath, mainTsxUpdatedContents);
+    }
+    (0, _devkit.addDependenciesToPackageJson)(tree, (0, _versions.withVersions)([
+        "@trpc/react-query",
+        "@tanstack/react-query"
+    ]), {});
+    await (0, _devkit.formatFiles)(tree);
+    return ()=>{
+        (0, _devkit.installPackagesTask)(tree);
+    };
+}
+const _default = reactGenerator;
+
+//# sourceMappingURL=generator.js.map

package/src/trpc/react/generator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/nx-plugin/src/trpc/react/generator.ts"],"sourcesContent":["import {\n  addDependenciesToPackageJson,\n  formatFiles,\n  generateFiles,\n  installPackagesTask,\n  joinPathFragments,\n  readProjectConfiguration,\n  Tree,\n} from '@nx/devkit';\nimport { ReactGeneratorSchema } from './schema';\nimport {\n  factory,\n  ImportClause,\n  JsxSelfClosingElement,\n  SourceFile,\n} from 'typescript';\nimport { ast, tsquery } from '@phenomnomnominal/tsquery';\nimport { runtimeConfigGenerator } from '../../cloudscape-website/runtime-config/generator';\nimport { toScopeAlias } from '../../utils/npm-scope';\nimport { withVersions } from '../../utils/versions';\n\nexport async function reactGenerator(\n  tree: Tree,\n  options: ReactGeneratorSchema\n) {\n  const frontendProjectConfig = readProjectConfiguration(\n    tree,\n    options.frontendProjectName\n  );\n  const backendProjectConfig = readProjectConfiguration(\n    tree,\n    options.backendProjectName\n  );\n  const apiName = (backendProjectConfig.metadata as any)?.apiName;\n  generateFiles(\n    tree,\n    joinPathFragments(__dirname, 'files'),\n    frontendProjectConfig.root,\n    {\n      apiName,\n      ...options,\n      backendProjectAlias: toScopeAlias(options.backendProjectName),\n    }\n  );\n\n  await runtimeConfigGenerator(tree, {\n    project: options.frontendProjectName,\n  });\n\n  const mainTsxPath = joinPathFragments(\n    frontendProjectConfig.sourceRoot,\n    'main.tsx'\n  );\n\n  if (!tree.exists(mainTsxPath)) {\n    throw new Error(\n      `Could not find main.tsx in ${frontendProjectConfig.sourceRoot}`\n    );\n  }\n\n  const mainTsxContents = tree.read(mainTsxPath).toString();\n\n  const trpcProviderImport = factory.createImportDeclaration(\n    undefined,\n    factory.createImportClause(\n      false,\n      factory.createIdentifier('TRPCClientProvider'),\n      undefined\n    ) as ImportClause,\n    factory.createStringLiteral('./components/TRPCClientProvider')\n  );\n\n  const updatedImports = tsquery\n    .map(ast(mainTsxContents), 'SourceFile', (node: SourceFile) => {\n      return {\n        ...node,\n        statements: [trpcProviderImport, ...node.statements],\n      };\n    })\n    .getFullText();\n\n  let locatedNode = false;\n  const mainTsxUpdatedContents = tsquery\n    .map(\n      ast(updatedImports),\n      'JsxSelfClosingElement',\n      (node: JsxSelfClosingElement) => {\n        if (node.tagName.getText() !== 'App') {\n          return node;\n        } else {\n            locatedNode = true;\n        }\n\n        return factory.createJsxElement(\n          factory.createJsxOpeningElement(\n            factory.createIdentifier('TRPCClientProvider'),\n            undefined,\n            factory.createJsxAttributes([])\n          ),\n          [node],\n          factory.createJsxClosingElement(\n            factory.createIdentifier('TRPCClientProvider')\n          )\n        );\n      }\n    )\n    .getFullText();\n\n  if (!locatedNode) {\n    throw new Error('Could not locate App component in main.tsx');\n  }\n\n  if (mainTsxContents !== mainTsxUpdatedContents) {\n    tree.write(mainTsxPath, mainTsxUpdatedContents);\n  }\n\n  addDependenciesToPackageJson(\n    tree,\n    withVersions([\n      \"@trpc/react-query\",\n      \"@tanstack/react-query\",\n    ]),\n    {}\n  );\n  await formatFiles(tree);\n\n  return () => {\n    installPackagesTask(tree);\n  };\n}\n\nexport default reactGenerator;\n"],"names":["reactGenerator","tree","options","backendProjectConfig","frontendProjectConfig","readProjectConfiguration","frontendProjectName","backendProjectName","apiName","metadata","generateFiles","joinPathFragments","__dirname","root","backendProjectAlias","toScopeAlias","runtimeConfigGenerator","project","mainTsxPath","sourceRoot","exists","Error","mainTsxContents","read","toString","trpcProviderImport","factory","createImportDeclaration","undefined","createImportClause","createIdentifier","createStringLiteral","updatedImports","tsquery","map","ast","node","statements","getFullText","locatedNode","mainTsxUpdatedContents","tagName","getText","createJsxElement","createJsxOpeningElement","createJsxAttributes","createJsxClosingElement","write","addDependenciesToPackageJson","withVersions","formatFiles","installPackagesTask"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmIA,OAA8B;eAA9B;;IA9GsBA,cAAc;eAAdA;;;;wBAbf;4BAOA;yBACsB;2BACU;0BACV;0BACA;AAEtB,eAAeA,eACpBC,IAAU,EACVC,OAA6B;QAUZC;IARjB,MAAMC,wBAAwBC,IAAAA,gCAAwB,EACpDJ,MACAC,QAAQI,mBAAmB;IAE7B,MAAMH,uBAAuBE,IAAAA,gCAAwB,EACnDJ,MACAC,QAAQK,kBAAkB;IAE5B,MAAMC,WAAWL,iCAAAA,qBAAqBM,QAAQ,qBAA9B,AAACN,+BAAuCK,OAAO;IAC/DE,IAAAA,qBAAa,EACXT,MACAU,IAAAA,yBAAiB,EAACC,WAAW,UAC7BR,sBAAsBS,IAAI,EAC1B;QACEL;OACGN;QACHY,qBAAqBC,IAAAA,sBAAY,EAACb,QAAQK,kBAAkB;;IAIhE,MAAMS,IAAAA,iCAAsB,EAACf,MAAM;QACjCgB,SAASf,QAAQI,mBAAmB;IACtC;IAEA,MAAMY,cAAcP,IAAAA,yBAAiB,EACnCP,sBAAsBe,UAAU,EAChC;IAGF,IAAI,CAAClB,KAAKmB,MAAM,CAACF,cAAc;QAC7B,MAAM,IAAIG,MACR,CAAC,2BAA2B,EAAEjB,sBAAsBe,UAAU,CAAC,CAAC;IAEpE;IAEA,MAAMG,kBAAkBrB,KAAKsB,IAAI,CAACL,aAAaM,QAAQ;IAEvD,MAAMC,qBAAqBC,mBAAO,CAACC,uBAAuB,CACxDC,WACAF,mBAAO,CAACG,kBAAkB,CACxB,OACAH,mBAAO,CAACI,gBAAgB,CAAC,uBACzBF,YAEFF,mBAAO,CAACK,mBAAmB,CAAC;IAG9B,MAAMC,iBAAiBC,gBAAO,CAC3BC,GAAG,CAACC,IAAAA,YAAG,EAACb,kBAAkB,cAAc,CAACc;QACxC,OAAO,eACFA;YACHC,YAAY;gBAACZ;mBAAuBW,KAAKC,UAAU;aAAC;;IAExD,GACCC,WAAW;IAEd,IAAIC,cAAc;IAClB,MAAMC,yBAAyBP,gBAAO,CACnCC,GAAG,CACFC,IAAAA,YAAG,EAACH,iBACJ,yBACA,CAACI;QACC,IAAIA,KAAKK,OAAO,CAACC,OAAO,OAAO,OAAO;YACpC,OAAON;QACT,OAAO;YACHG,cAAc;QAClB;QAEA,OAAOb,mBAAO,CAACiB,gBAAgB,CAC7BjB,mBAAO,CAACkB,uBAAuB,CAC7BlB,mBAAO,CAACI,gBAAgB,CAAC,uBACzBF,WACAF,mBAAO,CAACmB,mBAAmB,CAAC,EAAE,IAEhC;YAACT;SAAK,EACNV,mBAAO,CAACoB,uBAAuB,CAC7BpB,mBAAO,CAACI,gBAAgB,CAAC;IAG/B,GAEDQ,WAAW;IAEd,IAAI,CAACC,aAAa;QAChB,MAAM,IAAIlB,MAAM;IAClB;IAEA,IAAIC,oBAAoBkB,wBAAwB;QAC9CvC,KAAK8C,KAAK,CAAC7B,aAAasB;IAC1B;IAEAQ,IAAAA,oCAA4B,EAC1B/C,MACAgD,IAAAA,sBAAY,EAAC;QACX;QACA;KACD,GACD,CAAC;IAEH,MAAMC,IAAAA,mBAAW,EAACjD;IAElB,OAAO;QACLkD,IAAAA,2BAAmB,EAAClD;IACtB;AACF;MAEA,WAAeD"}

package/src/trpc/react/schema.d.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+//# sourceMappingURL=schema.d.js.map

package/src/trpc/react/schema.d.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../packages/nx-plugin/src/trpc/react/schema.d.ts"],"names":[],"rangeMappings":"","mappings":""}

package/src/trpc/react/schema.d.ts

@@ -0,0 +1,5 @@
+export interface ReactGeneratorSchema {
+  frontendProjectName: string;
+  backendProjectName: string;
+  auth: 'IAM' | 'None';
+}

package/src/trpc/react/schema.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "https://json-schema.org/schema",
+  "$id": "React",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "frontendProjectName": {
+      "type": "string",
+      "description": "",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "React application's project name.",
+      "x-dropdown": "projects"
+    },
+    "backendProjectName": {
+      "type": "string",
+      "description": "",
+      "x-prompt": "Package containing your Api Backend.",
+      "x-dropdown": "projects"
+    },
+    "auth": {
+      "type": "string",
+      "description": "",
+      "x-prompt": "Select your API authentication strategy",
+      "x-dropdown": ["IAM", "None"],
+      "default": "IAM"
+    }
+  },
+  "required": ["frontendProjectName", "backendProjectName", "auth"]
+}

package/src/ts/cjs-to-esm/generator.d.ts

@@ -0,0 +1,8 @@
+import { Tree } from '@nx/devkit';
+import { CjsToEsmGeneratorSchema } from './schema';
+export declare function cjsToEsm(tree: Tree, relativePathInTree: string, options?: {
+    include?: string[];
+    exclude?: string[];
+}): void;
+export declare function cjsToEsmGenerator(tree: Tree, options: CjsToEsmGeneratorSchema): Promise<void>;
+export default cjsToEsmGenerator;