feat(trpc): add trpc lib and e2e test suite (#94)

.github/ISSUE_TEMPLATE/01-bug-report.yml

@@ -60,6 +60,7 @@ body:
         - toast
         - toggle
         - tooltip
+        - trpc
         - typography
         - Docs
         - Don't know / other

.github/ISSUE_TEMPLATE/02-feature-request.yml

@@ -51,6 +51,7 @@ body:
         - toast
         - toggle
         - tooltip
+        - trpc
         - typography
         - Docs
         - Don't know / other

apps/app/project.json

@@ -69,6 +69,14 @@
 		"test": {
 			"executor": "@nx/vite:test",
 			"outputs": ["{projectRoot}/coverage"]
+		},
+		"serve-nitro": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "",
+				"command": "PORT=4205 node dist/apps/app/analog/server/index.mjs"
+			},
+			"dependsOn": ["build"]
 		}
 	},
 	"tags": [],

apps/app/src/trpc-client.ts

@@ -1,5 +1,5 @@
-import { createTrpcClient } from '@analogjs/trpc';
 import { inject } from '@angular/core';
+import { createTrpcClient } from '@spartan-ng/trpc';
 import superjson from 'superjson';
 import { AppRouter } from './server/trpc/routers';
 

apps/app/vite.config.ts

@@ -89,10 +89,6 @@ export default defineConfig(({ mode }) => {
 						host: 'https://www.spartan.ng',
 					},
 				},
-				nitro: {
-					preset: 'vercel',
-					serveStatic: false,
-				},
 			}),
 			nxViteTsPaths(),
 			visualizer() as Plugin,

apps/trpc-app-e2e/.eslintrc.json

@@ -0,0 +1,17 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+			"rules": {}
+		},
+		{
+			"files": ["src/plugins/index.js"],
+			"rules": {
+				"@typescript-eslint/no-var-requires": "off",
+				"no-undef": "off"
+			}
+		}
+	]
+}

apps/trpc-app-e2e/project.json

@@ -0,0 +1,27 @@
+{
+	"name": "trpc-app-e2e",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "apps/trpc-app-e2e/src",
+	"projectType": "application",
+	"targets": {
+		"vitest": {
+			"executor": "@nx/vite:test"
+		},
+		"e2e": {
+			"executor": "nx:run-commands",
+			"options": {
+				"cwd": "",
+				"command": "start-server-and-test 'nx serve-nitro app' http://localhost:4205/api/health 'nx run trpc-app-e2e:vitest'"
+			}
+		},
+		"lint": {
+			"executor": "@nx/eslint:lint",
+			"outputs": ["{options.outputFile}"],
+			"options": {
+				"lintFilePatterns": ["apps/trpc-app-e2e/**/*.{js,ts}"]
+			}
+		}
+	},
+	"tags": [],
+	"implicitDependencies": ["app"]
+}

apps/trpc-app-e2e/tests/app.spec.ts

