feat(nx-plugin): add trpc dependencies to auto install, fix project c…

…onfig, improve templates peer dependencies for tRPC client are now auto installed if user opts to use trpc in their project. also made minor improvements to make vite.config and tRPC config match. continued to improve styling of template files, but this is still biggest work in progress.
analogjs · May 10, 2023 · 762efe1 · 762efe1
1 parent 0e47b22
commit 762efe1
Show file tree

Hide file tree

Showing 15 changed files with 79 additions and 14 deletions.
diff --git a/packages/nx-plugin/src/generators/app/files/tRPC/src/note.ts__template__ b/packages/nx-plugin/src/generators/app/files/tRPC/src/note.ts__template__
@@ -1,5 +1,5 @@
 export type Note = {
   id: number;
   note: string;
-  createdAt: Date;
+  createdAt: string;
 };
diff --git a/...ages/nx-plugin/src/generators/app/files/tRPC/src/server/trpc/routers/notes.ts__template__ b/...ages/nx-plugin/src/generators/app/files/tRPC/src/server/trpc/routers/notes.ts__template__
@@ -15,7 +15,7 @@ export const noteRouter = router({
       notes.push({
         id: noteId++,
         note: input.title,
-        createdAt: new Date(),
+        createdAt: new Date().toISOString(),
       })
     ),
   list: publicProcedure.query(() => notes),

diff --git a/packages/nx-plugin/src/generators/app/files/tRPC/src/trpc-client.ts__template__ b/packages/nx-plugin/src/generators/app/files/tRPC/src/trpc-client.ts__template__
@@ -3,7 +3,7 @@ import { createTrpcClient } from '@analogjs/trpc';
 import { inject } from '@angular/core';
 
 export const { provideTRPCClient, tRPCClient } = createTrpcClient<AppRouter>({
-  url: 'http://localhost:4205/api/trpc',
+  url: 'http://127.0.0.1:4205/api/trpc',
 });
 
 export function injectTRPCClient() {

diff --git a/...plugin/src/generators/app/files/template-angular-v15/src/app/app.component.ts__template__ b/...plugin/src/generators/app/files/template-angular-v15/src/app/app.component.ts__template__
@@ -6,6 +6,7 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [RouterOutlet],
   template: ` <router-outlet></router-outlet> `,
+<% if (!addTailwind) { %>
   styles: [
     `
       :host {
@@ -16,5 +17,6 @@ import { RouterOutlet } from '@angular/router';
       }
     `,
   ],
+<% } %>
 })
 export class AppComponent {}
diff --git a/...gin/src/generators/app/files/template-angular-v15/src/app/pages/index.page.ts__template__ b/...gin/src/generators/app/files/template-angular-v15/src/app/pages/index.page.ts__template__
@@ -8,7 +8,7 @@ import { waitFor } from '../../wait-for';
 import { Note } from '../../note';
 
 const inputTw =
-  'focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:outline-0 block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-zinc-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-zinc-500 dark:placeholder:text-zinc-400 contrast-more:border contrast-more:border-current';
+  'focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:outline-0 block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-zinc-50/10 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 contrast-more:border contrast-more:border-current';
 const btnTw =
   'focus-visible:ring-2 focus-visible:ring-zinc-50 focus-visible:outline-0 flex items-center justify-center rounded-lg px-2 py-1.5 text-sm font-bold tracking-tight shadow-xl shadow-red-500/20 bg-[#DD0031] hover:bg-opacity-70 text-zinc-800 hover:text-primary-darker';
 
