Merge pull request #1531 from analogjs/beta

chore: release 1.11.0

CHANGELOG.md

@@ -1,3 +1,43 @@
+# [1.11.0-beta.6](https://github.com/analogjs/analog/compare/v1.11.0-beta.5...v1.11.0-beta.6) (2024-12-30)
+
+### Bug Fixes
+
+- **vite-plugin-nitro:** normalize outputPaths for app hosting ([09b1fa5](https://github.com/analogjs/analog/commit/09b1fa57a5dd038d5631febe5091311c0d9e1050))
+
+# [1.11.0-beta.5](https://github.com/analogjs/analog/compare/v1.11.0-beta.4...v1.11.0-beta.5) (2024-12-30)
+
+### Features
+
+- **vite-plugin-nitro:** add support for Firebase App Hosting deployment ([#1529](https://github.com/analogjs/analog/issues/1529)) ([3657bf1](https://github.com/analogjs/analog/commit/3657bf17c1f2c3ee03bd008de008b6fdf80b2795))
+
+# [1.11.0-beta.4](https://github.com/analogjs/analog/compare/v1.11.0-beta.3...v1.11.0-beta.4) (2024-12-28)
+
+### Bug Fixes
+
+- **vite-plugin-angular:** invalidation fixes for HMR/live reload ([#1526](https://github.com/analogjs/analog/issues/1526)) ([7b783d9](https://github.com/analogjs/analog/commit/7b783d9d114f5050a14786254aab6d3f198cc893))
+
+# [1.11.0-beta.3](https://github.com/analogjs/analog/compare/v1.11.0-beta.2...v1.11.0-beta.3) (2024-12-27)
+
+### Features
+
+- **vite-plugin-angular:** introduce support for Angular v19 HMR/live reload ([#1523](https://github.com/analogjs/analog/issues/1523)) ([0602a8f](https://github.com/analogjs/analog/commit/0602a8f79ae3c16897c966f3defe7ac3309c32a6))
+
+# [1.11.0-beta.2](https://github.com/analogjs/analog/compare/v1.11.0-beta.1...v1.11.0-beta.2) (2024-12-26)
+
+### Features
+
+- **vitest-angular:** add UI and coverage options to test builder ([#1521](https://github.com/analogjs/analog/issues/1521)) ([026b3dc](https://github.com/analogjs/analog/commit/026b3dce2f5cfe07da65922496b4c366642b3788))
+
+# [1.11.0-beta.1](https://github.com/analogjs/analog/compare/v1.10.3...v1.11.0-beta.1) (2024-12-20)
+
+### Bug Fixes
+
+- **vitest-angular:** reuse vitest server in watch mode for build-test ([#1519](https://github.com/analogjs/analog/issues/1519)) ([724d1f1](https://github.com/analogjs/analog/commit/724d1f13caa55c6fc315321ef75d29eff9b96e41))
+
+### Features
+
+- **router:** introduce support for Analog Server Components ([#1518](https://github.com/analogjs/analog/issues/1518)) ([44289b0](https://github.com/analogjs/analog/commit/44289b0008a9a62288d22866ec089f48fa502d80))
+
 ## [1.10.3](https://github.com/analogjs/analog/compare/v1.10.2...v1.10.3) (2024-12-17)
 
 ### Bug Fixes

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

@@ -1,15 +1,10 @@
 import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
-import {
-  provideServerRendering,
-  ɵSERVER_CONTEXT as SERVER_CONTEXT,
-} from '@angular/platform-server';
+import { provideServerRendering } from '@angular/platform-server';
+
 import { appConfig } from './app.config';
 
 const serverConfig: ApplicationConfig = {
-  providers: [
-    provideServerRendering(),
-    { provide: SERVER_CONTEXT, useValue: 'ssr-analog' },
-  ],
+  providers: [provideServerRendering()],
 };
 
 export const config = mergeApplicationConfig(appConfig, serverConfig);

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

@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ServerOnly } from '@analogjs/router';
+
+@Component({
+  standalone: true,
+  imports: [ServerOnly],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h2>Client Component</h2>
+
+    <ServerOnly component="hello" [props]="props()" (outputs)="log($event)" />
+
+    <ServerOnly component="hello" [props]="props2()" (outputs)="log($event)" />
+
+    <p>
+      <button (click)="update()">Update</button>
+    </p>
+  `,
+})
+export default class ClientComponent {
+  props = signal({ name: 'Brandon', count: 0 });
+  props2 = signal({ name: 'Brandon', count: 4 });
+
+  update() {
+    this.props.update((data) => ({ ...data, count: ++data.count }));
+  }
+
+  log($event: object) {
+    console.log({ outputs: $event });
+  }
+}

apps/analog-app/src/app/pages/goodbye.page.analog

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import { ServerOnly } from '@analogjs/router' with { analog: 'imports' };
+</script>
+
+<template>
+  Goodbye on the client
+
+  <ServerOnly component="goodbye" />
+</template>

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

@@ -0,0 +1,11 @@
+import { RouteMeta } from '@analogjs/router';
+
+import { ServerOnly } from '@analogjs/router';
+
+export const routeMeta: RouteMeta = {
+  data: {
+    component: 'hello',
+  },
+};
+
+export default ServerOnly;

apps/analog-app/src/main.server.ts

@@ -1,31 +1,8 @@
 import 'zone.js/node';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import type { ServerContext } from '@analogjs/router/tokens';
+import '@angular/platform-server/init';
+import { render } from '@analogjs/router/server';
 
 import { config } from './app/app.config.server';
 import { AppComponent } from './app/app.component';
 
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(AppComponent, config);
-}
-
-export default async function render(
-  url: string,
-  document: string,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(AppComponent, config);

apps/analog-app/src/server/components/goodbye.ag

@@ -0,0 +1,3 @@
+<template>
+  Goodbye from the server
+</template>

apps/analog-app/src/server/components/hello.ts

@@ -0,0 +1,34 @@
+import { ChangeDetectionStrategy, Component, computed } from '@angular/core';
+
+import {
+  injectStaticOutputs,
+  injectStaticProps,
+} from '@analogjs/router/server';
+
+@Component({
+  selector: 'app-hello',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <h3>Hello From the Server</h3>
+
+    <p>Props: {{ json() }}</p>
+
+    <p>Time: {{ Date.now().toString() }}</p>
+  `,
+  styles: `
+    h3 {
+      color: blue;
+    }
+  `,
+})
+export default class HelloComponent {
+  Date = Date;
+  props = injectStaticProps();
+  outputs = injectStaticOutputs<{ loaded: boolean }>();
+  json = computed(() => JSON.stringify(this.props));
+
+  ngOnInit() {
+    this.outputs.set({ loaded: true });
+  }
+}

apps/analog-app/tsconfig.app.json

@@ -10,6 +10,7 @@
   "include": [
     "src/**/*.d.ts",
     "src/app/pages/**/*.page.ts",
+    "src/server/components/**/*.ts",
     "src/server/middleware/**/*.ts"
   ],
   "exclude": ["**/*.test.ts", "**/*.spec.ts"]

apps/analog-app/vite.config.ts

@@ -32,14 +32,18 @@ export default defineConfig(({ mode }) => {
         additionalPagesDirs: ['/libs/shared/feature'],
         additionalAPIDirs: ['/libs/shared/feature/src/api'],
         prerender: {
-          routes: ['/', '/cart', '/shipping'],
+          routes: ['/', '/cart', '/shipping', '/client'],
           sitemap: {
             host: base,
           },
         },
         vite: {
           inlineStylesExtension: 'scss',
+          experimental: {
+            supportAnalogFormat: true,
+          },
         },
+        liveReload: true,
       }),
       nxViteTsPaths(),
       visualizer() as Plugin,

apps/blog-app/src/main.server.ts

@@ -1,31 +1,8 @@
 import 'zone.js/node';
-import { enableProdMode } from '@angular/core';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { renderApplication } from '@angular/platform-server';
-import { provideServerContext } from '@analogjs/router/server';
-import { ServerContext } from '@analogjs/router/tokens';
+import '@angular/platform-server/init';
+import { render } from '@analogjs/router/server';
 
 import { config } from './app/app.config.server';
 import { AppComponent } from './app/app.component';
 
-if (import.meta.env.PROD) {
-  enableProdMode();
-}
-
-export function bootstrap() {
-  return bootstrapApplication(AppComponent, config);
-}
-
-export default async function render(
-  url: string,
-  document: string,
-  serverContext: ServerContext
-) {
-  const html = await renderApplication(bootstrap, {
-    document,
-    url,
-    platformProviders: [provideServerContext(serverContext)],
-  });
-
-  return html;
-}
+export default render(AppComponent, config);