From bd013feeb7edc73ef6b9dd2d7c61d863be35eecb Mon Sep 17 00:00:00 2001 From: Robin Goetz <35136007+goetzrobin@users.noreply.github.com> Date: Fri, 20 Oct 2023 22:51:43 -0400 Subject: [PATCH] =?UTF-8?q?fix(trpc):=20adding=20host=20and=20port=20env?= =?UTF-8?q?=20variables=20to=20nitro=20dev=20process=20&=20=E2=80=A6=20(#6?= =?UTF-8?q?95)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/trpc-app-e2e-playwright/tests/app.spec.ts | 10 +++++++--- apps/trpc-app/vite.config.ts | 13 +++++++------ .../vite.config.ts__template__ | 17 +++++++++++++---- packages/trpc/package.json | 4 +--- packages/trpc/src/lib/client/client.ts | 15 +++++++++++++++ packages/trpc/tsconfig.lib.json | 2 +- .../src/lib/vite-plugin-nitro.ts | 7 +++++++ 7 files changed, 51 insertions(+), 17 deletions(-) diff --git a/apps/trpc-app-e2e-playwright/tests/app.spec.ts b/apps/trpc-app-e2e-playwright/tests/app.spec.ts index 859520e75..85733f6ea 100644 --- a/apps/trpc-app-e2e-playwright/tests/app.spec.ts +++ b/apps/trpc-app-e2e-playwright/tests/app.spec.ts @@ -44,9 +44,10 @@ describe('tRPC Demo App', () => { }); test(` - If user enters the first note the note should be storedsuccessfully and listed in the notes array. - Still unauthorized the user should not be able to delete the note and the error should be displayed. - After the users clicks the Login button and gets authorized, deleting the note again should work successfully, + If user enters the first note the note should be stored successfully and listed in the notes array. + After reloading the page, the first note should show immediately, as the page is server side rendered. + Still unauthorized, the user should not be able to delete the note and the error should be displayed. + After the users clicks the "Login" button and gets authorized, deleting the note again should work successfully, and the error should disappear. `, async (ctx) => { await ctx.notesPage.typeNote(notes.first.note); @@ -54,6 +55,9 @@ describe('tRPC Demo App', () => { await ctx.notesPage.addNote(); expect(await ctx.notesPage.notes().elementHandles()).toHaveLength(1); + await ctx.notesPage.page.reload(); + expect(await ctx.notesPage.notes().elementHandles()).toHaveLength(1); + await ctx.notesPage.removeNote(0); expect(await ctx.notesPage.notes().elementHandles()).toHaveLength(1); expect(await ctx.notesPage.getDeleteErrorCount()).toBe(1); diff --git a/apps/trpc-app/vite.config.ts b/apps/trpc-app/vite.config.ts index b44043d25..7c2444200 100644 --- a/apps/trpc-app/vite.config.ts +++ b/apps/trpc-app/vite.config.ts @@ -13,18 +13,19 @@ export default defineConfig(({ mode }) => { include: ['@angular/common', '@angular/forms', 'isomorphic-fetch'], }, ssr: { - noExternal: '@analogjs/trpc', + noExternal: ['@analogjs/trpc', '@trpc/server'], }, build: { target: ['es2020'], }, plugins: [ analog({ - vite: { - inlineStylesExtension: 'css', - }, - prerender: { - routes: ['/'], + nitro: { + routeRules: { + '/': { + prerender: false, + }, + }, }, }), nxViteTsPaths(), 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__ index 1d5e7d35b..76ec2c68b 100644 --- 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,18 +9,27 @@ export default defineConfig(({ mode }) => { return { publicDir: 'src/public', <% if (addTRPC) { %> - server: { - host: '127.0.0.1' - }, ssr: { - noExternal: '@analogjs/trpc/**', + noExternal: ['@analogjs/trpc','@trpc/server'], }, <% } %> build: { target: ['es2020'], }, plugins: [ + <% if (addTRPC) { %> + analog({ + nitro: { + routeRules: { + '/': { + prerender: false, + } + } + } + }), + <% } else { %> analog(), + <% } %> tsConfigPaths({ root: '<%= offsetFromRoot %>', }), diff --git a/packages/trpc/package.json b/packages/trpc/package.json index 46a3fa41f..be339ac06 100644 --- a/packages/trpc/package.json +++ b/packages/trpc/package.json @@ -26,9 +26,7 @@ "isomorphic-fetch": "^3.0.0", "superjson": "^1.12.3" }, - "dependencies": { - "tslib": "^2.3.0" - }, + "dependencies": {}, "ng-update": { "packageGroup": [ "@analogjs/astro-angular", diff --git a/packages/trpc/src/lib/client/client.ts b/packages/trpc/src/lib/client/client.ts index 117ae82aa..d6eb3f3de 100644 --- a/packages/trpc/src/lib/client/client.ts +++ b/packages/trpc/src/lib/client/client.ts @@ -42,6 +42,21 @@ function customFetch( json: () => Promise.resolve(response._data), })); } + + // dev server trpc for analog & nitro + if (typeof window === 'undefined') { + const host = + process.env['NITRO_HOST'] ?? process.env['ANALOG_HOST'] ?? 'localhost'; + const port = + process.env['NITRO_PORT'] ?? process.env['ANALOG_PORT'] ?? 4205; + const base = `http://${host}:${port}`; + if (input instanceof Request) { + input = new Request(base, input); + } else { + input = new URL(input, base); + } + } + return fetch(input, init); } diff --git a/packages/trpc/tsconfig.lib.json b/packages/trpc/tsconfig.lib.json index 77b13c67d..88c29c9e9 100644 --- a/packages/trpc/tsconfig.lib.json +++ b/packages/trpc/tsconfig.lib.json @@ -5,7 +5,7 @@ "declaration": true, "declarationMap": true, "inlineSources": true, - "types": [] + "types": ["node"] }, "exclude": ["src/**/*.spec.ts", "jest.config.ts", "src/**/*.test.ts"], "include": ["src/**/*.ts"] diff --git a/packages/vite-plugin-nitro/src/lib/vite-plugin-nitro.ts b/packages/vite-plugin-nitro/src/lib/vite-plugin-nitro.ts index 4c9448d8a..f66b6a5d5 100644 --- a/packages/vite-plugin-nitro/src/lib/vite-plugin-nitro.ts +++ b/packages/vite-plugin-nitro/src/lib/vite-plugin-nitro.ts @@ -174,6 +174,13 @@ export function nitro(options?: Options, nitroOptions?: NitroConfig): Plugin[] { toNodeListener(server.app as unknown as App) ); + viteServer.httpServer?.once('listening', () => { + process.env['ANALOG_HOST'] = !viteServer.config.server.host + ? 'localhost' + : (viteServer.config.server.host as string); + process.env['ANALOG_PORT'] = `${viteServer.config.server.port}`; + }); + console.log( `\n\nThe server endpoints are accessible under the "${apiPrefix}" path.` );