@@ -17,7 +17,7 @@ const btnTw =
   standalone: true,
   imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf, JsonPipe],
   host: {
-    class: 'block h-full p-4',
+    class: 'block h-full bg-zinc-900 text-zinc-50 p-4',
   },
   template: `
     <div class="justify-center flex mt-20 mb-8 items-center">

diff --git a/packages/nx-plugin/src/generators/app/files/template-angular-v15/src/styles.css__template__ b/packages/nx-plugin/src/generators/app/files/template-angular-v15/src/styles.css__template__
@@ -1,3 +1,9 @@
+    <% if (addTailwind) { %>
+html, body {
+  display: block;
+  height: 100%;
+}
+    <% } else { %>
 /* You can add global styles to this file, and also import other style files */
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
@@ -73,3 +79,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+    <% } %>
diff --git a/packages/nx-plugin/src/generators/app/files/template-angular-v15/vite.config.ts__template__ b/packages/nx-plugin/src/generators/app/files/template-angular-v15/vite.config.ts__template__
@@ -9,6 +9,11 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 export default defineConfig(({ mode }) => {
   return {
     publicDir: 'src/public',
+    <% if (addTRPC) { %>
+    server: {
+      host: '127.0.0.1'
+    },
+    <% } %>
     optimizeDeps: {
       include: ['@angular/common', '@angular/forms'],
     },

diff --git a/...plugin/src/generators/app/files/template-angular-v16/src/app/app.component.ts__template__ b/...plugin/src/generators/app/files/template-angular-v16/src/app/app.component.ts__template__
@@ -6,6 +6,7 @@ import { RouterOutlet } from '@angular/router';
   standalone: true,
   imports: [RouterOutlet],
   template: ` <router-outlet></router-outlet> `,
+<% if (!addTailwind) { %>
   styles: [
     `
       :host {
@@ -16,5 +17,6 @@ import { RouterOutlet } from '@angular/router';
       }
     `,
   ],
+<% } %>
 })
 export class AppComponent {}
diff --git a/...gin/src/generators/app/files/template-angular-v16/src/app/pages/index.page.ts__template__ b/...gin/src/generators/app/files/template-angular-v16/src/app/pages/index.page.ts__template__
@@ -8,7 +8,7 @@ import { waitFor } from '../../wait-for';
 import { Note } from '../../note';
 
 const inputTw =
-  'focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:outline-0 block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-zinc-50/10 focus:bg-white dark:focus:bg-dark placeholder:text-zinc-500 dark:placeholder:text-zinc-400 contrast-more:border contrast-more:border-current';
+  'focus-visible:ring-2 focus-visible:ring-red-500 focus-visible:outline-0 block w-full appearance-none rounded-lg px-3 py-2 transition-colors text-base leading-tight md:text-sm bg-black/[.05] dark:bg-zinc-50/10 placeholder:text-zinc-500 dark:placeholder:text-zinc-400 contrast-more:border contrast-more:border-current';
 const btnTw =
   'focus-visible:ring-2 focus-visible:ring-zinc-50 focus-visible:outline-0 flex items-center justify-center rounded-lg px-2 py-1.5 text-sm font-bold tracking-tight shadow-xl shadow-red-500/20 bg-[#DD0031] hover:bg-opacity-70 text-zinc-800 hover:text-primary-darker';
 
@@ -17,7 +17,7 @@ const btnTw =
   standalone: true,
   imports: [AsyncPipe, FormsModule, NgFor, DatePipe, NgIf, JsonPipe],
   host: {
-    class: 'block h-full p-4',
+    class: 'block h-full bg-zinc-900 text-zinc-50 p-4',
   },
   template: `
     <div class="justify-center flex mt-20 mb-8 items-center">

