refactor: overhaul stylesheet pipeline and improve Tailwind HMR across Analog

.dagger/src/index.ts

@@ -2,7 +2,7 @@ import type { Container, Directory, Secret } from '@dagger.io/dagger';
 import { argument, dag, func, object } from '@dagger.io/dagger';
 
 const DEFAULT_E2E_PROJECTS =
-  'analog-app-e2e,blog-app-e2e,tanstack-query-app-e2e';
+  'analog-app-e2e,blog-app-e2e,tailwind-debug-app-e2e,tanstack-query-app-e2e';
 
 @object()
 export class AnalogCi {

.github/workflows/ci.yml

@@ -94,6 +94,7 @@ jobs:
         project:
           - analog-app-e2e
           - blog-app-e2e
+          - tailwind-debug-app-e2e
           - tanstack-query-app-e2e
     steps:
       - uses: actions/checkout@v4

.gitignore

@@ -33,6 +33,7 @@ node_modules
 npm-debug.log
 yarn-error.log
 testem.log
+debug.analog.log
 /typings
 
 # System Files

apps/analog-app-e2e/tests/legacy-server-action.spec.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('legacy PageServerAction - /legacy-action', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/legacy-action');
+    await page.locator('form').waitFor({ timeout: 15_000 });
+  });
+
+  test('submits successfully through the legacy action handler', async ({
+    page,
+  }) => {
+    await page.locator('input[name="email"]').fill('legacy@example.com');
+    await page.getByRole('button', { name: /submit/i }).click();
+
+    await expect(page.locator('#legacy-action-success')).toContainText(
+      'legacy@example.com',
+    );
+  });
+
+  test('returns validation errors through the legacy action handler', async ({
+    page,
+  }) => {
+    await page.getByRole('button', { name: /submit/i }).click();
+
+    await expect(page.locator('#legacy-action-error')).toContainText(
+      'Email is required',
+    );
+  });
+});

apps/analog-app/oxlint.config.ts

@@ -31,9 +31,16 @@ export default defineConfig({
             style: 'kebab-case',
           },
         ],
+        '@angular-eslint/use-component-selector': 'error',
         '@angular-eslint/prefer-standalone': 'error',
       },
     },