@@ -0,0 +1,61 @@
+import { Browser, chromium, Page } from 'playwright';
+import { afterAll, afterEach, beforeAll, beforeEach, describe, expect, test } from 'vitest';
+import { notes } from './fixtures/notes';
+import { NotesPage } from './fixtures/notes.po';
+
+type TRPCTestContext = {
+	notesPage: NotesPage;
+};
+
+let browser: Browser;
+let page: Page;
+
+beforeAll(async () => {
+	browser = await chromium.launch();
+});
+afterAll(async () => {
+	await browser.close();
+});
+beforeEach<TRPCTestContext>(async (ctx) => {
+	page = await browser.newPage({
+		baseURL: 'http://localhost:4205',
+	});
+	await page.goto('/');
+	ctx.notesPage = new NotesPage(page);
+});
+afterEach(async () => {
+	await page.close();
+});
+
+describe.skip('tRPC Demo App', () => {
+	test(`Given the user has navigated to the home page
+    Then the app title is visible`, async () => {
+		await expect(page.locator('role=heading[level=1] >> text=Analog + tRPC')).toContain(/Analog + tRPC/i);
+	});
+
+	test<TRPCTestContext>(`
+  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);
+
+		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);
+
+		await ctx.notesPage.toggleLogin();
+		await ctx.notesPage.removeNote(0);
+		await page.waitForSelector('.no-notes');
+		expect(await ctx.notesPage.notes().elementHandles()).toHaveLength(0);
+		expect(await ctx.notesPage.getDeleteErrorCount()).toBe(0);
+	});
+});

apps/trpc-app-e2e/tests/fixtures/notes.po.ts

@@ -0,0 +1,39 @@
+import { Page } from 'playwright';
+
+export class NotesPage {
+	constructor(readonly page: Page) {}
+
+	async toggleLogin() {
+		await this.page.getByTestId('loginBtn').click();
+	}
+
+	async typeNote(note: string) {
+		await this.page.getByTestId('newNoteInput').fill(note);
+	}
+
+	async addNote() {
+		await this.waitForTrpcResponse(this.page.getByTestId('addNoteBtn').click());
+		await this.page.waitForSelector('.note');
+	}
+
+	async removeNote(index: number) {
+		await this.waitForTrpcResponse(this.page.getByTestId('removeNoteAtIndexBtn' + index).click());
+	}
+
+	async getDeleteErrorCount() {
+		return this.page.locator('[data-testid="deleteError"]').count();
+	}
+
+	notes() {
+		return this.page.locator('.note');
+	}
+
+	private async waitForTrpcResponse(promise: Promise<void>) {
+		await Promise.all([
+			this.page.waitForResponse((response) => {
+				return response.url().includes('trpc') && response.status() === 200;
+			}),
+			promise,
+		]);
+	}
+}

apps/trpc-app-e2e/tests/fixtures/notes.ts

@@ -0,0 +1,9 @@
+type Note = {
+	note: string;
+};
+
+export const notes: Record<'first', Note> = {
+	first: {
+		note: 'I am the first note',
+	},
+} as const;

apps/trpc-app-e2e/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"sourceMap": false,
+		"outDir": "../../dist/out-tsc",
+		"allowJs": true,
+		"types": ["node", "vitest/globals"],
+		"forceConsistentCasingInFileNames": true,
+		"strict": true,
+		"noImplicitOverride": true,
+		"noPropertyAccessFromIndexSignature": true,
+		"noImplicitReturns": true,
+		"noFallthroughCasesInSwitch": true
+	},
+	"include": ["tests/**/*.ts", "src/**/*.js"],
+	"angularCompilerOptions": {
+		"enableI18nLegacyMessageIdFormat": false,
+		"strictInjectionParameters": true,
+		"strictInputAccessModifiers": true,
+		"strictTemplates": true
+	}
+}

apps/trpc-app-e2e/vite.config.ts

@@ -0,0 +1,21 @@
+/// <reference types="vitest" />
+
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+	return {
+		root: 'tests',
+		test: {
+			globals: true,
+			environment: 'node',
+			include: ['**/*.spec.ts'],
+			cache: {
+				dir: `../../node_modules/.vitest`,
+			},
+		},
+		define: {
+			'import.meta.vitest': mode !== 'production',
+		},
+	};
+});

commitlint.config.js

@@ -47,6 +47,7 @@ module.exports = {
 				'toast',
 				'toggle',
 				'tooltip',
+				'trpc',
 				'typography',
 				'nx',
 			],

libs/trpc/.eslintrc.json

@@ -0,0 +1,33 @@
+{
+	"extends": ["../../.eslintrc.json"],
+	"ignorePatterns": ["!**/*"],
+	"overrides": [
+		{
+			"files": ["*.ts"],
+			"rules": {
+				"@angular-eslint/directive-selector": [
+					"error",
+					{
+						"type": "attribute",
+						"prefix": "spartan-ng",
+						"style": "camelCase"
+					}
+				],
+				"@angular-eslint/component-selector": [
+					"error",
+					{
+						"type": "element",
+						"prefix": "spartan-ng",
+						"style": "kebab-case"
+					}
+				]
+			},
+			"extends": ["plugin:@nx/angular", "plugin:@angular-eslint/template/process-inline-templates"]
+		},
+		{
+			"files": ["*.html"],
+			"extends": ["plugin:@nx/angular-template"],
+			"rules": {}
+		}
+	]
+}

libs/trpc/README.md

@@ -0,0 +1,5 @@
+# tRPC
+
+Spartan tRPC integration
+
+Learn more at [spartan.ng](https://spartan.ng)

libs/trpc/migrations/migration.json

@@ -0,0 +1,16 @@
+{
+	"$schema": "../../../node_modules/@angular-devkit/schematics/collection-schema.json",
+	"schematics": {},
+	"packageJsonUpdates": {
+		"0.2.30": {
+			"version": "0.2.29",
+			"description": "Updates the superjson dependency from 1.x to 2.x",
+			"packages": {
+				"superjson": {
+					"version": "^2.2.1",
+					"alwaysAddToPackageJson": true
+				}
+			}
+		}
+	}
+}

libs/trpc/ng-package.json

@@ -0,0 +1,8 @@
+{
+	"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+	"dest": "../../dist/libs/trpc",
+	"assets": ["*.md", "migrations/migration.json"],
+	"lib": {
+		"entryFile": "src/index.ts"
+	}
+}

libs/trpc/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "@spartan-ng/trpc",
+	"version": "0.2.29",
+	"description": "Angular/Nitro-based tRPC integration",
+	"author": "Robin Goetz",
+	"keywords": [
+		"angular",
+		"trpc",
+		"remote-procedure-call",
+		"meta-framework"
+	],
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/goetzrobin/spartan/issues"
+	},
+	"homepage": "https://spartan.ng",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/goetzrobin/spartan.git"
+	},
+	"peerDependencies": {
+		"@angular/common": ">=16.0.0",
+		"@angular/core": ">=16.0.0",
+		"@trpc/client": "^10.25.0",
+		"@trpc/server": "^10.25.0",
+		"isomorphic-fetch": "^3.0.0",
+		"superjson": "^2.2.1"
+	},
+	"dependencies": {},
+	"ng-update": {
+		"packageGroup": [],
+		"migrations": "./migrations/migration.json"
+	}
+}

libs/trpc/project.json

@@ -0,0 +1,33 @@
+{
+	"name": "trpc",
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"sourceRoot": "/src",
+	"prefix": "spartan-ng",
+	"tags": [],
+	"projectType": "library",
+	"targets": {
+		"build": {
+			"executor": "@angular-devkit/build-angular:ng-packagr",
+			"outputs": ["{workspaceRoot}/node_modules/@spartan-ng/trpc"],
+			"options": {
+				"project": "libs/trpc/ng-package.json"
+			},
+			"configurations": {
+				"production": {
+					"tsConfig": "libs/trpc/tsconfig.lib.prod.json"
+				},
+				"development": {
+					"tsConfig": "libs/trpc/tsconfig.lib.json"
+				}
+			},
+			"defaultConfiguration": "production"
+		},
+		"lint": {
+			"executor": "@nx/eslint:lint",
+			"outputs": ["{options.outputFile}"],
+			"options": {
+				"lintFilePatterns": ["libs/trpc/**/*.ts", "libs/trpc/**/*.html"]
+			}
+		}
+	}
+}