diff --git a/packages/nx-plugin/src/generators/app/files/template-angular-v16/src/styles.css__template__ b/packages/nx-plugin/src/generators/app/files/template-angular-v16/src/styles.css__template__
@@ -1,3 +1,9 @@
+    <% if (addTailwind) { %>
+html, body {
+  display: block;
+  height: 100%;
+}
+    <% } else { %>
 /* You can add global styles to this file, and also import other style files */
 :root {
   font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
@@ -73,3 +79,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+    <% } %>
diff --git a/packages/nx-plugin/src/generators/app/files/template-angular-v16/vite.config.ts__template__ b/packages/nx-plugin/src/generators/app/files/template-angular-v16/vite.config.ts__template__
@@ -9,6 +9,11 @@ import tsConfigPaths from 'vite-tsconfig-paths';
 export default defineConfig(({ mode }) => {
   return {
     publicDir: 'src/public',
+    <% if (addTRPC) { %>
+    server: {
+      host: '127.0.0.1'
+    },
+    <% } %>
     optimizeDeps: {
       include: ['@angular/common', '@angular/forms'],
     },

diff --git a/packages/nx-plugin/src/generators/app/generator.ts b/packages/nx-plugin/src/generators/app/generator.ts
@@ -108,7 +108,12 @@ export async function appGenerator(
   }
 
   if (normalizedOptions.addTRPC) {
-    await addTRPC(tree, normalizedOptions.projectRoot, majorAngularVersion);
+    await addTRPC(
+      tree,
+      normalizedOptions.projectRoot,
+      majorAngularVersion,
+      normalizedOptions
+    );
   }
 
   if (!normalizedOptions.skipFormat) {

diff --git a/packages/nx-plugin/src/generators/app/lib/add-analog-project-config.ts b/packages/nx-plugin/src/generators/app/lib/add-analog-project-config.ts
@@ -43,7 +43,7 @@ export function addAnalogProjectConfig(
         defaultConfiguration: 'development',
         options: {
           buildTarget: `${projectName}:build`,
-          port: 4200,
+          port: 4205,
         },
         configurations: {
           development: {

diff --git a/packages/nx-plugin/src/generators/app/lib/add-trpc.ts b/packages/nx-plugin/src/generators/app/lib/add-trpc.ts
@@ -5,31 +5,53 @@ import {
 } from '@nrwl/devkit';
 import * as path from 'path';
 import {
-  V15_ANALOG_TRPC,
+  V15_ANALOG_JS_TRPC,
+  V15_ISOMORPHIC_FETCH,
+  V15_SUPERJSON,
+  V15_TRPC_CLIENT,
+  V15_TRPC_SERVER,
   V15_ZOD,
   V16_ANALOG_JS_TRPC,
+  V16_SUPERJSON,
+  V16_TRPC_CLIENT,
+  V16_TRPC_SERVER,
   V16_ZOD,
 } from '../versions';
+import { NormalizedOptions } from '../generator';
 
 export async function addTRPC(
   tree: Tree,
   projectRoot: string,
-  majorAngularVersion: number
+  majorAngularVersion: number,
+  options: NormalizedOptions
 ) {
   addDependenciesToPackageJson(
     tree,
     {
       '@analogjs/trpc':
-        majorAngularVersion === 15 ? V15_ANALOG_TRPC : V16_ANALOG_JS_TRPC,
+        majorAngularVersion === 15 ? V15_ANALOG_JS_TRPC : V16_ANALOG_JS_TRPC,
+      '@trpc/client':
+        majorAngularVersion === 15 ? V15_TRPC_CLIENT : V16_TRPC_CLIENT,
+      '@trpc/server':
+        majorAngularVersion === 15 ? V15_TRPC_SERVER : V16_TRPC_SERVER,
+      superjson: majorAngularVersion === 15 ? V15_SUPERJSON : V16_SUPERJSON,
+      'isomorphic-fetch':
+        majorAngularVersion === 15
+          ? V15_ISOMORPHIC_FETCH
+          : V15_ISOMORPHIC_FETCH,
       zod: majorAngularVersion === 15 ? V15_ZOD : V16_ZOD,
     },
     {}
   );
 
+  const templateOptions = {
+    ...options,
+    template: '',
+  };
   generateFiles(
     tree,
     path.join(__dirname, '..', 'files', 'trpc'),
     projectRoot,
-    { template: '' }
+    templateOptions
   );
 }
diff --git a/packages/nx-plugin/src/generators/app/versions.ts b/packages/nx-plugin/src/generators/app/versions.ts
@@ -6,6 +6,12 @@ export const V16_NX_DEVKIT = '^16.0.0';
 export const V16_NX_ANGULAR = '^16.0.0';
 export const V16_ANALOG_JS_CONTENT = '^0.2.0-beta.6';
 export const V16_ANALOG_JS_ROUTER = '^0.2.0-beta.6';
+export const V16_ANALOG_JS_TRPC = '^0.2.0-beta.6';
+export const V16_TRPC_CLIENT = '^10.25.0';
+export const V16_TRPC_SERVER = '^10.25.0';
+export const V16_ISOMORPHIC_FETCH = '^3.0.0';
+export const V16_SUPERJSON = '^1.12.3';
+
 export const V16_ANGULAR_PLATFORM_SERVER = '^16.0.0';
 export const V16_FRONT_MATTER = '^4.0.2';
 export const V16_MARKED = '^4.2.12';
@@ -28,7 +34,11 @@ export const V15_NRWL_DEVKIT = '15.9.2';
 export const V15_NRWL_ANGULAR = '15.9.2';
 export const V15_ANALOG_JS_CONTENT = '^0.2.0-beta.6';
 export const V15_ANALOG_JS_ROUTER = '^0.2.0-beta.6';
-export const V15_ANALOG_TRPC = '^0.2.0-beta.6';
+export const V15_ANALOG_JS_TRPC = '^0.2.0-beta.6';
+export const V15_TRPC_CLIENT = '^10.25.0';
+export const V15_TRPC_SERVER = '^10.25.0';
+export const V15_ISOMORPHIC_FETCH = '^3.0.0';
+export const V15_SUPERJSON = '^1.12.3';
 export const V15_ANGULAR_PLATFORM_SERVER = '^15.0.0';
 export const V15_FRONT_MATTER = '^4.0.2';
 export const V15_MARKED = '^4.2.12';