+    {
+      files: ['src/**/pages/**/*.ts', 'src/**/*.page.ts', 'src/**/*.page.tsx'],
+      rules: {
+        '@angular-eslint/use-component-selector': 'off',
+      },
+    },
     {
       files: ['src/stories/**/*.ts', 'src/stories/**/*.tsx'],
       rules: {

apps/analog-app/package.json

@@ -3,6 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "dependencies": {
+    "@analogjs/content": "workspace:*",
     "@analogjs/router": "workspace:*",
     "es-toolkit": "catalog:"
   },

apps/analog-app/src/app/app.config.ts

@@ -3,6 +3,7 @@ import {
   withFetch,
   withInterceptors,
 } from '@angular/common/http';
+import { provideContent, withMarkdownRenderer } from '@analogjs/content';
 import type { ApplicationConfig } from '@angular/core';
 import {
   provideClientHydration,
@@ -17,6 +18,7 @@ import {
   withLoaderCaching,
   requestContextInterceptor,
 } from '@analogjs/router';
+import { withContentRoutes } from '@analogjs/router/content';
 import { withNavigationErrorHandler } from '@angular/router';
 
 const fallbackRoutes = [
@@ -28,6 +30,7 @@ export const appConfig: ApplicationConfig = {
     provideFileRouter(
       withNavigationErrorHandler(console.error),
       withDebugRoutes(),
+      withContentRoutes(),
       withExtraRoutes(fallbackRoutes),
       // Experimental: TanStack Router-inspired features
       withTypedRouter({ strictRouteParams: true }),
@@ -42,6 +45,7 @@ export const appConfig: ApplicationConfig = {
       withFetch(),
       withInterceptors([requestContextInterceptor]),
     ),
+    provideContent(withMarkdownRenderer()),
     // Hydration must be configured for both server and client bootstraps so
     // SSR can serialize the metadata the browser uses to hydrate.
     provideClientHydration(withEventReplay()),

apps/analog-app/src/app/pages/client/(client).page.ts

@@ -1,5 +1,5 @@
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import { ServerOnly, type RouteMeta } from '@analogjs/router';
+import { type RouteMeta } from '@analogjs/router';
 
 export const routeMeta: RouteMeta = {
   title: 'Client Component',
@@ -12,29 +12,25 @@ export const routeMeta: RouteMeta = {
 };
 
 @Component({
-  imports: [ServerOnly],
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
     <h2>Client Component</h2>
 
-    <ServerOnly component="hello" [props]="props()" (outputs)="log($event)" />
+    <p id="client-message">
+      This route renders entirely on the client and updates without SSR.
+    </p>
 
-    <ServerOnly component="hello" [props]="props2()" (outputs)="log($event)" />
+    <p>Current count: {{ count() }}</p>
 
     <p>
       <button (click)="update()">Update</button>
     </p>
   `,
 })
 export default class ClientComponent {
-  props = signal({ name: 'Brandon', count: 0 });
-  props2 = signal({ name: 'Brandon', count: 4 });
+  readonly count = signal(0);
 
   update() {
-    this.props.update((data) => ({ ...data, count: ++data.count }));
-  }
-
-  log($event: object) {
-    console.log({ outputs: $event });
+    this.count.update((value) => value + 1);
   }
 }

apps/analog-app/src/app/pages/legacy-action.page.ts

@@ -0,0 +1,52 @@
+import { Component, signal } from '@angular/core';
+import { FormAction } from '@analogjs/router';
+
+import {
+  type LegacyActionError,
+  type LegacyActionSuccess,
+} from './legacy-action.server';
+
+@Component({
+  selector: 'analogjs-legacy-action-page',
+  standalone: true,
+  imports: [FormAction],
+  template: `
+    <h3>Legacy Server Action</h3>
+
+    @if (submittedEmail()) {
+      <div id="legacy-action-success">
+        Legacy action submitted for {{ submittedEmail() }}.
+      </div>
+    } @else {
+      <form
+        method="post"
+        (onSuccess)="handleSuccess($any($event))"
+        (onError)="handleError($any($event))"
+      >
+        <div>
+          <label for="email"> Email </label>
+          <input id="email" type="email" name="email" />
+        </div>
+
+        <button class="button" type="submit">Submit</button>
+      </form>
+
+      @if (errors()?.email) {
+        <p id="legacy-action-error">{{ errors()?.email }}</p>
+      }
+    }
+  `,
+})
+export default class LegacyActionComponent {
+  readonly submittedEmail = signal('');
+  readonly errors = signal<LegacyActionError | undefined>(undefined);
+
+  handleSuccess(result: LegacyActionSuccess) {
+    this.errors.set(undefined);
+    this.submittedEmail.set(result.email);
+  }
+
+  handleError(result?: LegacyActionError) {
+    this.errors.set(result);
+  }
+}

apps/analog-app/src/app/pages/legacy-action.server.ts

@@ -0,0 +1,32 @@
+import {
+  type PageServerAction,
+  fail,
+  json,
+} from '@analogjs/router/server/actions';
+
+export type LegacyActionSuccess = {
+  type: 'success';
+  email: string;
+};
+
+export type LegacyActionError =
+  | {
+      email?: string;
+    }
+  | undefined;
+
+export async function action({ event }: PageServerAction) {
+  const body = await event.req.formData();
+  const email = body.get('email');
+
+  if (typeof email !== 'string' || email.length === 0) {
+    return fail<Exclude<LegacyActionError, undefined>>(422, {
+      email: 'Email is required',
+    });
+  }
+
+  return json<LegacyActionSuccess>({
+    type: 'success',
+    email,
+  });
+}

apps/analog-app/src/app/pages/newsletter.page.ts

@@ -25,7 +25,6 @@ type FormErrors =
         method="post"
         (onSuccess)="onSuccess($any($event))"
         (onError)="onError($any($event))"
-        (onStateChange)="errors.set(undefined)"
       >
         <div>
           <label for="email"> Email </label>

apps/analog-app/src/app/pages/newsletter.server.ts

@@ -1,10 +1,10 @@
 import {
-  type PageServerAction,
-  redirect,
-  json,
+  defineAction,
   fail,
+  json,
+  redirect,
 } from '@analogjs/router/server/actions';
-import { readFormData } from 'nitro/h3';
+import * as v from 'valibot';
 
 export type NewsletterSubmitResponse = {
   type: 'success';
@@ -17,17 +17,20 @@ export function load() {
   };
 }
 
-export async function action({ event }: PageServerAction) {
-  const body = await readFormData(event);
-  const email = body.get('email') as string;
-
-  if (!email) {
-    return fail(422, { email: 'Email is required' });
-  }
+const NewsletterSchema = v.object({
+  email: v.pipe(v.string(), v.nonEmpty('Email is required')),
+});
 
-  if (email.length < 10) {
-    return redirect('/');
-  }
+export const action = defineAction({
+  schema: NewsletterSchema,
+  handler: async ({ data }) => {
+    if (data.email.length < 10) {
+      return redirect('/');
+    }
 
-  return json<NewsletterSubmitResponse>({ type: 'success', email });
-}
+    return json<NewsletterSubmitResponse>({
+      type: 'success',
+      email: data.email,
+    });
+  },
+});